Fix issue #405

Invalid file name caused server to not load jQuery
Updated docs
2015-05-09 00:02:45 -04:00 · 2015-05-08 17:25:54 -04:00 · 2015-05-08 16:57:00 -04:00 · 2015-05-08 16:39:34 -04:00 · 2015-05-07 19:37:35 -04:00 · 2015-05-07 19:37:13 -04:00
324 changed files with 107434 additions and 13922 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,5 @@
 /node_modules/
 TODO
 *.zip
-test.html
+test.html
+*.log
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,58 +1,67 @@
 'use strict';
 module.exports = function (grunt) {
-  // load all grunt tasks
-  grunt.loadNpmTasks('grunt-contrib-less');
-  grunt.loadNpmTasks('grunt-contrib-watch');
-  grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-includes');
-  
+
  grunt.initConfig({
    watch: {
-      // if any .less file changes in directory "build/less/" run the "less"-task.
+      // If any .less file changes in directory "build/less/" run the "less"-task.
      files: ["build/less/*.less", "build/less/skins/*.less", "dist/js/app.js"],
      tasks: ["less", "uglify"]
    },
    // "less"-task configuration
-    //this task will compile all less files upon saving to create both AdminLTE.css and AdminLTE.min.css
+    // This task will compile all less files upon saving to create both AdminLTE.css and AdminLTE.min.css
    less: {
-      //Development not compressed
+      // Development not compressed
      development: {
        options: {
-          //Wether to compress or not
+          // Whether to compress or not
          compress: false
        },
        files: {
-          // compilation.css  :  source.less
+          // compilation.css  :  source.less          
          "dist/css/AdminLTE.css": "build/less/AdminLTE.less",
+          //Non minified skin files
          "dist/css/skins/skin-blue.css": "build/less/skins/skin-blue.less",
          "dist/css/skins/skin-black.css": "build/less/skins/skin-black.less",
          "dist/css/skins/skin-yellow.css": "build/less/skins/skin-yellow.less",
          "dist/css/skins/skin-green.css": "build/less/skins/skin-green.less",
          "dist/css/skins/skin-red.css": "build/less/skins/skin-red.less",
          "dist/css/skins/skin-purple.css": "build/less/skins/skin-purple.less",
+          "dist/css/skins/skin-blue-light.css": "build/less/skins/skin-blue-light.less",
+          "dist/css/skins/skin-black-light.css": "build/less/skins/skin-black-light.less",
+          "dist/css/skins/skin-yellow-light.css": "build/less/skins/skin-yellow-light.less",
+          "dist/css/skins/skin-green-light.css": "build/less/skins/skin-green-light.less",
+          "dist/css/skins/skin-red-light.css": "build/less/skins/skin-red-light.less",
+          "dist/css/skins/skin-purple-light.css": "build/less/skins/skin-purple-light.less",
          "dist/css/skins/_all-skins.css": "build/less/skins/_all-skins.less"
        }
      },
-      //production compresses version
+      // Production compresses version
      production: {
        options: {
-          //Wether to compress or not          
+          // Whether to compress or not          
          compress: true
        },
        files: {
          // compilation.css  :  source.less
          "dist/css/AdminLTE.min.css": "build/less/AdminLTE.less",
+          // Skins minified
          "dist/css/skins/skin-blue.min.css": "build/less/skins/skin-blue.less",
          "dist/css/skins/skin-black.min.css": "build/less/skins/skin-black.less",
          "dist/css/skins/skin-yellow.min.css": "build/less/skins/skin-yellow.less",
          "dist/css/skins/skin-green.min.css": "build/less/skins/skin-green.less",
          "dist/css/skins/skin-red.min.css": "build/less/skins/skin-red.less",
          "dist/css/skins/skin-purple.min.css": "build/less/skins/skin-purple.less",
+          "dist/css/skins/skin-blue-light.min.css": "build/less/skins/skin-blue-light.less",
+          "dist/css/skins/skin-black-light.min.css": "build/less/skins/skin-black-light.less",
+          "dist/css/skins/skin-yellow-light.min.css": "build/less/skins/skin-yellow-light.less",
+          "dist/css/skins/skin-green-light.min.css": "build/less/skins/skin-green-light.less",
+          "dist/css/skins/skin-red-light.min.css": "build/less/skins/skin-red-light.less",
+          "dist/css/skins/skin-purple-light.min.css": "build/less/skins/skin-purple-light.less",
          "dist/css/skins/_all-skins.min.css": "build/less/skins/_all-skins.less"
        }
      }
    },
-    //Uglify task info. Compress the js files.
+    // Uglify task info. Compress the js files.
    uglify: {
      options: {
        mangle: true,
@@ -64,7 +73,7 @@ module.exports = function (grunt) {
        }
      }
    },
-    //Build the documentation files
+    // Build the documentation files
    includes: {
      build: {
        src: ['*.html'], // Source files 
@@ -74,11 +83,34 @@ module.exports = function (grunt) {
        options: {
          silent: true,
          includePath: 'documentation/build/include'
-          //banner: '<!-- I am a banner <% includes.files.dest %> -->'
+        }
+      }
+    },
+    cssjanus: {
+      build: {
+        files: {
+          'dist/css/AdminLTE-rtl.css': 'dist/css/AdminLTE.css',
+          'dist/css/AdminLTE-rtl.min.css': 'dist/css/AdminLTE.min.css',
+          'bootstrap/css/bootstrap-rtl.css': 'bootstrap/css/bootstrap.css',
+          'bootstrap/css/bootstrap-rtl.min.css': 'bootstrap/css/bootstrap.min.css'
        }
      }
    }
  });
-  // the default task (running "grunt" in console) is "watch"
+
+  // Load all grunt tasks
+
+  // LESS Compiler
+  grunt.loadNpmTasks('grunt-contrib-less');
+  // Watch File Changes
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  // Compress JS Files
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  // Include Files Within HTML
+  grunt.loadNpmTasks('grunt-includes');
+  // Convert CSS to RTL
+  grunt.loadNpmTasks('grunt-cssjanus');
+
+  // The default task (running "grunt" in console) is "watch"
  grunt.registerTask('default', ['watch']);
-};
+};
--- a/README.md
+++ b/README.md
@@ -3,14 +3,14 @@ Introduction

 **AdminLTE** -- is a fully responsive admin template. Based on **Bootstrap 3** framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops. Check out the live preview now and see for yourself. 

-**Download & Preview on [Almsaeed Studio](http://almsaeedstudio.com)**
+**Download & Preview on [Almsaeed Studio](https://almsaeedstudio.com)**

 Looking for Premium Templates?
 ------------------------------
-**Almsaeed studio just opened a new premium templates page. Hand picked to insure the best quality and the most affordable prices. Visit http://almsaeedstudio.com/premium for more information.**
+**Almsaeed studio just opened a new premium templates page. Hand picked to insure the best quality and the most affordable prices. Visit https://almsaeedstudio.com/premium for more information.**


-!["AdminLTE Presentation"] (http://almsaeedstudio.com/AdminLTE2.png "AdminLTE Presentation")
+!["AdminLTE Presentation"] (https://almsaeedstudio.com/AdminLTE2.png "AdminLTE Presentation")

 **AdminLTE** has been carefully coded with clear comments in all of its JS, LESS and HTML files. LESS has been used to increase code customizability.

@@ -20,7 +20,7 @@ There are multiple ways to install AdminLTE.

 ####Download:

-Download from Github or [visit Almsaeed Studio](http://almsaeedstudio.com) and download the lateset release.
+Download from Github or [visit Almsaeed Studio](https://almsaeedstudio.com) and download the lateset release.

 ####Using The Command Line:

@@ -46,7 +46,7 @@ composer require "almasaeed2010/adminlte=~2.0"

 Documentation
 -------------
-Visit the [online documentation](http://almsaeedstudio.com/themes/AdminLTE/documentation/index.html) for the most
+Visit the [online documentation](https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html) for the most
 updated guide. Information will be added on a weekly basis.

 Browser Support
@@ -75,29 +75,42 @@ Contribution are always **welcome and recommended**! Here is how:

 License
 -------
-AdminLTE is an open source project by [Almsaeed Studio](http://almsaeedstudio.com) that is licensed under [MIT](http://opensource.org/licenses/MIT). Almsaeed Studio
+AdminLTE is an open source project by [Almsaeed Studio](https://almsaeedstudio.com) that is licensed under [MIT](http://opensource.org/licenses/MIT). Almsaeed Studio
 reserves the right to change the license of future releases.

 Todo List
 ---------
- Light sidebar colors
- Right sidebar
- Minified main-sidebar 
+- ~~Light sidebar colors~~ (Done v2.1.0)
+- ~~Right sidebar~~ (Done v2.1.0)
+- ~~Minified main-sidebar~~ (Done v2.1.0)
 - Right to left support
 - Custom pace style

 Legacy Realeases
 ----------------
-AdminLTE 1.x can be easily upgraded to 2.x using [this guide](http://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#browsers), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/almasaeed2010/AdminLTE/releases) section above.
+AdminLTE 1.x can be easily upgraded to 2.x using [this guide](https://almsaeedstudio.com/themes/AdminLTE/documentation/index.html#browsers), but if you intend to keep using AdminLTE 1.x, you can download the latest release from the [releases](https://github.com/almasaeed2010/AdminLTE/releases) section above.

 Change log
 ----------
+**v2.1.0:**
+- Update Ion Icons
+- Added right sidebar ```.control-sidebar```
+- Control sidebar has 2 open effects: slide over content and push content
+- Control sidebar converts to always slide over content on small screens
+- Added 6 new light sidebar skins
+- Updated demo menu
+- Added ChartJS preview page
+- Fixed some minor bugs
+- Added light control sidebar skin
+- Added expand on hover option for sidebar mini
+- Added fixed control sidebar layout
+
 **v2.0.5:**
 - Fixed issue #288

 **v2.0.4:**
 - Fixed bower.json to pick up newest release.
- 
+
 **v2.0.3**
 - Bug fixes
 - Fixed extra page when printing issue #264
--- a/bootstrap/css/bootstrap.css
+++ b/bootstrap/css/bootstrap.css
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v3.3.2 (http://getbootstrap.com)
+ * Bootstrap v3.3.4 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@@ -958,12 +958,24 @@ th {
 .glyphicon-bitcoin:before {
  content: "\e227";
 }
+.glyphicon-btc:before {
+  content: "\e227";
+}
+.glyphicon-xbt:before {
+  content: "\e227";
+}
 .glyphicon-yen:before {
  content: "\00a5";
 }
+.glyphicon-jpy:before {
+  content: "\00a5";
+}
 .glyphicon-ruble:before {
  content: "\20bd";
 }
+.glyphicon-rub:before {
+  content: "\20bd";
+}
 .glyphicon-scale:before {
  content: "\e230";
 }
@@ -1161,6 +1173,9 @@ hr {
  overflow: visible;
  clip: auto;
 }
+[role="button"] {
+  cursor: pointer;
+}
 h1,
 h2,
 h3,
@@ -2564,10 +2579,13 @@ output {
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
-  cursor: not-allowed;
  background-color: #eee;
  opacity: 1;
 }
+.form-control[disabled],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+}
 textarea.form-control {
  height: auto;
 }
@@ -2634,6 +2652,7 @@ input[type="search"] {
 }
 .radio-inline,
 .checkbox-inline {
+  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
@@ -2667,6 +2686,7 @@ fieldset[disabled] .checkbox label {
  cursor: not-allowed;
 }
 .form-control-static {
+  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
@@ -2708,6 +2728,7 @@ select[multiple].form-group-sm .form-control {
 }
 .form-group-sm .form-control-static {
  height: 30px;
+  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
@@ -2744,6 +2765,7 @@ select[multiple].form-group-lg .form-control {
 }
 .form-group-lg .form-control-static {
  height: 46px;
+  min-height: 38px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
@@ -3365,11 +3387,9 @@ input[type="button"].btn-block {
 }
 .collapse {
  display: none;
-  visibility: hidden;
 }
 .collapse.in {
  display: block;
-  visibility: visible;
 }
 tr.collapse.in {
  display: table-row;
@@ -3397,7 +3417,7 @@ tbody.collapse.in {
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
-  border-top: 4px solid;
+  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
 }
@@ -4037,11 +4057,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 }
 .tab-content > .tab-pane {
  display: none;
-  visibility: hidden;
 }
 .tab-content > .active {
  display: block;
-  visibility: visible;
 }
 .nav-tabs .dropdown-menu {
  margin-top: -1px;
@@ -4088,7 +4106,6 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
-    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
@@ -4813,7 +4830,8 @@ a.label:focus {
  position: relative;
  top: -1px;
 }
-.btn-xs .badge {
+.btn-xs .badge,
+.btn-group-xs > .btn .badge {
  top: 0;
  padding: 1px 5px;
 }
@@ -5645,10 +5663,10 @@ a.list-group-item-danger.active:focus {
  height: 100%;
  border: 0;
 }
-.embed-responsive.embed-responsive-16by9 {
+.embed-responsive-16by9 {
  padding-bottom: 56.25%;
 }
-.embed-responsive.embed-responsive-4by3 {
+.embed-responsive-4by3 {
  padding-bottom: 75%;
 }
 .well {
@@ -5707,7 +5725,7 @@ button.close {
  right: 0;
  bottom: 0;
  left: 0;
-  z-index: 1040;
+  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
@@ -5750,10 +5768,12 @@ button.close {
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
 }
 .modal-backdrop {
-  position: absolute;
+  position: fixed;
  top: 0;
  right: 0;
+  bottom: 0;
  left: 0;
+  z-index: 1040;
  background-color: #000;
 }
 .modal-backdrop.fade {
@@ -5828,7 +5848,6 @@ button.close {
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
-  visibility: visible;
  filter: alpha(opacity=0);
  opacity: 0;
 }
@@ -6348,7 +6367,6 @@ button.close {
 }
 .hidden {
  display: none !important;
-  visibility: hidden !important;
 }
 .affix {
  position: fixed;
--- a/bootstrap/css/bootstrap.css.map
+++ b/bootstrap/css/bootstrap.css.map
--- a/bootstrap/css/bootstrap.min.css
+++ b/bootstrap/css/bootstrap.min.css
--- a/bootstrap/js/bootstrap.js
+++ b/bootstrap/js/bootstrap.js
--- a/bootstrap/js/bootstrap.min.js
+++ b/bootstrap/js/bootstrap.min.js
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "AdminLTE",
-  "version": "2.0.5",
+  "version": "2.1.0",
  "homepage": "http://almsaeedstudio.com",
  "authors": [
    "Abdullah Almsaeed <almasaeed2010@gmail.com>"
@@ -29,6 +29,6 @@
    "node_modules",
    "bower_components",
    "composer.json",
-    "documentaion"
+    "documentation"
  ]
 }
--- a/build/bootstrap-less/mixins/progress-bar.less
+++ b/build/bootstrap-less/mixins/progress-bar.less
@@ -1,4 +1,5 @@
 // Progress bars
+
 .progress-bar-variant(@color) {
  background-color: @color;

--- a/build/bootstrap-less/variables.less
+++ b/build/bootstrap-less/variables.less
@@ -207,6 +207,9 @@
 //** Small `.form-control` height
@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);

+//** `.form-group` margin
+@form-group-margin-bottom:       15px;
+
@legend-color:                   @gray-dark;
@legend-border-color:            #e5e5e5;

@@ -266,7 +269,8 @@
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
-@zindex-modal:             1040;
+@zindex-modal-background:  1040;
+@zindex-modal:             1050;


 //== Media queries breakpoints
--- a/build/less/AdminLTE.less
+++ b/build/less/AdminLTE.less
@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v2.0.5
+ *   AdminLTE v2.1.0
 *   Author: Almsaeed Studio
 *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
 *   License: Open source - MIT
@@ -7,11 +7,11 @@
 !*/

 //google fonts
-@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

 //Bootstrap Variables & Mixins
 //The core bootstrap code have not been modified. These files
-//are included only for refrence.
+//are included only for reference.
@import "../bootstrap-less/mixins.less";
@import "../bootstrap-less/variables.less";

@@ -25,6 +25,8 @@
 //-----------
@import "header.less";
@import "sidebar.less";
+@import "sidebar-mini.less";
+@import "control-sidebar.less";
@import "dropdown.less";
@import "forms.less";
@import "progress-bars.less";
--- a/build/less/boxes.less
+++ b/build/less/boxes.less
@@ -30,7 +30,7 @@
  &.box-default {
    border-top-color: @gray;
  }
-  
+
  // collapsed mode
  &.collapsed-box {
    .box-body,
@@ -38,7 +38,7 @@
      display: none;
    }
  }
-  
+
  .nav-stacked {
    > li {
      border-bottom: 1px solid @box-border-color;
@@ -74,7 +74,7 @@
      .btn.btn-default {
        background: transparent;
      }
-      .btn, 
+      .btn,
      a {
        &:hover {
          background: rgba(0,0,0,0.1)!important;
@@ -105,7 +105,7 @@
    > .box-header > .box-tools .btn {
      border: 0;
      box-shadow: none;
-    }    
+    }

    // Fix font color for tiles
    &[class*='bg'] {
@@ -132,7 +132,10 @@
    font-size: 12px;
    margin-bottom: 0.3em;
  }
+}

+.box,
+.overlay-wrapper {
  // Box overlay for LOADING STATE effect
  > .overlay,
  > .loading-img {
@@ -144,7 +147,7 @@
  }

  .overlay {
-    z-index: 1010;
+    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    .border-radius(@box-border-radius);
    > .fa {
@@ -161,13 +164,17 @@
  .overlay.dark {
    background: rgba(0, 0, 0, 0.5);
  }
+}

+//Add clearfix to header, body and footer
+.box-header,
+.box-body,
+.box-footer {
+  .clearfix();
 }

 //Box header
 .box-header {
-  //Add top left and top right border radius
-  .clearfix();
  color: #444;
  display: block;
  padding: @box-padding;
@@ -239,17 +246,6 @@
  // Tables within the box body
  > .table {
    margin-bottom: 0;
-  }  
-
-  // Charts
-  > .chart {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    svg,
-    canvas {
-      width: 100%!important;
-    }
  }

  // Calendar within the box body
--- a/build/less/control-sidebar.less
+++ b/build/less/control-sidebar.less
@@ -0,0 +1,274 @@
+/*
+ * Component: Control sidebar. By default, this is the right sidebar.
+ */
+//The sidebar's background control class
+//This is a hack to make the background visible while scrolling
+.control-sidebar-bg {
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;  
+}
+//Transitions
+.control-sidebar-bg,
+.control-sidebar {
+  top: 0;
+  right: -@control-sidebar-width;
+  width: @control-sidebar-width;  
+  .transition(right @transition-speed ease-in-out);
+}
+//The sidebar
+.control-sidebar {  
+  position: absolute;  
+  padding-top: @navbar-height;  
+  z-index: 1010;
+  //Fix position after header collapse
+  @media (max-width: @screen-sm) {
+    padding-top: @navbar-height + 50;
+  }
+  //Tab panes
+  > .tab-content {
+    padding: 10px 15px;
+  }
+  //Open state with slide over content effect
+  &.control-sidebar-open {
+    &,
+    + .control-sidebar-bg {
+      right: 0;      
+    }
+  }
+}
+//Open without slide over content
+.control-sidebar-open {  
+  .control-sidebar-bg,
+  .control-sidebar {
+    right: 0;
+  }
+  @media(min-width: @screen-sm) {
+    .content-wrapper,
+    .right-side,
+    .main-footer {
+      margin-right: @control-sidebar-width;
+    }
+  }
+}
+//Control sidebar tabs
+.control-sidebar-tabs {
+  > li {
+    &:first-of-type > a {
+      margin-left: 1px;
+      &,
+      &:hover {
+        border-left-width: 0!important;
+      }      
+    }
+    > a {
+      .border-radius(0)!important;
+      //Hover and active states
+      &,
+      &:hover {
+        border-top: none;
+        border-right: none;
+        border-left: 1px solid transparent!important;
+        border-bottom: 1px solid transparent!important;
+      }
+      .icon {
+        font-size: 16px;
+      }
+    }
+    //Active state
+    &.active {
+      > a {
+        &,
+        &:hover,
+          &:focus,
+          &:active {
+          border-top: none!important;
+          border-right: none!important;
+          border-bottom: none!important;
+        }
+      }
+    }
+  }
+  //Remove responsiveness on small screens
+  @media(max-width: @screen-sm) {
+    display: table;
+    >li {
+      display: table-cell!important;
+    }
+  }
+}
+//Headings in the sidebar content
+.control-sidebar-heading {  
+  font-weight: 400;
+  font-size: 16px;
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+//Subheadings
+.control-sidebar-subheading {
+  display: block;
+  font-weight: 400;
+  font-size: 14px;
+}
+//Control Sidebar Menu
+.control-sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0 -15px;
+  > li > a {
+    .clearfix();
+    display: block;
+    padding: 10px 15px;    
+    > .control-sidebar-subheading {
+      margin-top: 0;
+    }
+  }
+  .menu-icon {
+    float: left;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 35px;
+  }
+  .menu-info {
+    margin-left: 45px;
+    margin-top: 3px;
+    > .control-sidebar-subheading {
+      margin: 0;
+    }
+    > p {
+      margin: 0;      
+      font-size: 11px;
+    }
+  }
+  .progress {
+    margin: 0;
+  }
+}
+//Dark skin
+.control-sidebar-dark {
+  color: @sidebar-dark-color;  
+  // Background
+  &,
+  + .control-sidebar-bg {
+    background: @sidebar-dark-bg;
+  }
+  // Sidebar tabs
+  .control-sidebar-tabs {
+    border-bottom: darken(@sidebar-dark-bg, 3%);
+    > li {
+      > a {
+        background: darken(@sidebar-dark-bg, 5%);
+        color: @sidebar-dark-color;
+        //Hover and active states
+        &,
+        &:hover {
+          border-left-color: darken(@sidebar-dark-bg, 7%)!important;
+          border-bottom-color: darken(@sidebar-dark-bg, 7%)!important;
+        }
+        &:hover,
+          &:focus,
+          &:active {
+          background: darken(@sidebar-dark-bg, 3%);
+        }
+      }
+      //Active state
+      &.active {
+        > a {
+          &,
+          &:hover,
+            &:focus,
+            &:active {
+            background: @sidebar-dark-bg;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+  //Heading & subheading
+  .control-sidebar-heading,
+  .control-sidebar-subheading {
+    color: #fff;
+  }
+  //Sidebar list
+  .control-sidebar-menu {
+    > li {
+      > a {
+        &:hover {
+          background: @sidebar-dark-hover-bg;
+        }
+        .menu-info {
+          > p {
+            color: @sidebar-dark-color;
+          }
+        }
+      }
+    }
+  }
+}
+//Light skin
+.control-sidebar-light {
+  color: lighten(@sidebar-light-color, 10%);  
+  // Background
+  &,
+  + .control-sidebar-bg {
+    background: @sidebar-light-bg;
+    border-left: 1px solid @gray;
+  }
+  // Sidebar tabs
+  .control-sidebar-tabs {
+    border-bottom: @gray;
+    > li {
+      > a {
+        background: darken(@sidebar-light-bg, 5%);
+        color: @sidebar-light-color;
+        //Hover and active states
+        &,
+        &:hover {
+          border-left-color: @gray!important;
+          border-bottom-color: @gray!important;
+        }
+        &:hover,
+          &:focus,
+          &:active {
+          background: darken(@sidebar-light-bg, 3%);
+        }
+      }
+      //Active state
+      &.active {
+        > a {
+          &,
+          &:hover,
+            &:focus,
+            &:active {
+            background: @sidebar-light-bg;
+            color: #111;
+          }
+        }
+      }
+    }
+  }
+  //Heading & subheading
+  .control-sidebar-heading,
+  .control-sidebar-subheading {
+    color: #111;
+  }
+  //Sidebar list
+  .control-sidebar-menu {
+    margin-left: -14px;
+    > li {
+      > a {
+        &:hover {
+          background: @sidebar-light-hover-bg;
+        }
+        .menu-info {
+          > p {
+            color: lighten(@sidebar-light-color, 10%);
+          }
+        }
+      }
+    }
+  }
+}
--- a/build/less/core.less
+++ b/build/less/core.less
@@ -23,8 +23,8 @@ body {
 .wrapper {
  .clearfix();
  min-height: 100%;
-  position: static;
-  overflow: hidden;
+  position: relative;
+  overflow: hidden!important;
  .layout-boxed & {
    max-width: 1250px;
    margin: 0 auto;
@@ -35,20 +35,22 @@ body {
 }

 .layout-boxed {
-  background: url('../img/boxed-bg.jpg') repeat fixed;
+  background: url('@{boxed-layout-bg-image-path}') repeat fixed;
 }

 /*
- * Content Wrapper - contins main content
+ * Content Wrapper - contains the main content
 * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
 */
 .content-wrapper, 
 .right-side,
 .main-footer {    
-  .transition-transform(@transition-speed @transition-fn);
-  .transition(margin-left @transition-speed @transition-fn);
+  //Using disposable variable to join statements with a comma
+  @transition-rule: @transition-speed @transition-fn,
+                    margin @transition-speed @transition-fn;
+  .transition-transform(@transition-rule);
  margin-left: @sidebar-width;
-  z-index: 820;
+  z-index: 820;  
  //Top nav layout
  .layout-top-nav & {
    margin-left: 0;
@@ -80,7 +82,7 @@ body {
  background: #fff;
  padding: 15px;
  color: #444;
-  border-top: 1px solid #eee;
+  border-top: 1px solid @gray;
 }

 /* Fixed layout */
--- a/build/less/direct-chat.less
+++ b/build/less/direct-chat.less
@@ -103,7 +103,7 @@
  }
 }
 .direct-chat-contacts {
-  .translate(100%, 0);
+  .translate(101%, 0);
  position: absolute;
  top: 0;
  bottom: 0;
--- a/build/less/dropdown.less
+++ b/build/less/dropdown.less
@@ -5,7 +5,7 @@

 /*Dropdowns in general*/
 .dropdown-menu {
-  box-shadow: @box-boxshadow;
+  box-shadow: none;
  border-color: #eee;
  > li > a {
    color: #777;
@@ -24,10 +24,11 @@
  }
 }

-/*
-    Navbar custom dropdown menu
------------------------------------
-*/
+//Navbar custom dropdown menu
+.navbar-nav .dropdown-menu {
+  .box-shadow(none)!important;
+}
+
 .navbar-nav > .notifications-menu,
 .navbar-nav > .messages-menu,
 .navbar-nav > .tasks-menu {
@@ -42,7 +43,6 @@
    padding: 0 0 0 0!important;
    margin: 0!important;
    top: 100%;
-    //.border-radius(4px)!important;
  }
  //Define header class
  > .dropdown-menu > li.header {
@@ -295,27 +295,27 @@
 }
@-webkit-keyframes flipInX {
  0% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transition-timing-function: ease-in;
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transition-timing-function: ease-in;
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
  }

  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
-    transform: perspective(400px);
+    -webkit-transform: perspective(400px);
  }
 }

@@ -344,4 +344,4 @@
      }
    }
  }
-}
+}
--- a/build/less/header.less
+++ b/build/less/header.less
@@ -9,6 +9,7 @@
  z-index: 1030;
  //Navbar
  > .navbar {
+    .transition(margin-left @transition-speed @transition-fn);
    margin-bottom: 0;
    margin-left: @sidebar-width;
    border: none;
@@ -41,7 +42,6 @@
  //Navbar Right Menu
  .navbar-custom-menu,
  .navbar-right {
-    margin-right: 5px;
    float: right;
    @media (max-width: @screen-sm-max) {
       a {
@@ -76,6 +76,10 @@
    &:hover {
      color: #fff;
    }
+    &:focus,
+    &:active {
+      background: transparent;
+    }
  }
  .sidebar-toggle .icon-bar {
    display: none;
@@ -102,9 +106,10 @@

  //Logo bar
  .logo {
+    .transition(width @transition-speed @transition-fn);
    display: block;
    float: left;
-    height: 50px;
+    height: @navbar-height;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
@@ -112,6 +117,16 @@
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0 15px;
    font-weight: 300;
+    overflow: hidden;
+    //Add support to sidebar mini by allowing the user to create
+    //2 logo designs. mini and lg
+    .logo-lg {
+      //should be visibile when sidebar isn't collapsed
+      display: block;
+    }
+    .logo-mini {
+      display: none;
+    }    
  }
  //Navbar Brand. Alternative logo with layout-top-nav
  .navbar-brand {
@@ -219,4 +234,16 @@
  .left-side {
    padding-top: 100px!important;    
  }
+}
+
+.navbar-collapse.pull-left {
+  @media(max-width: @screen-sm-max) {
+    float: none!important;
+    + .navbar-custom-menu {      
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 40px;
+    }
+  }  
 }
--- a/build/less/mailbox.less
+++ b/build/less/mailbox.less
@@ -74,63 +74,4 @@
 }
 .mailbox-attachment-close {
  &:extend(.close);
-}
-
-// ``` These are the rules of the old mailbox, which is now deprecated and will be removed in the a future release ```
-.mailbox {
-  .table-mailbox {
-    border-left: 1px solid @box-border-color;
-    border-right: 1px solid @box-border-color;
-    border-bottom: 1px solid @box-border-color;
-    tr {
-      &.unread {
-        > td {
-          background-color: rgba(0, 0, 0, 0.05);
-          color: #000;
-          font-weight: 600;
-        }
-      }
-      > td > .fa.fa-star,
-      > td > .fa.fa-star-o,
-      > td > .glyphicon.glyphicon-star,
-      > td > .glyphicon.glyphicon-star-empty{
-        color: @yellow;
-        cursor: pointer;
-      }
-
-      > td.small-col {
-        width: 30px;
-      }
-
-      > td.name {
-        width: 150px;
-        font-weight: 600;
-      }
-      > td.time {
-        text-align: right;
-        width: 100px;
-      }
-      > td {
-        white-space: nowrap;
-      }
-
-      & > td > a {color: #444;}
-    }
-  }
-
-  @media (max-width: @screen-sm-max) {
-    .nav-stacked {
-      > li:not(.header) {
-        float: left;
-        width: 50%;
-        &.header {
-          border: 0!important;
-        }
-      }
-    }
-
-    .search-form {
-      margin-top: 10px;
-    }
-  }
 }
--- a/build/less/miscellaneous.less
+++ b/build/less/miscellaneous.less
@@ -2,7 +2,7 @@
 * General: Miscellaneous
 * ----------------------
 */
-/* 10px padding and margins */
+// 10px padding and margins
 .pad {
  padding: 10px;
 }
@@ -12,13 +12,13 @@
 .margin-bottom {
  margin-bottom: 20px;
 }
-/* Display inline */
+// Display inline
 .inline {
  display: inline;
  width: auto;
 }

-/* Description Blocks */
+// Description Blocks
 .description-block {
  display: block;
  margin: 10px 0;
@@ -37,7 +37,7 @@
  }
 }

-/* Background colors */
+// Background colors
 .bg-red,
 .bg-yellow,
 .bg-aqua,
@@ -176,7 +176,7 @@
  .opacity(.65);
 }

-/* Text colors */
+// Text colors
 .text-red {
  color: @red !important;
 }
@@ -226,37 +226,37 @@
  color: @maroon !important;
 }

-/*Hide elements by display none only*/
+// Hide elements by display none only
 .hide {
  display: none !important;
 }

-/* Remove borders */
+// Remove borders
 .no-border {
  border: 0px !important;
 }
-/* Remove padding */
+// Remove padding
 .no-padding {
  padding: 0px !important;
 }
-/* Remove margins */
+// Remove margins
 .no-margin {
  margin: 0px !important;
 }

-/* Remove box shadow */
+// Remove box shadow
 .no-shadow {
  box-shadow: none!important;
 }

-/* Unstyled List */
+// Unstyled List
 .list-unstyled {
  list-style: none;
  margin: 0;
  padding: 0;
 }

-/* Remove border radius */
+// Remove border radius
 .flat {
  .border-radius(0)!important;
 }
@@ -269,16 +269,15 @@

 }

-/* _fix for sparkline tooltip */
+// _fix for sparkline tooltip
 .jqstooltip{
  padding: 5px!important;
  width:auto!important;
  height:auto!important;
 }

-/*
-Gradient Background colors
-*/
+
+// Gradient Background colors
 .bg-teal-gradient {
  .gradient(@teal; @teal; lighten(@teal, 16%))!important;
  color: #fff;
@@ -342,4 +341,14 @@ Gradient Background colors
  &:hover {
    .opacity(1);
  }
+}
+// Charts
+.chart {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  svg,
+  canvas {
+    width: 100%!important;
+  }
 }
--- a/build/less/mixins.less
+++ b/build/less/mixins.less
@@ -1,6 +1,7 @@
 //AdminLTE mixins
 //===============

+
 //Changes the color and the hovering properties of the navbar
 .navbar-variant(@color; @font-color: rgba(255, 255, 255, 0.8); @hover-color: #f6f6f6; @hover-bg: rgba(0, 0, 0, 0.1)) {
  background-color: @color;
@@ -19,9 +20,6 @@
    color: @hover-color;
  }

-  .navbar-custom-menu > .nav {
-    margin-right: 10px;
-  }
  //Add color to the sidebar toggle button
  .sidebar-toggle {
    color: @font-color;
@@ -37,12 +35,9 @@
  background-color: @bg-color;
  color: @color;
  border-bottom: @border-bottom-width solid @border-bottom-color;
-  > a {
-    color: @color;
-  }

  &:hover {
-    background: darken(@bg-color, 1%);
+    background-color: darken(@bg-color, 1%);
  }
 }

@@ -55,7 +50,7 @@
    background-color: @color;
    a,
    .btn {
-      color: @text-color;      
+      color: @text-color;
    }
  }
 }
@@ -63,11 +58,11 @@
 //Direct Chat Variant
 .direct-chat-variant(@bg-color; @color: #fff) {
  .right > .direct-chat-text {
-    background: @bg-color;    
+    background: @bg-color;
    border-color: @bg-color;
    color: @color;
    &:after,
-      &:before {      
+      &:before {
      border-left-color: @bg-color;
    }
  }
@@ -102,4 +97,205 @@
  background: -o-linear-gradient(@stop,
    @start);
  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
+}
+
+//Added 2.1.0
+//Skins Mixins
+
+//Dark Sidebar Mixin
+.skin-dark-sidebar(@link-hover-border-color) {
+  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: @sidebar-dark-bg;
+  }
+  //User Panel (resides in the sidebar)
+  .user-panel {
+    > .info, > .info > a {
+      color: #fff;
+    }
+  }
+  //Sidebar Menu. First level links
+  .sidebar-menu > li {
+    //Section Headning
+    &.header {
+      color: lighten(@sidebar-dark-bg, 20%);
+      background: darken(@sidebar-dark-bg, 4%);
+    }
+    //links
+    > a {
+      border-left: 3px solid transparent;      
+    }
+    //Hover and active states
+    &:hover > a, &.active > a {
+      color: @sidebar-dark-hover-color;
+      background: @sidebar-dark-hover-bg;
+      border-left-color: @link-hover-border-color;
+    }
+    //First Level Submenu
+    > .treeview-menu {
+      margin: 0 1px;
+      background: @sidebar-dark-submenu-bg;
+    }
+  }
+  //All links within the sidebar menu
+  .sidebar a {
+    color: @sidebar-dark-color;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  //All submenus
+  .treeview-menu {
+    > li {
+      > a {
+        color: @sidebar-dark-submenu-color;
+      }
+      &.active > a, > a:hover {
+        color: @sidebar-dark-submenu-hover-color;
+      }
+    }
+  }
+  //The sidebar search form
+  .sidebar-form {
+    .border-radius(3px);
+    border: 1px solid lighten(@sidebar-dark-bg, 10%);
+    margin: 10px 10px;
+    input[type="text"], .btn {
+      box-shadow: none;
+      background-color: lighten(@sidebar-dark-bg, 10%);
+      border: 1px solid transparent;
+      height: 35px;
+      .transition(all @transition-speed @transition-fn);
+    }
+    input[type="text"] {
+      color: #666;
+      .border-radius(2px, 0, 2px, 0) !important;
+      &:focus, &:focus + .input-group-btn .btn {
+        background-color: #fff;
+        color: #666;
+      }
+      &:focus + .input-group-btn .btn {
+        border-left-color: #fff;
+      }
+    }
+    .btn {
+      color: #999;
+      .border-radius(0, 2px, 0, 2px) !important;
+    }
+  }
+}
+
+//Light Sidebar Mixin
+.skin-light-sidebar(@icon-active-color) {
+  // Sidebar background color (Both .wrapper and .left-side are responsible for sidebar bg color)
+  .wrapper,
+  .main-sidebar,
+  .left-side {
+    background-color: @sidebar-light-bg;
+  }
+  .content-wrapper,
+  .main-footer {
+    border-left: 1px solid @gray;
+  }
+  //User Panel (resides in the sidebar)
+  .user-panel {
+    > .info, > .info > a {
+      color: @sidebar-light-color;
+    }
+  }
+  //Sidebar Menu. First level links
+  .sidebar-menu > li {
+    .transition(border-left-color .3s ease);
+    //border-left: 3px solid transparent;
+    //Section Headning
+    &.header {
+      color: lighten(@sidebar-light-color, 25%);
+      background: @sidebar-light-bg;
+    }
+    //links
+    > a {
+      border-left: 3px solid transparent;  
+      font-weight: 600; 
+    }
+    //Hover and active states
+    &:hover > a,
+      &.active > a {
+      color: @sidebar-light-hover-color;
+      background: @sidebar-light-hover-bg;      
+    }
+    &:hover > a {
+
+    }
+    &.active {      
+      border-left-color: @icon-active-color;
+      > a {
+        font-weight: 600;      
+      }
+    }
+    //First Level Submenu
+    > .treeview-menu {      
+      background: @sidebar-light-submenu-bg;      
+    }
+  }
+  //All links within the sidebar menu
+  .sidebar a {
+    color: @sidebar-light-color;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+  //All submenus
+  .treeview-menu {
+    > li {
+      > a {
+        color: @sidebar-light-submenu-color;
+      }
+      &.active > a,
+      > a:hover {
+        color: @sidebar-light-submenu-hover-color;
+      }
+      &.active > a {
+        font-weight: 600;
+      }
+    }
+  }
+  //The sidebar search form
+  .sidebar-form {
+    .border-radius(3px);
+    border: 1px solid @gray;//darken(@sidebar-light-bg, 5%);
+    margin: 10px 10px;
+    input[type="text"],
+    .btn {
+      box-shadow: none;
+      background-color: #fff;//darken(@sidebar-light-bg, 3%);
+      border: 1px solid transparent;
+      height: 35px;
+      .transition(all @transition-speed @transition-fn);
+    }
+    input[type="text"] {
+      color: #666;
+      .border-radius(2px, 0, 2px, 0) !important;
+      &:focus,
+        &:focus + .input-group-btn .btn {
+        background-color: #fff;
+        color: #666;
+      }
+      &:focus + .input-group-btn .btn {
+        border-left-color: #fff;
+      }
+    }
+    .btn {
+      color: #999;
+      .border-radius(0, 2px, 0, 2px) !important;
+    }
+  }
+  @media(min-width: @screen-sm-min) {  
+    &.sidebar-mini.sidebar-collapse {
+      .sidebar-menu > li > .treeview-menu {
+        border-left: 1px solid @gray;
+      }           
+    }
+  }
 }
--- a/build/less/navs.less
+++ b/build/less/navs.less
@@ -3,11 +3,20 @@
 * --------------
 */

+.nav {
+  > li > a:hover,
+    > li > a:active,
+    > li > a:focus {
+    color: #444;
+    background: #f7f7f7;
+  }
+}
+
 /* NAV PILLS */
 .nav-pills {
  > li > a {
    .border-radius(0);
-    border-top: 3px solid transparent;    
+    border-top: 3px solid transparent;
    color: #444;
    > .fa,
    > .glyphicon,
@@ -16,32 +25,26 @@
    }
  }
  > li.active > a,
-  > li.active > a:hover {
-    background-color: #f4f4f4;
+  > li.active > a:hover,
+    > li.active > a:focus {
    border-top-color: @light-blue;
-    color: #444;
  }
  > li.active > a {
    font-weight: 600;
  }
-  > li > a:hover {
-    background-color: #f6f6f6;
-  }
 }
 /* NAV STACKED */
 .nav-stacked {
  > li > a {
    .border-radius(0);
    border-top: 0;
-    border-left: 3px solid transparent;    
+    border-left: 3px solid transparent;
    color: #444;
  }
  > li.active > a,
  > li.active > a:hover {
-    background-color: #f4f4f4;
    border-top: 0;
    border-left-color: @light-blue;
-    color: #444;
  }

  > li.header {
@@ -67,12 +70,16 @@
      border-top: 3px solid transparent;
      margin-bottom: -2px;
      > a {
+        color: #444;
        .border-radius(0)!important;
        &,
        &:hover {
          background: transparent;
          margin: 0;
        }
+        &:hover {
+          color: #999;
+        }
      }
      &:not(.active) {
        > a:hover,
@@ -89,10 +96,10 @@
      & > a,
      &:hover > a {
        background-color: #fff;
-
+        color: #444;
      }
      > a {
-        border-top: 0;
+        border-top-color: transparent;
        border-left-color: #f4f4f4;
        border-right-color: #f4f4f4;
      }
@@ -103,7 +110,7 @@
      margin-left: 0;
      &.active {
        > a {
-          border-left-width: 0;
+          border-left-color: transparent;
        }
      }
    }
@@ -116,10 +123,13 @@
      }
      > li:first-of-type {
        margin-right: 0;
+        > a {
+          border-left-width: 1px;
+        }
        &.active {
          > a {
-            border-left-width: 1px;
-            border-right-width: 0;
+            border-left-color: #f4f4f4;
+            border-right-color: transparent;
          }
        }
      }
@@ -143,18 +153,14 @@
    padding: 10px;
    .border-bottom-radius(@box-border-radius);
  }
-}

-/* Nav tabs bottom */
-.tabs-bottom {
-  &.nav-3 {
-    li a {
-      width: percentage(100/3)!important;
+  .dropdown.open > a {
+    &:active,
+      &:focus {
+      background: transparent;
+      color: #999;
    }
  }
-  li a {
-    border: 0;
-  }
 }

 /* PAGINATION */
@@ -162,9 +168,7 @@
  > li > a {
    background: #fafafa;
    color: #666;
+    .border-radius(0)!important;
  }
-  > li:first-of-type a,
-    > li:last-of-type a {
-    .border-radius(0);
-  }
+
 }
--- a/build/less/sidebar-mini.less
+++ b/build/less/sidebar-mini.less
@@ -0,0 +1,137 @@
+/*
+ * Component: Sidebar Mini
+ */
+
+//Add sidebar-mini class to the body tag to activate this feature
+.sidebar-mini {
+  //Sidebar mini should work only on devices larger than @screen-sm
+  @media (min-width: @screen-sm) {
+    //When the sidebar is collapsed...
+    &.sidebar-collapse {
+
+      //Apply the new margining to the main content and footer
+      .content-wrapper,
+      .right-side,
+      .main-footer {
+        margin-left: 50px!important;
+        z-index: 840;
+      }
+
+      //Modify the sidebar to shrink instead of disappearing
+      .main-sidebar {
+        //Don't go away! Just shrink
+        .translate(0, 0);
+        width: 50px!important;
+        z-index: 850;
+      }
+
+      .sidebar-menu {
+        > li {
+          position: relative;
+          > a {
+            margin-right: 0;            
+          }
+          > a > span {
+            border-top-right-radius: 4px;
+          }
+
+          &:not(.treeview) {
+            > a > span {
+              border-bottom-right-radius: 4px;
+            }
+          }
+
+          > .treeview-menu {
+            //Add some padding to the treeview menu
+            padding-top: 5px;
+            padding-bottom: 5px;
+            border-bottom-right-radius: 4px;
+          }
+
+          //Show menu items on hover
+          &:hover {
+            > a {
+              //overflow: visible;
+            }
+            > a > span:not(.pull-right),
+            > .treeview-menu {
+              display: block!important;
+              position: absolute;
+              width: @sidebar-width - 50;
+              left: 50px;
+            }
+
+            //position the header & treeview menus
+            > a > span {
+              top: 0;
+              margin-left: -3px;
+              padding: 12px 5px 12px 20px;
+              background-color: inherit;
+            }
+            > .treeview-menu {
+              top: 44px;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+
+      //Make the sidebar links, menus, labels, badges
+      //and angle icons disappear
+      .main-sidebar .user-panel > .info,
+      .sidebar-form,
+      .sidebar-menu > li > a > span,
+      .sidebar-menu > li > .treeview-menu,
+      .sidebar-menu >li > a > .pull-right,
+      .sidebar-menu li.header {
+        display: none!important;
+      }
+
+      .main-header {
+        //Let's make the logo also shrink and the mini logo to appear
+        .logo {
+          width: 50px;
+          > .logo-mini {
+            display: block;
+            margin-left: -15px;
+            margin-right: -15px;
+            font-size: 18px;
+          }
+          > .logo-lg {
+            display: none;
+          }
+        }
+
+        //Since the logo got smaller, we need to fix the navbar's position
+        .navbar {
+          margin-left: 50px;
+        }
+      }
+    }
+  }
+}
+
+//A fix for text overflow while transitioning from sidebar mini to full sidebar
+.sidebar-menu,
+.main-sidebar .user-panel,
+.sidebar-menu > li.header {
+  white-space: nowrap!important;
+  overflow: hidden;
+}
+.sidebar-menu:hover {
+  overflow: visible;
+}
+.sidebar-form,
+.sidebar-menu > li.header {
+  overflow: hidden;
+  text-overflow: clip;
+}
+.sidebar-menu li > a {
+  position: relative;
+  > .pull-right {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-top: -7px;
+  }
+}
--- a/build/less/sidebar.less
+++ b/build/less/sidebar.less
@@ -9,14 +9,17 @@
 .left-side {
  position: absolute;
  top: 0;
-  left: 0;  
+  left: 0;
  padding-top: 50px;
  min-height: 100%;
  width: @sidebar-width;
  z-index: 810;
-  .transition-transform(@transition-speed @transition-fn);
+  //Using disposable variable to join statements with a comma
+  @transition-rule: @transition-speed @transition-fn,
+    width @transition-speed @transition-fn;
+  .transition-transform(@transition-rule);
  @media (max-width: @screen-xs-max) {
-    .translate(-@sidebar-width, 0); 
+    .translate(-@sidebar-width, 0);
  }
  .sidebar-collapse & {
    @media (min-width: @screen-sm) {
@@ -32,10 +35,6 @@

 .sidebar {
  padding-bottom: 10px;
-  .fixed & {
-    overflow: auto;
-    height: 100%;
-  }
 }
 // remove border from form
 .sidebar-form {
@@ -46,29 +45,35 @@

 //Sidebar user panel
 .user-panel {
+  position: relative;
+  width: 100%;
  padding: 10px;
+  overflow: hidden;
  .clearfix();
  > .image > img {
-    width: 45px;
-    height: 45px;
+    width: 100%;
+    max-width: 45px;
+    height: auto;
  }
-  > .info {
-    font-weight: 600;
+  > .info {    
    padding: 5px 5px 5px 15px;
-    font-size: 14px;
    line-height: 1;
-  }
-  > .info > p {
-    margin-bottom: 9px;
-  }
-  > .info > a {
-    text-decoration: none;
-    padding-right: 5px;
-    margin-top: 3px;
-    font-size: 11px;
-    font-weight: normal;
-    > .fa, > .ion, > .glyphicon {
-      margin-right: 3px;
+    position: absolute;
+    left: 55px;    
+    > p {
+      font-weight: 600;
+      margin-bottom: 9px;
+    }
+    > a {
+      text-decoration: none;
+      padding-right: 5px;
+      margin-top: 3px;
+      font-size: 11px;
+      > .fa,
+      > .ion,
+      > .glyphicon {
+        margin-right: 3px;
+      }
    }
  }
 }
@@ -78,6 +83,7 @@
  list-style: none;
  margin: 0;
  padding: 0;
+  //First Level
  > li {
    position: relative;
    margin: 0;
--- a/build/less/skins/_all-skins.less
+++ b/build/less/skins/_all-skins.less
@@ -1,7 +1,13 @@
 //All skins in one file
@import "skin-blue.less";
+@import "skin-blue-light.less";
@import "skin-black.less";
+@import "skin-black-light.less";
@import "skin-green.less";
+@import "skin-green-light.less";
@import "skin-red.less";
+@import "skin-red-light.less";
@import "skin-yellow.less";
-@import "skin-purple.less";
+@import "skin-yellow-light.less";
+@import "skin-purple.less";
+@import "skin-purple-light.less";
--- a/build/less/skins/skin-black-light.less
+++ b/build/less/skins/skin-black-light.less
@@ -0,0 +1,64 @@
+/*
+ * Skin: Black
+ * -----------
+ */
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+/* skin-black navbar */
+.skin-black-light {
+  //Navbar & Logo 
+  .main-header {
+    .box-shadow(0px 1px 1px rgba(0, 0, 0, 0.05));
+    .navbar-toggle {
+      color: #333;
+    }
+    .navbar-brand {
+      color: #333;
+      border-right: 1px solid #eee;
+    }
+    > .navbar {
+      .navbar-variant(#fff; #333; #999; #fff);
+      > .sidebar-toggle {
+        color: #333;
+        border-right: 1px solid #eee;
+      }
+      .navbar-nav {
+        > li > a {
+          border-right: 1px solid #eee;
+        }
+      }
+      .navbar-custom-menu .navbar-nav,
+      .navbar-right {
+        > li {
+          > a {
+            border-left: 1px solid #eee;
+            border-right-width: 0;
+          }
+        }
+      }
+    }
+    > .logo {
+      .logo-variant(#fff; #333);
+      border-right: 1px solid #eee;
+      @media (max-width: @screen-header-collapse) {
+        .logo-variant(#222; #fff);
+        border-right: none;
+      }
+    }
+
+    li.user-header {
+      background-color: #222;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+    box-shadow: none;
+  }
+  //Create the sidebar skin
+  .skin-light-sidebar(#fff);    
+}
--- a/build/less/skins/skin-black.less
+++ b/build/less/skins/skin-black.less
@@ -59,91 +59,6 @@
    background: transparent;
    box-shadow: none;
  }
-  //User Panel (resides in sidebar)
-  .user-panel {
-    > .image > img {
-      border: 1px solid #444;
-    }
-
-    > .info, > .info > a {
-      color: #eee;
-    }
-  }
-  //Sidebar & Treeview
-  // Sidebar color
-  .main-sidebar,
-  .left-side,
-  .wrapper {
-    background: #222;
-  }
-  // the menu
-  .sidebar > .sidebar-menu > li {
-    &.header {
-      background: darken(#222, 2%);
-      color: rgba(255, 255, 255, .4);
-    }
-    > a {
-      margin-right: 1px;
-      border-left: 3px solid transparent;
-    }
-    //Hover and active states
-    > a:hover,
-    &.active > a {
-      color: #fff;
-      background: #444;
-      border-left-color: #fff;
-    }
-
-    > .treeview-menu {
-      background: #333;
-    }
-  }
-
-  .sidebar a {
-    color: #eee;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {
-        color: #ccc;
-      }
-      &.active > a,
-      > a:hover {
-        color: #fff;
-      }
-    }
-  }
-
-  //Sidebar Search Form
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(#222, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(#222, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"] {
-      color: #666;
-      .border-radius(2px, 0, 2px, 0) !important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px) !important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(#fff);
 }
--- a/build/less/skins/skin-blue-light.less
+++ b/build/less/skins/skin-blue-light.less
@@ -0,0 +1,61 @@
+/*
+ * Skin: Blue
+ * ----------
+ */
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-blue-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@light-blue; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@light-blue, 5%);
+        }
+      }
+      @media (max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255, 255, 255, 0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@light-blue, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@light-blue);
+    }
+
+    li.user-header {
+      background-color: @light-blue;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@light-blue);
+  .main-footer {
+    border-top-color: @gray;
+  }
+}
+
+.skin-blue.layout-top-nav .main-header > .logo {
+  .logo-variant(@light-blue);
+}
--- a/build/less/skins/skin-blue.less
+++ b/build/less/skins/skin-blue.less
@@ -36,7 +36,7 @@
    }
    //Logo
    .logo {
-      .logo-variant(darken(@light-blue, 5%));
+      .logo-variant(darken(@light-blue, 5%));      
    }

    li.user-header {
@@ -49,90 +49,8 @@
    background: transparent;
  }

-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    > a:hover, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @light-blue;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {
-        color: @sidebar-dark-submenu-color;
-      }
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"] {
-      color: #666;
-      .border-radius(2px, 0, 2px, 0) !important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px) !important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@light-blue);
 }

 .skin-blue.layout-top-nav .main-header > .logo {
--- a/build/less/skins/skin-green-light.less
+++ b/build/less/skins/skin-green-light.less
@@ -0,0 +1,56 @@
+/*
+ * Skin: Green
+ * -----------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-green-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@green; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@green, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@green, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@green);
+    }
+
+    li.user-header {
+      background-color: @green;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@green);
+
+}
--- a/build/less/skins/skin-green.less
+++ b/build/less/skins/skin-green.less
@@ -49,87 +49,8 @@
  .content-header {
    background: transparent;
  }
+  
+  //Create the sidebar skin
+  .skin-dark-sidebar(@green);

-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    > a:hover, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @green;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
 }
--- a/build/less/skins/skin-purple-light.less
+++ b/build/less/skins/skin-purple-light.less
@@ -0,0 +1,55 @@
+/*
+ * Skin: Purple
+ * ------------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-purple-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@purple; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@purple, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@purple, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@purple);
+    }
+
+    li.user-header {
+      background-color: @purple;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@purple);
+}
--- a/build/less/skins/skin-purple.less
+++ b/build/less/skins/skin-purple.less
@@ -50,86 +50,6 @@
    background: transparent;
  }

-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    > a:hover, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @purple;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@purple);
 }
--- a/build/less/skins/skin-red-light.less
+++ b/build/less/skins/skin-red-light.less
@@ -0,0 +1,55 @@
+/*
+ * Skin: Red
+ * ---------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-red-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@red; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@red, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@red, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@red);      
+    }
+    
+    li.user-header {
+      background-color: @red;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@red);
+}
--- a/build/less/skins/skin-red.less
+++ b/build/less/skins/skin-red.less
@@ -50,86 +50,6 @@
    background: transparent;
  }

-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    > a:hover, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @red;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@red);
 }
--- a/build/less/skins/skin-yellow-light.less
+++ b/build/less/skins/skin-yellow-light.less
@@ -0,0 +1,55 @@
+/*
+ * Skin: Yellow
+ * ------------
+ */
+
+@import "../../bootstrap-less/mixins.less";
+@import "../../bootstrap-less/variables.less";
+@import "../variables.less";
+@import "../mixins.less";
+
+.skin-yellow-light {
+  //Navbar
+  .main-header {
+    .navbar {
+      .navbar-variant(@yellow; #fff);
+      .sidebar-toggle {
+        color: #fff;
+        &:hover {
+          background-color: darken(@yellow, 5%);
+        }
+      }
+      @media(max-width: @screen-header-collapse) {
+        .dropdown-menu {
+          li {
+            &.divider {
+              background-color: rgba(255,255,255,0.1);
+            }
+            a {
+              color: #fff;
+              &:hover {
+                background: darken(@yellow, 5%);
+              }
+            }
+          }
+        }
+      }
+    }
+    //Logo
+    .logo {
+      .logo-variant(@yellow);      
+    }
+    
+    li.user-header {
+      background-color: @yellow;
+    }
+  }
+
+  //Content Header
+  .content-header {
+    background: transparent;
+  }
+
+  //Create the sidebar skin
+  .skin-light-sidebar(@yellow);
+}
--- a/build/less/skins/skin-yellow.less
+++ b/build/less/skins/skin-yellow.less
@@ -50,86 +50,6 @@
    background: transparent;
  }

-  //User Panel (resides in the sidebar)
-  .user-panel {
-
-    > .info, > .info > a {
-      color: #fff;
-    }
-  }
-
-  //Sidebar & Treeview menu
-  // the menu
-  .sidebar-menu > li {
-    &.header {
-      color: lighten(@sidebar-dark-bg, 20%);
-      background: darken(@sidebar-dark-bg, 4%);
-    }
-    > a {
-      border-left: 3px solid transparent;
-      margin-right: 1px;
-    }
-    //Hover and active states
-    > a:hover, &.active > a {
-      color: @sidebar-dark-hover-color;
-      background: @sidebar-dark-hover-bg;
-      border-left-color: @yellow;
-    }
-
-    > .treeview-menu {
-      margin: 0 1px;
-      background: @sidebar-dark-submenu-bg;
-    }
-  }
-
-  // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
-  .main-sidebar,
-  .left-side {
-    background: @sidebar-dark-bg;
-  }
-
-  .sidebar a {
-    color: @sidebar-dark-color;
-    &:hover {
-      text-decoration: none;
-    }
-  }
-  // skin blue treeview-menu
-  .treeview-menu {
-    > li {
-      > a {color: @sidebar-dark-submenu-color;}
-      &.active > a, > a:hover {
-        color: @sidebar-dark-submenu-hover-color;
-      }
-    }
-  }
-
-  .sidebar-form {
-    .border-radius(3px);
-    border: 1px solid lighten(@sidebar-dark-bg, 10%);
-    margin: 10px 10px;
-    input[type="text"], .btn {
-      box-shadow: none;
-      background-color: lighten(@sidebar-dark-bg, 10%);
-      border: 1px solid transparent;
-      height: 35px;
-      .transition(all @transition-speed @transition-fn);
-    }
-    input[type="text"]{
-      color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
-      &:focus, &:focus + .input-group-btn .btn {
-        background-color: #fff;
-        color: #666;
-      }
-      &:focus + .input-group-btn .btn {
-        border-left-color: #fff;
-      }
-    }
-    .btn {
-      color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
-    }
-  }
+  //Create the sidebar skin
+  .skin-dark-sidebar(@yellow);
 }
--- a/build/less/users-list.less
+++ b/build/less/users-list.less
@@ -9,11 +9,17 @@
    float: left;
    padding: 10px;
    text-align: center;
-    > img {
+    img {
      .border-radius(50%);
      max-width: 100%;
      height: auto;
-    }    
+    }  
+    > a:hover {
+      &,
+      .users-list-name {
+        color: #999;  
+      }
+    }
  }
 }
 .users-list-name,
@@ -25,10 +31,7 @@
  color: #444;
  overflow: hidden;
  white-space: nowrap;
-  text-overflow: ellipsis;
-  &:hover {
-    color: #999;
-  }
+  text-overflow: ellipsis;  
 }
 .users-list-date {
  color: #999;
--- a/build/less/variables.less
+++ b/build/less/variables.less
@@ -1,6 +1,11 @@
 //AdminLTE 2 Variables.less
 //=========================

+//PATHS
+//--------------------------------------------------------
+
+@boxed-layout-bg-image-path: "../img/boxed-bg.jpg";
+
 //COLORS
 //--------------------------------------------------------

@@ -26,7 +31,7 @@

 //Side bar and logo width
@sidebar-width: 230px;
-//Bosex layout maximum width
+//Boxed layout maximum width
@boxed-layout-max-width: 1024px;
 //When the logo should go to the top of the screen
@screen-header-collapse: @screen-xs-max;
@@ -36,21 +41,34 @@
@link-hover-color: lighten(@link-color, 15%);

 //Body background (Affects main content background only)
-@body-bg: #ecf0f5;//darken(#f4f5f7, 4%);
+@body-bg: #ecf0f5;

 //SIDEBAR SKINS
 //--------------------------------------------------------

-//skin blue (light) sidebar vars
+//Dark sidebar
@sidebar-dark-bg:                  #222d32;
@sidebar-dark-hover-bg:            darken(@sidebar-dark-bg, 2%);
-@sidebar-dark-color:                lighten(@sidebar-dark-bg, 60%);
+@sidebar-dark-color:               lighten(@sidebar-dark-bg, 60%);
@sidebar-dark-hover-color:         #fff;
-@sidebar-dark-border:              #dbdbdb;
@sidebar-dark-submenu-bg:          lighten(@sidebar-dark-bg, 5%);
@sidebar-dark-submenu-color:       lighten(@sidebar-dark-submenu-bg, 40%);
@sidebar-dark-submenu-hover-color: #fff;

+//Light sidebar
+@sidebar-light-bg:                  #f9fafc;
+@sidebar-light-hover-bg:            lighten(#f0f0f1, 1.5%);
+@sidebar-light-color:               #444;
+@sidebar-light-hover-color:         #000;
+@sidebar-light-submenu-bg:          @sidebar-light-hover-bg;
+@sidebar-light-submenu-color:       #777;
+@sidebar-light-submenu-hover-color: #000;
+
+//CONTROL SIDEBAR
+//--------------------------------------------------------
+@control-sidebar-width: @sidebar-width;
+
+
 //BOXES
 //--------------------------------------------------------
@box-border-color:  #f4f4f4;
@@ -99,4 +117,4 @@

 //Transition global options
@transition-speed: .3s;
-@transition-fn:    cubic-bezier(0.32,1.25,0.375,1.15);
+@transition-fn:    ease-in-out;//cubic-bezier(0.32,1.25,0.375,1.15);
--- a/13
+++ b/13
@@ -1,4 +1,17 @@
 CHANGE LOG:
+v2.1.0:
+- Update Ion Icons
+- Added right sidebar ```.control-sidebar```
+- Control sidebar has 2 open effects: slide over content and push content
+- Control sidebar converts to always slide over content on small screens
+- Added 6 new light sidebar skins
+- Updated demo menu
+- Added ChartJS preview page
+- Fixed some minor bugs
+- Added light control sidebar skin
+- Added expand on hover option for sidebar mini
+- Added fixed control sidebar layout
+
 v2.0.5:
 - Fixed issue #288

--- a/dist/css/AdminLTE.css
+++ b/dist/css/AdminLTE.css
@@ -1,6 +1,6 @@
-@import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);
 /*!
- *   AdminLTE v2.0.
+ *   AdminLTE v2.1.0
 *   Author: Almsaeed Studio
 *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
 *   License: Open source - MIT
@@ -29,8 +29,8 @@ body {
 /* Layout */
 .wrapper {
  min-height: 100%;
-  position: static;
-  overflow: hidden;
+  position: relative;
+  overflow: hidden!important;
 }
 .wrapper:before,
 .wrapper:after {
@@ -51,19 +51,16 @@ body {
  background: url('../img/boxed-bg.jpg') repeat fixed;
 }
 /*
- * Content Wrapper - contins main content
+ * Content Wrapper - contains the main content
 * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
 */
 .content-wrapper,
 .right-side,
 .main-footer {
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -webkit-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: margin-left 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+  -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+  -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  margin-left: 230px;
  z-index: 820;
 }
@@ -106,7 +103,7 @@ body {
  background: #fff;
  padding: 15px;
  color: #444;
-  border-top: 1px solid #eee;
+  border-top: 1px solid #d2d6de;
 }
 /* Fixed layout */
 .fixed .main-header,
@@ -187,6 +184,9 @@ a:focus {
  z-index: 1030;
 }
 .main-header > .navbar {
+  -webkit-transition: margin-left 0.3s ease-in-out;
+  -o-transition: margin-left 0.3s ease-in-out;
+  transition: margin-left 0.3s ease-in-out;
  margin-bottom: 0;
  margin-left: 230px;
  border: none;
@@ -217,7 +217,6 @@ a:focus {
 }
 .main-header .navbar-custom-menu,
 .main-header .navbar-right {
-  margin-right: 5px;
  float: right;
 }
@media (max-width: 991px) {
@@ -252,6 +251,10 @@ a:focus {
 .main-header .sidebar-toggle:hover {
  color: #fff;
 }
+.main-header .sidebar-toggle:focus,
+.main-header .sidebar-toggle:active {
+  background: transparent;
+}
 .main-header .sidebar-toggle .icon-bar {
  display: none;
 }
@@ -270,6 +273,9 @@ a:focus {
  line-height: .9;
 }
 .main-header .logo {
+  -webkit-transition: width 0.3s ease-in-out;
+  -o-transition: width 0.3s ease-in-out;
+  transition: width 0.3s ease-in-out;
  display: block;
  float: left;
  height: 50px;
@@ -280,6 +286,13 @@ a:focus {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0 15px;
  font-weight: 300;
+  overflow: hidden;
+}
+.main-header .logo .logo-lg {
+  display: block;
+}
+.main-header .logo .logo-mini {
+  display: none;
 }
 .main-header .navbar-brand {
  color: #fff;
@@ -378,6 +391,17 @@ a:focus {
    padding-top: 100px!important;
  }
 }
+@media (max-width: 991px) {
+  .navbar-collapse.pull-left {
+    float: none!important;
+  }
+  .navbar-collapse.pull-left + .navbar-custom-menu {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 40px;
+  }
+}
 /*
 * Component: Sidebar
 * ------------------
@@ -391,10 +415,10 @@ a:focus {
  min-height: 100%;
  width: 230px;
  z-index: 810;
-  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -moz-transition: -moz-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: -o-transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: transform 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+  -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+  -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
+  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
 }
@media (max-width: 767px) {
  .main-sidebar,
@@ -426,15 +450,14 @@ a:focus {
 .sidebar {
  padding-bottom: 10px;
 }
-.fixed .sidebar {
-  overflow: auto;
-  height: 100%;
-}
 .sidebar-form input:focus {
  border-color: transparent!important;
 }
 .user-panel {
+  position: relative;
+  width: 100%;
  padding: 10px;
+  overflow: hidden;
 }
 .user-panel:before,
 .user-panel:after {
@@ -445,16 +468,18 @@ a:focus {
  clear: both;
 }
 .user-panel > .image > img {
-  width: 45px;
-  height: 45px;
+  width: 100%;
+  max-width: 45px;
+  height: auto;
 }
 .user-panel > .info {
-  font-weight: 600;
  padding: 5px 5px 5px 15px;
-  font-size: 14px;
  line-height: 1;
+  position: absolute;
+  left: 55px;
 }
 .user-panel > .info > p {
+  font-weight: 600;
  margin-bottom: 9px;
 }
 .user-panel > .info > a {
@@ -462,7 +487,6 @@ a:focus {
  padding-right: 5px;
  margin-top: 3px;
  font-size: 11px;
-  font-weight: normal;
 }
 .user-panel > .info > a > .fa,
 .user-panel > .info > a > .ion,
@@ -540,13 +564,332 @@ a:focus {
 .sidebar-menu .treeview-menu > li > a > .fa-angle-down {
  width: auto;
 }
+/*
+ * Component: Sidebar Mini
+ */
+@media (min-width: 768px) {
+  .sidebar-mini.sidebar-collapse .content-wrapper,
+  .sidebar-mini.sidebar-collapse .right-side,
+  .sidebar-mini.sidebar-collapse .main-footer {
+    margin-left: 50px!important;
+    z-index: 840;
+  }
+  .sidebar-mini.sidebar-collapse .main-sidebar {
+    -webkit-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    transform: translate(0, 0);
+    width: 50px!important;
+    z-index: 850;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li {
+    position: relative;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
+    margin-right: 0;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
+    border-top-right-radius: 4px;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
+    border-bottom-right-radius: 4px;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-bottom-right-radius: 4px;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right),
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
+    display: block!important;
+    position: absolute;
+    width: 180px;
+    left: 50px;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
+    top: 0;
+    margin-left: -3px;
+    padding: 12px 5px 12px 20px;
+    background-color: inherit;
+  }
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
+    top: 44px;
+    margin-left: 0;
+  }
+  .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info,
+  .sidebar-mini.sidebar-collapse .sidebar-form,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu,
+  .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right,
+  .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
+    display: none!important;
+  }
+  .sidebar-mini.sidebar-collapse .main-header .logo {
+    width: 50px;
+  }
+  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
+    display: block;
+    margin-left: -15px;
+    margin-right: -15px;
+    font-size: 18px;
+  }
+  .sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
+    display: none;
+  }
+  .sidebar-mini.sidebar-collapse .main-header .navbar {
+    margin-left: 50px;
+  }
+}
+.sidebar-menu,
+.main-sidebar .user-panel,
+.sidebar-menu > li.header {
+  white-space: nowrap!important;
+  overflow: hidden;
+}
+.sidebar-menu:hover {
+  overflow: visible;
+}
+.sidebar-form,
+.sidebar-menu > li.header {
+  overflow: hidden;
+  text-overflow: clip;
+}
+.sidebar-menu li > a {
+  position: relative;
+}
+.sidebar-menu li > a > .pull-right {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  margin-top: -7px;
+}
+/*
+ * Component: Control sidebar. By default, this is the right sidebar.
+ */
+.control-sidebar-bg {
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+}
+.control-sidebar-bg,
+.control-sidebar {
+  top: 0;
+  right: -230px;
+  width: 230px;
+  -webkit-transition: right 0.3s ease-in-out;
+  -o-transition: right 0.3s ease-in-out;
+  transition: right 0.3s ease-in-out;
+}
+.control-sidebar {
+  position: absolute;
+  padding-top: 50px;
+  z-index: 1010;
+}
+@media (max-width: 768px) {
+  .control-sidebar {
+    padding-top: 100px;
+  }
+}
+.control-sidebar > .tab-content {
+  padding: 10px 15px;
+}
+.control-sidebar.control-sidebar-open,
+.control-sidebar.control-sidebar-open + .control-sidebar-bg {
+  right: 0;
+}
+.control-sidebar-open .control-sidebar-bg,
+.control-sidebar-open .control-sidebar {
+  right: 0;
+}
+@media (min-width: 768px) {
+  .control-sidebar-open .content-wrapper,
+  .control-sidebar-open .right-side,
+  .control-sidebar-open .main-footer {
+    margin-right: 230px;
+  }
+}
+.control-sidebar-tabs > li:first-of-type > a {
+  margin-left: 1px;
+}
+.control-sidebar-tabs > li:first-of-type > a,
+.control-sidebar-tabs > li:first-of-type > a:hover {
+  border-left-width: 0!important;
+}
+.control-sidebar-tabs > li > a {
+  border-radius: 0 !important;
+}
+.control-sidebar-tabs > li > a,
+.control-sidebar-tabs > li > a:hover {
+  border-top: none;
+  border-right: none;
+  border-left: 1px solid transparent!important;
+  border-bottom: 1px solid transparent!important;
+}
+.control-sidebar-tabs > li > a .icon {
+  font-size: 16px;
+}
+.control-sidebar-tabs > li.active > a,
+.control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-tabs > li.active > a:active {
+  border-top: none!important;
+  border-right: none!important;
+  border-bottom: none!important;
+}
+@media (max-width: 768px) {
+  .control-sidebar-tabs {
+    display: table;
+  }
+  .control-sidebar-tabs > li {
+    display: table-cell !important;
+  }
+}
+.control-sidebar-heading {
+  font-weight: 400;
+  font-size: 16px;
+  padding: 10px 0;
+  margin-bottom: 10px;
+}
+.control-sidebar-subheading {
+  display: block;
+  font-weight: 400;
+  font-size: 14px;
+}
+.control-sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0 -15px;
+}
+.control-sidebar-menu > li > a {
+  display: block;
+  padding: 10px 15px;
+}
+.control-sidebar-menu > li > a:before,
+.control-sidebar-menu > li > a:after {
+  content: " ";
+  display: table;
+}
+.control-sidebar-menu > li > a:after {
+  clear: both;
+}
+.control-sidebar-menu > li > a > .control-sidebar-subheading {
+  margin-top: 0;
+}
+.control-sidebar-menu .menu-icon {
+  float: left;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 35px;
+}
+.control-sidebar-menu .menu-info {
+  margin-left: 45px;
+  margin-top: 3px;
+}
+.control-sidebar-menu .menu-info > .control-sidebar-subheading {
+  margin: 0;
+}
+.control-sidebar-menu .menu-info > p {
+  margin: 0;
+  font-size: 11px;
+}
+.control-sidebar-menu .progress {
+  margin: 0;
+}
+.control-sidebar-dark {
+  color: #b8c7ce;
+}
+.control-sidebar-dark,
+.control-sidebar-dark + .control-sidebar-bg {
+  background: #222d32;
+}
+.control-sidebar-dark .control-sidebar-tabs {
+  border-bottom: #1c2529;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a {
+  background: #181f23;
+  color: #b8c7ce;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a,
+.control-sidebar-dark .control-sidebar-tabs > li > a:hover {
+  border-left-color: #141a1d !important;
+  border-bottom-color: #141a1d !important;
+}
+.control-sidebar-dark .control-sidebar-tabs > li > a:hover,
+.control-sidebar-dark .control-sidebar-tabs > li > a:focus,
+.control-sidebar-dark .control-sidebar-tabs > li > a:active {
+  background: #1c2529;
+}
+.control-sidebar-dark .control-sidebar-tabs > li.active > a,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-dark .control-sidebar-tabs > li.active > a:active {
+  background: #222d32;
+  color: #fff;
+}
+.control-sidebar-dark .control-sidebar-heading,
+.control-sidebar-dark .control-sidebar-subheading {
+  color: #fff;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a:hover {
+  background: #1e282c;
+}
+.control-sidebar-dark .control-sidebar-menu > li > a .menu-info > p {
+  color: #b8c7ce;
+}
+.control-sidebar-light {
+  color: #5e5e5e;
+}
+.control-sidebar-light,
+.control-sidebar-light + .control-sidebar-bg {
+  background: #f9fafc;
+  border-left: 1px solid #d2d6de;
+}
+.control-sidebar-light .control-sidebar-tabs {
+  border-bottom: #d2d6de;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a {
+  background: #e8ecf4;
+  color: #444444;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a,
+.control-sidebar-light .control-sidebar-tabs > li > a:hover {
+  border-left-color: #d2d6de !important;
+  border-bottom-color: #d2d6de !important;
+}
+.control-sidebar-light .control-sidebar-tabs > li > a:hover,
+.control-sidebar-light .control-sidebar-tabs > li > a:focus,
+.control-sidebar-light .control-sidebar-tabs > li > a:active {
+  background: #eff1f7;
+}
+.control-sidebar-light .control-sidebar-tabs > li.active > a,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:hover,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:focus,
+.control-sidebar-light .control-sidebar-tabs > li.active > a:active {
+  background: #f9fafc;
+  color: #111;
+}
+.control-sidebar-light .control-sidebar-heading,
+.control-sidebar-light .control-sidebar-subheading {
+  color: #111;
+}
+.control-sidebar-light .control-sidebar-menu {
+  margin-left: -14px;
+}
+.control-sidebar-light .control-sidebar-menu > li > a:hover {
+  background: #f4f4f5;
+}
+.control-sidebar-light .control-sidebar-menu > li > a .menu-info > p {
+  color: #5e5e5e;
+}
 /*
 * Component: Dropdown menus
 * -------------------------
 */
 /*Dropdowns in general*/
 .dropdown-menu {
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: none;
  border-color: #eee;
 }
 .dropdown-menu > li > a {
@@ -564,10 +907,10 @@ a:focus {
 .dropdown-menu > .divider {
  background-color: #eee;
 }
-/*
-    Navbar custom dropdown menu
------------------------------------
-*/
+.navbar-nav .dropdown-menu {
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
 .navbar-nav > .notifications-menu,
 .navbar-nav > .messages-menu,
 .navbar-nav > .tasks-menu {
@@ -831,23 +1174,23 @@ a:focus {
 }
@-webkit-keyframes flipInX {
  0% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-    transition-timing-function: ease-in;
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    -webkit-transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-    transition-timing-function: ease-in;
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    -webkit-transition-timing-function: ease-in;
  }
  60% {
-    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
-    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
-    transform: perspective(400px);
+    -webkit-transform: perspective(400px);
  }
 }
 /* Fix dropdown menu in navbars */
@@ -1298,19 +1641,23 @@ a:focus {
  margin-bottom: 0.3em;
 }
 .box > .overlay,
-.box > .loading-img {
+.overlay-wrapper > .overlay,
+.box > .loading-img,
+.overlay-wrapper > .loading-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
-.box .overlay {
-  z-index: 1010;
+.box .overlay,
+.overlay-wrapper .overlay {
+  z-index: 50;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 3px;
 }
-.box .overlay > .fa {
+.box .overlay > .fa,
+.overlay-wrapper .overlay > .fa {
  position: absolute;
  top: 50%;
  left: 50%;
@@ -1319,23 +1666,30 @@ a:focus {
  color: #000;
  font-size: 30px;
 }
-.box .overlay.dark {
+.box .overlay.dark,
+.overlay-wrapper .overlay.dark {
  background: rgba(0, 0, 0, 0.5);
 }
+.box-header:before,
+.box-body:before,
+.box-footer:before,
+.box-header:after,
+.box-body:after,
+.box-footer:after {
+  content: " ";
+  display: table;
+}
+.box-header:after,
+.box-body:after,
+.box-footer:after {
+  clear: both;
+}
 .box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
 }
-.box-header:before,
-.box-header:after {
-  content: " ";
-  display: table;
-}
-.box-header:after {
-  clear: both;
-}
 .box-header.with-border {
  border-bottom: 1px solid #f4f4f4;
 }
@@ -1396,15 +1750,6 @@ a:focus {
 .box-body > .table {
  margin-bottom: 0;
 }
-.box-body > .chart {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-.box-body > .chart svg,
-.box-body > .chart canvas {
-  width: 100%!important;
-}
 .box-body .fc {
  margin-top: 5px;
 }
@@ -1981,6 +2326,12 @@ a:focus {
 * Component: Nav
 * --------------
 */
+.nav > li > a:hover,
+.nav > li > a:active,
+.nav > li > a:focus {
+  color: #444;
+  background: #f7f7f7;
+}
 /* NAV PILLS */
 .nav-pills > li > a {
  border-radius: 0;
@@ -1993,17 +2344,13 @@ a:focus {
  margin-right: 5px;
 }
 .nav-pills > li.active > a,
-.nav-pills > li.active > a:hover {
-  background-color: #f4f4f4;
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
  border-top-color: #3c8dbc;
-  color: #444;
 }
 .nav-pills > li.active > a {
  font-weight: 600;
 }
-.nav-pills > li > a:hover {
-  background-color: #f6f6f6;
-}
 /* NAV STACKED */
 .nav-stacked > li > a {
  border-radius: 0;
@@ -2013,10 +2360,8 @@ a:focus {
 }
 .nav-stacked > li.active > a,
 .nav-stacked > li.active > a:hover {
-  background-color: #f4f4f4;
  border-top: 0;
  border-left-color: #3c8dbc;
-  color: #444;
 }
 .nav-stacked > li.header {
  border-bottom: 1px solid #ddd;
@@ -2044,6 +2389,7 @@ a:focus {
  margin-right: 5px;
 }
 .nav-tabs-custom > .nav-tabs > li > a {
+  color: #444;
  border-radius: 0 !important;
 }
 .nav-tabs-custom > .nav-tabs > li > a,
@@ -2051,6 +2397,9 @@ a:focus {
  background: transparent;
  margin: 0;
 }
+.nav-tabs-custom > .nav-tabs > li > a:hover {
+  color: #999;
+}
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
 .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
@@ -2062,9 +2411,10 @@ a:focus {
 .nav-tabs-custom > .nav-tabs > li.active > a,
 .nav-tabs-custom > .nav-tabs > li.active:hover > a {
  background-color: #fff;
+  color: #444;
 }
 .nav-tabs-custom > .nav-tabs > li.active > a {
-  border-top: 0;
+  border-top-color: transparent;
  border-left-color: #f4f4f4;
  border-right-color: #f4f4f4;
 }
@@ -2072,7 +2422,7 @@ a:focus {
  margin-left: 0;
 }
 .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
-  border-left-width: 0;
+  border-left-color: transparent;
 }
 .nav-tabs-custom > .nav-tabs.pull-right {
  float: none!important;
@@ -2083,9 +2433,12 @@ a:focus {
 .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
  margin-right: 0;
 }
-.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
  border-left-width: 1px;
-  border-right-width: 0;
+}
+.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
+  border-left-color: #f4f4f4;
+  border-right-color: transparent;
 }
 .nav-tabs-custom > .nav-tabs > li.header {
  line-height: 35px;
@@ -2104,21 +2457,16 @@ a:focus {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
 }
-/* Nav tabs bottom */
-.tabs-bottom.nav-3 li a {
-  width: 3333.33333333% !important;
-}
-.tabs-bottom li a {
-  border: 0;
+.nav-tabs-custom .dropdown.open > a:active,
+.nav-tabs-custom .dropdown.open > a:focus {
+  background: transparent;
+  color: #999;
 }
 /* PAGINATION */
 .pagination > li > a {
  background: #fafafa;
  color: #666;
-}
-.pagination > li:first-of-type a,
-.pagination > li:last-of-type a {
-  border-radius: 0;
+  border-radius: 0 !important;
 }
 /*
 * Component: Products List
@@ -2346,10 +2694,10 @@ table.text-center th {
  transform: translate(0, 0);
 }
 .direct-chat-contacts {
-  -webkit-transform: translate(100%, 0);
-  -ms-transform: translate(100%, 0);
-  -o-transform: translate(100%, 0);
-  transform: translate(100%, 0);
+  -webkit-transform: translate(101%, 0);
+  -ms-transform: translate(101%, 0);
+  -o-transform: translate(101%, 0);
+  transform: translate(101%, 0);
  position: absolute;
  top: 0;
  bottom: 0;
@@ -2456,11 +2804,15 @@ table.text-center th {
  padding: 10px;
  text-align: center;
 }
-.users-list > li > img {
+.users-list > li img {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
 }
+.users-list > li > a:hover,
+.users-list > li > a:hover .users-list-name {
+  color: #999;
+}
 .users-list-name,
 .users-list-date {
  display: block;
@@ -2472,9 +2824,6 @@ table.text-center th {
  white-space: nowrap;
  text-overflow: ellipsis;
 }
-.users-list-name:hover {
-  color: #999;
-}
 .users-list-date {
  color: #999;
  font-size: 12px;
@@ -2608,52 +2957,6 @@ table.text-center th {
  max-width: 100%;
  height: auto;
 }
-.mailbox .table-mailbox {
-  border-left: 1px solid #f4f4f4;
-  border-right: 1px solid #f4f4f4;
-  border-bottom: 1px solid #f4f4f4;
-}
-.mailbox .table-mailbox tr.unread > td {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: #000;
-  font-weight: 600;
-}
-.mailbox .table-mailbox tr > td > .fa.fa-star,
-.mailbox .table-mailbox tr > td > .fa.fa-star-o,
-.mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star,
-.mailbox .table-mailbox tr > td > .glyphicon.glyphicon-star-empty {
-  color: #f39c12;
-  cursor: pointer;
-}
-.mailbox .table-mailbox tr > td.small-col {
-  width: 30px;
-}
-.mailbox .table-mailbox tr > td.name {
-  width: 150px;
-  font-weight: 600;
-}
-.mailbox .table-mailbox tr > td.time {
-  text-align: right;
-  width: 100px;
-}
-.mailbox .table-mailbox tr > td {
-  white-space: nowrap;
-}
-.mailbox .table-mailbox tr > td > a {
-  color: #444;
-}
-@media (max-width: 991px) {
-  .mailbox .nav-stacked > li:not(.header) {
-    float: left;
-    width: 50%;
-  }
-  .mailbox .nav-stacked > li:not(.header).header {
-    border: 0!important;
-  }
-  .mailbox .search-form {
-    margin-top: 10px;
-  }
-}
 /*
 * Page: Lock Screen
 * -----------------
@@ -3581,7 +3884,6 @@ fieldset[disabled] .btn-vk.active {
 * General: Miscellaneous
 * ----------------------
 */
-/* 10px padding and margins */
 .pad {
  padding: 10px;
 }
@@ -3591,12 +3893,10 @@ fieldset[disabled] .btn-vk.active {
 .margin-bottom {
  margin-bottom: 20px;
 }
-/* Display inline */
 .inline {
  display: inline;
  width: auto;
 }
-/* Description Blocks */
 .description-block {
  display: block;
  margin: 10px 0;
@@ -3614,7 +3914,6 @@ fieldset[disabled] .btn-vk.active {
 .description-block > .description-text {
  text-transform: uppercase;
 }
-/* Background colors */
 .bg-red,
 .bg-yellow,
 .bg-aqua,
@@ -3807,7 +4106,6 @@ fieldset[disabled] .btn-vk.active {
  opacity: 0.65;
  filter: alpha(opacity=65);
 }
-/* Text colors */
 .text-red {
  color: #dd4b39 !important;
 }
@@ -3856,27 +4154,21 @@ fieldset[disabled] .btn-vk.active {
 .text-maroon {
  color: #d81b60 !important;
 }
-/*Hide elements by display none only*/
 .hide {
  display: none !important;
 }
-/* Remove borders */
 .no-border {
  border: 0px !important;
 }
-/* Remove padding */
 .no-padding {
  padding: 0px !important;
 }
-/* Remove margins */
 .no-margin {
  margin: 0px !important;
 }
-/* Remove box shadow */
 .no-shadow {
  box-shadow: none!important;
 }
-/* Unstyled List */
 .list-unstyled,
 .chart-legend,
 .contacts-list,
@@ -3886,7 +4178,6 @@ fieldset[disabled] .btn-vk.active {
  margin: 0;
  padding: 0;
 }
-/* Remove border radius */
 .flat {
  border-radius: 0 !important;
 }
@@ -3895,15 +4186,11 @@ fieldset[disabled] .btn-vk.active {
 .text-bold.table th {
  font-weight: 700;
 }
-/* _fix for sparkline tooltip */
 .jqstooltip {
  padding: 5px!important;
  width: auto!important;
  height: auto!important;
 }
-/*
-Gradient Background colors
-*/
 .bg-teal-gradient {
  background: #39cccc !important;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #39cccc), color-stop(1, #7adddd)) !important;
@@ -4020,6 +4307,15 @@ Gradient Background colors
  opacity: 1;
  filter: alpha(opacity=100);
 }
+.chart {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+.chart svg,
+.chart canvas {
+  width: 100%!important;
+}
 /*
 * Misc: print
 * -----------
--- a/dist/css/AdminLTE.min.css
+++ b/dist/css/AdminLTE.min.css
--- a/dist/css/skins/_all-skins.css
+++ b/dist/css/skins/_all-skins.css
--- a/dist/css/skins/_all-skins.min.css
+++ b/dist/css/skins/_all-skins.min.css
--- a/dist/css/skins/skin-black-light.css
+++ b/dist/css/skins/skin-black-light.css
@@ -0,0 +1,175 @@
+/*
+ * Skin: Black
+ * -----------
+ */
+/* skin-black navbar */
+.skin-black-light .main-header {
+  -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+}
+.skin-black-light .main-header .navbar-toggle {
+  color: #333;
+}
+.skin-black-light .main-header .navbar-brand {
+  color: #333;
+  border-right: 1px solid #eee;
+}
+.skin-black-light .main-header > .navbar {
+  background-color: #ffffff;
+}
+.skin-black-light .main-header > .navbar .nav > li > a {
+  color: #333333;
+}
+.skin-black-light .main-header > .navbar .nav > li > a:hover,
+.skin-black-light .main-header > .navbar .nav > li > a:active,
+.skin-black-light .main-header > .navbar .nav > li > a:focus,
+.skin-black-light .main-header > .navbar .nav .open > a,
+.skin-black-light .main-header > .navbar .nav .open > a:hover,
+.skin-black-light .main-header > .navbar .nav .open > a:focus {
+  background: #ffffff;
+  color: #999999;
+}
+.skin-black-light .main-header > .navbar .sidebar-toggle {
+  color: #333333;
+}
+.skin-black-light .main-header > .navbar .sidebar-toggle:hover {
+  color: #999999;
+  background: #ffffff;
+}
+.skin-black-light .main-header > .navbar > .sidebar-toggle {
+  color: #333;
+  border-right: 1px solid #eee;
+}
+.skin-black-light .main-header > .navbar .navbar-nav > li > a {
+  border-right: 1px solid #eee;
+}
+.skin-black-light .main-header > .navbar .navbar-custom-menu .navbar-nav > li > a,
+.skin-black-light .main-header > .navbar .navbar-right > li > a {
+  border-left: 1px solid #eee;
+  border-right-width: 0;
+}
+.skin-black-light .main-header > .logo {
+  background-color: #ffffff;
+  color: #333333;
+  border-bottom: 0px solid transparent;
+  border-right: 1px solid #eee;
+}
+.skin-black-light .main-header > .logo:hover {
+  background-color: #fcfcfc;
+}
+@media (max-width: 767px) {
+  .skin-black-light .main-header > .logo {
+    background-color: #222222;
+    color: #ffffff;
+    border-bottom: 0px solid transparent;
+    border-right: none;
+  }
+  .skin-black-light .main-header > .logo:hover {
+    background-color: #1f1f1f;
+  }
+}
+.skin-black-light .main-header li.user-header {
+  background-color: #222;
+}
+.skin-black-light .content-header {
+  background: transparent;
+  box-shadow: none;
+}
+.skin-black-light .wrapper,
+.skin-black-light .main-sidebar,
+.skin-black-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-black-light .content-wrapper,
+.skin-black-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-black-light .user-panel > .info,
+.skin-black-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-black-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-black-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-black-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-black-light .sidebar-menu > li:hover > a,
+.skin-black-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-black-light .sidebar-menu > li.active {
+  border-left-color: #ffffff;
+}
+.skin-black-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-black-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-black-light .sidebar a {
+  color: #444444;
+}
+.skin-black-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-black-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-black-light .treeview-menu > li.active > a,
+.skin-black-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-black-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-black-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-black-light .sidebar-form input[type="text"],
+.skin-black-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-black-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-black-light .sidebar-form input[type="text"]:focus,
+.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-black-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-black-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
--- a/dist/css/skins/skin-black-light.min.css
+++ b/dist/css/skins/skin-black-light.min.css
@@ -0,0 +1 @@
+.skin-black-light .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black-light .main-header .navbar-toggle{color:#333}.skin-black-light .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black-light .main-header>.navbar{background-color:#fff}.skin-black-light .main-header>.navbar .nav>li>a{color:#333}.skin-black-light .main-header>.navbar .nav>li>a:hover,.skin-black-light .main-header>.navbar .nav>li>a:active,.skin-black-light .main-header>.navbar .nav>li>a:focus,.skin-black-light .main-header>.navbar .nav .open>a,.skin-black-light .main-header>.navbar .nav .open>a:hover,.skin-black-light .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black-light .main-header>.navbar .sidebar-toggle{color:#333}.skin-black-light .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black-light .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black-light .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black-light .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black-light .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black-light .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black-light .main-header>.logo:hover{background-color:#fcfcfc}@media (max-width:767px){.skin-black-light .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black-light .main-header>.logo:hover{background-color:#1f1f1f}}.skin-black-light .main-header li.user-header{background-color:#222}.skin-black-light .content-header{background:transparent;box-shadow:none}.skin-black-light .wrapper,.skin-black-light .main-sidebar,.skin-black-light .left-side{background-color:#f9fafc}.skin-black-light .content-wrapper,.skin-black-light .main-footer{border-left:1px solid #d2d6de}.skin-black-light .user-panel>.info,.skin-black-light .user-panel>.info>a{color:#444}.skin-black-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-black-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-black-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-black-light .sidebar-menu>li:hover>a,.skin-black-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-black-light .sidebar-menu>li.active{border-left-color:#fff}.skin-black-light .sidebar-menu>li.active>a{font-weight:600}.skin-black-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-black-light .sidebar a{color:#444}.skin-black-light .sidebar a:hover{text-decoration:none}.skin-black-light .treeview-menu>li>a{color:#777}.skin-black-light .treeview-menu>li.active>a,.skin-black-light .treeview-menu>li>a:hover{color:#000}.skin-black-light .treeview-menu>li.active>a{font-weight:600}.skin-black-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-black-light .sidebar-form input[type="text"],.skin-black-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-black-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black-light .sidebar-form input[type="text"]:focus,.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
--- a/dist/css/skins/skin-black.css
+++ b/dist/css/skins/skin-black.css
@@ -29,9 +29,6 @@
  background: #ffffff;
  color: #999999;
 }
-.skin-black .main-header > .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-black .main-header > .navbar .sidebar-toggle {
  color: #333333;
 }
@@ -57,11 +54,8 @@
  border-bottom: 0px solid transparent;
  border-right: 1px solid #eee;
 }
-.skin-black .main-header > .logo > a {
-  color: #333333;
-}
 .skin-black .main-header > .logo:hover {
-  background: #fcfcfc;
+  background-color: #fcfcfc;
 }
@media (max-width: 767px) {
  .skin-black .main-header > .logo {
@@ -70,11 +64,8 @@
    border-bottom: 0px solid transparent;
    border-right: none;
  }
-  .skin-black .main-header > .logo > a {
-    color: #ffffff;
-  }
  .skin-black .main-header > .logo:hover {
-    background: #1f1f1f;
+    background-color: #1f1f1f;
  }
 }
 .skin-black .main-header li.user-header {
@@ -84,62 +75,59 @@
  background: transparent;
  box-shadow: none;
 }
-.skin-black .user-panel > .image > img {
-  border: 1px solid #444;
+.skin-black .wrapper,
+.skin-black .main-sidebar,
+.skin-black .left-side {
+  background-color: #222d32;
 }
 .skin-black .user-panel > .info,
 .skin-black .user-panel > .info > a {
-  color: #eee;
+  color: #fff;
 }
-.skin-black .main-sidebar,
-.skin-black .left-side,
-.skin-black .wrapper {
-  background: #222;
+.skin-black .sidebar-menu > li.header {
+  color: #4b646f;
+  background: #1a2226;
 }
-.skin-black .sidebar > .sidebar-menu > li.header {
-  background: #1d1d1d;
-  color: rgba(255, 255, 255, 0.4);
-}
-.skin-black .sidebar > .sidebar-menu > li > a {
-  margin-right: 1px;
+.skin-black .sidebar-menu > li > a {
  border-left: 3px solid transparent;
 }
-.skin-black .sidebar > .sidebar-menu > li > a:hover,
-.skin-black .sidebar > .sidebar-menu > li.active > a {
-  color: #fff;
-  background: #444;
-  border-left-color: #fff;
+.skin-black .sidebar-menu > li:hover > a,
+.skin-black .sidebar-menu > li.active > a {
+  color: #ffffff;
+  background: #1e282c;
+  border-left-color: #ffffff;
 }
-.skin-black .sidebar > .sidebar-menu > li > .treeview-menu {
-  background: #333;
+.skin-black .sidebar-menu > li > .treeview-menu {
+  margin: 0 1px;
+  background: #2c3b41;
 }
 .skin-black .sidebar a {
-  color: #eee;
+  color: #b8c7ce;
 }
 .skin-black .sidebar a:hover {
  text-decoration: none;
 }
 .skin-black .treeview-menu > li > a {
-  color: #ccc;
+  color: #8aa4af;
 }
 .skin-black .treeview-menu > li.active > a,
 .skin-black .treeview-menu > li > a:hover {
-  color: #fff;
+  color: #ffffff;
 }
 .skin-black .sidebar-form {
  border-radius: 3px;
-  border: 1px solid #3c3c3c;
+  border: 1px solid #374850;
  margin: 10px 10px;
 }
 .skin-black .sidebar-form input[type="text"],
 .skin-black .sidebar-form .btn {
  box-shadow: none;
-  background-color: #3c3c3c;
+  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-black .sidebar-form input[type="text"] {
  color: #666;
--- a/dist/css/skins/skin-black.min.css
+++ b/dist/css/skins/skin-black.min.css
@@ -1 +1 @@
-.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo>a{color:#333}.skin-black .main-header>.logo:hover{background:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo>a{color:#fff}.skin-black .main-header>.logo:hover{background:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .user-panel>.image>img{border:1px solid #444}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#eee}.skin-black .main-sidebar,.skin-black .left-side,.skin-black .wrapper{background:#222}.skin-black .sidebar>.sidebar-menu>li.header{background:#1d1d1d;color:rgba(255,255,255,0.4)}.skin-black .sidebar>.sidebar-menu>li>a{margin-right:1px;border-left:3px solid transparent}.skin-black .sidebar>.sidebar-menu>li>a:hover,.skin-black .sidebar>.sidebar-menu>li.active>a{color:#fff;background:#444;border-left-color:#fff}.skin-black .sidebar>.sidebar-menu>li>.treeview-menu{background:#333}.skin-black .sidebar a{color:#eee}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#ccc}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #3c3c3c;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#3c3c3c;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
+.skin-black .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black .main-header .navbar-toggle{color:#333}.skin-black .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar{background-color:#fff}.skin-black .main-header>.navbar .nav>li>a{color:#333}.skin-black .main-header>.navbar .nav>li>a:hover,.skin-black .main-header>.navbar .nav>li>a:active,.skin-black .main-header>.navbar .nav>li>a:focus,.skin-black .main-header>.navbar .nav .open>a,.skin-black .main-header>.navbar .nav .open>a:hover,.skin-black .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black .main-header>.navbar .sidebar-toggle{color:#333}.skin-black .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black .main-header>.logo:hover{background-color:#fcfcfc}@media (max-width:767px){.skin-black .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black .main-header>.logo:hover{background-color:#1f1f1f}}.skin-black .main-header li.user-header{background-color:#222}.skin-black .content-header{background:transparent;box-shadow:none}.skin-black .wrapper,.skin-black .main-sidebar,.skin-black .left-side{background-color:#222d32}.skin-black .user-panel>.info,.skin-black .user-panel>.info>a{color:#fff}.skin-black .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-black .sidebar-menu>li>a{border-left:3px solid transparent}.skin-black .sidebar-menu>li:hover>a,.skin-black .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#fff}.skin-black .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-black .sidebar a{color:#b8c7ce}.skin-black .sidebar a:hover{text-decoration:none}.skin-black .treeview-menu>li>a{color:#8aa4af}.skin-black .treeview-menu>li.active>a,.skin-black .treeview-menu>li>a:hover{color:#fff}.skin-black .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-black .sidebar-form input[type="text"],.skin-black .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-black .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black .sidebar-form input[type="text"]:focus,.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
--- a/dist/css/skins/skin-blue-light.css
+++ b/dist/css/skins/skin-blue-light.css
@@ -0,0 +1,166 @@
+/*
+ * Skin: Blue
+ * ----------
+ */
+.skin-blue-light .main-header .navbar {
+  background-color: #3c8dbc;
+}
+.skin-blue-light .main-header .navbar .nav > li > a {
+  color: #ffffff;
+}
+.skin-blue-light .main-header .navbar .nav > li > a:hover,
+.skin-blue-light .main-header .navbar .nav > li > a:active,
+.skin-blue-light .main-header .navbar .nav > li > a:focus,
+.skin-blue-light .main-header .navbar .nav .open > a,
+.skin-blue-light .main-header .navbar .nav .open > a:hover,
+.skin-blue-light .main-header .navbar .nav .open > a:focus {
+  background: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle {
+  color: #ffffff;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background: rgba(0, 0, 0, 0.1);
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle {
+  color: #fff;
+}
+.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
+  background-color: #367fa9;
+}
+@media (max-width: 767px) {
+  .skin-blue-light .main-header .navbar .dropdown-menu li.divider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .skin-blue-light .main-header .navbar .dropdown-menu li a {
+    color: #fff;
+  }
+  .skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
+    background: #367fa9;
+  }
+}
+.skin-blue-light .main-header .logo {
+  background-color: #3c8dbc;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-blue-light .main-header .logo:hover {
+  background-color: #3b8ab8;
+}
+.skin-blue-light .main-header li.user-header {
+  background-color: #3c8dbc;
+}
+.skin-blue-light .content-header {
+  background: transparent;
+}
+.skin-blue-light .wrapper,
+.skin-blue-light .main-sidebar,
+.skin-blue-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-blue-light .content-wrapper,
+.skin-blue-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-blue-light .user-panel > .info,
+.skin-blue-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-blue-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-blue-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-blue-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-blue-light .sidebar-menu > li:hover > a,
+.skin-blue-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-blue-light .sidebar-menu > li.active {
+  border-left-color: #3c8dbc;
+}
+.skin-blue-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-blue-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-blue-light .sidebar a {
+  color: #444444;
+}
+.skin-blue-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-blue-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-blue-light .treeview-menu > li.active > a,
+.skin-blue-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-blue-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-blue-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-blue-light .sidebar-form input[type="text"],
+.skin-blue-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-blue-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-blue-light .sidebar-form input[type="text"]:focus,
+.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-blue-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
+.skin-blue-light .main-footer {
+  border-top-color: #d2d6de;
+}
+.skin-blue.layout-top-nav .main-header > .logo {
+  background-color: #3c8dbc;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-blue.layout-top-nav .main-header > .logo:hover {
+  background-color: #3b8ab8;
+}
--- a/dist/css/skins/skin-blue-light.min.css
+++ b/dist/css/skins/skin-blue-light.min.css
@@ -0,0 +1 @@
+.skin-blue-light .main-header .navbar{background-color:#3c8dbc}.skin-blue-light .main-header .navbar .nav>li>a{color:#fff}.skin-blue-light .main-header .navbar .nav>li>a:hover,.skin-blue-light .main-header .navbar .nav>li>a:active,.skin-blue-light .main-header .navbar .nav>li>a:focus,.skin-blue-light .main-header .navbar .nav .open>a,.skin-blue-light .main-header .navbar .nav .open>a:hover,.skin-blue-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue-light .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue-light .main-header .logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue-light .main-header .logo:hover{background-color:#3b8ab8}.skin-blue-light .main-header li.user-header{background-color:#3c8dbc}.skin-blue-light .content-header{background:transparent}.skin-blue-light .wrapper,.skin-blue-light .main-sidebar,.skin-blue-light .left-side{background-color:#f9fafc}.skin-blue-light .content-wrapper,.skin-blue-light .main-footer{border-left:1px solid #d2d6de}.skin-blue-light .user-panel>.info,.skin-blue-light .user-panel>.info>a{color:#444}.skin-blue-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-blue-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-blue-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-blue-light .sidebar-menu>li:hover>a,.skin-blue-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-blue-light .sidebar-menu>li.active{border-left-color:#3c8dbc}.skin-blue-light .sidebar-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-blue-light .sidebar a{color:#444}.skin-blue-light .sidebar a:hover{text-decoration:none}.skin-blue-light .treeview-menu>li>a{color:#777}.skin-blue-light .treeview-menu>li.active>a,.skin-blue-light .treeview-menu>li>a:hover{color:#000}.skin-blue-light .treeview-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-blue-light .sidebar-form input[type="text"],.skin-blue-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue-light .sidebar-form input[type="text"]:focus,.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}.skin-blue-light .main-footer{border-top-color:#d2d6de}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8}
--- a/dist/css/skins/skin-blue.css
+++ b/dist/css/skins/skin-blue.css
@@ -17,9 +17,6 @@
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
 }
-.skin-blue .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-blue .main-header .navbar .sidebar-toggle {
  color: #ffffff;
 }
@@ -49,11 +46,8 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-blue .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-blue .main-header .logo:hover {
-  background: #357ca5;
+  background-color: #357ca5;
 }
 .skin-blue .main-header li.user-header {
  background-color: #3c8dbc;
@@ -61,6 +55,11 @@
 .skin-blue .content-header {
  background: transparent;
 }
+.skin-blue .wrapper,
+.skin-blue .main-sidebar,
+.skin-blue .left-side {
+  background-color: #222d32;
+}
 .skin-blue .user-panel > .info,
 .skin-blue .user-panel > .info > a {
  color: #fff;
@@ -71,9 +70,8 @@
 }
 .skin-blue .sidebar-menu > li > a {
  border-left: 3px solid transparent;
-  margin-right: 1px;
 }
-.skin-blue .sidebar-menu > li > a:hover,
+.skin-blue .sidebar-menu > li:hover > a,
 .skin-blue .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
@@ -83,11 +81,6 @@
  margin: 0 1px;
  background: #2c3b41;
 }
-.skin-blue .wrapper,
-.skin-blue .main-sidebar,
-.skin-blue .left-side {
-  background: #222d32;
-}
 .skin-blue .sidebar a {
  color: #b8c7ce;
 }
@@ -112,9 +105,9 @@
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-blue .sidebar-form input[type="text"] {
  color: #666;
@@ -143,9 +136,6 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-blue.layout-top-nav .main-header > .logo > a {
-  color: #ffffff;
-}
 .skin-blue.layout-top-nav .main-header > .logo:hover {
-  background: #3b8ab8;
+  background-color: #3b8ab8;
 }
--- a/dist/css/skins/skin-blue.min.css
+++ b/dist/css/skins/skin-blue.min.css
@@ -1 +1 @@
-.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo>a{color:#fff}.skin-blue .main-header .logo:hover{background:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-blue .sidebar-menu>li>a:hover,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background:#222d32}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo>a{color:#fff}.skin-blue.layout-top-nav .main-header>.logo:hover{background:#3b8ab8}
+.skin-blue .main-header .navbar{background-color:#3c8dbc}.skin-blue .main-header .navbar .nav>li>a{color:#fff}.skin-blue .main-header .navbar .nav>li>a:hover,.skin-blue .main-header .navbar .nav>li>a:active,.skin-blue .main-header .navbar .nav>li>a:focus,.skin-blue .main-header .navbar .nav .open>a,.skin-blue .main-header .navbar .nav .open>a:hover,.skin-blue .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue .main-header .logo{background-color:#367fa9;color:#fff;border-bottom:0 solid transparent}.skin-blue .main-header .logo:hover{background-color:#357ca5}.skin-blue .main-header li.user-header{background-color:#3c8dbc}.skin-blue .content-header{background:transparent}.skin-blue .wrapper,.skin-blue .main-sidebar,.skin-blue .left-side{background-color:#222d32}.skin-blue .user-panel>.info,.skin-blue .user-panel>.info>a{color:#fff}.skin-blue .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-blue .sidebar-menu>li>a{border-left:3px solid transparent}.skin-blue .sidebar-menu>li:hover>a,.skin-blue .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#3c8dbc}.skin-blue .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-blue .sidebar a{color:#b8c7ce}.skin-blue .sidebar a:hover{text-decoration:none}.skin-blue .treeview-menu>li>a{color:#8aa4af}.skin-blue .treeview-menu>li.active>a,.skin-blue .treeview-menu>li>a:hover{color:#fff}.skin-blue .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-blue .sidebar-form input[type="text"],.skin-blue .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue .sidebar-form input[type="text"]:focus,.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8}
--- a/dist/css/skins/skin-green-light.css
+++ b/dist/css/skins/skin-green-light.css
@@ -0,0 +1,155 @@
+/*
+ * Skin: Green
+ * -----------
+ */
+.skin-green-light .main-header .navbar {
+  background-color: #00a65a;
+}
+.skin-green-light .main-header .navbar .nav > li > a {
+  color: #ffffff;
+}
+.skin-green-light .main-header .navbar .nav > li > a:hover,
+.skin-green-light .main-header .navbar .nav > li > a:active,
+.skin-green-light .main-header .navbar .nav > li > a:focus,
+.skin-green-light .main-header .navbar .nav .open > a,
+.skin-green-light .main-header .navbar .nav .open > a:hover,
+.skin-green-light .main-header .navbar .nav .open > a:focus {
+  background: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle {
+  color: #ffffff;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background: rgba(0, 0, 0, 0.1);
+}
+.skin-green-light .main-header .navbar .sidebar-toggle {
+  color: #fff;
+}
+.skin-green-light .main-header .navbar .sidebar-toggle:hover {
+  background-color: #008d4c;
+}
+@media (max-width: 767px) {
+  .skin-green-light .main-header .navbar .dropdown-menu li.divider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .skin-green-light .main-header .navbar .dropdown-menu li a {
+    color: #fff;
+  }
+  .skin-green-light .main-header .navbar .dropdown-menu li a:hover {
+    background: #008d4c;
+  }
+}
+.skin-green-light .main-header .logo {
+  background-color: #00a65a;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-green-light .main-header .logo:hover {
+  background-color: #00a157;
+}
+.skin-green-light .main-header li.user-header {
+  background-color: #00a65a;
+}
+.skin-green-light .content-header {
+  background: transparent;
+}
+.skin-green-light .wrapper,
+.skin-green-light .main-sidebar,
+.skin-green-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-green-light .content-wrapper,
+.skin-green-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-green-light .user-panel > .info,
+.skin-green-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-green-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-green-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-green-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-green-light .sidebar-menu > li:hover > a,
+.skin-green-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-green-light .sidebar-menu > li.active {
+  border-left-color: #00a65a;
+}
+.skin-green-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-green-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-green-light .sidebar a {
+  color: #444444;
+}
+.skin-green-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-green-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-green-light .treeview-menu > li.active > a,
+.skin-green-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-green-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-green-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-green-light .sidebar-form input[type="text"],
+.skin-green-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-green-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-green-light .sidebar-form input[type="text"]:focus,
+.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-green-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-green-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
--- a/dist/css/skins/skin-green-light.min.css
+++ b/dist/css/skins/skin-green-light.min.css
@@ -0,0 +1 @@
+.skin-green-light .main-header .navbar{background-color:#00a65a}.skin-green-light .main-header .navbar .nav>li>a{color:#fff}.skin-green-light .main-header .navbar .nav>li>a:hover,.skin-green-light .main-header .navbar .nav>li>a:active,.skin-green-light .main-header .navbar .nav>li>a:focus,.skin-green-light .main-header .navbar .nav .open>a,.skin-green-light .main-header .navbar .nav .open>a:hover,.skin-green-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-green-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-green-light .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green-light .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green-light .main-header .logo{background-color:#00a65a;color:#fff;border-bottom:0 solid transparent}.skin-green-light .main-header .logo:hover{background-color:#00a157}.skin-green-light .main-header li.user-header{background-color:#00a65a}.skin-green-light .content-header{background:transparent}.skin-green-light .wrapper,.skin-green-light .main-sidebar,.skin-green-light .left-side{background-color:#f9fafc}.skin-green-light .content-wrapper,.skin-green-light .main-footer{border-left:1px solid #d2d6de}.skin-green-light .user-panel>.info,.skin-green-light .user-panel>.info>a{color:#444}.skin-green-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-green-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-green-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-green-light .sidebar-menu>li:hover>a,.skin-green-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-green-light .sidebar-menu>li.active{border-left-color:#00a65a}.skin-green-light .sidebar-menu>li.active>a{font-weight:600}.skin-green-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-green-light .sidebar a{color:#444}.skin-green-light .sidebar a:hover{text-decoration:none}.skin-green-light .treeview-menu>li>a{color:#777}.skin-green-light .treeview-menu>li.active>a,.skin-green-light .treeview-menu>li>a:hover{color:#000}.skin-green-light .treeview-menu>li.active>a{font-weight:600}.skin-green-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-green-light .sidebar-form input[type="text"],.skin-green-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-green-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green-light .sidebar-form input[type="text"]:focus,.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
--- a/dist/css/skins/skin-green.css
+++ b/dist/css/skins/skin-green.css
@@ -17,9 +17,6 @@
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
 }
-.skin-green .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-green .main-header .navbar .sidebar-toggle {
  color: #ffffff;
 }
@@ -49,11 +46,8 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-green .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-green .main-header .logo:hover {
-  background: #008749;
+  background-color: #008749;
 }
 .skin-green .main-header li.user-header {
  background-color: #00a65a;
@@ -61,6 +55,11 @@
 .skin-green .content-header {
  background: transparent;
 }
+.skin-green .wrapper,
+.skin-green .main-sidebar,
+.skin-green .left-side {
+  background-color: #222d32;
+}
 .skin-green .user-panel > .info,
 .skin-green .user-panel > .info > a {
  color: #fff;
@@ -71,9 +70,8 @@
 }
 .skin-green .sidebar-menu > li > a {
  border-left: 3px solid transparent;
-  margin-right: 1px;
 }
-.skin-green .sidebar-menu > li > a:hover,
+.skin-green .sidebar-menu > li:hover > a,
 .skin-green .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
@@ -83,11 +81,6 @@
  margin: 0 1px;
  background: #2c3b41;
 }
-.skin-green .wrapper,
-.skin-green .main-sidebar,
-.skin-green .left-side {
-  background: #222d32;
-}
 .skin-green .sidebar a {
  color: #b8c7ce;
 }
@@ -112,9 +105,9 @@
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-green .sidebar-form input[type="text"] {
  color: #666;
--- a/dist/css/skins/skin-green.min.css
+++ b/dist/css/skins/skin-green.min.css
@@ -1 +1 @@
-.skin-green .main-header .navbar{background-color:#00a65a}.skin-green .main-header .navbar .nav>li>a{color:#fff}.skin-green .main-header .navbar .nav>li>a:hover,.skin-green .main-header .navbar .nav>li>a:active,.skin-green .main-header .navbar .nav>li>a:focus,.skin-green .main-header .navbar .nav .open>a,.skin-green .main-header .navbar .nav .open>a:hover,.skin-green .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green .main-header .navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green .main-header .logo{background-color:#008d4c;color:#fff;border-bottom:0 solid transparent}.skin-green .main-header .logo>a{color:#fff}.skin-green .main-header .logo:hover{background:#008749}.skin-green .main-header li.user-header{background-color:#00a65a}.skin-green .content-header{background:transparent}.skin-green .user-panel>.info,.skin-green .user-panel>.info>a{color:#fff}.skin-green .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-green .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-green .sidebar-menu>li>a:hover,.skin-green .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#00a65a}.skin-green .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-green .wrapper,.skin-green .main-sidebar,.skin-green .left-side{background:#222d32}.skin-green .sidebar a{color:#b8c7ce}.skin-green .sidebar a:hover{text-decoration:none}.skin-green .treeview-menu>li>a{color:#8aa4af}.skin-green .treeview-menu>li.active>a,.skin-green .treeview-menu>li>a:hover{color:#fff}.skin-green .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-green .sidebar-form input[type="text"],.skin-green .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-green .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green .sidebar-form input[type="text"]:focus,.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
+.skin-green .main-header .navbar{background-color:#00a65a}.skin-green .main-header .navbar .nav>li>a{color:#fff}.skin-green .main-header .navbar .nav>li>a:hover,.skin-green .main-header .navbar .nav>li>a:active,.skin-green .main-header .navbar .nav>li>a:focus,.skin-green .main-header .navbar .nav .open>a,.skin-green .main-header .navbar .nav .open>a:hover,.skin-green .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green .main-header .navbar .sidebar-toggle{color:#fff}.skin-green .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green .main-header .logo{background-color:#008d4c;color:#fff;border-bottom:0 solid transparent}.skin-green .main-header .logo:hover{background-color:#008749}.skin-green .main-header li.user-header{background-color:#00a65a}.skin-green .content-header{background:transparent}.skin-green .wrapper,.skin-green .main-sidebar,.skin-green .left-side{background-color:#222d32}.skin-green .user-panel>.info,.skin-green .user-panel>.info>a{color:#fff}.skin-green .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-green .sidebar-menu>li>a{border-left:3px solid transparent}.skin-green .sidebar-menu>li:hover>a,.skin-green .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#00a65a}.skin-green .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-green .sidebar a{color:#b8c7ce}.skin-green .sidebar a:hover{text-decoration:none}.skin-green .treeview-menu>li>a{color:#8aa4af}.skin-green .treeview-menu>li.active>a,.skin-green .treeview-menu>li>a:hover{color:#fff}.skin-green .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-green .sidebar-form input[type="text"],.skin-green .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-green .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green .sidebar-form input[type="text"]:focus,.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
--- a/dist/css/skins/skin-purple-light.css
+++ b/dist/css/skins/skin-purple-light.css
@@ -0,0 +1,155 @@
+/*
+ * Skin: Purple
+ * ------------
+ */
+.skin-purple-light .main-header .navbar {
+  background-color: #605ca8;
+}
+.skin-purple-light .main-header .navbar .nav > li > a {
+  color: #ffffff;
+}
+.skin-purple-light .main-header .navbar .nav > li > a:hover,
+.skin-purple-light .main-header .navbar .nav > li > a:active,
+.skin-purple-light .main-header .navbar .nav > li > a:focus,
+.skin-purple-light .main-header .navbar .nav .open > a,
+.skin-purple-light .main-header .navbar .nav .open > a:hover,
+.skin-purple-light .main-header .navbar .nav .open > a:focus {
+  background: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle {
+  color: #ffffff;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background: rgba(0, 0, 0, 0.1);
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle {
+  color: #fff;
+}
+.skin-purple-light .main-header .navbar .sidebar-toggle:hover {
+  background-color: #555299;
+}
+@media (max-width: 767px) {
+  .skin-purple-light .main-header .navbar .dropdown-menu li.divider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .skin-purple-light .main-header .navbar .dropdown-menu li a {
+    color: #fff;
+  }
+  .skin-purple-light .main-header .navbar .dropdown-menu li a:hover {
+    background: #555299;
+  }
+}
+.skin-purple-light .main-header .logo {
+  background-color: #605ca8;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-purple-light .main-header .logo:hover {
+  background-color: #5d59a6;
+}
+.skin-purple-light .main-header li.user-header {
+  background-color: #605ca8;
+}
+.skin-purple-light .content-header {
+  background: transparent;
+}
+.skin-purple-light .wrapper,
+.skin-purple-light .main-sidebar,
+.skin-purple-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-purple-light .content-wrapper,
+.skin-purple-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-purple-light .user-panel > .info,
+.skin-purple-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-purple-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-purple-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-purple-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-purple-light .sidebar-menu > li:hover > a,
+.skin-purple-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-purple-light .sidebar-menu > li.active {
+  border-left-color: #605ca8;
+}
+.skin-purple-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-purple-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-purple-light .sidebar a {
+  color: #444444;
+}
+.skin-purple-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-purple-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-purple-light .treeview-menu > li.active > a,
+.skin-purple-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-purple-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-purple-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-purple-light .sidebar-form input[type="text"],
+.skin-purple-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-purple-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-purple-light .sidebar-form input[type="text"]:focus,
+.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-purple-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-purple-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
--- a/dist/css/skins/skin-purple-light.min.css
+++ b/dist/css/skins/skin-purple-light.min.css
@@ -0,0 +1 @@
+.skin-purple-light .main-header .navbar{background-color:#605ca8}.skin-purple-light .main-header .navbar .nav>li>a{color:#fff}.skin-purple-light .main-header .navbar .nav>li>a:hover,.skin-purple-light .main-header .navbar .nav>li>a:active,.skin-purple-light .main-header .navbar .nav>li>a:focus,.skin-purple-light .main-header .navbar .nav .open>a,.skin-purple-light .main-header .navbar .nav .open>a:hover,.skin-purple-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple-light .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple-light .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple-light .main-header .logo{background-color:#605ca8;color:#fff;border-bottom:0 solid transparent}.skin-purple-light .main-header .logo:hover{background-color:#5d59a6}.skin-purple-light .main-header li.user-header{background-color:#605ca8}.skin-purple-light .content-header{background:transparent}.skin-purple-light .wrapper,.skin-purple-light .main-sidebar,.skin-purple-light .left-side{background-color:#f9fafc}.skin-purple-light .content-wrapper,.skin-purple-light .main-footer{border-left:1px solid #d2d6de}.skin-purple-light .user-panel>.info,.skin-purple-light .user-panel>.info>a{color:#444}.skin-purple-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-purple-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-purple-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-purple-light .sidebar-menu>li:hover>a,.skin-purple-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-purple-light .sidebar-menu>li.active{border-left-color:#605ca8}.skin-purple-light .sidebar-menu>li.active>a{font-weight:600}.skin-purple-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-purple-light .sidebar a{color:#444}.skin-purple-light .sidebar a:hover{text-decoration:none}.skin-purple-light .treeview-menu>li>a{color:#777}.skin-purple-light .treeview-menu>li.active>a,.skin-purple-light .treeview-menu>li>a:hover{color:#000}.skin-purple-light .treeview-menu>li.active>a{font-weight:600}.skin-purple-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-purple-light .sidebar-form input[type="text"],.skin-purple-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-purple-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple-light .sidebar-form input[type="text"]:focus,.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
--- a/dist/css/skins/skin-purple.css
+++ b/dist/css/skins/skin-purple.css
@@ -17,9 +17,6 @@
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
 }
-.skin-purple .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-purple .main-header .navbar .sidebar-toggle {
  color: #ffffff;
 }
@@ -49,11 +46,8 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-purple .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-purple .main-header .logo:hover {
-  background: #545096;
+  background-color: #545096;
 }
 .skin-purple .main-header li.user-header {
  background-color: #605ca8;
@@ -61,6 +55,11 @@
 .skin-purple .content-header {
  background: transparent;
 }
+.skin-purple .wrapper,
+.skin-purple .main-sidebar,
+.skin-purple .left-side {
+  background-color: #222d32;
+}
 .skin-purple .user-panel > .info,
 .skin-purple .user-panel > .info > a {
  color: #fff;
@@ -71,9 +70,8 @@
 }
 .skin-purple .sidebar-menu > li > a {
  border-left: 3px solid transparent;
-  margin-right: 1px;
 }
-.skin-purple .sidebar-menu > li > a:hover,
+.skin-purple .sidebar-menu > li:hover > a,
 .skin-purple .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
@@ -83,11 +81,6 @@
  margin: 0 1px;
  background: #2c3b41;
 }
-.skin-purple .wrapper,
-.skin-purple .main-sidebar,
-.skin-purple .left-side {
-  background: #222d32;
-}
 .skin-purple .sidebar a {
  color: #b8c7ce;
 }
@@ -112,9 +105,9 @@
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-purple .sidebar-form input[type="text"] {
  color: #666;
--- a/dist/css/skins/skin-purple.min.css
+++ b/dist/css/skins/skin-purple.min.css
@@ -1 +1 @@
-.skin-purple .main-header .navbar{background-color:#605ca8}.skin-purple .main-header .navbar .nav>li>a{color:#fff}.skin-purple .main-header .navbar .nav>li>a:hover,.skin-purple .main-header .navbar .nav>li>a:active,.skin-purple .main-header .navbar .nav>li>a:focus,.skin-purple .main-header .navbar .nav .open>a,.skin-purple .main-header .navbar .nav .open>a:hover,.skin-purple .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple .main-header .navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple .main-header .logo{background-color:#555299;color:#fff;border-bottom:0 solid transparent}.skin-purple .main-header .logo>a{color:#fff}.skin-purple .main-header .logo:hover{background:#545096}.skin-purple .main-header li.user-header{background-color:#605ca8}.skin-purple .content-header{background:transparent}.skin-purple .user-panel>.info,.skin-purple .user-panel>.info>a{color:#fff}.skin-purple .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-purple .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-purple .sidebar-menu>li>a:hover,.skin-purple .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#605ca8}.skin-purple .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-purple .wrapper,.skin-purple .main-sidebar,.skin-purple .left-side{background:#222d32}.skin-purple .sidebar a{color:#b8c7ce}.skin-purple .sidebar a:hover{text-decoration:none}.skin-purple .treeview-menu>li>a{color:#8aa4af}.skin-purple .treeview-menu>li.active>a,.skin-purple .treeview-menu>li>a:hover{color:#fff}.skin-purple .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-purple .sidebar-form input[type="text"],.skin-purple .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-purple .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple .sidebar-form input[type="text"]:focus,.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
+.skin-purple .main-header .navbar{background-color:#605ca8}.skin-purple .main-header .navbar .nav>li>a{color:#fff}.skin-purple .main-header .navbar .nav>li>a:hover,.skin-purple .main-header .navbar .nav>li>a:active,.skin-purple .main-header .navbar .nav>li>a:focus,.skin-purple .main-header .navbar .nav .open>a,.skin-purple .main-header .navbar .nav .open>a:hover,.skin-purple .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple .main-header .logo{background-color:#555299;color:#fff;border-bottom:0 solid transparent}.skin-purple .main-header .logo:hover{background-color:#545096}.skin-purple .main-header li.user-header{background-color:#605ca8}.skin-purple .content-header{background:transparent}.skin-purple .wrapper,.skin-purple .main-sidebar,.skin-purple .left-side{background-color:#222d32}.skin-purple .user-panel>.info,.skin-purple .user-panel>.info>a{color:#fff}.skin-purple .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-purple .sidebar-menu>li>a{border-left:3px solid transparent}.skin-purple .sidebar-menu>li:hover>a,.skin-purple .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#605ca8}.skin-purple .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-purple .sidebar a{color:#b8c7ce}.skin-purple .sidebar a:hover{text-decoration:none}.skin-purple .treeview-menu>li>a{color:#8aa4af}.skin-purple .treeview-menu>li.active>a,.skin-purple .treeview-menu>li>a:hover{color:#fff}.skin-purple .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-purple .sidebar-form input[type="text"],.skin-purple .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-purple .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple .sidebar-form input[type="text"]:focus,.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
--- a/dist/css/skins/skin-red-light.css
+++ b/dist/css/skins/skin-red-light.css
@@ -0,0 +1,155 @@
+/*
+ * Skin: Red
+ * ---------
+ */
+.skin-red-light .main-header .navbar {
+  background-color: #dd4b39;
+}
+.skin-red-light .main-header .navbar .nav > li > a {
+  color: #ffffff;
+}
+.skin-red-light .main-header .navbar .nav > li > a:hover,
+.skin-red-light .main-header .navbar .nav > li > a:active,
+.skin-red-light .main-header .navbar .nav > li > a:focus,
+.skin-red-light .main-header .navbar .nav .open > a,
+.skin-red-light .main-header .navbar .nav .open > a:hover,
+.skin-red-light .main-header .navbar .nav .open > a:focus {
+  background: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle {
+  color: #ffffff;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background: rgba(0, 0, 0, 0.1);
+}
+.skin-red-light .main-header .navbar .sidebar-toggle {
+  color: #fff;
+}
+.skin-red-light .main-header .navbar .sidebar-toggle:hover {
+  background-color: #d73925;
+}
+@media (max-width: 767px) {
+  .skin-red-light .main-header .navbar .dropdown-menu li.divider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .skin-red-light .main-header .navbar .dropdown-menu li a {
+    color: #fff;
+  }
+  .skin-red-light .main-header .navbar .dropdown-menu li a:hover {
+    background: #d73925;
+  }
+}
+.skin-red-light .main-header .logo {
+  background-color: #dd4b39;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-red-light .main-header .logo:hover {
+  background-color: #dc4735;
+}
+.skin-red-light .main-header li.user-header {
+  background-color: #dd4b39;
+}
+.skin-red-light .content-header {
+  background: transparent;
+}
+.skin-red-light .wrapper,
+.skin-red-light .main-sidebar,
+.skin-red-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-red-light .content-wrapper,
+.skin-red-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-red-light .user-panel > .info,
+.skin-red-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-red-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-red-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-red-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-red-light .sidebar-menu > li:hover > a,
+.skin-red-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-red-light .sidebar-menu > li.active {
+  border-left-color: #dd4b39;
+}
+.skin-red-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-red-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-red-light .sidebar a {
+  color: #444444;
+}
+.skin-red-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-red-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-red-light .treeview-menu > li.active > a,
+.skin-red-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-red-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-red-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-red-light .sidebar-form input[type="text"],
+.skin-red-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-red-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-red-light .sidebar-form input[type="text"]:focus,
+.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-red-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-red-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
--- a/dist/css/skins/skin-red-light.min.css
+++ b/dist/css/skins/skin-red-light.min.css
@@ -0,0 +1 @@
+.skin-red-light .main-header .navbar{background-color:#dd4b39}.skin-red-light .main-header .navbar .nav>li>a{color:#fff}.skin-red-light .main-header .navbar .nav>li>a:hover,.skin-red-light .main-header .navbar .nav>li>a:active,.skin-red-light .main-header .navbar .nav>li>a:focus,.skin-red-light .main-header .navbar .nav .open>a,.skin-red-light .main-header .navbar .nav .open>a:hover,.skin-red-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-red-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-red-light .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red-light .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red-light .main-header .logo{background-color:#dd4b39;color:#fff;border-bottom:0 solid transparent}.skin-red-light .main-header .logo:hover{background-color:#dc4735}.skin-red-light .main-header li.user-header{background-color:#dd4b39}.skin-red-light .content-header{background:transparent}.skin-red-light .wrapper,.skin-red-light .main-sidebar,.skin-red-light .left-side{background-color:#f9fafc}.skin-red-light .content-wrapper,.skin-red-light .main-footer{border-left:1px solid #d2d6de}.skin-red-light .user-panel>.info,.skin-red-light .user-panel>.info>a{color:#444}.skin-red-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-red-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-red-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-red-light .sidebar-menu>li:hover>a,.skin-red-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-red-light .sidebar-menu>li.active{border-left-color:#dd4b39}.skin-red-light .sidebar-menu>li.active>a{font-weight:600}.skin-red-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-red-light .sidebar a{color:#444}.skin-red-light .sidebar a:hover{text-decoration:none}.skin-red-light .treeview-menu>li>a{color:#777}.skin-red-light .treeview-menu>li.active>a,.skin-red-light .treeview-menu>li>a:hover{color:#000}.skin-red-light .treeview-menu>li.active>a{font-weight:600}.skin-red-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-red-light .sidebar-form input[type="text"],.skin-red-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-red-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red-light .sidebar-form input[type="text"]:focus,.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
--- a/dist/css/skins/skin-red.css
+++ b/dist/css/skins/skin-red.css
@@ -17,9 +17,6 @@
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
 }
-.skin-red .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-red .main-header .navbar .sidebar-toggle {
  color: #ffffff;
 }
@@ -49,11 +46,8 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-red .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-red .main-header .logo:hover {
-  background: #d33724;
+  background-color: #d33724;
 }
 .skin-red .main-header li.user-header {
  background-color: #dd4b39;
@@ -61,6 +55,11 @@
 .skin-red .content-header {
  background: transparent;
 }
+.skin-red .wrapper,
+.skin-red .main-sidebar,
+.skin-red .left-side {
+  background-color: #222d32;
+}
 .skin-red .user-panel > .info,
 .skin-red .user-panel > .info > a {
  color: #fff;
@@ -71,9 +70,8 @@
 }
 .skin-red .sidebar-menu > li > a {
  border-left: 3px solid transparent;
-  margin-right: 1px;
 }
-.skin-red .sidebar-menu > li > a:hover,
+.skin-red .sidebar-menu > li:hover > a,
 .skin-red .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
@@ -83,11 +81,6 @@
  margin: 0 1px;
  background: #2c3b41;
 }
-.skin-red .wrapper,
-.skin-red .main-sidebar,
-.skin-red .left-side {
-  background: #222d32;
-}
 .skin-red .sidebar a {
  color: #b8c7ce;
 }
@@ -112,9 +105,9 @@
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-red .sidebar-form input[type="text"] {
  color: #666;
--- a/dist/css/skins/skin-red.min.css
+++ b/dist/css/skins/skin-red.min.css
@@ -1 +1 @@
-.skin-red .main-header .navbar{background-color:#dd4b39}.skin-red .main-header .navbar .nav>li>a{color:#fff}.skin-red .main-header .navbar .nav>li>a:hover,.skin-red .main-header .navbar .nav>li>a:active,.skin-red .main-header .navbar .nav>li>a:focus,.skin-red .main-header .navbar .nav .open>a,.skin-red .main-header .navbar .nav .open>a:hover,.skin-red .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red .main-header .navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red .main-header .logo{background-color:#d73925;color:#fff;border-bottom:0 solid transparent}.skin-red .main-header .logo>a{color:#fff}.skin-red .main-header .logo:hover{background:#d33724}.skin-red .main-header li.user-header{background-color:#dd4b39}.skin-red .content-header{background:transparent}.skin-red .user-panel>.info,.skin-red .user-panel>.info>a{color:#fff}.skin-red .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-red .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-red .sidebar-menu>li>a:hover,.skin-red .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#dd4b39}.skin-red .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-red .wrapper,.skin-red .main-sidebar,.skin-red .left-side{background:#222d32}.skin-red .sidebar a{color:#b8c7ce}.skin-red .sidebar a:hover{text-decoration:none}.skin-red .treeview-menu>li>a{color:#8aa4af}.skin-red .treeview-menu>li.active>a,.skin-red .treeview-menu>li>a:hover{color:#fff}.skin-red .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-red .sidebar-form input[type="text"],.skin-red .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-red .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red .sidebar-form input[type="text"]:focus,.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
+.skin-red .main-header .navbar{background-color:#dd4b39}.skin-red .main-header .navbar .nav>li>a{color:#fff}.skin-red .main-header .navbar .nav>li>a:hover,.skin-red .main-header .navbar .nav>li>a:active,.skin-red .main-header .navbar .nav>li>a:focus,.skin-red .main-header .navbar .nav .open>a,.skin-red .main-header .navbar .nav .open>a:hover,.skin-red .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red .main-header .navbar .sidebar-toggle{color:#fff}.skin-red .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red .main-header .logo{background-color:#d73925;color:#fff;border-bottom:0 solid transparent}.skin-red .main-header .logo:hover{background-color:#d33724}.skin-red .main-header li.user-header{background-color:#dd4b39}.skin-red .content-header{background:transparent}.skin-red .wrapper,.skin-red .main-sidebar,.skin-red .left-side{background-color:#222d32}.skin-red .user-panel>.info,.skin-red .user-panel>.info>a{color:#fff}.skin-red .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-red .sidebar-menu>li>a{border-left:3px solid transparent}.skin-red .sidebar-menu>li:hover>a,.skin-red .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#dd4b39}.skin-red .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-red .sidebar a{color:#b8c7ce}.skin-red .sidebar a:hover{text-decoration:none}.skin-red .treeview-menu>li>a{color:#8aa4af}.skin-red .treeview-menu>li.active>a,.skin-red .treeview-menu>li>a:hover{color:#fff}.skin-red .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-red .sidebar-form input[type="text"],.skin-red .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-red .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red .sidebar-form input[type="text"]:focus,.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
--- a/dist/css/skins/skin-yellow-light.css
+++ b/dist/css/skins/skin-yellow-light.css
@@ -0,0 +1,155 @@
+/*
+ * Skin: Yellow
+ * ------------
+ */
+.skin-yellow-light .main-header .navbar {
+  background-color: #f39c12;
+}
+.skin-yellow-light .main-header .navbar .nav > li > a {
+  color: #ffffff;
+}
+.skin-yellow-light .main-header .navbar .nav > li > a:hover,
+.skin-yellow-light .main-header .navbar .nav > li > a:active,
+.skin-yellow-light .main-header .navbar .nav > li > a:focus,
+.skin-yellow-light .main-header .navbar .nav .open > a,
+.skin-yellow-light .main-header .navbar .nav .open > a:hover,
+.skin-yellow-light .main-header .navbar .nav .open > a:focus {
+  background: rgba(0, 0, 0, 0.1);
+  color: #f6f6f6;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle {
+  color: #ffffff;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
+  color: #f6f6f6;
+  background: rgba(0, 0, 0, 0.1);
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle {
+  color: #fff;
+}
+.skin-yellow-light .main-header .navbar .sidebar-toggle:hover {
+  background-color: #e08e0b;
+}
+@media (max-width: 767px) {
+  .skin-yellow-light .main-header .navbar .dropdown-menu li.divider {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .skin-yellow-light .main-header .navbar .dropdown-menu li a {
+    color: #fff;
+  }
+  .skin-yellow-light .main-header .navbar .dropdown-menu li a:hover {
+    background: #e08e0b;
+  }
+}
+.skin-yellow-light .main-header .logo {
+  background-color: #f39c12;
+  color: #ffffff;
+  border-bottom: 0px solid transparent;
+}
+.skin-yellow-light .main-header .logo:hover {
+  background-color: #f39a0d;
+}
+.skin-yellow-light .main-header li.user-header {
+  background-color: #f39c12;
+}
+.skin-yellow-light .content-header {
+  background: transparent;
+}
+.skin-yellow-light .wrapper,
+.skin-yellow-light .main-sidebar,
+.skin-yellow-light .left-side {
+  background-color: #f9fafc;
+}
+.skin-yellow-light .content-wrapper,
+.skin-yellow-light .main-footer {
+  border-left: 1px solid #d2d6de;
+}
+.skin-yellow-light .user-panel > .info,
+.skin-yellow-light .user-panel > .info > a {
+  color: #444444;
+}
+.skin-yellow-light .sidebar-menu > li {
+  -webkit-transition: border-left-color 0.3s ease;
+  -o-transition: border-left-color 0.3s ease;
+  transition: border-left-color 0.3s ease;
+}
+.skin-yellow-light .sidebar-menu > li.header {
+  color: #848484;
+  background: #f9fafc;
+}
+.skin-yellow-light .sidebar-menu > li > a {
+  border-left: 3px solid transparent;
+  font-weight: 600;
+}
+.skin-yellow-light .sidebar-menu > li:hover > a,
+.skin-yellow-light .sidebar-menu > li.active > a {
+  color: #000000;
+  background: #f4f4f5;
+}
+.skin-yellow-light .sidebar-menu > li.active {
+  border-left-color: #f39c12;
+}
+.skin-yellow-light .sidebar-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-yellow-light .sidebar-menu > li > .treeview-menu {
+  background: #f4f4f5;
+}
+.skin-yellow-light .sidebar a {
+  color: #444444;
+}
+.skin-yellow-light .sidebar a:hover {
+  text-decoration: none;
+}
+.skin-yellow-light .treeview-menu > li > a {
+  color: #777777;
+}
+.skin-yellow-light .treeview-menu > li.active > a,
+.skin-yellow-light .treeview-menu > li > a:hover {
+  color: #000000;
+}
+.skin-yellow-light .treeview-menu > li.active > a {
+  font-weight: 600;
+}
+.skin-yellow-light .sidebar-form {
+  border-radius: 3px;
+  border: 1px solid #d2d6de;
+  margin: 10px 10px;
+}
+.skin-yellow-light .sidebar-form input[type="text"],
+.skin-yellow-light .sidebar-form .btn {
+  box-shadow: none;
+  background-color: #fff;
+  border: 1px solid transparent;
+  height: 35px;
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.skin-yellow-light .sidebar-form input[type="text"] {
+  color: #666;
+  border-top-left-radius: 2px !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 2px !important;
+}
+.skin-yellow-light .sidebar-form input[type="text"]:focus,
+.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  background-color: #fff;
+  color: #666;
+}
+.skin-yellow-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
+  border-left-color: #fff;
+}
+.skin-yellow-light .sidebar-form .btn {
+  color: #999;
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 2px !important;
+  border-bottom-right-radius: 2px !important;
+  border-bottom-left-radius: 0 !important;
+}
+@media (min-width: 768px) {
+  .skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
+    border-left: 1px solid #d2d6de;
+  }
+}
--- a/dist/css/skins/skin-yellow-light.min.css
+++ b/dist/css/skins/skin-yellow-light.min.css
@@ -0,0 +1 @@
+.skin-yellow-light .main-header .navbar{background-color:#f39c12}.skin-yellow-light .main-header .navbar .nav>li>a{color:#fff}.skin-yellow-light .main-header .navbar .nav>li>a:hover,.skin-yellow-light .main-header .navbar .nav>li>a:active,.skin-yellow-light .main-header .navbar .nav>li>a:focus,.skin-yellow-light .main-header .navbar .nav .open>a,.skin-yellow-light .main-header .navbar .nav .open>a:hover,.skin-yellow-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow-light .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow-light .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow-light .main-header .logo{background-color:#f39c12;color:#fff;border-bottom:0 solid transparent}.skin-yellow-light .main-header .logo:hover{background-color:#f39a0d}.skin-yellow-light .main-header li.user-header{background-color:#f39c12}.skin-yellow-light .content-header{background:transparent}.skin-yellow-light .wrapper,.skin-yellow-light .main-sidebar,.skin-yellow-light .left-side{background-color:#f9fafc}.skin-yellow-light .content-wrapper,.skin-yellow-light .main-footer{border-left:1px solid #d2d6de}.skin-yellow-light .user-panel>.info,.skin-yellow-light .user-panel>.info>a{color:#444}.skin-yellow-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-yellow-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-yellow-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-yellow-light .sidebar-menu>li:hover>a,.skin-yellow-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-yellow-light .sidebar-menu>li.active{border-left-color:#f39c12}.skin-yellow-light .sidebar-menu>li.active>a{font-weight:600}.skin-yellow-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-yellow-light .sidebar a{color:#444}.skin-yellow-light .sidebar a:hover{text-decoration:none}.skin-yellow-light .treeview-menu>li>a{color:#777}.skin-yellow-light .treeview-menu>li.active>a,.skin-yellow-light .treeview-menu>li>a:hover{color:#000}.skin-yellow-light .treeview-menu>li.active>a{font-weight:600}.skin-yellow-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-yellow-light .sidebar-form input[type="text"],.skin-yellow-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-yellow-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow-light .sidebar-form input[type="text"]:focus,.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
--- a/dist/css/skins/skin-yellow.css
+++ b/dist/css/skins/skin-yellow.css
@@ -17,9 +17,6 @@
  background: rgba(0, 0, 0, 0.1);
  color: #f6f6f6;
 }
-.skin-yellow .main-header .navbar .navbar-custom-menu > .nav {
-  margin-right: 10px;
-}
 .skin-yellow .main-header .navbar .sidebar-toggle {
  color: #ffffff;
 }
@@ -49,11 +46,8 @@
  color: #ffffff;
  border-bottom: 0px solid transparent;
 }
-.skin-yellow .main-header .logo > a {
-  color: #ffffff;
-}
 .skin-yellow .main-header .logo:hover {
-  background: #db8b0b;
+  background-color: #db8b0b;
 }
 .skin-yellow .main-header li.user-header {
  background-color: #f39c12;
@@ -61,6 +55,11 @@
 .skin-yellow .content-header {
  background: transparent;
 }
+.skin-yellow .wrapper,
+.skin-yellow .main-sidebar,
+.skin-yellow .left-side {
+  background-color: #222d32;
+}
 .skin-yellow .user-panel > .info,
 .skin-yellow .user-panel > .info > a {
  color: #fff;
@@ -71,9 +70,8 @@
 }
 .skin-yellow .sidebar-menu > li > a {
  border-left: 3px solid transparent;
-  margin-right: 1px;
 }
-.skin-yellow .sidebar-menu > li > a:hover,
+.skin-yellow .sidebar-menu > li:hover > a,
 .skin-yellow .sidebar-menu > li.active > a {
  color: #ffffff;
  background: #1e282c;
@@ -83,11 +81,6 @@
  margin: 0 1px;
  background: #2c3b41;
 }
-.skin-yellow .wrapper,
-.skin-yellow .main-sidebar,
-.skin-yellow .left-side {
-  background: #222d32;
-}
 .skin-yellow .sidebar a {
  color: #b8c7ce;
 }
@@ -112,9 +105,9 @@
  background-color: #374850;
  border: 1px solid transparent;
  height: 35px;
-  -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
-  transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
+  -webkit-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .skin-yellow .sidebar-form input[type="text"] {
  color: #666;
--- a/dist/css/skins/skin-yellow.min.css
+++ b/dist/css/skins/skin-yellow.min.css
@@ -1 +1 @@
-.skin-yellow .main-header .navbar{background-color:#f39c12}.skin-yellow .main-header .navbar .nav>li>a{color:#fff}.skin-yellow .main-header .navbar .nav>li>a:hover,.skin-yellow .main-header .navbar .nav>li>a:active,.skin-yellow .main-header .navbar .nav>li>a:focus,.skin-yellow .main-header .navbar .nav .open>a,.skin-yellow .main-header .navbar .nav .open>a:hover,.skin-yellow .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow .main-header .navbar .navbar-custom-menu>.nav{margin-right:10px}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow .main-header .logo{background-color:#e08e0b;color:#fff;border-bottom:0 solid transparent}.skin-yellow .main-header .logo>a{color:#fff}.skin-yellow .main-header .logo:hover{background:#db8b0b}.skin-yellow .main-header li.user-header{background-color:#f39c12}.skin-yellow .content-header{background:transparent}.skin-yellow .user-panel>.info,.skin-yellow .user-panel>.info>a{color:#fff}.skin-yellow .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-yellow .sidebar-menu>li>a{border-left:3px solid transparent;margin-right:1px}.skin-yellow .sidebar-menu>li>a:hover,.skin-yellow .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#f39c12}.skin-yellow .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-yellow .wrapper,.skin-yellow .main-sidebar,.skin-yellow .left-side{background:#222d32}.skin-yellow .sidebar a{color:#b8c7ce}.skin-yellow .sidebar a:hover{text-decoration:none}.skin-yellow .treeview-menu>li>a{color:#8aa4af}.skin-yellow .treeview-menu>li.active>a,.skin-yellow .treeview-menu>li>a:hover{color:#fff}.skin-yellow .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-yellow .sidebar-form input[type="text"],.skin-yellow .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);-o-transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15);transition:all .3s cubic-bezier(.32, 1.25, .375, 1.15)}.skin-yellow .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow .sidebar-form input[type="text"]:focus,.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
+.skin-yellow .main-header .navbar{background-color:#f39c12}.skin-yellow .main-header .navbar .nav>li>a{color:#fff}.skin-yellow .main-header .navbar .nav>li>a:hover,.skin-yellow .main-header .navbar .nav>li>a:active,.skin-yellow .main-header .navbar .nav>li>a:focus,.skin-yellow .main-header .navbar .nav .open>a,.skin-yellow .main-header .navbar .nav .open>a:hover,.skin-yellow .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow .main-header .logo{background-color:#e08e0b;color:#fff;border-bottom:0 solid transparent}.skin-yellow .main-header .logo:hover{background-color:#db8b0b}.skin-yellow .main-header li.user-header{background-color:#f39c12}.skin-yellow .content-header{background:transparent}.skin-yellow .wrapper,.skin-yellow .main-sidebar,.skin-yellow .left-side{background-color:#222d32}.skin-yellow .user-panel>.info,.skin-yellow .user-panel>.info>a{color:#fff}.skin-yellow .sidebar-menu>li.header{color:#4b646f;background:#1a2226}.skin-yellow .sidebar-menu>li>a{border-left:3px solid transparent}.skin-yellow .sidebar-menu>li:hover>a,.skin-yellow .sidebar-menu>li.active>a{color:#fff;background:#1e282c;border-left-color:#f39c12}.skin-yellow .sidebar-menu>li>.treeview-menu{margin:0 1px;background:#2c3b41}.skin-yellow .sidebar a{color:#b8c7ce}.skin-yellow .sidebar a:hover{text-decoration:none}.skin-yellow .treeview-menu>li>a{color:#8aa4af}.skin-yellow .treeview-menu>li.active>a,.skin-yellow .treeview-menu>li>a:hover{color:#fff}.skin-yellow .sidebar-form{border-radius:3px;border:1px solid #374850;margin:10px 10px}.skin-yellow .sidebar-form input[type="text"],.skin-yellow .sidebar-form .btn{box-shadow:none;background-color:#374850;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-yellow .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow .sidebar-form input[type="text"]:focus,.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}
--- a/dist/js/app.js
+++ b/dist/js/app.js
@@ -7,7 +7,7 @@
 * @Author  Almsaeed Studio
 * @Support <http://www.almsaeedstudio.com>
 * @Email   <support@almsaeedstudio.com>
- * @version 2.0.5
+ * @version 2.1.0
 * @license MIT <http://opensource.org/licenses/MIT>
 */

@@ -47,6 +47,10 @@ $.AdminLTE.options = {
  sidebarPushMenu: true,
  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
  sidebarSlimScroll: true,
+  //Enable sidebar expand on hover effect for sidebar mini
+  //This option is forced to true if both the fixed layout and sidebar mini
+  //are used together
+  sidebarExpandOnHover: false,
  //BoxRefresh Plugin
  enableBoxRefresh: true,
  //Bootstrap.js tooltip
@@ -57,18 +61,28 @@ $.AdminLTE.options = {
  //choose to enable the plugin, make sure you load the script
  //before AdminLTE's app.js
  enableFastclick: true,
+  //Control Sidebar Options
+  enableControlSidebar: true,
+  controlSidebarOptions: {
+    //Which button should trigger the open/close event
+    toggleBtnSelector: "[data-toggle='control-sidebar']",
+    //The sidebar selector
+    selector: ".control-sidebar",
+    //Enable slide over content
+    slide: true
+  },
  //Box Widget Plugin. Enable this plugin
  //to allow boxes to be collapsed and/or removed
  enableBoxWidget: true,
  //Box Widget plugin options
  boxWidgetOptions: {
    boxWidgetIcons: {
-      //The icon that triggers the collapse event
-      collapse: 'fa fa-minus',
-      //The icon that trigger the opening event
-      open: 'fa fa-plus',
-      //The icon that triggers the removing event
-      remove: 'fa fa-times'
+      //Collapse icon
+      collapse: 'fa-minus',
+      //Open icon
+      open: 'fa-plus',
+      //Remove icon
+      remove: 'fa-times'
    },
    boxWidgetSelectors: {
      //Remove button selector
@@ -122,6 +136,13 @@ $.AdminLTE.options = {
 * options above.
 */
 $(function () {
+  //Extend options if external options exist
+  if (typeof AdminLTEOptions !== "undefined") {
+    $.extend(true,
+            $.AdminLTE.options,
+            AdminLTEOptions);
+  }
+
  //Easy access to options
  var o = $.AdminLTE.options;

@@ -134,23 +155,30 @@ $(function () {
  //Enable sidebar tree view controls
  $.AdminLTE.tree('.sidebar');

+  //Enable control sidebar
+  if (o.enableControlSidebar) {
+    $.AdminLTE.controlSidebar.activate();
+  }
+
  //Add slimscroll to navbar dropdown
  if (o.navbarMenuSlimscroll && typeof $.fn.slimscroll != 'undefined') {
    $(".navbar .menu").slimscroll({
-      height: "200px",
+      height: o.navbarMenuHeight,
      alwaysVisible: false,
-      size: "3px"
+      size: o.navbarMenuSlimscrollWidth
    }).css("width", "100%");
  }

  //Activate sidebar push menu
  if (o.sidebarPushMenu) {
-    $.AdminLTE.pushMenu(o.sidebarToggleSelector);
+    $.AdminLTE.pushMenu.activate(o.sidebarToggleSelector);
  }

  //Activate Bootstrap tooltip
  if (o.enableBSToppltip) {
-    $(o.BSTooltipSelector).tooltip();
+    $('body').tooltip({
+      selector: o.BSTooltipSelector
+    });
  }

  //Activate box widget
@@ -165,7 +193,7 @@ $(function () {

  //Activate direct chat widget
  if (o.directChat.enable) {
-    $(o.directChat.contactToggleSelector).click(function () {
+    $(o.directChat.contactToggleSelector).on('click', function () {
      var box = $(this).parents('.direct-chat').first();
      box.toggleClass('direct-chat-contacts-open');
    });
@@ -177,7 +205,7 @@ $(function () {
   */
  $('.btn-group[data-toggle="btn-toggle"]').each(function () {
    var group = $(this);
-    $(this).find(".btn").click(function (e) {
+    $(this).find(".btn").on('click', function (e) {
      group.find(".btn.active").removeClass("active");
      $(this).addClass("active");
      e.preventDefault();
@@ -222,11 +250,22 @@ function _init() {
      if ($("body").hasClass("fixed")) {
        $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
      } else {
+        var postSetWidth;
        if (window_height >= sidebar_height) {
          $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+          postSetWidth = window_height - neg;
        } else {
          $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+          postSetWidth = sidebar_height;
        }
+
+        //Fix for the control sidebar height
+        var controlSidebar = $($.AdminLTE.options.controlSidebarOptions.selector);
+        if (typeof controlSidebar !== "undefined") {
+          if (controlSidebar.height() > postSetWidth)
+            $(".content-wrapper, .right-side").css('min-height', controlSidebar.height());
+        }
+
      }
    },
    fixSidebar: function () {
@@ -242,7 +281,7 @@ function _init() {
      //Enable slimscroll for fixed layout
      if ($.AdminLTE.options.sidebarSlimScroll) {
        if (typeof $.fn.slimScroll != 'undefined') {
-          //Distroy if it exists
+          //Destroy if it exists
          $(".sidebar").slimScroll({destroy: true}).height("auto");
          //Add slimscroll
          $(".sidebar").slimscroll({
@@ -262,36 +301,71 @@ function _init() {
   * @type Function
   * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
   */
-  $.AdminLTE.pushMenu = function (toggleBtn) {
-    //Get the screen sizes
-    var screenSizes = this.options.screenSizes;
+  $.AdminLTE.pushMenu = {
+    activate: function (toggleBtn) {
+      //Get the screen sizes
+      var screenSizes = $.AdminLTE.options.screenSizes;

-    //Enable sidebar toggle
-    $(toggleBtn).click(function (e) {
-      e.preventDefault();
+      //Enable sidebar toggle
+      $(toggleBtn).on('click', function (e) {
+        e.preventDefault();

-      //Enable sidebar push menu
-      if ($(window).width() > (screenSizes.sm - 1)) {
-        $("body").toggleClass('sidebar-collapse');
-      }
-      //Handle sidebar push menu for small screens
-      else {
-        if ($("body").hasClass('sidebar-open')) {
-          $("body").removeClass('sidebar-open');
-          $("body").removeClass('sidebar-collapse')
-        } else {
-          $("body").addClass('sidebar-open');
+        //Enable sidebar push menu
+        if ($(window).width() > (screenSizes.sm - 1)) {
+          $("body").toggleClass('sidebar-collapse');
        }
-      }
-    });
+        //Handle sidebar push menu for small screens
+        else {
+          if ($("body").hasClass('sidebar-open')) {
+            $("body").removeClass('sidebar-open');
+            $("body").removeClass('sidebar-collapse')
+          } else {
+            $("body").addClass('sidebar-open');
+          }
+        }
+      });

-    $(".content-wrapper").click(function () {
-      //Enable hide menu when clicking on the content-wrapper on small screens
-      if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
-        $("body").removeClass('sidebar-open');
-      }
-    });
+      $(".content-wrapper").click(function () {
+        //Enable hide menu when clicking on the content-wrapper on small screens
+        if ($(window).width() <= (screenSizes.sm - 1) && $("body").hasClass("sidebar-open")) {
+          $("body").removeClass('sidebar-open');
+        }
+      });

+      //Enable expand on hover for sidebar mini
+      if ($.AdminLTE.options.sidebarExpandOnHover
+              || ($('body').hasClass('fixed')
+                      && $('body').hasClass('sidebar-mini'))) {
+        this.expandOnHover();
+      }
+
+    },
+    expandOnHover: function () {
+      var _this = this;
+      var screenWidth = $.AdminLTE.options.screenSizes.sm - 1;
+      //Expand sidebar on hover
+      $('.main-sidebar').hover(function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $("body").hasClass('sidebar-collapse')
+                && $(window).width() > screenWidth) {
+          _this.expand();
+        }
+      }, function () {
+        if ($('body').hasClass('sidebar-mini')
+                && $('body').hasClass('sidebar-expanded-on-hover')
+                && $(window).width() > screenWidth) {
+          _this.collapse();
+        }
+      });
+    },
+    expand: function () {
+      $("body").removeClass('sidebar-collapse').addClass('sidebar-expanded-on-hover');
+    },
+    collapse: function () {
+      if ($('body').hasClass('sidebar-expanded-on-hover')) {
+        $('body').removeClass('sidebar-expanded-on-hover').addClass('sidebar-collapse');
+      }
+    }
  };

  /* Tree()
@@ -305,7 +379,7 @@ function _init() {
  $.AdminLTE.tree = function (menu) {
    var _this = this;

-    $("li a", $(menu)).click(function (e) {
+    $("li a", $(menu)).on('click', function (e) {
      //Get the clicked link and the next element
      var $this = $(this);
      var checkElement = $this.next();
@@ -348,46 +422,148 @@ function _init() {
    });
  };

+  /* ControlSidebar
+   * ==============
+   * Adds functionality to the right sidebar
+   *
+   * @type Object
+   * @usage $.AdminLTE.controlSidebar.activate(options)
+   */
+  $.AdminLTE.controlSidebar = {
+    //instantiate the object
+    activate: function () {
+      //Get the object
+      var _this = this;
+      //Update options
+      var o = $.AdminLTE.options.controlSidebarOptions;
+      //Get the sidebar
+      var sidebar = $(o.selector);
+      //The toggle button
+      var btn = $(o.toggleBtnSelector);
+
+      //Listen to the click event
+      btn.on('click', function (e) {
+        e.preventDefault();
+        //If the sidebar is not open
+        if (!sidebar.hasClass('control-sidebar-open')
+                && !$('body').hasClass('control-sidebar-open')) {
+          //Open the sidebar
+          _this.open(sidebar, o.slide);
+        } else {
+          _this.close(sidebar, o.slide);
+        }
+      });
+
+      //If the body has a boxed layout, fix the sidebar bg position
+      var bg = $(".control-sidebar-bg");
+      _this._fix(bg);
+
+      //If the body has a fixed layout, make the control sidebar fixed      
+      if ($('body').hasClass('fixed')) {
+        _this._fixForFixed(sidebar);
+      } else {
+        //If the content height is less than the sidebar's height, force max height
+        if ($('.content-wrapper, .right-side').height() < sidebar.height()) {
+          _this._fixForContent(sidebar);
+        }
+      }
+    },
+    //Open the control sidebar
+    open: function (sidebar, slide) {
+      var _this = this;
+      //Slide over content
+      if (slide) {
+        sidebar.addClass('control-sidebar-open');
+      } else {
+        //Push the content by adding the open class to the body instead 
+        //of the sidebar itself
+        $('body').addClass('control-sidebar-open');
+      }
+    },
+    //Close the control sidebar
+    close: function (sidebar, slide) {
+      if (slide) {
+        sidebar.removeClass('control-sidebar-open');
+      } else {
+        $('body').removeClass('control-sidebar-open');
+      }
+    },
+    _fix: function (sidebar) {
+      var _this = this;
+      if ($("body").hasClass('layout-boxed')) {
+        sidebar.css('position', 'absolute');
+        sidebar.height($(".wrapper").height());
+        $(window).resize(function () {
+          _this._fix(sidebar);
+        });
+      } else {
+        sidebar.css({
+          'position': 'fixed',
+          'height': 'auto'
+        });
+      }
+    },
+    _fixForFixed: function (sidebar) {
+      sidebar.css({
+        'position': 'fixed',
+        'max-height': '100%',
+        'overflow': 'auto',
+        'padding-bottom': '50px'
+      });
+    },
+    _fixForContent: function (sidebar) {
+      $(".content-wrapper, .right-side").css('min-height', sidebar.height());
+    }
+  };
+
  /* BoxWidget
   * =========
-   * BoxWidget is plugin to handle collapsing and
+   * BoxWidget is a plugin to handle collapsing and
   * removing boxes from the screen.
   *
   * @type Object
   * @usage $.AdminLTE.boxWidget.activate()
-   *        Set all of your option in the main $.AdminLTE.options object
+   *        Set all your options in the main $.AdminLTE.options object
   */
  $.AdminLTE.boxWidget = {
+    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
+    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
    activate: function () {
-      var o = $.AdminLTE.options;
      var _this = this;
      //Listen for collapse event triggers
-      $(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
+      $(_this.selectors.collapse).on('click', function (e) {
        e.preventDefault();
        _this.collapse($(this));
      });

      //Listen for remove event triggers
-      $(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
+      $(_this.selectors.remove).on('click', function (e) {
        e.preventDefault();
        _this.remove($(this));
      });
    },
    collapse: function (element) {
+      var _this = this;
      //Find the box parent
      var box = element.parents(".box").first();
      //Find the body and the footer
-      var bf = box.find(".box-body, .box-footer");
+      var box_content = box.find("> .box-body, > .box-footer");
      if (!box.hasClass("collapsed-box")) {
        //Convert minus into plus
-        element.children(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
-        bf.slideUp(300, function () {
+        element.children(":first")
+                .removeClass(_this.icons.collapse)
+                .addClass(_this.icons.open);
+        //Hide the content
+        box_content.slideUp(300, function () {
          box.addClass("collapsed-box");
        });
      } else {
        //Convert plus into minus
-        element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
-        bf.slideDown(300, function () {
+        element.children(":first")
+                .removeClass(_this.icons.open)
+                .addClass(_this.icons.collapse);
+        //Show the content
+        box_content.slideDown(300, function () {
          box.removeClass("collapsed-box");
        });
      }
@@ -396,8 +572,7 @@ function _init() {
      //Find the box parent
      var box = element.parents(".box").first();
      box.slideUp();
-    },
-    options: $.AdminLTE.options.boxWidgetOptions
+    }
  };
 }

@@ -410,7 +585,7 @@ function _init() {
 /*
 * BOX REFRESH BUTTON
 * ------------------
- * This is a custom plugin to use with the compenet BOX. It allows you to add
+ * This is a custom plugin to use with the component BOX. It allows you to add
 * a refresh button to the box. It converts the box's state to a loading state.
 *
 * @type plugin
@@ -422,7 +597,7 @@ function _init() {

    // Render options
    var settings = $.extend({
-      //Refressh button selector
+      //Refresh button selector
      trigger: ".refresh-btn",
      //File source to be loaded (e.g: ajax/src.php)
      source: "",
@@ -451,7 +626,7 @@ function _init() {
      var rBtn = box.find(settings.trigger).first();

      //On trigger click
-      rBtn.click(function (e) {
+      rBtn.on('click', function (e) {
        e.preventDefault();
        //Add loading overlay
        start(box);
--- a/dist/js/app.min.js
+++ b/dist/js/app.min.js
--- a/dist/js/demo.js
+++ b/dist/js/demo.js
@@ -1,162 +1,335 @@
-var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green"];
-$(function () {
-  /* For demo purposes */
-  var demo = $("<div />").css({
-    position: "fixed",
-    top: "70px",
-    right: "0",
-    background: "#fff",
-    "border-radius": "5px 0px 0px 5px",
-    padding: "10px 15px",
-    "font-size": "16px",
-    "z-index": "99999",
-    cursor: "pointer",
-    color: "#3c8dbc",
-    "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
-  }).html("<i class='fa fa-gear'></i>").addClass("no-print");
+/**
+ * AdminLTE Demo Menu
+ * ------------------
+ * You should not use this file in production.
+ * This file is for demo purposes only.
+ */
+(function ($, AdminLTE) {

-  var demo_settings = $("<div />").css({
-    "padding": "10px",
-    position: "fixed",
-    top: "70px",
-    right: "-250px",
-    background: "#fff",
-    border: "0px solid #ddd",
-    "width": "250px",
-    "z-index": "99999",
-    "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
-  }).addClass("no-print");
+  /**
+   * List of all the available skins
+   * 
+   * @type Array
+   */
+  var my_skins = [
+    "skin-blue",
+    "skin-black",
+    "skin-red",
+    "skin-yellow",
+    "skin-purple",
+    "skin-green",
+    "skin-blue-light",
+    "skin-black-light",
+    "skin-red-light",
+    "skin-yellow-light",
+    "skin-purple-light",
+    "skin-green-light"
+  ];
+
+  //Create the new tab
+  var tab_pane = $("<div />", {
+    "id": "control-sidebar-theme-demo-options-tab",
+    "class": "tab-pane active"
+  });
+
+  //Create the tab button
+  var tab_button = $("<li />", {"class": "active"})
+          .html("<a href='#control-sidebar-theme-demo-options-tab' data-toggle='tab'>"
+                  + "<i class='fa fa-wrench'></i>"
+                  + "</a>");
+
+  //Add the tab button to the right sidebar tabs
+  $("[href='#control-sidebar-home-tab']")
+          .parent()
+          .before(tab_button);
+
+  //Create the menu
+  var demo_settings = $("<div />");
+
+  //Layout options
  demo_settings.append(
-          "<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Layout Options</h4>"
+          "<h4 class='control-sidebar-heading'>"
+          + "Layout Options"
+          + "</h4>"
          //Fixed layout
          + "<div class='form-group'>"
-          + "<div class='checkbox'>"
-          + "<label>"
-          + "<input type='checkbox' onchange='change_layout(\"fixed\");'/> "
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-layout='fixed' class='pull-right'/> "
          + "Fixed layout"
          + "</label>"
-          + "</div>"
+          + "<p>Activate the fixed layout. You can't use fixed and boxed layouts together</p>"
          + "</div>"
          //Boxed layout
          + "<div class='form-group'>"
-          + "<div class='checkbox'>"
-          + "<label>"
-          + "<input type='checkbox' onchange='change_layout(\"layout-boxed\");'/> "
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-layout='layout-boxed'class='pull-right'/> "
          + "Boxed Layout"
          + "</label>"
+          + "<p>Activate the boxed layout</p>"
          + "</div>"
-          + "</div>"
-          //Sidebar Collapse
+          //Sidebar Toggle
          + "<div class='form-group'>"
-          + "<div class='checkbox'>"
-          + "<label>"
-          + "<input type='checkbox' onchange='change_layout(\"sidebar-collapse\");'/> "
-          + "Collapsed Sidebar"
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-layout='sidebar-collapse' class='pull-right'/> "
+          + "Toggle Sidebar"
          + "</label>"
+          + "<p>Toggle the left sidebar's state (open or collapse)</p>"
          + "</div>"
+          //Sidebar mini expand on hover toggle
+          + "<div class='form-group'>"
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-enable='expandOnHover' class='pull-right'/> "
+          + "Sidebar Expand on Hover"
+          + "</label>"
+          + "<p>Let the sidebar mini expand on hover</p>"
+          + "</div>"
+          //Control Sidebar Toggle
+          + "<div class='form-group'>"
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-controlsidebar='control-sidebar-open' class='pull-right'/> "
+          + "Toggle Right Sidebar Slide"
+          + "</label>"
+          + "<p>Toggle between slide over content and push content effects</p>"
+          + "</div>"
+          //Control Sidebar Skin Toggle
+          + "<div class='form-group'>"
+          + "<label class='control-sidebar-subheading'>"
+          + "<input type='checkbox' data-sidebarskin='toggle' class='pull-right'/> "
+          + "Toggle Right Sidebar Skin"
+          + "</label>"
+          + "<p>Toggle between dark and light skins for the right sidebar</p>"
          + "</div>"
          );
-  var skins_list = $("<ul />", {"class": 'list-unstyled'});
+  var skins_list = $("<ul />", {"class": 'list-unstyled clearfix'});
+
+  //Dark sidebar skins
  var skin_blue =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-blue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 10px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Blue</p>"
-                  + "</a>");
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-blue' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Blue</p>");
  skins_list.append(skin_blue);
  var skin_black =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 10px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 10px; background: #fefefe;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Black</p>"
-                  + "</a>");
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-black' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Black</p>");
  skins_list.append(skin_black);
  var skin_purple =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-purple\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Purple</p>"
-                  + "</a>");
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-purple' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Purple</p>");
  skins_list.append(skin_purple);
  var skin_green =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-green\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Green</p>"
-                  + "</a>");
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-green' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Green</p>");
  skins_list.append(skin_green);
-    var skin_red =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-red\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Red</p>"
-                  + "</a>");
+  var skin_red =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-red' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Red</p>");
  skins_list.append(skin_red);
-    var skin_yellow =
-          $("<li />", {style: "float:left; width: 50%; padding: 5px;"})
-          .append("<a href='javascript:void(0);' onclick='change_skin(\"skin-yellow\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
-                  + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>"
-                  + "<p class='text-center'>Skin Yellow</p>"
-                  + "</a>");
+  var skin_yellow =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-yellow' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #222d32;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin'>Yellow</p>");
  skins_list.append(skin_yellow);

-  demo_settings.append("<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Skins</h4>");
+  //Light sidebar skins
+  var skin_blue_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-blue-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px; background: #367fa9;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px'>Blue Light</p>");
+  skins_list.append(skin_blue_light);
+  var skin_black_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-black-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 7px; background: #fefefe;'></span><span style='display:block; width: 80%; float: left; height: 7px; background: #fefefe;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px'>Black Light</p>");
+  skins_list.append(skin_black_light);
+  var skin_purple_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-purple-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px'>Purple Light</p>");
+  skins_list.append(skin_purple_light);
+  var skin_green_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-green-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-green-active'></span><span class='bg-green' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px'>Green Light</p>");
+  skins_list.append(skin_green_light);
+  var skin_red_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-red-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px'>Red Light</p>");
+  skins_list.append(skin_red_light);
+  var skin_yellow_light =
+          $("<li />", {style: "float:left; width: 33.33333%; padding: 5px;"})
+          .append("<a href='javascript:void(0);' data-skin='skin-yellow-light' style='display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)' class='clearfix full-opacity-hover'>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 7px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 7px;'></span></div>"
+                  + "<div><span style='display:block; width: 20%; float: left; height: 20px; background: #f9fafc;'></span><span style='display:block; width: 80%; float: left; height: 20px; background: #f4f5f7;'></span></div>"
+                  + "</a>"
+                  + "<p class='text-center no-margin' style='font-size: 12px;'>Yellow Light</p>");
+  skins_list.append(skin_yellow_light);
+
+  demo_settings.append("<h4 class='control-sidebar-heading'>Skins</h4>");
  demo_settings.append(skins_list);

-  demo.click(function () {
-    if (!$(this).hasClass("open")) {
-      $(this).animate({"right": "250px"});
-      demo_settings.animate({"right": "0"});
-      $(this).addClass("open");
-    } else {
-      $(this).animate({"right": "0"});
-      demo_settings.animate({"right": "-250px"});
-      $(this).removeClass("open");
-    }
-  });
-
-  $("body").append(demo);
-  $("body").append(demo_settings);
+  tab_pane.append(demo_settings);
+  $("#control-sidebar-home-tab").after(tab_pane);

  setup();
-});

-function change_layout(cls) {
-  $("body").toggleClass(cls);
-  $.AdminLTE.layout.fixSidebar();  
-}
-function change_skin(cls) {  
-  $.each(my_skins, function (i) {
-    $("body").removeClass(my_skins[i]);
-  });
-
-  $("body").addClass(cls);
-  store('skin', cls);
-  return false;
-}
-function store(name, val) {
-  if (typeof (Storage) !== "undefined") {
-    localStorage.setItem(name, val);
-  } else {
-    alert('Please use a modern browser to properly view this template!');
+  /**
+   * Toggles layout classes
+   * 
+   * @param String cls the layout class to toggle
+   * @returns void
+   */
+  function change_layout(cls) {
+    $("body").toggleClass(cls);
+    AdminLTE.layout.fixSidebar();
+    //Fix the problem with right sidebar and layout boxed
+    if (cls == "layout-boxed")
+      AdminLTE.controlSidebar._fix($(".control-sidebar-bg"));
+    if ($('body').hasClass('fixed') && cls == 'fixed') {
+      AdminLTE.pushMenu.expandOnHover();
+      AdminLTE.controlSidebar._fixForFixed($('.control-sidebar'));
+      AdminLTE.layout.activate();
+    }
  }
-}
-function get(name) {
-  if (typeof (Storage) !== "undefined") {
-    return localStorage.getItem(name);
-  } else {
-    alert('Please use a modern browser to properly view this template!');
-  }
-}

-function setup() {
-  var tmp = get('skin');
-  if (tmp && $.inArray(tmp, my_skins))
-    change_skin(tmp);
-}
+  /**
+   * Replaces the old skin with the new skin
+   * @param String cls the new skin class
+   * @returns Boolean false to prevent link's default action
+   */
+  function change_skin(cls) {
+    $.each(my_skins, function (i) {
+      $("body").removeClass(my_skins[i]);
+    });
+
+    $("body").addClass(cls);
+    store('skin', cls);
+    return false;
+  }
+
+  /**
+   * Store a new settings in the browser
+   * 
+   * @param String name Name of the setting
+   * @param String val Value of the setting
+   * @returns void
+   */
+  function store(name, val) {
+    if (typeof (Storage) !== "undefined") {
+      localStorage.setItem(name, val);
+    } else {
+      alert('Please use a modern browser to properly view this template!');
+    }
+  }
+
+  /**
+   * Get a prestored setting
+   * 
+   * @param String name Name of of the setting
+   * @returns String The value of the setting | null
+   */
+  function get(name) {
+    if (typeof (Storage) !== "undefined") {
+      return localStorage.getItem(name);
+    } else {
+      alert('Please use a modern browser to properly view this template!');
+    }
+  }
+
+  /**
+   * Retrieve default settings and apply them to the template
+   * 
+   * @returns void
+   */
+  function setup() {
+    var tmp = get('skin');
+    if (tmp && $.inArray(tmp, my_skins))
+      change_skin(tmp);
+
+    //Add the change skin listener
+    $("[data-skin]").on('click', function (e) {
+      e.preventDefault();
+      change_skin($(this).data('skin'));
+    });
+
+    //Add the layout manager
+    $("[data-layout]").on('click', function () {
+      change_layout($(this).data('layout'));
+    });
+
+    $("[data-controlsidebar]").on('click', function () {
+      change_layout($(this).data('controlsidebar'));
+      var slide = !AdminLTE.options.controlSidebarOptions.slide;
+      AdminLTE.options.controlSidebarOptions.slide = slide;
+      if (!slide)
+        $('.control-sidebar').removeClass('control-sidebar-open');
+    });
+
+    $("[data-sidebarskin='toggle']").on('click', function () {
+      var sidebar = $(".control-sidebar");
+      if (sidebar.hasClass("control-sidebar-dark")) {
+        sidebar.removeClass("control-sidebar-dark")
+        sidebar.addClass("control-sidebar-light")
+      } else {
+        sidebar.removeClass("control-sidebar-light")
+        sidebar.addClass("control-sidebar-dark")
+      }
+    });
+    
+    $("[data-enable='expandOnHover']").on('click', function () {
+      $(this).attr('disabled', true);      
+      AdminLTE.pushMenu.expandOnHover();
+      if(!$('body').hasClass('sidebar-collapse'))
+        $("[data-layout='sidebar-collapse']").click();
+    });
+    
+    // Reset options
+    if($('body').hasClass('fixed')) {
+      $("[data-layout='fixed']").attr('checked', 'checked');
+    }
+    if($('body').hasClass('layout-boxed')) {
+      $("[data-layout='layout-boxed']").attr('checked', 'checked');
+    }
+    if($('body').hasClass('sidebar-collapse')) {
+      $("[data-layout='sidebar-collapse']").attr('checked', 'checked');
+    }
+    
+  }
+})(jQuery, $.AdminLTE);
--- a/dist/js/pages/dashboard.js
+++ b/dist/js/pages/dashboard.js
@@ -8,11 +8,6 @@

 $(function () {

-  //Activate the iCheck Plugin
-  $('input[type="checkbox"]').iCheck({
-    checkboxClass: 'icheckbox_flat-blue',
-    radioClass: 'iradio_flat-blue'
-  });
  //Make the dashboard widgets sortable Using jquery UI
  $(".connectedSortable").sortable({
    placeholder: "sort-highlight",
@@ -22,6 +17,7 @@ $(function () {
    zIndex: 999999
  });
  $(".connectedSortable .box-header, .connectedSortable .nav-tabs-custom").css("cursor", "move");
+  
  //jQuery UI sortable for the todo list
  $(".todo-list").sortable({
    placeholder: "sort-highlight",
--- a/documentation/build/include/adminlte-options.html
+++ b/documentation/build/include/adminlte-options.html
@@ -0,0 +1,119 @@
+<section id='adminlte-options'>
+  <h2 class='page-header'><a href="#adminlte-options">AdminLTE Javascript Options</a></h2>
+  <p class="lead">Modifying the options of AdminLTE's app.js can be done using one of the following ways.</p>
+
+  <h3>Editing app.js</h3>
+  <p>Within the main Javascript file, modify the <code>$.AdminLTE.options</code> object to suit your use case.</p>
+
+  <h3>Defining AdminLTEOptions</h3>
+  <p>Alternatively, you can define a global options variable named <code>AdminLTEOptions</code> and initialize it before loading app.js.</p>
+  <p>Example</p>
+  <pre class='prettyprint'><code class='html'>&LT;script>
+  var AdminLTEOptions = {
+    //Enable sidebar expand on hover effect for sidebar mini
+    //This option is forced to true if both the fixed layout and sidebar mini
+    //are used together
+    sidebarExpandOnHover: true,
+    //BoxRefresh Plugin
+    enableBoxRefresh: true,
+    //Bootstrap.js tooltip
+    enableBSToppltip: true
+  };
+&LT;/script>
+&LT;script src='dist/js/app.js' type='text/javascript'>&LT;/script></code></pre>
+  
+  <h3>Available AdminLTE Options</h3>
+  <pre class='prettyprint'><code class='javascript'>{
+  //Add slimscroll to navbar menus
+  //This requires you to load the slimscroll plugin
+  //in every page before app.js
+  navbarMenuSlimscroll: true,
+  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
+  navbarMenuHeight: "200px", //The height of the inner menu
+  //Sidebar push menu toggle button selector
+  sidebarToggleSelector: "[data-toggle='offcanvas']",
+  //Activate sidebar push menu
+  sidebarPushMenu: true,
+  //Activate sidebar slimscroll if the fixed layout is set (requires SlimScroll Plugin)
+  sidebarSlimScroll: true,
+  //Enable sidebar expand on hover effect for sidebar mini
+  //This option is forced to true if both the fixed layout and sidebar mini
+  //are used together
+  sidebarExpandOnHover: false,
+  //BoxRefresh Plugin
+  enableBoxRefresh: true,
+  //Bootstrap.js tooltip
+  enableBSToppltip: true,
+  BSTooltipSelector: "[data-toggle='tooltip']",
+  //Enable Fast Click. Fastclick.js creates a more
+  //native touch experience with touch devices. If you
+  //choose to enable the plugin, make sure you load the script
+  //before AdminLTE's app.js
+  enableFastclick: true,
+  //Control Sidebar Options
+  enableControlSidebar: true,
+  controlSidebarOptions: {
+    //Which button should trigger the open/close event
+    toggleBtnSelector: "[data-toggle='control-sidebar']",
+    //The sidebar selector
+    selector: ".control-sidebar",
+    //Enable slide over content
+    slide: true
+  },
+  //Box Widget Plugin. Enable this plugin
+  //to allow boxes to be collapsed and/or removed
+  enableBoxWidget: true,
+  //Box Widget plugin options
+  boxWidgetOptions: {
+    boxWidgetIcons: {
+      //Collapse icon
+      collapse: 'fa-minus',
+      //Open icon
+      open: 'fa-plus',
+      //Remove icon
+      remove: 'fa-times'
+    },
+    boxWidgetSelectors: {
+      //Remove button selector
+      remove: '[data-widget="remove"]',
+      //Collapse button selector
+      collapse: '[data-widget="collapse"]'
+    }
+  },
+  //Direct Chat plugin options
+  directChat: {
+    //Enable direct chat by default
+    enable: true,
+    //The button to open and close the chat contacts pane
+    contactToggleSelector: '[data-widget="chat-pane-toggle"]'
+  },
+  //Define the set of colors to use globally around the website
+  colors: {
+    lightBlue: "#3c8dbc",
+    red: "#f56954",
+    green: "#00a65a",
+    aqua: "#00c0ef",
+    yellow: "#f39c12",
+    blue: "#0073b7",
+    navy: "#001F3F",
+    teal: "#39CCCC",
+    olive: "#3D9970",
+    lime: "#01FF70",
+    orange: "#FF851B",
+    fuchsia: "#F012BE",
+    purple: "#8E24AA",
+    maroon: "#D81B60",
+    black: "#222222",
+    gray: "#d2d6de"
+  },
+  //The standard screen sizes that bootstrap uses.
+  //If you change these in the variables.less file, change
+  //them here too.
+  screenSizes: {
+    xs: 480,
+    sm: 768,
+    md: 992,
+    lg: 1200
+  }
+}</code></pre>
+</section>
--- a/documentation/build/include/components.html
+++ b/documentation/build/include/components.html
@@ -28,7 +28,7 @@
        <!-- Logo -->
        <a href="index2.html" class="logo" style='position: relative;'><b>Admin</b>LTE</a>
        <!-- Header Navbar: style can be found in header.less -->
-        <nav class="navbar" role="navigation" style="border: 0;">
+        <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" role="button">
            <span class="sr-only">Toggle navigation</span>
@@ -160,8 +160,7 @@
      </header>
    </div>
  </div>
-  <pre class='prettyprint'>
-&LT;header class="main-header">
+  <pre class='prettyprint'>&LT;header class="main-header">
  &LT;a href="../../index2.html" class="logo">
    &LT;!-- LOGO -->
    AdminLTE
@@ -304,7 +303,7 @@
  <div class="box box-solid">
    <div class="box-body layout-top-nav">
      <span class="eg">Top Nav Example</span>
-      <header class="main-header">               
+      <header class="main-header">
        <nav class="navbar navbar-static-top">
          <div class="container-fluid">
            <div class="navbar-header">
@@ -357,7 +356,7 @@
    </div>
  </div>
  <pre class='prettyprint'>
-&LT;header class="main-header">               
+&LT;header class="main-header">
  &LT;nav class="navbar navbar-static-top">
    &LT;div class="container-fluid">
    &LT;div class="navbar-header">
@@ -408,7 +407,7 @@
  &LT;/nav>
 &LT;/header></pre>

-  <!-- ----------------------------------------------------------- -->
+  <!-- ===================================================================== -->

  <h3 id='component-sidebar'>Sidebar</h3>
  <p class="lead">
@@ -457,10 +456,43 @@
    &LT;/ul>&LT;!-- /.sidebar-menu -->

  &LT;/div>&LT;!-- /.sidebar -->
-&LT;/div>&LT;!-- /.main-sidebar -->
-  </pre>
+&LT;/div>&LT;!-- /.main-sidebar --></pre>

-  <!-- ----------------------------------------------------------- -->
+  <h3 id="component-control-sidebar">Control Sidebar</h3>
+  <p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
+    to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
+  slide over the content. The second pushes the content to make space for the sidebar. Either of
+  these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
+  <p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
+  to place it right after the footer.</p>
+  <p class="lead">Dark Sidebar Markup</p>  
+<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
+&LT;aside class="control-sidebar control-sidebar-dark">
+  &LT;!-- Content of the sidebar goes here -->
+&LT;/aside>
+&LT;!-- The sidebar's background -->
+&LT;!-- This div must placed right after the sidebar for it to work-->
+&LT;div class="control-sidebar-bg">&LT;/div></code></pre>
+  
+  <p class="lead">Light Sidebar Markup</p>  
+<pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
+&LT;aside class="control-sidebar control-sidebar-light">
+  &LT;!-- Content of the sidebar goes here -->
+&LT;/aside>
+&LT;!-- The sidebar's background -->
+&LT;!-- This div must placed right after the sidebar for it to work-->
+&LT;div class="control-sidebar-bg">&LT;/div></code></pre>
+
+  <p class='lead'>Once you create the sidebar, you will need a toggle button to open/close it.
+  By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
+  automatically act as the toggle button.</p>
+
+  <p class="lead">Toggle Button Example</p>
+  <button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br /><br />
+
+  <p class="lead">Sidebar Toggle Markup</p>
+  <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar&LT;/button></code></pre>
+  <!-- ===================================================================== -->

  <h3 id="component-info-box">Info Box</h3>
  <p class="lead">Info boxes are used to display statistical snippets. There are two types of info boxes.</p>
@@ -505,16 +537,14 @@
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">Markup</p>
-  <pre class="prettyprint"><code class="html">
-&LT;div class="info-box">
+  <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
  &LT;-- Apply any bg-* class to to the icon to color it -->
  &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
    &LT;span class="info-box-text">Likes&LT;/span>
    &LT;span class="info-box-number">93,139&LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
-&LT;/div>&LT;!-- /.info-box -->
-</code></pre>
+&LT;/div>&LT;!-- /.info-box --></code></pre>

  <h4>Second Type of Info Boxes</h4>
  <div class="row">
@@ -580,8 +610,7 @@
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">Markup</p>
-  <pre class="prettyprint"><code class="html">
-&LT;-- Apply any bg-* class to to the info-box to color it -->
+  <pre class="prettyprint"><code class="lang-html">&LT;-- Apply any bg-* class to to the info-box to color it -->
 &LT;div class="info-box bg-red">
  &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
  &LT;div class="info-box-content">
@@ -595,11 +624,10 @@
      70% Increase in 30 Days
    &LT;/span>
  &LT;/div>&LT;!-- /.info-box-content -->
-&LT;/div>&LT;!-- /.info-box -->
-</code></pre>
-  <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the 
+&LT;/div>&LT;!-- /.info-box --></code></pre>
+  <p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
    first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
-  <!-- ----------------------------------------------------------- -->
+  <!-- ===================================================================== -->

  <h3 id='component-box'>Box</h3>
  <p class="lead">The box component is the most widely used component through out this template. You can
@@ -622,8 +650,7 @@
      The footer of the box
    </div><!-- box-footer -->
  </div><!-- /.box -->
-  <pre class="prettyprint">
-&LT;div class="box">
+  <pre class="prettyprint">&LT;div class="box">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Default Box Example&LT;/h3>
    &LT;div class="box-tools pull-right">
@@ -704,8 +731,7 @@
      </div><!-- /.box -->
    </div>
  </div><!-- /.row -->
-  <pre class="prettyprint">
-&LT;div class="box box-default">...&LT;/div>
+  <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
 &LT;div class="box box-primary">...&LT;/div>
 &LT;div class="box box-info">...&LT;/div>
 &LT;div class="box box-warning">...&LT;/div>
@@ -935,7 +961,7 @@
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Tootips on buttons</h3>
-          <div class="box-tools pull-right">                      
+          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
            <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
          </div><!-- /.box-tools -->
@@ -948,7 +974,7 @@
 &LT;div class="box box-default">
  &LT;div class="box-header with-border">
    &LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
-    &LT;div class="box-tools pull-right">      
+    &LT;div class="box-tools pull-right">
      &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
      &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
    &LT;/div>&LT;!-- /.box-tools -->
@@ -975,7 +1001,7 @@
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
-      </div><!-- /.box -->                
+      </div><!-- /.box -->
    </div><!-- /.col -->

    <div class="col-md-6">
@@ -991,11 +1017,11 @@
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
-      </div><!-- /.box -->                
+      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
  <p class="lead">
-    To simulate a loading state, simply place this code before the <code>.box</code> closing tag.              
+    To simulate a loading state, simply place this code before the <code>.box</code> closing tag.
  </p>
  <pre class="prettyprint"><code class="html">&LT;div class="overlay">
  &LT;i class="fa fa-refresh fa-spin">&LT;/i>
@@ -1043,7 +1069,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1051,7 +1077,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1060,7 +1086,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
@@ -1114,7 +1140,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1122,7 +1148,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1131,7 +1157,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
@@ -1185,7 +1211,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1193,7 +1219,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1202,7 +1228,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
@@ -1256,7 +1282,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1264,7 +1290,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1273,7 +1299,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
@@ -1331,7 +1357,7 @@
        &LT;div class="direct-chat-text">
          You better believe it!
        &LT;/div>&LT;!-- /.direct-chat-text -->
-      &LT;/div>&LT;!-- /.direct-chat-msg -->                    
+      &LT;/div>&LT;!-- /.direct-chat-msg -->
    &LT;/div>&LT;!--/.direct-chat-messages-->

    &LT;!-- Contacts are loaded here -->
@@ -1339,7 +1365,7 @@
      &LT;ul class='contacts-list'>
        &LT;li>
          &LT;a href='#'>
-            &LT;img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+            &LT;img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
            &LT;div class='contacts-list-info'>
              &LT;span class='contacts-list-name'>
                Count Dracula
@@ -1348,7 +1374,7 @@
              &LT;span class='contacts-list-msg'>How have you been? I was...&LT;/span>
            &LT;/div>&LT;!-- /.contacts-list-info -->
          &LT;/a>
-        &LT;/li>&LT;!-- End Contact Item -->                      
+        &LT;/li>&LT;!-- End Contact Item -->
      &LT;/ul>&LT;!-- /.contatcts-list -->
    &LT;/div>&LT;!-- /.direct-chat-pane -->
  &LT;/div>&LT;!-- /.box-body -->
@@ -1366,7 +1392,7 @@
  <p>Of course you can use direct chat with a solid box by adding the class <code>solid-box</code> to the box. Here are a couple of examples:</p>

  <!-- Direct Chat With Solid Boxes -->
-  <div class="row">        
+  <div class="row">
    <div class="col-md-6">
      <!-- DIRECT CHAT WARNING -->
      <div class="box box-primary box-solid direct-chat direct-chat-primary">
@@ -1404,7 +1430,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1412,7 +1438,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1421,7 +1447,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
@@ -1475,7 +1501,7 @@
              <div class="direct-chat-text">
                You better believe it!
              </div><!-- /.direct-chat-text -->
-            </div><!-- /.direct-chat-msg -->                    
+            </div><!-- /.direct-chat-msg -->
          </div><!--/.direct-chat-messages-->

          <!-- Contacts are loaded here -->
@@ -1483,7 +1509,7 @@
            <ul class='contacts-list'>
              <li>
                <a href='#'>
-                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg'/>
+                  <img class='contacts-list-img' src='../dist/img/user1-128x128.jpg' alt="Contact Avatar"/>
                  <div class='contacts-list-info'>
                    <span class='contacts-list-name'>
                      Count Dracula
@@ -1492,7 +1518,7 @@
                    <span class='contacts-list-msg'>How have you been? I was...</span>
                  </div><!-- /.contacts-list-info -->
                </a>
-              </li><!-- End Contact Item -->                      
+              </li><!-- End Contact Item -->
            </ul><!-- /.contatcts-list -->
          </div><!-- /.direct-chat-pane -->
        </div><!-- /.box-body -->
--- a/documentation/build/include/dependencies.html
+++ b/documentation/build/include/dependencies.html
@@ -2,7 +2,7 @@
  <h2 class="page-header"><a href="#dependencies">Dependencies</a></h2>
  <p class="lead">AdminLTE depends on two main frameworks.
    The downloadable package contains both of these libraries, so you don't have to manually download them.</p>
-  <ul>
+  <ul class="bring-up">
    <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
    <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
    <li><a href="#plugins">All other plugins are listed below</a></li>
--- a/documentation/build/include/download.html
+++ b/documentation/build/include/download.html
@@ -32,7 +32,7 @@
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
-  <pre class='hierarchy'><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package
+  <pre class='hierarchy bring-up'><code class="language-bash" data-lang="bash">File Hierarchy of the Source Code Package

 AdminLTE/
 ├── dist/
--- a/documentation/build/include/implementations.html
+++ b/documentation/build/include/implementations.html
@@ -0,0 +1,16 @@
+<section id="implementations">
+  <h2 class="page-header"><a href="#implementations">Implementations</a></h2>
+  <p class="lead">Thanks to many of AdminLTE users, there are multiple implementations of the template
+  for easy integration with back-end frameworks. The following are some of them:</p>
+  
+  <ul class="">
+    <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
+    <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
+    <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>    
+    <li><a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">Rails Gem</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a></li>
+  </ul>
+  
+  <p><b class="text-red">Note:</b> these implementations are not supported by Almsaeed Studio. However,
+    they do provide a good example of how to integrate AdminLTE into different frameworks. For the latest release
+    of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://almsaeedstudio.com">website</a></p>
+</section>
--- a/documentation/build/include/layout.html
+++ b/documentation/build/include/layout.html
@@ -10,401 +10,7 @@
  <div class="callout callout-danger lead">
    <h4>Tip!</h4>
    <p>The <a href="../starter.html">starter page</a> is a good place to start building your app if you'd like to start from scratch.</p>
-  </div>
-  <p>A full layout example for a quick start</p>
-  <pre class='prettyprint'>
-&LT;!DOCTYPE html>
-&LT;html>
-  &LT;head>
-    &LT;meta charset="UTF-8">
-    &LT;title>AdminLTE 2 | Dashboard&LT;/title>
-    &LT;meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    &LT;!-- Bootstrap 3.3.2 -->
-    &LT;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    &LT;!-- Font Awesome Icons -->
-    &LT;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
-    &LT;!-- Ionicons -->
-    &LT;link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
-    &LT;!-- Theme style -->
-    &LT;link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    &LT;!-- AdminLTE Skins. Choose a skin from the css/skins 
-         folder instead of downloading all of them to reduce the load. -->
-    &LT;link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
-
-    &LT;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    &LT;!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    &LT;!--[if lt IE 9]>
-        &LT;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">&LT;/script>
-        &LT;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">&LT;/script>
-    &LT;![endif]-->
-  &LT;/head>
-  &LT;body class="skin-blue">
-    &LT;!-- Site wrapper -->
-    &LT;div class="wrapper">
-      
-      &LT;header class="main-header">
-        &LT;a href="index2.html" class="logo">&LT;b>Admin&LT;/b>LTE&LT;/a>
-        &LT;!-- Header Navbar: style can be found in header.less -->
-        &LT;nav class="navbar navbar-static-top" role="navigation">
-          &LT;!-- Sidebar toggle button-->
-          &LT;a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
-            &LT;span class="sr-only">Toggle navigation&LT;/span>
-            &LT;span class="icon-bar">&LT;/span>
-            &LT;span class="icon-bar">&LT;/span>
-            &LT;span class="icon-bar">&LT;/span>
-          &LT;/a>
-          &LT;div class="navbar-custom-menu">
-            &LT;ul class="nav navbar-nav">
-              &LT;!-- Messages: style can be found in dropdown.less-->
-              &LT;li class="dropdown messages-menu">
-                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  &LT;i class="fa fa-envelope-o">&LT;/i>
-                  &LT;span class="label label-success">4&LT;/span>
-                &LT;/a>
-                &LT;ul class="dropdown-menu">
-                  &LT;li class="header">You have 4 messages&LT;/li>
-                  &LT;li>
-                    &LT;!-- inner menu: contains the actual data -->
-                    &LT;ul class="menu">
-                      &LT;li>&LT;!-- start message -->
-                        &LT;a href="#">
-                          &LT;div class="pull-left">
-                            &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image"/>
-                          &LT;/div>
-                          &LT;h4>
-                            Support Team
-                            &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
-                          &LT;/h4>
-                          &LT;p>Why not buy a new awesome theme?&LT;/p>
-                        &LT;/a>
-                      &LT;/li>&LT;!-- end message -->
-                    &LT;/ul>
-                  &LT;/li>
-                  &LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
-                &LT;/ul>
-              &LT;/li>
-              &LT;!-- Notifications: style can be found in dropdown.less -->
-              &LT;li class="dropdown notifications-menu">
-                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  &LT;i class="fa fa-bell-o">&LT;/i>
-                  &LT;span class="label label-warning">10&LT;/span>
-                &LT;/a>
-                &LT;ul class="dropdown-menu">
-                  &LT;li class="header">You have 10 notifications&LT;/li>
-                  &LT;li>
-                    &LT;!-- inner menu: contains the actual data -->
-                    &LT;ul class="menu">
-                      &LT;li>
-                        &LT;a href="#">
-                          &LT;i class="fa fa-users text-aqua">&LT;/i> 5 new members joined today
-                        &LT;/a>
-                      &LT;/li>
-                    &LT;/ul>
-                  &LT;/li>
-                  &LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
-                &LT;/ul>
-              &LT;/li>
-              &LT;!-- Tasks: style can be found in dropdown.less -->
-              &LT;li class="dropdown tasks-menu">
-                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  &LT;i class="fa fa-flag-o">&LT;/i>
-                  &LT;span class="label label-danger">9&LT;/span>
-                &LT;/a>
-                &LT;ul class="dropdown-menu">
-                  &LT;li class="header">You have 9 tasks&LT;/li>
-                  &LT;li>
-                    &LT;!-- inner menu: contains the actual data -->
-                    &LT;ul class="menu">
-                      &LT;li>&LT;!-- Task item -->
-                        &LT;a href="#">
-                          &LT;h3>
-                            Design some buttons
-                            &LT;small class="pull-right">20%&LT;/small>
-                          &LT;/h3>
-                          &LT;div class="progress xs">
-                            &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
-                              &LT;span class="sr-only">20% Complete&LT;/span>
-                            &LT;/div>
-                          &LT;/div>
-                        &LT;/a>
-                      &LT;/li>&LT;!-- end task item -->
-                    &LT;/ul>
-                  &LT;/li>
-                  &LT;li class="footer">
-                    &LT;a href="#">View all tasks&LT;/a>
-                  &LT;/li>
-                &LT;/ul>
-              &LT;/li>
-              &LT;!-- User Account: style can be found in dropdown.less -->
-              &LT;li class="dropdown user user-menu">
-                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                  &LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image"/>
-                  &LT;span class="hidden-xs">Alexander Pierce&LT;/span>
-                &LT;/a>
-                &LT;ul class="dropdown-menu">
-                  &LT;!-- User image -->
-                  &LT;li class="user-header">
-                    &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-                    &LT;p>
-                      Alexander Pierce - Web Developer
-                      &LT;small>Member since Nov. 2012&LT;/small>
-                    &LT;/p>
-                  &LT;/li>
-                  &LT;!-- Menu Body -->
-                  &LT;li class="user-body">
-                    &LT;div class="col-xs-4 text-center">
-                      &LT;a href="#">Followers&LT;/a>
-                    &LT;/div>
-                    &LT;div class="col-xs-4 text-center">
-                      &LT;a href="#">Sales&LT;/a>
-                    &LT;/div>
-                    &LT;div class="col-xs-4 text-center">
-                      &LT;a href="#">Friends&LT;/a>
-                    &LT;/div>
-                  &LT;/li>
-                  &LT;!-- Menu Footer-->
-                  &LT;li class="user-footer">
-                    &LT;div class="pull-left">
-                      &LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
-                    &LT;/div>
-                    &LT;div class="pull-right">
-                      &LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
-                    &LT;/div>
-                  &LT;/li>
-                &LT;/ul>
-              &LT;/li>
-            &LT;/ul>
-          &LT;/div>
-        &LT;/nav>
-      &LT;/header>
-
-      &LT;!-- =============================================== -->
-
-      &LT;!-- Left side column. contains the sidebar -->
-      &LT;aside class="main-sidebar">
-        &LT;!-- sidebar: style can be found in sidebar.less -->
-        &LT;section class="sidebar">
-          &LT;!-- Sidebar user panel -->
-          &LT;div class="user-panel">
-            &LT;div class="pull-left image">
-              &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image" />
-            &LT;/div>
-            &LT;div class="pull-left info">
-              &LT;p>Alexander Pierce&LT;/p>
-
-              &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> Online&LT;/a>
-            &LT;/div>
-          &LT;/div>
-          &LT;!-- search form -->
-          &LT;form action="#" method="get" class="sidebar-form">
-            &LT;div class="input-group">
-              &LT;input type="text" name="q" class="form-control" placeholder="Search..."/>
-              &LT;span class="input-group-btn">
-                &LT;button type='submit' name='seach' id='search-btn' class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
-              &LT;/span>
-            &LT;/div>
-          &LT;/form>
-          &LT;!-- /.search form -->
-          &LT;!-- sidebar menu: : style can be found in sidebar.less -->
-          &LT;ul class="sidebar-menu">
-            &LT;li class="header">MAIN NAVIGATION&LT;/li>
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-dashboard">&LT;/i> &LT;span>Dashboard&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="index.html">&LT;i class="fa fa-circle-o">&LT;/i> Dashboard v1&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="index2.html">&LT;i class="fa fa-circle-o">&LT;/i> Dashboard v2&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-files-o">&LT;/i>
-                &LT;span>Layout Options&LT;/span>
-                &LT;span class="label label-primary pull-right">4&LT;/span>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="../layout/top-nav.html">&LT;i class="fa fa-circle-o">&LT;/i> Top Navigation&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../layout/boxed.html">&LT;i class="fa fa-circle-o">&LT;/i> Boxed&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../layout/fixed.html">&LT;i class="fa fa-circle-o">&LT;/i> Fixed&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../layout/collapsed-sidebar.html">&LT;i class="fa fa-circle-o">&LT;/i> Collapsed Sidebar&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li>
-              &LT;a href="../widgets.html">
-                &LT;i class="fa fa-th">&LT;/i> &LT;span>Widgets&LT;/span> &LT;small class="label pull-right bg-green">Hot&LT;/small>
-              &LT;/a>
-            &LT;/li>            
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-pie-chart">&LT;/i>
-                &LT;span>Charts&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="../charts/morris.html">&LT;i class="fa fa-circle-o">&LT;/i> Morris&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../charts/flot.html">&LT;i class="fa fa-circle-o">&LT;/i> Flot&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../charts/inline.html">&LT;i class="fa fa-circle-o">&LT;/i> Inline charts&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>            
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-laptop">&LT;/i>
-                &LT;span>UI Elements&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="../UI/general.html">&LT;i class="fa fa-circle-o">&LT;/i> General&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../UI/icons.html">&LT;i class="fa fa-circle-o">&LT;/i> Icons&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../UI/buttons.html">&LT;i class="fa fa-circle-o">&LT;/i> Buttons&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../UI/sliders.html">&LT;i class="fa fa-circle-o">&LT;/i> Sliders&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../UI/timeline.html">&LT;i class="fa fa-circle-o">&LT;/i> Timeline&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../UI/modals.html">&LT;i class="fa fa-circle-o">&LT;/i> Modals&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-edit">&LT;/i> &LT;span>Forms&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="../forms/general.html">&LT;i class="fa fa-circle-o">&LT;/i> General Elements&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../forms/advanced.html">&LT;i class="fa fa-circle-o">&LT;/i> Advanced Elements&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../forms/editors.html">&LT;i class="fa fa-circle-o">&LT;/i> Editors&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-table">&LT;/i> &LT;span>Tables&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="../tables/simple.html">&LT;i class="fa fa-circle-o">&LT;/i> Simple tables&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="../tables/data.html">&LT;i class="fa fa-circle-o">&LT;/i> Data tables&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li>
-              &LT;a href="../calendar.html">
-                &LT;i class="fa fa-calendar">&LT;/i> &LT;span>Calendar&LT;/span>
-                &LT;small class="label pull-right bg-red">3&LT;/small>
-              &LT;/a>
-            &LT;/li>
-            &LT;li>
-              &LT;a href="../mailbox/mailbox.html">
-                &LT;i class="fa fa-envelope">&LT;/i> &LT;span>Mailbox&LT;/span>
-                &LT;small class="label pull-right bg-yellow">12&LT;/small>
-              &LT;/a>
-            &LT;/li>
-            &LT;li class="treeview active">
-              &LT;a href="#">
-                &LT;i class="fa fa-folder">&LT;/i> &LT;span>Examples&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="invoice.html">&LT;i class="fa fa-circle-o">&LT;/i> Invoice&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="login.html">&LT;i class="fa fa-circle-o">&LT;/i> Login&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="register.html">&LT;i class="fa fa-circle-o">&LT;/i> Register&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="lockscreen.html">&LT;i class="fa fa-circle-o">&LT;/i> Lockscreen&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="404.html">&LT;i class="fa fa-circle-o">&LT;/i> 404 Error&LT;/a>&LT;/li>
-                &LT;li>&LT;a href="500.html">&LT;i class="fa fa-circle-o">&LT;/i> 500 Error&LT;/a>&LT;/li>
-                &LT;li class="active">&LT;a href="blank.html">&LT;i class="fa fa-circle-o">&LT;/i> Blank Page&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li class="treeview">
-              &LT;a href="#">
-                &LT;i class="fa fa-share">&LT;/i> &LT;span>Multilevel&LT;/span>
-                &LT;i class="fa fa-angle-left pull-right">&LT;/i>
-              &LT;/a>
-              &LT;ul class="treeview-menu">
-                &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level One&LT;/a>&LT;/li>
-                &LT;li>
-                  &LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level One &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
-                  &LT;ul class="treeview-menu">
-                    &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level Two&LT;/a>&LT;/li>
-                    &LT;li>
-                      &LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level Two &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
-                      &LT;ul class="treeview-menu">
-                        &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level Three&LT;/a>&LT;/li>
-                        &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level Three&LT;/a>&LT;/li>
-                      &LT;/ul>
-                    &LT;/li>
-                  &LT;/ul>
-                &LT;/li>
-                &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o">&LT;/i> Level One&LT;/a>&LT;/li>
-              &LT;/ul>
-            &LT;/li>
-            &LT;li>&LT;a href="documentation/index.html">&LT;i class="fa fa-book">&LT;/i> Documentation&LT;/a>&LT;/li>
-            &LT;li class="header">LABELS&LT;/li>
-            &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o text-danger">&LT;/i> Important&LT;/a>&LT;/li>
-            &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o text-warning">&LT;/i> Warning&LT;/a>&LT;/li>
-            &LT;li>&LT;a href="#">&LT;i class="fa fa-circle-o text-info">&LT;/i> Information&LT;/a>&LT;/li>
-          &LT;/ul>
-        &LT;/section>
-        &LT;!-- /.sidebar -->
-      &LT;/aside>
-
-      &LT;!-- =============================================== -->
-
-      &LT;!-- Right side column. Contains the navbar and content of the page -->
-      &LT;div class="content-wrapper">
-        &LT;!-- Content Header (Page header) -->
-        &LT;section class="content-header">
-          &LT;h1>
-            Blank page
-            &LT;small>it all starts here&LT;/small>
-          &LT;/h1>
-          &LT;ol class="breadcrumb">
-            &LT;li>&LT;a href="#">&LT;i class="fa fa-dashboard">&LT;/i> Home&LT;/a>&LT;/li>
-            &LT;li>&LT;a href="#">Examples&LT;/a>&LT;/li>
-            &LT;li class="active">Blank page&LT;/li>
-          &LT;/ol>
-        &LT;/section>
-
-        &LT;!-- Main content -->
-        &LT;section class="content">
-
-          &LT;!-- Default box -->
-          &LT;div class="box">
-            &LT;div class="box-header with-border">
-              &LT;h3 class="box-title">Title&LT;/h3>
-              &LT;div class="box-tools pull-right">
-                &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
-                &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
-              &LT;/div>
-            &LT;/div>
-            &LT;div class="box-body">
-              Start creating your amazing application!
-            &LT;/div>&LT;!-- /.box-body -->
-            &LT;div class="box-footer">
-              Footer
-            &LT;/div>&LT;!-- /.box-footer-->
-          &LT;/div>&LT;!-- /.box -->
-
-        &LT;/section>&LT;!-- /.content -->
-      &LT;/div>&LT;!-- /.content-wrapper -->
-
-      &LT;footer class="main-footer">
-        &LT;div class="pull-right hidden-xs">
-          &LT;b>Version&LT;/b> 2.0
-        &LT;/div>
-        &LT;strong>Copyright &copy; 2014-2015 &LT;a href="http://almsaeedstudio.com">Almsaeed Studio&LT;/a>.&LT;/strong> All rights reserved.
-      &LT;/footer>
-    &LT;/div>&LT;!-- ./wrapper -->
-
-    &LT;!-- jQuery 2.1.3 -->
-    &LT;script src="plugins/jQuery/jQuery-2.1.3.min.js">&LT;/script>
-    &LT;!-- Bootstrap 3.3.2 JS -->
-    &LT;script src="bootstrap/js/bootstrap.min.js" type="text/javascript">&LT;/script>
-    &LT;!-- SlimScroll -->
-    &LT;script src="plugins/slimScroll/jquery.slimScroll.min.js" type="text/javascript">&LT;/script>
-    &LT;!-- FastClick -->
-    &LT;script src='plugins/fastclick/fastclick.min.js'>&LT;/script>
-    &LT;!-- AdminLTE App -->
-    &LT;script src="dist/js/app.min.js" type="text/javascript">&LT;/script>
-    &LT;!-- AdminLTE for demo purposes -->
-    &LT;script src="dist/js/demo.js" type="text/javascript">&LT;/script>
-  &LT;/body>
-&LT;/html></pre>
+  </div>  

  <h3>Layout Options</h3>
  <p class="lead">AdminLTE 2.0 provides a set of options to apply to your main layout. Each on of these classes can be added
@@ -421,7 +27,7 @@
  <p class="lead">Skins can be found in the dist/css/skins folder.
    Choose and the skin file that you want then add the appropriate
    class to the body tag to change the template's appearance. Here is the list of available skins:</p>
-  <ul>
+  <ul class="bring-up">
    <li><code>skin-blue</code></li>
    <li><code>skin-yellow</code></li>
    <li><code>skin-purple</code></li>
--- a/documentation/build/include/license.html
+++ b/documentation/build/include/license.html
@@ -1,5 +1,5 @@
 <section id="license">
-  <h1 class="page-header"><a href="#license">License</a></h1>
+  <h2 class="page-header"><a href="#license">License</a></h2>
  <h3>AdminLTE</h3>
  <p class="lead">AdminLTE is an open source project that is licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>.
    This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software."
--- a/documentation/build/include/plugins.html
+++ b/documentation/build/include/plugins.html
@@ -1,7 +1,7 @@
 <section id='plugins'>
  <h2 class='page-header'><a href="#plugins">Plugins</a></h2>
  <p class="lead">AdminLTE makes use of the following plugins. For documentation, updates or license information, please visit the provided links.</p>
-  <div class='row'>
+  <div class='row bring-up'>
    <div class='col-sm-3'>
      <ul class="list-unstyled">
        <li><h4>Charts</h4></li>
--- a/documentation/build/index.html
+++ b/documentation/build/index.html
@@ -5,12 +5,12 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Documentation</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <link href="../dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css" />
@@ -19,8 +19,8 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="skin-blue fixed" data-spy="scroll" data-target="#scrollspy">
@@ -28,7 +28,13 @@

      <header class="main-header">
        <!-- Logo -->
-        <a href="../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -47,21 +53,23 @@
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
-        <section class="sidebar" id="scrollspy">
+        <div class="sidebar" id="scrollspy">

          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="nav sidebar-menu">
            <li class="header">TABLE OF CONTENTS</li>
-            <li><a href="#introduction"><i class='fa fa-circle-o'></i> Introduction</a></li>
+            <li class="active"><a href="#introduction"><i class='fa fa-circle-o'></i> Introduction</a></li>
            <li><a href="#download"><i class='fa fa-circle-o'></i> Download</a></li>
            <li><a href="#dependencies"><i class='fa fa-circle-o'></i> Dependencies</a></li>
            <li><a href="#advice"><i class='fa fa-circle-o'></i> Advice</a></li>
            <li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li>
+            <li><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
            <li class='treeview' id='scrollspy-components'>
-              <a href="#components"><i class='fa fa-circle-o'></i> Components</a>
+              <a href="javascript::;"><i class='fa fa-circle-o'></i> Components</a>
              <ul class='nav treeview-menu'>
                <li><a href='#component-main-header'>Main Header</a></li>
                <li><a href='#component-sidebar'>Sidebar</a></li>
+                <li><a href='#component-control-sidebar'>Control Sidebar</a></li>
                <li><a href='#component-info-box'>Info Box</a></li>                
                <li><a href='#component-box'>Boxes</a></li>
                <li><a href='#component-direct-chat'>Direct Chat</a></li>
@@ -70,10 +78,11 @@
            <li><a href="#plugins"><i class='fa fa-circle-o'></i> Plugins</a></li>
            <li><a href="#browsers"><i class='fa fa-circle-o'></i> Browser Support</a></li>
            <li><a href="#upgrade"><i class='fa fa-circle-o'></i> Upgrade Guide</a></li>
+            <li><a href="#implementations"><i class='fa fa-circle-o'></i> Implementations</a></li>
            <li><a href="#faq"><i class='fa fa-circle-o'></i> FAQ</a></li>
            <li><a href="#license"><i class='fa fa-circle-o'></i> License</a></li>
          </ul>
-        </section>
+        </div>
        <!-- /.sidebar -->
      </aside>

@@ -83,7 +92,7 @@
        <div class="content-header">
          <h1>
            AdminLTE Documentation
-            <small>Current version 2.0.2</small>
+            <small>Current version 2.1.0</small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
@@ -93,52 +102,57 @@

        <!-- Main content -->
        <div class="content body">
-          <div class="callout callout-warning no-margin">
-            <h4>Warning!</h4>
-            This documentation is under development. Some information may change as the progress of creating the documentation continues.
-          </div>
+
 include "introduction.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "download.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "dependencies.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "advice.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "layout.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->
+
+include "adminlte-options.html"
+
+<!-- ============================================================= -->

 include "components.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "plugins.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "browsers.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "upgrade.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->
+
+include "implementations.html"
+
+<!-- ============================================================= -->

 include "faq.html"

-          <!-- ============================================================= -->
+<!-- ============================================================= -->

 include "license.html"
-          
+
        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->

@@ -149,14 +163,25 @@ include "license.html"
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>

+      <!-- Control Sidebar -->
+      <aside class="control-sidebar control-sidebar-dark">
+        <!-- Create the tabs -->
+        <div class="pad">
+          This is an example of the control sidebar.
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
+
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
-    <script src='../plugins/fastclick/fastclick.min.js'></script>
+    <script src='../plugins/fastclick/fastclick.min.js'></script>    
    <!-- AdminLTE App -->
    <script src="../dist/js/app.min.js" type="text/javascript"></script>
    <!-- SlimScroll 1.3.0 -->
--- a/documentation/docs.js
+++ b/documentation/docs.js
@@ -1,5 +1,5 @@
 /* 
- * Documentation specific JS script
+ * Documentation JS script
 */
 $(function () {
  var slideToTop = $("<div />");
@@ -42,9 +42,9 @@ $(function () {
      scrollTop: 0
    }, 500);
  });
-  $(".sidebar-menu li a").click(function () {
+  $(".sidebar-menu li:not(.treeview) a").click(function () {
    var $this = $(this);
-    var target = $this.attr("href");
+    var target = $this.attr("href");    
    if (typeof target === 'string') {
      $("body").animate({
        scrollTop: ($(target).offset().top) + "px"
--- a/documentation/index.html
+++ b/documentation/index.html
--- a/documentation/style.css
+++ b/documentation/style.css
@@ -4,9 +4,15 @@
 .content-wrapper p {
  padding: 0 10px;
  font-size: 16px;
+  position: relative;
+  z-index: 30;
 }
-
-.content {
+.bring-up {
+  position: relative;
+  z-index: 30;
+}
+.content {  
+  font-size: 16px;
  z-index: 500;
 }

@@ -104,7 +110,7 @@ p {
 }
 /* Hemisu Light */
 /* Original theme - http://noahfrederick.com/vim-color-scheme-hemisu/ */
-.prettyprint {
+pre.prettyprint {
  background: white;
  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
  font-size: 12px;
@@ -112,6 +118,12 @@ p {
  border: 1px solid #dedede!important;
  padding: 10px;
  max-height: 300px;
+  width: auto;
+  overflow: auto!important;
+}
+pre.prettyprint > code {
+  width: auto;
+  overflow: auto!important;
 }

 .pln {
--- a/index.html
+++ b/index.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    
    <!-- FontAwesome 4.3.0 -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons 2.0.0 -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />    
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />    
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -31,16 +31,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
        <!-- Logo -->
-        <a href="index2.html" class="logo"><b>Admin</b>LTE</a>
+        <a href="index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -275,6 +280,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -341,6 +350,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -432,11 +442,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -887,10 +897,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- jQuery UI 1.11.2 -->
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
@@ -910,23 +1087,22 @@
    <!-- jQuery Knob Chart -->
    <script src="plugins/knob/jquery.knob.js" type="text/javascript"></script>
    <!-- daterangepicker -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
    <script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
    <!-- datepicker -->
    <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
    <!-- Bootstrap WYSIHTML5 -->
    <script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
-    <!-- iCheck -->
-    <script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
    <!-- Slimscroll -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='plugins/fastclick/fastclick.min.js'></script>
    <!-- AdminLTE App -->
-    <script src="dist/js/app.min.js" type="text/javascript"></script>
-
+    <script src="dist/js/app.min.js" type="text/javascript"></script>    
+    
    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
-    <script src="dist/js/pages/dashboard.js" type="text/javascript"></script>
-
+    <script src="dist/js/pages/dashboard.js" type="text/javascript"></script>    
+    
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js" type="text/javascript"></script>
  </body>
--- a/index2.html
+++ b/index2.html
@@ -4,37 +4,40 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
-    <!-- Morris chart -->
-    <link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- jvectormap -->
    <link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
-    <!-- Daterange picker -->
-    <link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <!-- AdminLTE Skins. Choose a skin from the css/skins 
+    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
-      
+
      <header class="main-header">
+
        <!-- Logo -->
-        <a href="index2.html" class="logo"><b>Admin</b>LTE</a>
+        <a href="index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
+
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -270,8 +273,13 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
+
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
@@ -336,6 +344,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="pages/charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="pages/charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="pages/charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="pages/charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -427,11 +436,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -523,7 +532,7 @@
                      <p class="text-center">
                        <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
                      </p>
-                      <div class="chart-responsive">
+                      <div class="chart">
                        <!-- Sales Chart Canvas -->
                        <canvas id="salesChart" height="180"></canvas>
                      </div><!-- /.chart-responsive -->
@@ -642,324 +651,226 @@
                  </div><!-- /.row -->
                </div><!-- /.box-body -->
              </div><!-- /.box -->
+              <div class="row">
+                <div class="col-md-6">
+                  <!-- DIRECT CHAT -->
+                  <div class="box box-warning direct-chat direct-chat-warning">
+                    <div class="box-header with-border">
+                      <h3 class="box-title">Direct Chat</h3>
+                      <div class="box-tools pull-right">
+                        <span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span>
+                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                        <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
+                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                      </div>
+                    </div><!-- /.box-header -->
+                    <div class="box-body">
+                      <!-- Conversations are loaded here -->
+                      <div class="direct-chat-messages">
+                        <!-- Message. Default to the left -->
+                        <div class="direct-chat-msg">
+                          <div class='direct-chat-info clearfix'>
+                            <span class='direct-chat-name pull-left'>Alexander Pierce</span>
+                            <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
+                          </div><!-- /.direct-chat-info -->
+                          <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+                          <div class="direct-chat-text">
+                            Is this template really for free? That's unbelievable!
+                          </div><!-- /.direct-chat-text -->
+                        </div><!-- /.direct-chat-msg -->

-            </div><!-- /.col -->
+                        <!-- Message to the right -->
+                        <div class="direct-chat-msg right">
+                          <div class='direct-chat-info clearfix'>
+                            <span class='direct-chat-name pull-right'>Sarah Bullock</span>
+                            <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
+                          </div><!-- /.direct-chat-info -->
+                          <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+                          <div class="direct-chat-text">
+                            You better believe it!
+                          </div><!-- /.direct-chat-text -->
+                        </div><!-- /.direct-chat-msg -->

-            <div class="col-md-4">
-              <!-- Info Boxes Style 2 -->
-              <div class="info-box bg-yellow">
-                <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
-                <div class="info-box-content">
-                  <span class="info-box-text">Inventory</span>
-                  <span class="info-box-number">5,200</span>
-                  <div class="progress">
-                    <div class="progress-bar" style="width: 50%"></div>
-                  </div>
-                  <span class="progress-description">
-                    50% Increase in 30 Days
-                  </span>
-                </div><!-- /.info-box-content -->
-              </div><!-- /.info-box -->
-              <div class="info-box bg-green">
-                <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
-                <div class="info-box-content">
-                  <span class="info-box-text">Mentions</span>
-                  <span class="info-box-number">92,050</span>
-                  <div class="progress">
-                    <div class="progress-bar" style="width: 20%"></div>
-                  </div>
-                  <span class="progress-description">
-                    20% Increase in 30 Days
-                  </span>
-                </div><!-- /.info-box-content -->
-              </div><!-- /.info-box -->
-              <div class="info-box bg-red">
-                <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
-                <div class="info-box-content">
-                  <span class="info-box-text">Downloads</span>
-                  <span class="info-box-number">114,381</span>
-                  <div class="progress">
-                    <div class="progress-bar" style="width: 70%"></div>
-                  </div>
-                  <span class="progress-description">
-                    70% Increase in 30 Days
-                  </span>
-                </div><!-- /.info-box-content -->
-              </div><!-- /.info-box -->
-              <div class="info-box bg-aqua">
-                <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
-                <div class="info-box-content">
-                  <span class="info-box-text">Direct Messages</span>
-                  <span class="info-box-number">163,921</span>
-                  <div class="progress">
-                    <div class="progress-bar" style="width: 40%"></div>
-                  </div>
-                  <span class="progress-description">
-                    40% Increase in 30 Days
-                  </span>
-                </div><!-- /.info-box-content -->
-              </div><!-- /.info-box -->
-            </div><!-- /.col -->
-          </div><!-- /.row -->
+                        <!-- Message. Default to the left -->
+                        <div class="direct-chat-msg">
+                          <div class='direct-chat-info clearfix'>
+                            <span class='direct-chat-name pull-left'>Alexander Pierce</span>
+                            <span class='direct-chat-timestamp pull-right'>23 Jan 5:37 pm</span>
+                          </div><!-- /.direct-chat-info -->
+                          <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+                          <div class="direct-chat-text">
+                            Working with AdminLTE on a great new app! Wanna join?
+                          </div><!-- /.direct-chat-text -->
+                        </div><!-- /.direct-chat-msg -->

-          <div class='row'>
-            <div class='col-md-4'>
-              <!-- DIRECT CHAT -->
-              <div class="box box-warning direct-chat direct-chat-warning">
-                <div class="box-header with-border">
-                  <h3 class="box-title">Direct Chat</h3>
-                  <div class="box-tools pull-right">
-                    <span data-toggle="tooltip" title="3 New Messages" class='badge bg-yellow'>3</span>
-                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                    <button class="btn btn-box-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
-                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                  </div>
-                </div><!-- /.box-header -->
-                <div class="box-body">
-                  <!-- Conversations are loaded here -->
-                  <div class="direct-chat-messages">
-                    <!-- Message. Default to the left -->
-                    <div class="direct-chat-msg">
-                      <div class='direct-chat-info clearfix'>
-                        <span class='direct-chat-name pull-left'>Alexander Pierce</span>
-                        <span class='direct-chat-timestamp pull-right'>23 Jan 2:00 pm</span>
-                      </div><!-- /.direct-chat-info -->
-                      <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                      <div class="direct-chat-text">
-                        Is this template really for free? That's unbelievable!
-                      </div><!-- /.direct-chat-text -->
-                    </div><!-- /.direct-chat-msg -->
+                        <!-- Message to the right -->
+                        <div class="direct-chat-msg right">
+                          <div class='direct-chat-info clearfix'>
+                            <span class='direct-chat-name pull-right'>Sarah Bullock</span>
+                            <span class='direct-chat-timestamp pull-left'>23 Jan 6:10 pm</span>
+                          </div><!-- /.direct-chat-info -->
+                          <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
+                          <div class="direct-chat-text">
+                            I would love to.
+                          </div><!-- /.direct-chat-text -->
+                        </div><!-- /.direct-chat-msg -->

-                    <!-- Message to the right -->
-                    <div class="direct-chat-msg right">
-                      <div class='direct-chat-info clearfix'>
-                        <span class='direct-chat-name pull-right'>Sarah Bullock</span>
-                        <span class='direct-chat-timestamp pull-left'>23 Jan 2:05 pm</span>
-                      </div><!-- /.direct-chat-info -->
-                      <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                      <div class="direct-chat-text">
-                        You better believe it!
-                      </div><!-- /.direct-chat-text -->
-                    </div><!-- /.direct-chat-msg -->
-
-                    <!-- Message. Default to the left -->
-                    <div class="direct-chat-msg">
-                      <div class='direct-chat-info clearfix'>
-                        <span class='direct-chat-name pull-left'>Alexander Pierce</span>
-                        <span class='direct-chat-timestamp pull-right'>23 Jan 5:37 pm</span>
-                      </div><!-- /.direct-chat-info -->
-                      <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                      <div class="direct-chat-text">
-                        Working with AdminLTE on a great new app! Wanna join?
-                      </div><!-- /.direct-chat-text -->
-                    </div><!-- /.direct-chat-msg -->
-
-                    <!-- Message to the right -->
-                    <div class="direct-chat-msg right">
-                      <div class='direct-chat-info clearfix'>
-                        <span class='direct-chat-name pull-right'>Sarah Bullock</span>
-                        <span class='direct-chat-timestamp pull-left'>23 Jan 6:10 pm</span>
-                      </div><!-- /.direct-chat-info -->
-                      <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image" /><!-- /.direct-chat-img -->
-                      <div class="direct-chat-text">
-                        I would love to.
-                      </div><!-- /.direct-chat-text -->
-                    </div><!-- /.direct-chat-msg -->
-
-                  </div><!--/.direct-chat-messages-->
+                      </div><!--/.direct-chat-messages-->


-                  <!-- Contacts are loaded here -->
-                  <div class="direct-chat-contacts">
-                    <ul class='contacts-list'>
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user1-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              Count Dracula
-                              <small class='contacts-list-date pull-right'>2/28/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>How have you been? I was...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user7-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              Sarah Doe
-                              <small class='contacts-list-date pull-right'>2/23/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>I will be waiting for...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user3-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              Nadia Jolie
-                              <small class='contacts-list-date pull-right'>2/20/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>I'll call you back at...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user5-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              Nora S. Vans
-                              <small class='contacts-list-date pull-right'>2/10/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>Where is your new...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user6-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              John K.
-                              <small class='contacts-list-date pull-right'>1/27/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>Can I take a look at...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                      <li>
-                        <a href='#'>
-                          <img class='contacts-list-img' src='dist/img/user8-128x128.jpg'/>
-                          <div class='contacts-list-info'>
-                            <span class='contacts-list-name'>
-                              Kenneth M.
-                              <small class='contacts-list-date pull-right'>1/4/2015</small>
-                            </span>
-                            <span class='contacts-list-msg'>Never mind I found...</span>
-                          </div><!-- /.contacts-list-info -->
-                        </a>
-                      </li><!-- End Contact Item -->
-                    </ul><!-- /.contatcts-list -->
-                  </div><!-- /.direct-chat-pane -->
-                </div><!-- /.box-body -->
-                <div class="box-footer">
-                  <form action="#" method="post">
-                    <div class="input-group">
-                      <input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
-                      <span class="input-group-btn">
-                        <button type="button" class="btn btn-warning btn-flat">Send</button>
-                      </span>
-                    </div>
-                  </form>
-                </div><!-- /.box-footer-->
-              </div><!--/.direct-chat -->
-            </div><!-- /.col -->
-            <div class='col-md-4'>
-              <!-- USERS LIST -->
-              <div class="box box-danger">
-                <div class="box-header with-border">
-                  <h3 class="box-title">Latest Members</h3>
-                  <div class="box-tools pull-right">
-                    <span class="label label-danger">8 New Members</span>
-                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                  </div>
-                </div><!-- /.box-header -->
-                <div class="box-body no-padding">
-                  <ul class="users-list clearfix">
-                    <li>
-                      <img src="dist/img/user1-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Alexander Pierce</a>
-                      <span class="users-list-date">Today</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user8-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Norman</a>
-                      <span class="users-list-date">Yesterday</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user7-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Jane</a>
-                      <span class="users-list-date">12 Jan</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user6-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">John</a>
-                      <span class="users-list-date">12 Jan</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user2-160x160.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Alexander</a>
-                      <span class="users-list-date">13 Jan</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user5-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Sarah</a>
-                      <span class="users-list-date">14 Jan</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user4-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Nora</a>
-                      <span class="users-list-date">15 Jan</span>
-                    </li>
-                    <li>
-                      <img src="dist/img/user3-128x128.jpg" alt="User Image"/>
-                      <a class="users-list-name" href="#">Nadia</a>
-                      <span class="users-list-date">15 Jan</span>
-                    </li>
-                  </ul><!-- /.users-list -->
-                </div><!-- /.box-body -->
-                <div class="box-footer text-center">
-                  <a href="javascript::" class="uppercase">View All Users</a>
-                </div><!-- /.box-footer -->
-              </div><!--/.box -->
-            </div><!-- /.col -->
-            <div class='col-md-4'>
-              <div class="box box-default">
-                <div class="box-header with-border">
-                  <h3 class="box-title">Browser Usage</h3>
-                  <div class="box-tools pull-right">
-                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
-                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
-                  </div>
-                </div><!-- /.box-header -->
-                <div class="box-body">
-                  <div class="row">
-                    <div class="col-md-8">
-                      <div class="chart-responsive">
-                        <canvas id="pieChart" height="150"></canvas>
-                      </div><!-- ./chart-responsive -->
-                    </div><!-- /.col -->
-                    <div class="col-md-4">
-                      <ul class="chart-legend clearfix">
-                        <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
-                        <li><i class="fa fa-circle-o text-green"></i> IE</li>
-                        <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
-                        <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
-                        <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
-                        <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
-                      </ul>
-                    </div><!-- /.col -->
-                  </div><!-- /.row -->
-                </div><!-- /.box-body -->
-                <div class="box-footer no-padding">
-                  <ul class="nav nav-pills nav-stacked">
-                    <li><a href="#">United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
-                    <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
-                    <li><a href="#">China <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
-                  </ul>
-                </div><!-- /.footer -->
-              </div><!-- /.box -->
-            </div><!-- /.col -->
-          </div><!-- /.row -->
+                      <!-- Contacts are loaded here -->
+                      <div class="direct-chat-contacts">
+                        <ul class='contacts-list'>
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user1-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  Count Dracula
+                                  <small class='contacts-list-date pull-right'>2/28/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>How have you been? I was...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user7-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  Sarah Doe
+                                  <small class='contacts-list-date pull-right'>2/23/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>I will be waiting for...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user3-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  Nadia Jolie
+                                  <small class='contacts-list-date pull-right'>2/20/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>I'll call you back at...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user5-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  Nora S. Vans
+                                  <small class='contacts-list-date pull-right'>2/10/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>Where is your new...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user6-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  John K.
+                                  <small class='contacts-list-date pull-right'>1/27/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>Can I take a look at...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                          <li>
+                            <a href='#'>
+                              <img class='contacts-list-img' src='dist/img/user8-128x128.jpg'/>
+                              <div class='contacts-list-info'>
+                                <span class='contacts-list-name'>
+                                  Kenneth M.
+                                  <small class='contacts-list-date pull-right'>1/4/2015</small>
+                                </span>
+                                <span class='contacts-list-msg'>Never mind I found...</span>
+                              </div><!-- /.contacts-list-info -->
+                            </a>
+                          </li><!-- End Contact Item -->
+                        </ul><!-- /.contatcts-list -->
+                      </div><!-- /.direct-chat-pane -->
+                    </div><!-- /.box-body -->
+                    <div class="box-footer">
+                      <form action="#" method="post">
+                        <div class="input-group">
+                          <input type="text" name="message" placeholder="Type Message ..." class="form-control"/>
+                          <span class="input-group-btn">
+                            <button type="button" class="btn btn-warning btn-flat">Send</button>
+                          </span>
+                        </div>
+                      </form>
+                    </div><!-- /.box-footer-->
+                  </div><!--/.direct-chat -->
+                </div><!-- /.col -->
+
+                <div class="col-md-6">
+                  <!-- USERS LIST -->
+                  <div class="box box-danger">
+                    <div class="box-header with-border">
+                      <h3 class="box-title">Latest Members</h3>
+                      <div class="box-tools pull-right">
+                        <span class="label label-danger">8 New Members</span>
+                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                        <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                      </div>
+                    </div><!-- /.box-header -->
+                    <div class="box-body no-padding">
+                      <ul class="users-list clearfix">
+                        <li>
+                          <img src="dist/img/user1-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Alexander Pierce</a>
+                          <span class="users-list-date">Today</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user8-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Norman</a>
+                          <span class="users-list-date">Yesterday</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user7-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Jane</a>
+                          <span class="users-list-date">12 Jan</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user6-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">John</a>
+                          <span class="users-list-date">12 Jan</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user2-160x160.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Alexander</a>
+                          <span class="users-list-date">13 Jan</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user5-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Sarah</a>
+                          <span class="users-list-date">14 Jan</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user4-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Nora</a>
+                          <span class="users-list-date">15 Jan</span>
+                        </li>
+                        <li>
+                          <img src="dist/img/user3-128x128.jpg" alt="User Image"/>
+                          <a class="users-list-name" href="#">Nadia</a>
+                          <span class="users-list-date">15 Jan</span>
+                        </li>
+                      </ul><!-- /.users-list -->
+                    </div><!-- /.box-body -->
+                    <div class="box-footer text-center">
+                      <a href="javascript::" class="uppercase">View All Users</a>
+                    </div><!-- /.box-footer -->
+                  </div><!--/.box -->
+                </div><!-- /.col -->
+              </div><!-- /.row -->

-          <div class="row">
-            <div class="col-md-8">
              <!-- TABLE: LATEST ORDERS -->
              <div class="box box-info">
                <div class="box-header with-border">
@@ -1033,7 +944,98 @@
                </div><!-- /.box-footer -->
              </div><!-- /.box -->
            </div><!-- /.col -->
+
            <div class="col-md-4">
+              <!-- Info Boxes Style 2 -->
+              <div class="info-box bg-yellow">
+                <span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
+                <div class="info-box-content">
+                  <span class="info-box-text">Inventory</span>
+                  <span class="info-box-number">5,200</span>
+                  <div class="progress">
+                    <div class="progress-bar" style="width: 50%"></div>
+                  </div>
+                  <span class="progress-description">
+                    50% Increase in 30 Days
+                  </span>
+                </div><!-- /.info-box-content -->
+              </div><!-- /.info-box -->
+              <div class="info-box bg-green">
+                <span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
+                <div class="info-box-content">
+                  <span class="info-box-text">Mentions</span>
+                  <span class="info-box-number">92,050</span>
+                  <div class="progress">
+                    <div class="progress-bar" style="width: 20%"></div>
+                  </div>
+                  <span class="progress-description">
+                    20% Increase in 30 Days
+                  </span>
+                </div><!-- /.info-box-content -->
+              </div><!-- /.info-box -->
+              <div class="info-box bg-red">
+                <span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
+                <div class="info-box-content">
+                  <span class="info-box-text">Downloads</span>
+                  <span class="info-box-number">114,381</span>
+                  <div class="progress">
+                    <div class="progress-bar" style="width: 70%"></div>
+                  </div>
+                  <span class="progress-description">
+                    70% Increase in 30 Days
+                  </span>
+                </div><!-- /.info-box-content -->
+              </div><!-- /.info-box -->
+              <div class="info-box bg-aqua">
+                <span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
+                <div class="info-box-content">
+                  <span class="info-box-text">Direct Messages</span>
+                  <span class="info-box-number">163,921</span>
+                  <div class="progress">
+                    <div class="progress-bar" style="width: 40%"></div>
+                  </div>
+                  <span class="progress-description">
+                    40% Increase in 30 Days
+                  </span>
+                </div><!-- /.info-box-content -->
+              </div><!-- /.info-box -->
+
+              <div class="box box-default">
+                <div class="box-header with-border">
+                  <h3 class="box-title">Browser Usage</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
+                </div><!-- /.box-header -->
+                <div class="box-body">
+                  <div class="row">
+                    <div class="col-md-8">
+                      <div class="chart-responsive">
+                        <canvas id="pieChart" height="150"></canvas>
+                      </div><!-- ./chart-responsive -->
+                    </div><!-- /.col -->
+                    <div class="col-md-4">
+                      <ul class="chart-legend clearfix">
+                        <li><i class="fa fa-circle-o text-red"></i> Chrome</li>
+                        <li><i class="fa fa-circle-o text-green"></i> IE</li>
+                        <li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
+                        <li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
+                        <li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
+                        <li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
+                      </ul>
+                    </div><!-- /.col -->
+                  </div><!-- /.row -->
+                </div><!-- /.box-body -->
+                <div class="box-footer no-padding">
+                  <ul class="nav nav-pills nav-stacked">
+                    <li><a href="#">United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
+                    <li><a href="#">India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
+                    <li><a href="#">China <span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
+                  </ul>
+                </div><!-- /.footer -->
+              </div><!-- /.box -->
+
              <!-- PRODUCT LIST -->
              <div class="box box-primary">
                <div class="box-header with-border">
@@ -1047,7 +1049,7 @@
                  <ul class="products-list product-list-in-box">
                    <li class="item">
                      <div class="product-img">
-                        <img src="http://placehold.it/50x50/d2d6de/ffffff" alt="Product Image"/>
+                        <img src="dist/img/default-50x50.gif" alt="Product Image"/>
                      </div>
                      <div class="product-info">
                        <a href="javascript::;" class="product-title">Samsung TV <span class="label label-warning pull-right">$1800</span></a>
@@ -1097,7 +1099,6 @@
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
-
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

@@ -1108,10 +1109,175 @@
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>

+      <!-- Control Sidebar -->
+      <aside class="control-sidebar control-sidebar-dark">
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+          </div><!-- /.tab-pane -->
+
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
+
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
@@ -1123,12 +1289,6 @@
    <!-- jvectormap -->
    <script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
    <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
-    <!-- daterangepicker -->
-    <script src="plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
-    <!-- datepicker -->
-    <script src="plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
-    <!-- iCheck -->
-    <script src="plugins/iCheck/icheck.min.js" type="text/javascript"></script>
    <!-- SlimScroll 1.3.0 -->
    <script src="plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- ChartJS 1.0.1 -->
--- a/package.json
+++ b/package.json
@@ -1,11 +1,18 @@
 {
-  "name": "AdminLTE",
-  "version": "2.0.5",
+  "name": "admin-lte",
+  "version": "2.1.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/almasaeed2010/AdminLTE.git"
+  },
  "devDependencies": {
+    "R2": "^1.4.3",
    "grunt": "~0.4.5",
+    "grunt-contrib-cssmin": "^0.12.2",
    "grunt-contrib-less": "^0.12.0",
    "grunt-contrib-uglify": "^0.7.0",
    "grunt-contrib-watch": "~0.6.1",
+    "grunt-cssjanus": "^0.2.4",
    "grunt-includes": "^0.4.5"
  }
-}
+}
--- a/pages/UI/buttons.html
+++ b/pages/UI/buttons.html
@@ -4,30 +4,36 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
-    <!-- AdminLTE Skins. Choose a skin from the css/skins 
+    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="../../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
-      
+
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -331,6 +341,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -1319,10 +1330,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+
+      <!-- Control Sidebar -->
+      <aside class="control-sidebar control-sidebar-dark">
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/UI/general.html
+++ b/pages/UI/general.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | General UI</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
@@ -19,13 +19,13 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .color-palette {
-        height: 50px;
-        line-height: 50px;
+        height: 35px;
+        line-height: 35px;
        text-align: center;

      }
@@ -34,17 +34,34 @@
      }
      .color-palette span {
        display: none;
+        font-size: 12px;
      }
      .color-palette:hover span {
        display: block;
      }
+      .color-palette-box h4 {
+        position: absolute;
+        top: 100%;
+        left: 25px;
+        margin-top: -40px;
+        color: rgba(255, 255, 255, 0.8);
+        font-size: 12px;
+        display: block;    
+        z-index: 7;
+      }
    </style>
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -282,6 +299,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -306,7 +327,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -348,6 +369,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -439,11 +461,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -459,14 +481,15 @@
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-            <li class="active">Blank page</li>
+            <li><a href="#">UI</a></li>
+            <li class="active">General</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">
          <!-- COLOR PALETTE -->
-          <div class='box box-default'>
+          <div class='box box-default color-palette-box'>
            <div class='box-header with-border'>
              <h3 class='box-title'><i class="fa fa-tag"></i> Color Palette</h3>
            </div>
@@ -644,6 +667,7 @@
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
                  <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
+                  <li><a href="#tab_3" data-toggle="tab">Tab 3</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      Dropdown <span class="caret"></span>
@@ -680,6 +704,15 @@
                    words. If several languages coalesce, the grammar of the resulting language is more simple
                    and regular than that of the individual languages.
                  </div><!-- /.tab-pane -->
+                  <div class="tab-pane" id="tab_3">
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                    It has survived not only five centuries, but also the leap into electronic typesetting,
+                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+                    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+                    like Aldus PageMaker including versions of Lorem Ipsum.
+                  </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->
              </div><!-- nav-tabs-custom -->
            </div><!-- /.col -->
@@ -690,6 +723,7 @@
                <ul class="nav nav-tabs pull-right">
                  <li class="active"><a href="#tab_1-1" data-toggle="tab">Tab 1</a></li>
                  <li><a href="#tab_2-2" data-toggle="tab">Tab 2</a></li>
+                  <li><a href="#tab_3-2" data-toggle="tab">Tab 3</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      Dropdown <span class="caret"></span>
@@ -726,6 +760,15 @@
                    words. If several languages coalesce, the grammar of the resulting language is more simple
                    and regular than that of the individual languages.
                  </div><!-- /.tab-pane -->
+                  <div class="tab-pane" id="tab_3-2">
+                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+                    when an unknown printer took a galley of type and scrambled it to make a type specimen book.
+                    It has survived not only five centuries, but also the leap into electronic typesetting,
+                    remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset
+                    sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
+                    like Aldus PageMaker including versions of Lorem Ipsum.
+                  </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->
              </div><!-- nav-tabs-custom -->
            </div><!-- /.col -->
@@ -1168,10 +1211,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/UI/icons.html
+++ b/pages/UI/icons.html
--- a/pages/UI/modals.html
+++ b/pages/UI/modals.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Modals</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,8 +19,8 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      .example-modal .modal {
@@ -37,11 +37,17 @@
      }
    </style>
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -303,7 +309,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -345,6 +351,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -436,11 +443,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -457,7 +464,7 @@
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">UI</a></li>
-            <li class="active">Buttons</li>
+            <li class="active">Modals</li>
          </ol>
        </section>

@@ -590,10 +597,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/UI/sliders.html
+++ b/pages/UI/sliders.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | UI Sliders</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Ion Slider -->
    <link href="../../plugins/ionslider/ion.rangeSlider.css" rel="stylesheet" type="text/css" />
    <!-- ion slider Nice -->
@@ -25,15 +25,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -271,6 +277,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -295,7 +305,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -337,6 +347,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -428,11 +439,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -532,10 +543,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/UI/timeline.html
+++ b/pages/UI/timeline.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Timeline</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -331,6 +341,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -609,10 +620,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/calendar.html
+++ b/pages/calendar.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Calendar</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- fullCalendar 2.2.5-->
    <link href="../plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
    <link href="../plugins/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" media='print' />
@@ -22,15 +22,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -292,7 +298,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -334,6 +340,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -425,11 +432,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -523,10 +530,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- jQuery UI 1.11.1 -->
@@ -540,7 +714,7 @@
    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js" type="text/javascript"></script>
    <!-- fullCalendar 2.2.5 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js" type="text/javascript"></script>
    <script src="../plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
    <!-- Page specific script -->
    <script type="text/javascript">
--- a/pages/charts/chartjs.html
+++ b/pages/charts/chartjs.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | ChartJS</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
-      
+
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -157,6 +163,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -181,7 +191,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -223,7 +233,8 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
-                <li class="active"><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
+                <li class="active"><a href="chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
+                <li><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
              </ul>
@@ -314,11 +325,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -335,7 +346,7 @@
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Charts</a></li>
-            <li class="active">Morris</li>
+            <li class="active">ChartJS</li>
          </ol>
        </section>

@@ -345,23 +356,31 @@
            <div class="col-md-6">
              <!-- AREA CHART -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Area Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
-                  <canvas id="areaChart" height="250"></canvas>
+                  <div class="chart">
+                    <canvas id="areaChart" height="250"></canvas>
+                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

              <!-- DONUT CHART -->
              <div class="box box-danger">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Donut Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
-                  <div class="chart-responsive">
-                    <canvas id="pieChart" height="250"></canvas>
-                  </div>
+                    <canvas id="pieChart" height="250"></canvas>                  
                </div><!-- /.box-body -->
              </div><!-- /.box -->

@@ -369,21 +388,33 @@
            <div class="col-md-6">
              <!-- LINE CHART -->
              <div class="box box-info">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Line Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
-                  <canvas id="lineChart" height="250"></canvas>
+                  <div class="chart">
+                    <canvas id="lineChart" height="250"></canvas>
+                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

              <!-- BAR CHART -->
              <div class="box box-success">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Bar Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
-                  <canvas id="barChart" height="230"></canvas>
+                  <div class="chart">
+                    <canvas id="barChart" height="230"></canvas>
+                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->

@@ -398,10 +429,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- ChartJS 1.0.1 -->
--- a/pages/charts/flot.html
+++ b/pages/charts/flot.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Flot Charts</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -331,6 +341,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li class="active"><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -442,7 +453,8 @@
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-            <li class="active">Blank page</li>
+            <li><a href="#">Charts</a></li>
+            <li class="active">Flot</li>
          </ol>
        </section>

@@ -452,7 +464,7 @@
            <div class="col-xs-12">
              <!-- interactive chart -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Interactive Area Chart</h3>
                  <div class="box-tools pull-right">
@@ -475,9 +487,13 @@
            <div class="col-md-6">
              <!-- Line chart -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Line Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
                  <div id="line-chart" style="height: 300px;"></div>
@@ -486,9 +502,13 @@

              <!-- Area chart -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Full Width Area Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
                  <div id="area-chart" style="height: 338px;" class="full-width-chart"></div>
@@ -500,9 +520,13 @@
            <div class="col-md-6">
              <!-- Bar chart -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Bar Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
                  <div id="bar-chart" style="height: 300px;"></div>
@@ -511,9 +535,13 @@

              <!-- Donut chart -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">Donut Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body">
                  <div id="donut-chart" style="height: 300px;"></div>
@@ -530,10 +558,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/charts/inline.html
+++ b/pages/charts/inline.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -331,6 +341,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li  class="active"><a href="inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -442,7 +453,8 @@
          </h1>
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
-            <li class="active">Blank page</li>
+            <li><a href="#">Charts</a></li>
+            <li class="active">Inline Charts</li>
          </ol>
        </section>

@@ -717,10 +729,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- SlimScroll 1.3.0 -->
--- a/pages/charts/morris.html
+++ b/pages/charts/morris.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Morris.js Charts</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Morris charts -->
    <link href="../../plugins/morris/morris.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
@@ -21,15 +21,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -267,6 +273,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -291,7 +301,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -333,6 +343,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li class="active"><a href="morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -424,11 +435,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -459,8 +470,12 @@
            <div class="col-md-6">
              <!-- AREA CHART -->
              <div class="box box-primary">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Area Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="revenue-chart" style="height: 300px;"></div>
@@ -469,8 +484,12 @@

              <!-- DONUT CHART -->
              <div class="box box-danger">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Donut Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
@@ -481,8 +500,12 @@
            <div class="col-md-6">
              <!-- LINE CHART -->
              <div class="box box-info">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Line Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="line-chart" style="height: 300px;"></div>
@@ -491,8 +514,12 @@

              <!-- BAR CHART -->
              <div class="box box-success">
-                <div class="box-header">
+                <div class="box-header with-border">
                  <h3 class="box-title">Bar Chart</h3>
+                  <div class="box-tools pull-right">
+                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
+                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                  </div>
                </div>
                <div class="box-body chart-responsive">
                  <div class="chart" id="bar-chart" style="height: 300px;"></div>
@@ -510,14 +537,181 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- Morris.js charts -->
-    <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
    <script src="../../plugins/morris/morris.min.js" type="text/javascript"></script>
    <!-- FastClick -->
    <script src='../../plugins/fastclick/fastclick.min.js'></script>
--- a/pages/examples/404.html
+++ b/pages/examples/404.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | 404 Page not found</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -330,6 +340,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -475,10 +486,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/pages/examples/500.html
+++ b/pages/examples/500.html
@@ -4,12 +4,12 @@
    <meta charset="UTF-8">
    <title>AdminLTE 2 | 500 Error</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
-    <!-- Bootstrap 3.3.2 -->
+    <!-- Bootstrap 3.3.4 -->
    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome Icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Ionicons -->
-    <link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
+    <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css" />
    <!-- Theme style -->
    <link href="../../dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
    <!-- AdminLTE Skins. Choose a skin from the css/skins 
@@ -19,15 +19,21 @@
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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.3.0/respond.min.js"></script>
+        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
-  <body class="skin-blue">
+  <body class="skin-blue sidebar-mini">
    <div class="wrapper">
      
      <header class="main-header">
-        <a href="../../index2.html" class="logo"><b>Admin</b>LTE</a>
+        <!-- Logo -->
+        <a href="../../index2.html" class="logo">
+          <!-- mini logo for sidebar mini 50x50 pixels -->
+          <span class="logo-mini"><b>A</b>LT</span>
+          <!-- logo for regular state and mobile devices -->
+          <span class="logo-lg"><b>Admin</b>LTE</span>
+        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
@@ -265,6 +271,10 @@
                  </li>
                </ul>
              </li>
+              <!-- Control Sidebar Toggle Button -->
+              <li>
+                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
+              </li>
            </ul>
          </div>
        </nav>
@@ -289,7 +299,7 @@
            <div class="input-group">
              <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
-                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
+                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
@@ -331,6 +341,7 @@
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
+                <li><a href="../charts/chartjs.html"><i class="fa fa-circle-o"></i> ChartJS</a></li>
                <li><a href="../charts/morris.html"><i class="fa fa-circle-o"></i> Morris</a></li>
                <li><a href="../charts/flot.html"><i class="fa fa-circle-o"></i> Flot</a></li>
                <li><a href="../charts/inline.html"><i class="fa fa-circle-o"></i> Inline charts</a></li>
@@ -422,11 +433,11 @@
                <li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
              </ul>
            </li>
-            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> Documentation</a></li>
+            <li><a href="../../documentation/index.html"><i class="fa fa-book"></i> <span>Documentation</span></a></li>
            <li class="header">LABELS</li>
-            <li><a href="#"><i class="fa fa-circle-o text-danger"></i> Important</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-warning"></i> Warning</a></li>
-            <li><a href="#"><i class="fa fa-circle-o text-info"></i> Information</a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Important</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></a></li>
+            <li><a href="#"><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></a></li>
          </ul>
        </section>
        <!-- /.sidebar -->
@@ -476,10 +487,177 @@
        </div>
        <strong>Copyright &copy; 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
      </footer>
+      
+      <!-- Control Sidebar -->      
+      <aside class="control-sidebar control-sidebar-dark">                
+        <!-- Create the tabs -->
+        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
+          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
+          
+          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
+        </ul>
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <!-- Home tab content -->
+          <div class="tab-pane" id="control-sidebar-home-tab">
+            <h3 class="control-sidebar-heading">Recent Activity</h3>
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
+                    <p>Will be 23 on April 24th</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-user bg-yellow"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
+                    <p>New phone +1(800)555-1234</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
+                    <p>nora@example.com</p>
+                  </div>
+                </a>
+              </li>
+              <li>
+                <a href='javascript::;'>
+                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
+                  <div class="menu-info">
+                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
+                    <p>Execution time 5 seconds</p>
+                  </div>
+                </a>
+              </li>
+            </ul><!-- /.control-sidebar-menu -->
+
+            <h3 class="control-sidebar-heading">Tasks Progress</h3> 
+            <ul class='control-sidebar-menu'>
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Custom Template Design
+                    <span class="label label-danger pull-right">70%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Update Resume
+                    <span class="label label-success pull-right">95%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Laravel Integration
+                    <span class="label label-waring pull-right">50%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
+                  </div>                                    
+                </a>
+              </li> 
+              <li>
+                <a href='javascript::;'>               
+                  <h4 class="control-sidebar-subheading">
+                    Back End Framework
+                    <span class="label label-primary pull-right">68%</span>
+                  </h4>
+                  <div class="progress progress-xxs">
+                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
+                  </div>                                    
+                </a>
+              </li>               
+            </ul><!-- /.control-sidebar-menu -->         
+
+          </div><!-- /.tab-pane -->
+          <!-- Stats tab content -->
+          <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div><!-- /.tab-pane -->
+          <!-- Settings tab content -->
+          <div class="tab-pane" id="control-sidebar-settings-tab">            
+            <form method="post">
+              <h3 class="control-sidebar-heading">General Settings</h3>
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Report panel usage
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Some information about this general settings option
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Allow mail redirect
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Other sets of options are available
+                </p>
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Expose author name in posts
+                  <input type="checkbox" class="pull-right" checked />
+                </label>
+                <p>
+                  Allow the user to show his name in blog posts
+                </p>
+              </div><!-- /.form-group -->
+
+              <h3 class="control-sidebar-heading">Chat Settings</h3>
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Show me as online
+                  <input type="checkbox" class="pull-right" checked />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Turn off notifications
+                  <input type="checkbox" class="pull-right" />
+                </label>                
+              </div><!-- /.form-group -->
+
+              <div class="form-group">
+                <label class="control-sidebar-subheading">
+                  Delete chat history
+                  <a href="javascript::;" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
+                </label>                
+              </div><!-- /.form-group -->
+            </form>
+          </div><!-- /.tab-pane -->
+        </div>
+      </aside><!-- /.control-sidebar -->
+      <!-- Add the sidebar's background. This div must be placed
+           immediately after the control sidebar -->
+      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

-    <!-- jQuery 2.1.3 -->
-    <script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.2 JS -->
    <script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- FastClick -->
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Abdullah Almsaeed	e55c2b85aa	Fix issue #405	2015-05-09 00:02:45 -04:00
Abdullah Almsaeed	7948e11145	Invalid file name caused server to not load jQuery	2015-05-08 17:25:54 -04:00
Abdullah Almsaeed	077bacd847	Updated docs	2015-05-08 16:57:00 -04:00
Abdullah Almsaeed	2401235e98	Fixed issue #403	2015-05-08 16:39:34 -04:00
Abdullah Almsaeed	b203535862	Merge pull request #401 from suvjunmd/index2 Removed redundant link and script elements	2015-05-07 19:37:35 -04:00
Abdullah Almsaeed	d9cc6e3d37	Merge pull request #400 from suvjunmd/datatables Updated DataTables to 1.10.7	2015-05-07 19:37:13 -04:00
Abdullah Almsaeed	72a190f384	Merge pull request #399 from suvjunmd/jquery Updated jQuery to 2.1.4	2015-05-07 19:36:13 -04:00
Dmitri Suvorov	bc3b170782	Removed redundant link and script elements	2015-05-07 23:32:18 +03:00
Dmitri Suvorov	1ea3e97d1f	Updated DataTables to 1.10.7	2015-05-07 22:44:30 +03:00
Dmitri Suvorov	02c04ca12d	Updated jQuery to 2.1.4	2015-05-07 21:56:39 +03:00
Abdullah Almsaeed	2b8e2c3859	Updated documentation	2015-05-07 00:04:48 -04:00
Abdullah Almsaeed	d72176caa7	Fixed issue with extending $.AdminLTE.options	2015-05-06 23:59:51 -04:00
Abdullah Almsaeed	c0280e2819	Fixed a problem click propagation for the control sidebar toggle button	2015-05-06 22:53:47 -04:00
Abdullah Almsaeed	b80104171d	Updated change log and versioning info	2015-05-06 20:16:11 -04:00
Abdullah Almsaeed	7bfbc542cc	Removed extra css	2015-05-06 17:47:30 -04:00
Abdullah Almsaeed	c46d8723f7	Updated hover color for navs	2015-05-06 17:41:43 -04:00
Abdullah Almsaeed	66f6c40b47	added overlay feature as suggested in issue #355	2015-05-05 10:45:52 -04:00
Abdullah Almsaeed	95a5719287	Added implementations section to the documentation	2015-05-05 10:41:17 -04:00
Abdullah Almsaeed	654fcc0922	Added enhancement per suggestion in #383	2015-05-04 23:14:19 -04:00
Abdullah Almsaeed	2af6d6ee45	Added border to box	2015-05-04 23:10:29 -04:00
Abdullah Almsaeed	e35f602533	Removed trailing white space	2015-05-04 23:10:08 -04:00
Abdullah Almsaeed	e0577e6d01	Removed alert from the top of the page	2015-05-04 23:09:29 -04:00
Abdullah Almsaeed	416583c0e0	Removed depricated tabs bottom	2015-05-04 23:00:52 -04:00
Abdullah Almsaeed	f2c3bd47aa	Fixed custom tabs issue #378	2015-05-04 22:56:42 -04:00
Abdullah Almsaeed	9adf789426	Fixed Safari & sidebar mini issue #370	2015-05-04 22:00:20 -04:00
Abdullah Almsaeed	d2bbd218f2	merged master	2015-05-04 21:52:34 -04:00
Abdullah Almsaeed	4780c4ad61	Fixed Safari control sidebar issue #377	2015-05-04 21:50:20 -04:00
Abdullah Almsaeed	c8ef738577	Merge pull request #391 from suvjunmd/breadcrumb Fixed text inside breadcrumbs	2015-05-04 21:19:29 -04:00
Abdullah Almsaeed	6b2a9191e1	Merge pull request #389 from suvjunmd/typos Fixed typos	2015-05-04 21:18:55 -04:00
Abdullah Almsaeed	c07774f947	Merge pull request #388 from suvjunmd/shiv Updated links to the latest versions of HTML5 Shiv and Respond.js	2015-05-04 21:16:57 -04:00
Dmitri Suvorov	a89298e29c	Fixed text inside breadcrumbs	2015-05-01 23:07:29 +03:00
Dmitri Suvorov	3e5e1008b5	Fixed typos	2015-05-01 22:46:17 +03:00
Dmitri Suvorov	bb7d6e72d5	Updated links to the latest versions of HTML5 Shiv and Respond.js	2015-05-01 21:44:04 +03:00
Abdullah Almsaeed	244134986b	Merge pull request #387 from suvjunmd/email Changed input type from text to email	2015-05-01 11:02:04 -04:00
Dmitri Suvorov	064de16cdd	Changed input type from text to email	2015-05-01 17:41:15 +03:00
Abdullah Almsaeed	cf6a37dc80	Compiled #386	2015-04-30 20:18:36 -04:00
Abdullah Almsaeed	25f3628be8	#386	2015-04-30 20:18:05 -04:00
Abdullah Almsaeed	01c0071459	Updates	2015-04-30 20:17:35 -04:00
Abdullah Almsaeed	7fd2c0bf47	Merge pull request #386 from iaesaudi/patch-3 Fix Animation on Safari	2015-04-30 20:16:57 -04:00
iae SAUDI	89bc33ce4c	Fix Animation on Safari Fix Animation issue in the LESS file :)	2015-05-01 03:15:22 +03:00
Abdullah Almsaeed	c51c10f236	Merge pull request #367 from suvjunmd/icons Updated Icons page to Font Awesome 4.3	2015-04-26 10:03:38 -04:00
Dmitri Suvorov	38dbc01055	Updated Icons page to Font Awesome 4.3	2015-04-25 22:07:35 +03:00
Abdullah Almsaeed	4b6b9ffef9	updated docs	2015-04-25 12:58:28 -04:00
Abdullah Almsaeed	2c1ef3d5d8	Updated docs	2015-04-25 12:58:13 -04:00
Abdullah Almsaeed	28ffb61ecc	Merge pull request #366 from suvjunmd/typos Fix typos	2015-04-25 12:47:05 -04:00
Dmitri Suvorov	35ea2489b5	Fix typos	2015-04-25 14:46:22 +03:00
Abdullah Almsaeed	e419815b34	Updated Bootstrap version in comments	2015-04-22 22:21:14 -04:00
Abdullah Almsaeed	bba4150caa	Merge pull request #362 from suvjunmd/typos2 Fix typos	2015-04-22 22:20:41 -04:00
Abdullah Almsaeed	1277b22ebe	Updated dataTables plugin and added extensions	2015-04-22 22:03:13 -04:00
Dmitri Suvorov	6d1efe98c7	Fix typos	2015-04-23 00:13:31 +03:00
Abdullah Almsaeed	c546ed7062	Merge pull request #360 from stefanmajoor/master Fixed typo in bower.json	2015-04-22 13:37:48 -04:00
stefanmajoor	36df97fe10	Update bower.json	2015-04-22 16:08:14 +02:00
Abdullah Almsaeed	75d1407041	Implemented suggestion in issue #341	2015-04-20 21:50:36 -04:00
Abdullah Almsaeed	22926e6792	removed unwanted margining	2015-04-19 20:56:29 -04:00
Abdullah Almsaeed	c1caa414f4	Updated boxshadow	2015-04-19 20:49:35 -04:00
Abdullah Almsaeed	bc4c3fca69	Updated box shoadow for navbar dropdown menus	2015-04-19 20:48:07 -04:00
Abdullah Almsaeed	d6861e81be	added close right sidebar on document click if the slide option is enabled	2015-04-19 19:15:49 -04:00
Abdullah Almsaeed	d4674d3a1d	Updated app.js	2015-04-19 18:41:56 -04:00
Abdullah Almsaeed	654614067b	Removed debug code	2015-04-19 18:00:21 -04:00
Abdullah Almsaeed	f23da45064	Updated mailbox iCheck plugin	2015-04-19 11:21:04 -04:00
Abdullah Almsaeed	0f46cb356b	Added demo to blank page	2015-04-19 11:16:32 -04:00
Abdullah Almsaeed	4bc1bbe090	Updated docs	2015-04-19 11:16:01 -04:00
Abdullah Almsaeed	bd926b06ac	Add collapse option for labels and folders in mailbox	2015-04-19 11:15:42 -04:00
Abdullah Almsaeed	d928b118df	Added option to enable expand sidebar on hover for sidebar mini	2015-04-19 08:56:15 -04:00
Abdullah Almsaeed	84ef3ce4da	Updated changelog	2015-04-19 08:22:12 -04:00
Abdullah Almsaeed	811d1f3dbe	Fix for sidebar mini and fixed layout	2015-04-19 08:21:03 -04:00
Abdullah Almsaeed	4476517642	Fix for sidebar mini logo overflow	2015-04-17 13:50:49 -04:00
Abdullah Almsaeed	125734950b	Revert Bower version to 2.0.5 - latest stable release	2015-04-16 11:46:53 -04:00
Abdullah Almsaeed	6757b695af	Update Bower	2015-04-16 11:44:18 -04:00
Abdullah Almsaeed	b149ad3db2	Removed support of RTL	2015-04-15 19:37:07 -04:00
Abdullah Almsaeed	69235fee35	Updated Bootstrap.css	2015-04-15 19:28:31 -04:00
Abdullah Almsaeed	ac2b52005c	RTL version in progress	2015-04-15 19:28:17 -04:00
Abdullah Almsaeed	ed56daaf97	Merge pull request #337 from gabel/bootstrap-3.3.4 Updated bootstrap to 3.3.4	2015-04-15 19:26:31 -04:00
Abdullah Almsaeed	fd7106ce5b	Added bootstrap-rtl	2015-04-15 19:08:15 -04:00
Abdullah Almsaeed	bc4a25452e	Fixed typos	2015-04-15 19:07:57 -04:00
Abdullah Almsaeed	777a93ddc4	Published	2015-04-15 19:07:24 -04:00
Abdullah Almsaeed	35e0d2e73d	Ignore logs	2015-04-15 19:07:05 -04:00
Abdullah Almsaeed	94e52710d5	updated	2015-04-15 19:06:16 -04:00
Abdullah Almsaeed	8f6d175488	updated	2015-04-15 19:05:38 -04:00
Abdullah Almsaeed	6eb0cefc4f	changed control sidebar icon	2015-04-15 19:05:23 -04:00
Abdullah Almsaeed	9a4adb7546	Updated daterangepicker plugin	2015-04-15 18:26:56 -04:00
Abdullah Almsaeed	9ac155ee5c	Fixed issue #338	2015-04-15 18:08:35 -04:00
Abdullah Almsaeed	d5c8cb8ab2	Added ability to make item clickable as suggested in issue #323	2015-04-15 18:06:38 -04:00
Abdullah Almsaeed	436856b1c3	Removed unused mixins	2015-04-14 19:14:34 -04:00
Martin Fischer	64096856cc	Updated bootstrap to 3.3.4	2015-04-14 08:11:30 +02:00
Abdullah Almsaeed	e0bd7ba438	Created light skin for control sidebar	2015-04-13 21:44:47 -04:00
Abdullah Almsaeed	a1f496be11	Added default dark skin to control sidebar	2015-04-13 21:43:45 -04:00
Abdullah Almsaeed	dc2b2fef49	Fixed issue #329	2015-04-09 21:06:47 -04:00
Abdullah Almsaeed	cd4c9aecba	Fixed issue #325	2015-04-09 20:59:44 -04:00
Abdullah Almsaeed	ffe1d9ced5	Fixed issue #328	2015-04-09 19:43:40 -04:00
Abdullah Almsaeed	ba23ea0a11	Fixed right sidebar and boxed layout issues	2015-04-09 19:21:44 -04:00
Abdullah Almsaeed	0d48b12fc0	Fixed sidebar mini transition issue	2015-04-09 19:19:23 -04:00
Abdullah Almsaeed	340be0df61	Updates to v2.1 alpha	2015-04-09 18:52:51 -04:00
Abdullah Almsaeed	0fc9439050	Updated light skin logos	2015-04-07 21:06:05 -04:00
Abdullah Almsaeed	0e7def36bb	Adjusted contacts pane position in direct chat	2015-04-07 21:05:43 -04:00
Abdullah Almsaeed	1ef5178a6c	Adjusted box overlay zindex	2015-04-07 21:04:55 -04:00
Abdullah Almsaeed	ac534fd60c	Added path variable to boxed layout bg img	2015-04-04 12:55:15 -04:00
Abdullah Almsaeed	a056fbf5b2	Merge pull request #320 from Elbandi/master Allow configure image path for boxed-bg.jpg	2015-04-04 12:52:05 -04:00
Abdullah Almsaeed	5a97938d81	Update demo	2015-04-03 23:19:41 -04:00
Abdullah Almsaeed	34a1353630	Updated	2015-04-03 22:55:46 -04:00
Abdullah Almsaeed	85b64ef0e7	Updated top layout	2015-04-03 22:55:30 -04:00
Abdullah Almsaeed	467d442c22	Added new chartjs preview page	2015-04-03 21:33:33 -04:00
Abdullah Almsaeed	b71df6e81c	Added control sidebar to all pages	2015-04-03 21:19:55 -04:00
Abdullah Almsaeed	802592aa4a	compiled updates	2015-04-03 20:52:09 -04:00
Abdullah Almsaeed	95fe7c218e	moved chart class to miscellaneous.less	2015-04-03 20:49:47 -04:00
Abdullah Almsaeed	7516fece64	Updated links to display sidebar mini properly	2015-04-03 20:48:20 -04:00
Abdullah Almsaeed	fb77d2171c	Force control sidebar to slide over content on small screens	2015-04-03 12:44:22 -04:00
Abdullah Almsaeed	4db47e6ca4	updated changelog	2015-04-03 12:43:37 -04:00
Abdullah Almsaeed	46c31acf01	Added clearfix to box elements	2015-04-03 12:34:36 -04:00
Abdullah Almsaeed	bad990bd1a	Updated demo menu	2015-04-03 12:20:14 -04:00
Abdullah Almsaeed	5a2dd478fb	Fixed sidebar-mini image issue	2015-04-03 12:19:55 -04:00
Abdullah Almsaeed	75596d1189	updated version	2015-04-03 12:00:48 -04:00
Abdullah Almsaeed	c74cf61565	pulled changes	2015-04-03 11:59:42 -04:00
Abdullah Almsaeed	09463c8db2	updated text colors for labels menu in sidebar	2015-04-03 11:59:05 -04:00
Abdullah Almsaeed	e9276e43ac	Added skins to css and updated js	2015-04-03 11:58:10 -04:00
Abdullah Almsaeed	a00ab59882	Updated control sidebar to get rid of the need for javascript to keep up with its height	2015-04-03 11:57:46 -04:00
Abdullah Almsaeed	9a122a39d6	Add skins auto compile	2015-04-03 11:56:51 -04:00
Abdullah Almsaeed	bbef7a40e9	Added light skin files	2015-04-03 11:56:11 -04:00
Andras Elso	0b5d6e55ed	Allow configure image path for boxed-bg.jpg	2015-04-03 11:30:51 +02:00
Abdullah Almsaeed	5e888faa31	Updates to control sidebar	2015-03-28 20:39:26 -04:00
Abdullah Almsaeed	4dacac85ec	Updated broken links	2015-03-28 17:33:02 -04:00
Abdullah Almsaeed	bfb25a6ee8	Updated control sidebar	2015-03-28 14:44:48 -04:00
Abdullah Almsaeed	7cc7d81ad9	Created light sidebar and added new skin mixins	2015-03-28 11:14:54 -04:00
Abdullah Almsaeed	2f7f43109d	Updatd collapsed sidebar support	2015-03-27 19:30:02 -04:00
Abdullah Almsaeed	ca3f112980	Updated build	2015-03-27 19:29:28 -04:00
Abdullah Almsaeed	940ac58558	Updated docs	2015-03-27 19:29:03 -04:00
Abdullah Almsaeed	919fba82f6	Added logo support for sidebar-mini	2015-03-25 19:05:57 -04:00
Abdullah Almsaeed	c2158b1138	don't remember	2015-03-25 19:00:53 -04:00
Abdullah Almsaeed	d0664b2695	Added https to CDN link	2015-03-25 18:59:50 -04:00
Abdullah Almsaeed	9ffad71b0d	Fixed h2 issue that caused inability to click links	2015-03-25 17:06:41 -04:00
Abdullah Almsaeed	993aff4e31	Prettified the charts and added chartjs	2015-03-23 10:13:35 -04:00
Abdullah Almsaeed	d373b16699	Removed unwanted height restriction on sidebar	2015-03-23 00:30:16 -04:00
Abdullah Almsaeed	1ad2394ff4	Added sidebar mini support to pages	2015-03-23 00:29:33 -04:00
Abdullah Almsaeed	e9b5020cc1	removed deprecated mailbox	2015-03-23 00:25:49 -04:00
Abdullah Almsaeed	046df357d9	Replaced placehold.it image with a local link	2015-03-22 22:53:08 -04:00
Abdullah Almsaeed	df02e559cb	Updated ion icons http to https	2015-03-22 22:49:04 -04:00
Abdullah Almsaeed	cbd471a3b2	Update README.md	2015-03-22 22:27:58 -04:00
Abdullah Almsaeed	8365e0e4c8	Update README.md	2015-03-22 21:38:10 -04:00
Abdullah Almsaeed	63b7c3d50e	Update README.md	2015-03-22 21:37:48 -04:00
Abdullah Almsaeed	4abde39635	Added span to sidebar links to be compatible with sidebar mini	2015-03-22 21:17:14 -04:00
Abdullah Almsaeed	b4cde82b74	Sidebar mini is here	2015-03-22 21:16:06 -04:00
Abdullah Almsaeed	a771ce89ea	Removed weird margin	2015-03-22 21:06:13 -04:00
Abdullah Almsaeed	de6f3a91f9	Compiled css files	2015-03-22 21:03:19 -04:00
Abdullah Almsaeed	cb5ab444d5	Prepared skins to be compatible with sidebar mini	2015-03-22 21:01:46 -04:00
Abdullah Almsaeed	7c7cc5768a	Added comments	2015-03-22 17:32:38 -04:00
Abdullah Almsaeed	2b2b706438	Added transition support to sidebar mini	2015-03-22 17:31:15 -04:00
Abdullah Almsaeed	776aa33cb8	Removed extra transition function	2015-03-22 17:28:38 -04:00
Abdullah Almsaeed	c8328e944c	Typo fix	2015-03-22 09:25:28 -04:00
Abdullah Almsaeed	d83809c4e9	Update Ion Icons	2015-03-22 08:45:38 -04:00
Abdullah Almsaeed	ae4fcde836	Merge from master	2015-03-21 22:38:14 -04:00
Abdullah Almsaeed	ab57813844	Updated color pallete style	2015-03-21 22:37:23 -04:00
Abdullah Almsaeed	f0fe6d8eff	Update README.md	2015-03-20 11:32:59 -04:00
				`@@ -0,0 +1 @@`
				.skin-black-light .main-header{-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.05);box-shadow:0 1px 1px rgba(0,0,0,0.05)}.skin-black-light .main-header .navbar-toggle{color:#333}.skin-black-light .main-header .navbar-brand{color:#333;border-right:1px solid #eee}.skin-black-light .main-header>.navbar{background-color:#fff}.skin-black-light .main-header>.navbar .nav>li>a{color:#333}.skin-black-light .main-header>.navbar .nav>li>a:hover,.skin-black-light .main-header>.navbar .nav>li>a:active,.skin-black-light .main-header>.navbar .nav>li>a:focus,.skin-black-light .main-header>.navbar .nav .open>a,.skin-black-light .main-header>.navbar .nav .open>a:hover,.skin-black-light .main-header>.navbar .nav .open>a:focus{background:#fff;color:#999}.skin-black-light .main-header>.navbar .sidebar-toggle{color:#333}.skin-black-light .main-header>.navbar .sidebar-toggle:hover{color:#999;background:#fff}.skin-black-light .main-header>.navbar>.sidebar-toggle{color:#333;border-right:1px solid #eee}.skin-black-light .main-header>.navbar .navbar-nav>li>a{border-right:1px solid #eee}.skin-black-light .main-header>.navbar .navbar-custom-menu .navbar-nav>li>a,.skin-black-light .main-header>.navbar .navbar-right>li>a{border-left:1px solid #eee;border-right-width:0}.skin-black-light .main-header>.logo{background-color:#fff;color:#333;border-bottom:0 solid transparent;border-right:1px solid #eee}.skin-black-light .main-header>.logo:hover{background-color:#fcfcfc}@media (max-width:767px){.skin-black-light .main-header>.logo{background-color:#222;color:#fff;border-bottom:0 solid transparent;border-right:none}.skin-black-light .main-header>.logo:hover{background-color:#1f1f1f}}.skin-black-light .main-header li.user-header{background-color:#222}.skin-black-light .content-header{background:transparent;box-shadow:none}.skin-black-light .wrapper,.skin-black-light .main-sidebar,.skin-black-light .left-side{background-color:#f9fafc}.skin-black-light .content-wrapper,.skin-black-light .main-footer{border-left:1px solid #d2d6de}.skin-black-light .user-panel>.info,.skin-black-light .user-panel>.info>a{color:#444}.skin-black-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-black-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-black-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-black-light .sidebar-menu>li:hover>a,.skin-black-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-black-light .sidebar-menu>li.active{border-left-color:#fff}.skin-black-light .sidebar-menu>li.active>a{font-weight:600}.skin-black-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-black-light .sidebar a{color:#444}.skin-black-light .sidebar a:hover{text-decoration:none}.skin-black-light .treeview-menu>li>a{color:#777}.skin-black-light .treeview-menu>li.active>a,.skin-black-light .treeview-menu>li>a:hover{color:#000}.skin-black-light .treeview-menu>li.active>a{font-weight:600}.skin-black-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-black-light .sidebar-form input[type="text"],.skin-black-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-black-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-black-light .sidebar-form input[type="text"]:focus,.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-black-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-black-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-black-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
				`@@ -0,0 +1 @@`
				.skin-blue-light .main-header .navbar{background-color:#3c8dbc}.skin-blue-light .main-header .navbar .nav>li>a{color:#fff}.skin-blue-light .main-header .navbar .nav>li>a:hover,.skin-blue-light .main-header .navbar .nav>li>a:active,.skin-blue-light .main-header .navbar .nav>li>a:focus,.skin-blue-light .main-header .navbar .nav .open>a,.skin-blue-light .main-header .navbar .nav .open>a:hover,.skin-blue-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-blue-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-blue-light .main-header .navbar .sidebar-toggle:hover{background-color:#367fa9}@media (max-width:767px){.skin-blue-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-blue-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-blue-light .main-header .navbar .dropdown-menu li a:hover{background:#367fa9}}.skin-blue-light .main-header .logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue-light .main-header .logo:hover{background-color:#3b8ab8}.skin-blue-light .main-header li.user-header{background-color:#3c8dbc}.skin-blue-light .content-header{background:transparent}.skin-blue-light .wrapper,.skin-blue-light .main-sidebar,.skin-blue-light .left-side{background-color:#f9fafc}.skin-blue-light .content-wrapper,.skin-blue-light .main-footer{border-left:1px solid #d2d6de}.skin-blue-light .user-panel>.info,.skin-blue-light .user-panel>.info>a{color:#444}.skin-blue-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-blue-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-blue-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-blue-light .sidebar-menu>li:hover>a,.skin-blue-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-blue-light .sidebar-menu>li.active{border-left-color:#3c8dbc}.skin-blue-light .sidebar-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-blue-light .sidebar a{color:#444}.skin-blue-light .sidebar a:hover{text-decoration:none}.skin-blue-light .treeview-menu>li>a{color:#777}.skin-blue-light .treeview-menu>li.active>a,.skin-blue-light .treeview-menu>li>a:hover{color:#000}.skin-blue-light .treeview-menu>li.active>a{font-weight:600}.skin-blue-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-blue-light .sidebar-form input[type="text"],.skin-blue-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-blue-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-blue-light .sidebar-form input[type="text"]:focus,.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-blue-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-blue-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}.skin-blue-light .main-footer{border-top-color:#d2d6de}.skin-blue.layout-top-nav .main-header>.logo{background-color:#3c8dbc;color:#fff;border-bottom:0 solid transparent}.skin-blue.layout-top-nav .main-header>.logo:hover{background-color:#3b8ab8}
				`@@ -0,0 +1 @@`
				.skin-green-light .main-header .navbar{background-color:#00a65a}.skin-green-light .main-header .navbar .nav>li>a{color:#fff}.skin-green-light .main-header .navbar .nav>li>a:hover,.skin-green-light .main-header .navbar .nav>li>a:active,.skin-green-light .main-header .navbar .nav>li>a:focus,.skin-green-light .main-header .navbar .nav .open>a,.skin-green-light .main-header .navbar .nav .open>a:hover,.skin-green-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-green-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-green-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-green-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-green-light .main-header .navbar .sidebar-toggle:hover{background-color:#008d4c}@media (max-width:767px){.skin-green-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-green-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-green-light .main-header .navbar .dropdown-menu li a:hover{background:#008d4c}}.skin-green-light .main-header .logo{background-color:#00a65a;color:#fff;border-bottom:0 solid transparent}.skin-green-light .main-header .logo:hover{background-color:#00a157}.skin-green-light .main-header li.user-header{background-color:#00a65a}.skin-green-light .content-header{background:transparent}.skin-green-light .wrapper,.skin-green-light .main-sidebar,.skin-green-light .left-side{background-color:#f9fafc}.skin-green-light .content-wrapper,.skin-green-light .main-footer{border-left:1px solid #d2d6de}.skin-green-light .user-panel>.info,.skin-green-light .user-panel>.info>a{color:#444}.skin-green-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-green-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-green-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-green-light .sidebar-menu>li:hover>a,.skin-green-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-green-light .sidebar-menu>li.active{border-left-color:#00a65a}.skin-green-light .sidebar-menu>li.active>a{font-weight:600}.skin-green-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-green-light .sidebar a{color:#444}.skin-green-light .sidebar a:hover{text-decoration:none}.skin-green-light .treeview-menu>li>a{color:#777}.skin-green-light .treeview-menu>li.active>a,.skin-green-light .treeview-menu>li>a:hover{color:#000}.skin-green-light .treeview-menu>li.active>a{font-weight:600}.skin-green-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-green-light .sidebar-form input[type="text"],.skin-green-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-green-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-green-light .sidebar-form input[type="text"]:focus,.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-green-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-green-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-green-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
				`@@ -0,0 +1 @@`
				.skin-purple-light .main-header .navbar{background-color:#605ca8}.skin-purple-light .main-header .navbar .nav>li>a{color:#fff}.skin-purple-light .main-header .navbar .nav>li>a:hover,.skin-purple-light .main-header .navbar .nav>li>a:active,.skin-purple-light .main-header .navbar .nav>li>a:focus,.skin-purple-light .main-header .navbar .nav .open>a,.skin-purple-light .main-header .navbar .nav .open>a:hover,.skin-purple-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-purple-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-purple-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-purple-light .main-header .navbar .sidebar-toggle:hover{background-color:#555299}@media (max-width:767px){.skin-purple-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-purple-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-purple-light .main-header .navbar .dropdown-menu li a:hover{background:#555299}}.skin-purple-light .main-header .logo{background-color:#605ca8;color:#fff;border-bottom:0 solid transparent}.skin-purple-light .main-header .logo:hover{background-color:#5d59a6}.skin-purple-light .main-header li.user-header{background-color:#605ca8}.skin-purple-light .content-header{background:transparent}.skin-purple-light .wrapper,.skin-purple-light .main-sidebar,.skin-purple-light .left-side{background-color:#f9fafc}.skin-purple-light .content-wrapper,.skin-purple-light .main-footer{border-left:1px solid #d2d6de}.skin-purple-light .user-panel>.info,.skin-purple-light .user-panel>.info>a{color:#444}.skin-purple-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-purple-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-purple-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-purple-light .sidebar-menu>li:hover>a,.skin-purple-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-purple-light .sidebar-menu>li.active{border-left-color:#605ca8}.skin-purple-light .sidebar-menu>li.active>a{font-weight:600}.skin-purple-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-purple-light .sidebar a{color:#444}.skin-purple-light .sidebar a:hover{text-decoration:none}.skin-purple-light .treeview-menu>li>a{color:#777}.skin-purple-light .treeview-menu>li.active>a,.skin-purple-light .treeview-menu>li>a:hover{color:#000}.skin-purple-light .treeview-menu>li.active>a{font-weight:600}.skin-purple-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-purple-light .sidebar-form input[type="text"],.skin-purple-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-purple-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-purple-light .sidebar-form input[type="text"]:focus,.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-purple-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-purple-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-purple-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
				`@@ -0,0 +1 @@`
				.skin-red-light .main-header .navbar{background-color:#dd4b39}.skin-red-light .main-header .navbar .nav>li>a{color:#fff}.skin-red-light .main-header .navbar .nav>li>a:hover,.skin-red-light .main-header .navbar .nav>li>a:active,.skin-red-light .main-header .navbar .nav>li>a:focus,.skin-red-light .main-header .navbar .nav .open>a,.skin-red-light .main-header .navbar .nav .open>a:hover,.skin-red-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-red-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-red-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-red-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-red-light .main-header .navbar .sidebar-toggle:hover{background-color:#d73925}@media (max-width:767px){.skin-red-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-red-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-red-light .main-header .navbar .dropdown-menu li a:hover{background:#d73925}}.skin-red-light .main-header .logo{background-color:#dd4b39;color:#fff;border-bottom:0 solid transparent}.skin-red-light .main-header .logo:hover{background-color:#dc4735}.skin-red-light .main-header li.user-header{background-color:#dd4b39}.skin-red-light .content-header{background:transparent}.skin-red-light .wrapper,.skin-red-light .main-sidebar,.skin-red-light .left-side{background-color:#f9fafc}.skin-red-light .content-wrapper,.skin-red-light .main-footer{border-left:1px solid #d2d6de}.skin-red-light .user-panel>.info,.skin-red-light .user-panel>.info>a{color:#444}.skin-red-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-red-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-red-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-red-light .sidebar-menu>li:hover>a,.skin-red-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-red-light .sidebar-menu>li.active{border-left-color:#dd4b39}.skin-red-light .sidebar-menu>li.active>a{font-weight:600}.skin-red-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-red-light .sidebar a{color:#444}.skin-red-light .sidebar a:hover{text-decoration:none}.skin-red-light .treeview-menu>li>a{color:#777}.skin-red-light .treeview-menu>li.active>a,.skin-red-light .treeview-menu>li>a:hover{color:#000}.skin-red-light .treeview-menu>li.active>a{font-weight:600}.skin-red-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-red-light .sidebar-form input[type="text"],.skin-red-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-red-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-red-light .sidebar-form input[type="text"]:focus,.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-red-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-red-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-red-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}
				`@@ -0,0 +1 @@`
				.skin-yellow-light .main-header .navbar{background-color:#f39c12}.skin-yellow-light .main-header .navbar .nav>li>a{color:#fff}.skin-yellow-light .main-header .navbar .nav>li>a:hover,.skin-yellow-light .main-header .navbar .nav>li>a:active,.skin-yellow-light .main-header .navbar .nav>li>a:focus,.skin-yellow-light .main-header .navbar .nav .open>a,.skin-yellow-light .main-header .navbar .nav .open>a:hover,.skin-yellow-light .main-header .navbar .nav .open>a:focus{background:rgba(0,0,0,0.1);color:#f6f6f6}.skin-yellow-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow-light .main-header .navbar .sidebar-toggle:hover{color:#f6f6f6;background:rgba(0,0,0,0.1)}.skin-yellow-light .main-header .navbar .sidebar-toggle{color:#fff}.skin-yellow-light .main-header .navbar .sidebar-toggle:hover{background-color:#e08e0b}@media (max-width:767px){.skin-yellow-light .main-header .navbar .dropdown-menu li.divider{background-color:rgba(255,255,255,0.1)}.skin-yellow-light .main-header .navbar .dropdown-menu li a{color:#fff}.skin-yellow-light .main-header .navbar .dropdown-menu li a:hover{background:#e08e0b}}.skin-yellow-light .main-header .logo{background-color:#f39c12;color:#fff;border-bottom:0 solid transparent}.skin-yellow-light .main-header .logo:hover{background-color:#f39a0d}.skin-yellow-light .main-header li.user-header{background-color:#f39c12}.skin-yellow-light .content-header{background:transparent}.skin-yellow-light .wrapper,.skin-yellow-light .main-sidebar,.skin-yellow-light .left-side{background-color:#f9fafc}.skin-yellow-light .content-wrapper,.skin-yellow-light .main-footer{border-left:1px solid #d2d6de}.skin-yellow-light .user-panel>.info,.skin-yellow-light .user-panel>.info>a{color:#444}.skin-yellow-light .sidebar-menu>li{-webkit-transition:border-left-color .3s ease;-o-transition:border-left-color .3s ease;transition:border-left-color .3s ease}.skin-yellow-light .sidebar-menu>li.header{color:#848484;background:#f9fafc}.skin-yellow-light .sidebar-menu>li>a{border-left:3px solid transparent;font-weight:600}.skin-yellow-light .sidebar-menu>li:hover>a,.skin-yellow-light .sidebar-menu>li.active>a{color:#000;background:#f4f4f5}.skin-yellow-light .sidebar-menu>li.active{border-left-color:#f39c12}.skin-yellow-light .sidebar-menu>li.active>a{font-weight:600}.skin-yellow-light .sidebar-menu>li>.treeview-menu{background:#f4f4f5}.skin-yellow-light .sidebar a{color:#444}.skin-yellow-light .sidebar a:hover{text-decoration:none}.skin-yellow-light .treeview-menu>li>a{color:#777}.skin-yellow-light .treeview-menu>li.active>a,.skin-yellow-light .treeview-menu>li>a:hover{color:#000}.skin-yellow-light .treeview-menu>li.active>a{font-weight:600}.skin-yellow-light .sidebar-form{border-radius:3px;border:1px solid #d2d6de;margin:10px 10px}.skin-yellow-light .sidebar-form input[type="text"],.skin-yellow-light .sidebar-form .btn{box-shadow:none;background-color:#fff;border:1px solid transparent;height:35px;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.skin-yellow-light .sidebar-form input[type="text"]{color:#666;border-top-left-radius:2px !important;border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-bottom-left-radius:2px !important}.skin-yellow-light .sidebar-form input[type="text"]:focus,.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{background-color:#fff;color:#666}.skin-yellow-light .sidebar-form input[type="text"]:focus+.input-group-btn .btn{border-left-color:#fff}.skin-yellow-light .sidebar-form .btn{color:#999;border-top-left-radius:0 !important;border-top-right-radius:2px !important;border-bottom-right-radius:2px !important;border-bottom-left-radius:0 !important}@media (min-width:768px){.skin-yellow-light.sidebar-mini.sidebar-collapse .sidebar-menu>li>.treeview-menu{border-left:1px solid #d2d6de}}