pull from master

Milestone 2.1.2
Merge pull request #491 from ivantcholakov/master
2015-06-09 01:41:48 +03:00 · 2015-06-09 01:41:18 +03:00 · 2015-06-08 01:26:10 +03:00 · 2015-06-07 05:10:41 +03:00 · 2015-06-02 17:05:14 +03:00 · 2015-06-02 16:50:24 +03:00
339 changed files with 141466 additions and 25250 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,5 @@
 /node_modules/
 TODO
 *.zip
+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 documentaion 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 latest release.

 ####Using The Command Line:

@@ -29,7 +29,7 @@ Download from Github or [visit Almsaeed Studio](http://almsaeedstudio.com) and d
 - Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
 - Clone to your machine 
 ```
-git clone https://github.com/YOUR_USERNAME/AdminLTE.git"
+git clone https://github.com/YOUR_USERNAME/AdminLTE.git
 ```

 **Bower**
@@ -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
@@ -62,7 +62,7 @@ Contribution
 Contribution are always **welcome and recommended**! Here is how:

 - Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git"
+- Clone to your machine ```git clone https://github.com/YOUR_USERNAME/AdminLTE.git```
 - Make your changes
 - Create a pull request

@@ -75,30 +75,56 @@ 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.2:**
+- Added explicit BoxWidget activation function issue #450
+- Crushed some bugs
+
+**v2.1.1:**
+- Fix version error
+
+**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
 - Updated documentation and fixed links scrolling issue
 - Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
 - Fixed sidebar stretching issue #275
- Fixed checkbox out of bounds issue in WYISHTML5 editor.
+- Fixed checkbox out of bounds issue in WYSIHTML5 editor.

 **v2.0.2:**
 - Solved issue with hidden arrow in select inputs.
--- 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.2",
+  "version": "2.1.2",
  "homepage": "http://almsaeedstudio.com",
  "authors": [
    "Abdullah Almsaeed <almasaeed2010@gmail.com>"
@@ -9,7 +9,7 @@
  "main": [
    "index2.html",
    "dist/css/AdminLTE.css",
-    "dist/js/AdminLTE.js",
+    "dist/js/app.js",
    "build/less/AdminLTE.less"
  ],
  "keywords": [
@@ -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.3
+ *   AdminLTE v2.1.2
 *   Author: Almsaeed Studio
 *	 Website: Almsaeed Studio <http://almsaeedstudio.com>
 *   License: Open source - MIT
@@ -7,13 +7,13 @@
 !*/

 //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.
-@import "../bootstrap-less/mixins.less";
-@import "../bootstrap-less/variables.less";
+//are included only for reference.
+@import (reference) "../bootstrap-less/mixins.less";
+@import (reference) "../bootstrap-less/variables.less";

 //MISC
 //----
@@ -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
@@ -443,4 +439,12 @@
 //Input in box
 .box-input {
  max-width: 200px;
+}
+
+//A fix for panels body text color when placed within 
+// a modal
+.modal {
+  .panel-body {
+    color: #444;
+  }
 }
--- 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
@@ -1,5 +1,5 @@
 /*
- * Core: Genral Layout Style
+ * Core: General Layout Style
 * -------------------------
 */
 html,
@@ -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/labels.less
+++ b/build/less/labels.less
@@ -12,7 +12,7 @@
 .label-info {
  &:extend(.bg-aqua);
 }
-.label-waring {
+.label-warning {
  &:extend(.bg-yellow);
 }
 .label-primary {
--- 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/28
+++ b/28
@@ -1,11 +1,37 @@
 CHANGE LOG:
+v2.1.2:
+- Added explicit BoxWidget activation function issue #450
+- Crushed some bugs
+
+v2.1.1:
+- Fix version error
+
+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
 - Updated documentation and fixed links scrolling issue
 - Created print.less file (this makes it easier if you want to create a seperate CSS file for printing)
 - Fixed sidebar stretching issue #275
- Fixed checkbox out of bounds issue in WYISHTML5 editor.
+- Fixed checkbox out of bounds issue in WYSIHTML5 editor.

 v2.0.2:
 - Solved issue with hidden arrow in select inputs.
--- a/dist/css/AdminLTE.css
+++ b/dist/css/AdminLTE.css
--- 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.3
+ * @version 2.1.2
 * @license MIT <http://opensource.org/licenses/MIT>
 */

@@ -41,12 +41,20 @@ $.AdminLTE.options = {
  navbarMenuSlimscroll: true,
  navbarMenuSlimscrollWidth: "3px", //The width of the scroll bar
  navbarMenuHeight: "200px", //The height of the inner menu
+  //General animation speed for JS animated elements such as box collapse/expand and 
+  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
+  //'fast', 'normal', or 'slow'
+  animationSpeed: 500,
  //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
@@ -57,18 +65,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,32 +140,49 @@ $.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;

+  //Set up the object
+  _init();
+
  //Activate the layout maker
  $.AdminLTE.layout.activate();

  //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
@@ -162,7 +197,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');
    });
@@ -174,7 +209,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();
@@ -183,218 +218,371 @@ $(function () {
  });
 });

-/* ----------------------
- * - AdminLTE Functions -
- * ----------------------
+/* ----------------------------------
+ * - Initialize the AdminLTE Object -
+ * ----------------------------------
 * All AdminLTE functions are implemented below.
 */
+function _init() {

-/* prepareLayout
- * =============
- * Fixes the layout height in case min-height fails.
- *
- * @type Object
- * @usage $.AdminLTE.layout.activate()
- *        $.AdminLTE.layout.fix()
- *        $.AdminLTE.layout.fixSidebar()
- */
-$.AdminLTE.layout = {
-  activate: function () {
-    var _this = this;
-    _this.fix();
-    _this.fixSidebar();
-    $(window, ".wrapper").resize(function () {
+  /* Layout
+   * ======
+   * Fixes the layout height in case min-height fails.
+   *
+   * @type Object
+   * @usage $.AdminLTE.layout.activate()
+   *        $.AdminLTE.layout.fix()
+   *        $.AdminLTE.layout.fixSidebar()
+   */
+  $.AdminLTE.layout = {
+    activate: function () {
+      var _this = this;
      _this.fix();
      _this.fixSidebar();
-    });
-  },
-  fix: function () {
-    //Get window height and the wrapper height
-    var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
-    var window_height = $(window).height();
-    var sidebar_height = $(".sidebar").height();
-    //Set the min-height of the content and sidebar based on the
-    //the height of the document.
-    if ($("body").hasClass("fixed")) {
-      $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
-    } else {
-      if (window_height >= sidebar_height) {
-        $(".content-wrapper, .right-side").css('min-height', window_height - neg);
+      $(window, ".wrapper").resize(function () {
+        _this.fix();
+        _this.fixSidebar();
+      });
+    },
+    fix: function () {
+      //Get window height and the wrapper height
+      var neg = $('.main-header').outerHeight() + $('.main-footer').outerHeight();
+      var window_height = $(window).height();
+      var sidebar_height = $(".sidebar").height();
+      //Set the min-height of the content and sidebar based on the
+      //the height of the document.
+      if ($("body").hasClass("fixed")) {
+        $(".content-wrapper, .right-side").css('min-height', window_height - $('.main-footer').outerHeight());
      } else {
-        $(".content-wrapper, .right-side").css('min-height', sidebar_height);
+        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 () {
+      //Make sure the body tag has the .fixed class
+      if (!$("body").hasClass("fixed")) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+        }
+        return;
+      } else if (typeof $.fn.slimScroll == 'undefined' && console) {
+        console.error("Error: the fixed layout requires the slimscroll plugin!");
+      }
+      //Enable slimscroll for fixed layout
+      if ($.AdminLTE.options.sidebarSlimScroll) {
+        if (typeof $.fn.slimScroll != 'undefined') {
+          //Destroy if it exists
+          $(".sidebar").slimScroll({destroy: true}).height("auto");
+          //Add slimscroll
+          $(".sidebar").slimscroll({
+            height: ($(window).height() - $(".main-header").height()) + "px",
+            color: "rgba(0,0,0,0.2)",
+            size: "3px"
+          });
+        }
      }
    }
-  },
-  fixSidebar: function () {
-    //Make sure the body tag has the .fixed class
-    if (!$("body").hasClass("fixed")) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
+  };
+
+  /* PushMenu()
+   * ==========
+   * Adds the push menu functionality to the sidebar.
+   *
+   * @type Function
+   * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
+   */
+  $.AdminLTE.pushMenu = {
+    activate: function (toggleBtn) {
+      //Get the screen sizes
+      var screenSizes = $.AdminLTE.options.screenSizes;
+
+      //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');
+          }
+        }
+      });
+
+      $(".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');
      }
-      return;
-    } else if (typeof $.fn.slimScroll == 'undefined' && console) {
-      console.error("Error: the fixed layout requires the slimscroll plugin!");
    }
-    //Enable slimscroll for fixed layout
-    if ($.AdminLTE.options.sidebarSlimScroll) {
-      if (typeof $.fn.slimScroll != 'undefined') {
-        //Distroy if it exists
-        $(".sidebar").slimScroll({destroy: true}).height("auto");
-        //Add slimscroll
-        $(".sidebar").slimscroll({
-          height: ($(window).height() - $(".main-header").height()) + "px",
-          color: "rgba(0,0,0,0.2)",
-          size: "3px"
+  };
+
+  /* Tree()
+   * ======
+   * Converts the sidebar into a multilevel
+   * tree view menu.
+   *
+   * @type Function
+   * @Usage: $.AdminLTE.tree('.sidebar')
+   */
+  $.AdminLTE.tree = function (menu) {
+    var _this = this;
+    var animationSpeed = $.AdminLTE.options.animationSpeed;
+    $("li a", $(menu)).on('click', function (e) {
+      //Get the clicked link and the next element
+      var $this = $(this);
+      var checkElement = $this.next();
+
+      //Check if the next element is a menu and is visible
+      if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
+        //Close the menu
+        checkElement.slideUp(animationSpeed, function () {
+          checkElement.removeClass('menu-open');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          //_this.layout.fix();
+        });
+        checkElement.parent("li").removeClass("active");
+      }
+      //If the menu is not visible
+      else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+        //Get the parent menu
+        var parent = $this.parents('ul').first();
+        //Close all open menus within the parent
+        var ul = parent.find('ul:visible').slideUp(animationSpeed);
+        //Remove the menu-open class from the parent
+        ul.removeClass('menu-open');
+        //Get the parent li
+        var parent_li = $this.parent("li");
+
+        //Open the target menu and add the menu-open class
+        checkElement.slideDown(animationSpeed, function () {
+          //Add the class active to the parent li
+          checkElement.addClass('menu-open');
+          parent.find('li.active').removeClass('active');
+          parent_li.addClass('active');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          _this.layout.fix();
        });
      }
-    }
-  }
-};
-
-/* PushMenu()
- * ==========
- * Adds the push menu functionality to the sidebar.
- *
- * @type Function
- * @usage: $.AdminLTE.pushMenu("[data-toggle='offcanvas']")
- */
-$.AdminLTE.pushMenu = function (toggleBtn) {
-  //Get the screen sizes
-  var screenSizes = this.options.screenSizes;
-
-  //Enable sidebar toggle
-  $(toggleBtn).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');
+      //if this isn't a link, prevent the page from being redirected
+      if (checkElement.is('.treeview-menu')) {
+        e.preventDefault();
      }
-    }
-  });
-
-  $(".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');
-    }
-  });
-
-};
-
-/* Tree()
- * ======
- * Converts the sidebar into a multilevel
- * tree view menu.
- *
- * @type Function
- * @Usage: $.AdminLTE.tree('.sidebar')
- */
-$.AdminLTE.tree = function (menu) {
-  var _this = this;
-
-  $("li a", $(menu)).click(function (e) {
-    //Get the clicked link and the next element
-    var $this = $(this);
-    var checkElement = $this.next();
-
-    //Check if the next element is a menu and is visible
-    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
-      //Close the menu
-      checkElement.slideUp('normal', function () {
-        checkElement.removeClass('menu-open');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        //_this.layout.fix();
-      });
-      checkElement.parent("li").removeClass("active");
-    }
-    //If the menu is not visible
-    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
-      //Get the parent menu
-      var parent = $this.parents('ul').first();
-      //Close all open menus within the parent
-      var ul = parent.find('ul:visible').slideUp('normal');
-      //Remove the menu-open class from the parent
-      ul.removeClass('menu-open');
-      //Get the parent li
-      var parent_li = $this.parent("li");
-
-      //Open the target menu and add the menu-open class
-      checkElement.slideDown('normal', function () {
-        //Add the class active to the parent li
-        checkElement.addClass('menu-open');
-        parent.find('li.active').removeClass('active');
-        parent_li.addClass('active');
-        //Fix the layout in case the sidebar stretches over the height of the window
-        _this.layout.fix();
-      });
-    }
-    //if this isn't a link, prevent the page from being redirected
-    if (checkElement.is('.treeview-menu')) {
-      e.preventDefault();
-    }
-  });
-};
-
-/* BoxWidget
- * =========
- * BoxWidget is 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
- */
-$.AdminLTE.boxWidget = {
-  activate: function () {
-    var o = $.AdminLTE.options;
-    var _this = this;
-    //Listen for collapse event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.collapse).click(function (e) {
-      e.preventDefault();
-      _this.collapse($(this));
    });
+  };

-    //Listen for remove event triggers
-    $(o.boxWidgetOptions.boxWidgetSelectors.remove).click(function (e) {
-      e.preventDefault();
-      _this.remove($(this));
-    });
-  },
-  collapse: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    //Find the body and the footer
-    var bf = 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 () {
-        box.addClass("collapsed-box");
+  /* 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);
+        }
      });
-    } else {
-      //Convert plus into minus
-      element.children(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
-      bf.slideDown(300, function () {
-        box.removeClass("collapsed-box");
+
+      //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());
    }
-  },
-  remove: function (element) {
-    //Find the box parent
-    var box = element.parents(".box").first();
-    box.slideUp();
-  },
-  options: $.AdminLTE.options.boxWidgetOptions
-};
+  };
+
+  /* BoxWidget
+   * =========
+   * BoxWidget is a plugin to handle collapsing and
+   * removing boxes from the screen.
+   *
+   * @type Object
+   * @usage $.AdminLTE.boxWidget.activate()
+   *        Set all your options in the main $.AdminLTE.options object
+   */
+  $.AdminLTE.boxWidget = {
+    selectors: $.AdminLTE.options.boxWidgetOptions.boxWidgetSelectors,
+    icons: $.AdminLTE.options.boxWidgetOptions.boxWidgetIcons,
+    animationSpeed: $.AdminLTE.options.animationSpeed,    
+    activate: function (_box) {
+      var _this = this;
+      if (! _box) {
+        _box = document; // activate all boxes per default
+      }
+      //Listen for collapse event triggers
+      $(_box).find(_this.selectors.collapse).on('click', function (e) {
+        e.preventDefault();
+        _this.collapse($(this));
+      });
+
+      //Listen for remove event triggers
+      $(_box).find(_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 box_content = box.find("> .box-body, > .box-footer");
+      if (!box.hasClass("collapsed-box")) {
+        //Convert minus into plus
+        element.children(":first")
+                .removeClass(_this.icons.collapse)
+                .addClass(_this.icons.open);
+        //Hide the content
+        box_content.slideUp(_this.animationSpeed, function () {
+          box.addClass("collapsed-box");
+        });
+      } else {
+        //Convert plus into minus
+        element.children(":first")
+                .removeClass(_this.icons.open)
+                .addClass(_this.icons.collapse);
+        //Show the content
+        box_content.slideDown(_this.animationSpeed, function () {
+          box.removeClass("collapsed-box");
+        });
+      }
+    },
+    remove: function (element) {     
+      //Find the box parent
+      var box = element.parents(".box").first();
+      box.slideUp(this.animationSpeed);
+    }
+  };
+}

 /* ------------------
 * - Custom Plugins -
@@ -405,7 +593,7 @@ $.AdminLTE.boxWidget = {
 /*
 * 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
@@ -417,7 +605,7 @@ $.AdminLTE.boxWidget = {

    // 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: "",
@@ -446,7 +634,7 @@ $.AdminLTE.boxWidget = {
      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);
@@ -476,6 +664,23 @@ $.AdminLTE.boxWidget = {

 })(jQuery);

+/*
+ * EXPLICIT BOX ACTIVATION
+ * -----------------------
+ * This is a custom plugin to use with the component BOX. It allows you to activate
+ * a box inserted in the DOM after the app.js was loaded.
+ *
+ * @type plugin
+ * @usage $("#box-widget").activateBox();
+ */
+(function ($) {
+
+  $.fn.activateBox = function () {
+    $.AdminLTE.boxWidget.activate(this);
+  };
+
+})(jQuery);
+
 /*
 * TODO LIST CUSTOM PLUGIN
 * -----------------------
--- 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='#' 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='#' 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='#' 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='#' 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='#' 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='#' 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",
@@ -37,13 +33,13 @@ $(function () {
          {
            ranges: {
              'Today': [moment(), moment()],
-              'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
-              'Last 7 Days': [moment().subtract('days', 6), moment()],
-              'Last 30 Days': [moment().subtract('days', 29), moment()],
+              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
+              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
-              'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
+              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
-            startDate: moment().subtract('days', 29),
+            startDate: moment().subtract(29, 'days'),
            endDate: moment()
          },
  function (start, end) {
--- a/documentation/build/include/adminlte-options.html
+++ b/documentation/build/include/adminlte-options.html
@@ -0,0 +1,123 @@
+<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
+  //General animation speed for JS animated elements such as box collapse/expand and 
+  //sidebar treeview slide up/down. This options accepts an integer as milliseconds,
+  //'fast', 'normal', or 'slow'
+  animationSpeed: 500,
+  //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/advice.html
+++ b/documentation/build/include/advice.html
@@ -1,5 +1,5 @@
 <section id='advice'>
-  <h2 class='page-header'><span>A Word of Advice</span></h2>
+  <h2 class='page-header'><a href="#advice">A Word of Advice</a></h2>
  <p class='lead'>
    Before you go to see your new awesome theme, here are few tips on how to familiarize yourself with it:
  </p>
--- a/documentation/build/include/browsers.html
+++ b/documentation/build/include/browsers.html
@@ -1,12 +1,12 @@
 <section id='browsers'>
-            <h2 class='page-header'><span>Browser Support</span></h2>
-            <p class="lead">AdminLTE supports the following browsers:</p>
-            <ul>
-              <li>IE9+</li>
-              <li>FireFox (latest)</li>
-              <li>Safari (latest)</li>
-              <li>Chrome (latest)</li>
-              <li>Opera (latest)</li>
-            </ul>
-            <p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
-          </section>
+  <h2 class='page-header'><a href="#browsers">Browser Support</a></h2>
+  <p class="lead">AdminLTE supports the following browsers:</p>
+  <ul>
+    <li>IE9+</li>
+    <li>FireFox (latest)</li>
+    <li>Safari (latest)</li>
+    <li>Chrome (latest)</li>
+    <li>Opera (latest)</li>
+  </ul>
+  <p><b>Note:</b> IE9 does not support transitions or animations. The template will function properly but it won't use animations/transitions on IE9.</p>
+</section>
--- a/documentation/build/include/components.html
+++ b/documentation/build/include/components.html
@@ -1,5 +1,5 @@
 <section id='components' data-spy="scroll" data-target="#scrollspy-components">
-  <h2 class='page-header'><span>Components</span></h2>
+  <h2 class='page-header'><a href="#components">Components</a></h2>
  <div class='callout callout-info lead'>
    <h4>Reminder!</h4>
    <p>
@@ -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">
@@ -406,10 +405,9 @@
    &LT;/div>&LT;!-- /.navbar-collapse -->
    &LT;/div>&LT;!-- /.container-fluid -->
  &LT;/nav>
-&LT;/header>
-  </pre>
+&LT;/header></pre>

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

  <h3 id='component-sidebar'>Sidebar</h3>
  <p class="lead">
@@ -458,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>
@@ -506,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">
@@ -581,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">
@@ -596,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
@@ -623,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">
@@ -705,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>
@@ -936,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 -->
@@ -949,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 -->
@@ -960,6 +985,13 @@
 &LT;/div>&LT;!-- /.box --></pre>
    </div><!-- /.col -->
  </div><!-- /.row -->
+  <p>
+    If you inserted a box into the document after <code>app.js</code> was loaded, you have to activate
+    the collapse/remove buttons explicitly by calling <code>.activateBox()</code>:
+  </p>
+  <pre class='prettyprint'><code class='html'>&LT;script>
+    $("#box-widget").activateBox();
+&LT;/script></code></pre>

  <h4>Loading States</h4>
  <div class="row">
@@ -976,7 +1008,7 @@
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
-      </div><!-- /.box -->                
+      </div><!-- /.box -->
    </div><!-- /.col -->

    <div class="col-md-6">
@@ -992,11 +1024,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>
@@ -1044,7 +1076,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 -->
@@ -1052,7 +1084,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
@@ -1061,7 +1093,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 -->
@@ -1115,7 +1147,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 -->
@@ -1123,7 +1155,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
@@ -1132,7 +1164,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 -->
@@ -1186,7 +1218,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 -->
@@ -1194,7 +1226,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
@@ -1203,7 +1235,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 -->
@@ -1257,7 +1289,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 -->
@@ -1265,7 +1297,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
@@ -1274,7 +1306,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 -->
@@ -1332,7 +1364,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 -->
@@ -1340,7 +1372,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
@@ -1349,7 +1381,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 -->
@@ -1363,11 +1395,11 @@
  &LT;/div>&LT;!-- /.box-footer-->
 &LT;/div>&LT;!--/.direct-chat -->
 </code></pre>
-  
+
  <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">
@@ -1405,7 +1437,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 -->
@@ -1413,7 +1445,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
@@ -1422,7 +1454,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 -->
@@ -1476,7 +1508,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 -->
@@ -1484,7 +1516,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
@@ -1493,7 +1525,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
@@ -1,8 +1,8 @@
 <section id="dependencies">
-  <h2 class="page-header"><span>Dependencies</span></h2>
+  <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
@@ -1,5 +1,5 @@
 <section id='download'>
-  <h2 class='page-header'><span>Download</span></h2>
+  <h2 class='page-header'><a href="#download">Download</a></h2>
  <p class='lead'>
    AdminLTE can be downloaded in two different versions, each appealing to different
    skill levels and use case.
@@ -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/faq.html
+++ b/documentation/build/include/faq.html
@@ -1,9 +1,9 @@
 <section id='faq'>
-  <h2 class='page-header'><span>FAQ</span></h2>
+  <h2 class='page-header'><a href="#faq">FAQ</a></h2>
  <h3>Can AdminLTE be used with Wordpress?</h3>
  <p class="lead">AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on Wordpress. It will require some effort and enough knowledge of the Wordpress script to do so.</p>

-  <h3>Is there an integration guide for PHP frameworks such as Yii or Symphony?</h3>
+  <h3>Is there an integration guide for PHP frameworks such as Yii or Symfony?</h3>
  <p class='lead'>Short answer, no. However, there are forks and tutorials around the web that
    provide info on how to integrate with many different frameworks. There are even versions of
    AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
@@ -14,4 +14,4 @@
    <a href="http://almsaeedstudio.com/#subscribe">subscription form on Almsaeed Studio</a>.
    If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a>
    or visit <a href="http://almsaeedstudio.com">Almsaeed Studio</a> every now and then for updates and announcements.</p>
-</section>
+</section>
--- 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/introduction.html
+++ b/documentation/build/include/introduction.html
@@ -1,5 +1,5 @@
 <section id='introduction'>
-  <h2 class='page-header'><span>Introduction</span></h2>
+  <h2 class='page-header'><a href="#introduction">Introduction</a></h2>
  <p class='lead'>
    <b>AdminLTE</b> is a popular open source WebApp template for admin dashboards and control panels.
    It is a responsive HTML template that is based on the CSS framework Bootstrap 3.
--- a/documentation/build/include/layout.html
+++ b/documentation/build/include/layout.html
@@ -1,5 +1,5 @@
 <section id='layout'>
-  <h2 class='page-header'><span>Layout</span></h2>
+  <h2 class='page-header'><a href="#layout">Layout</a></h2>
  <p class='lead'>The layout consists of four major parts:</p>
  <ul>
    <li>Wrapper <code>.wrapper</code>. A div that wraps the whole site.</li>
@@ -11,407 +11,13 @@
    <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>

  <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
    to the body tag to get the desired goal.</p>
  <ul>
    <li><b>Fixed:</b> use the class <code>.fixed</code> to get a fixed header and sidebar.</li>
-    <li><b>Collapsed Sidebar:</b> use the class <code>.collapsed-sidebar</code> to have a collapsed sidebar upon loading.</li>
+    <li><b>Collapsed Sidebar:</b> use the class <code>.sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
    <li><b>Boxed Layout:</b> use the class <code>.layout-boxed</code> to get a boxed layout that stretches only to 1250px.</li>
    <li><b>Top Navigation</b> use the class <code>.layout-top-nav</code> to remove the sidebar and have your links at the top navbar.</li>
  </ul>
@@ -421,12 +27,66 @@
  <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>
-    <li><code>skin-blue</code></li>
-    <li><code>skin-yellow</code></li>
-    <li><code>skin-purple</code></li>
-    <li><code>skin-green</code></li>
-    <li><code>skin-red</code></li>
-    <li><code>skin-black</code></li>
-  </ul>
+  <div class="box box-solid" style="max-width: 300px;">
+    <div class="box-body no-padding">
+      <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
+        <thead>
+          <tr>
+            <th style="width: 210px;">Skin Class</th>
+            <th>Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>skin-blue</code></td>
+            <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-blue-light</code></td>
+            <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-yellow</code></td>
+            <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-yellow-light</code></td>
+            <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-green</code></td>
+            <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-green-light</code></td>
+            <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-purple</code></td>
+            <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-purple-light</code></td>
+            <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-red</code></td>
+            <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-red-light</code></td>
+            <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-black</code></td>
+            <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+          <tr>
+            <td><code>skin-black-light</code></td>
+            <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- /.box-body -->
+  </div><!-- /.box -->
 </section>
--- a/documentation/build/include/license.html
+++ b/documentation/build/include/license.html
@@ -1,5 +1,5 @@
 <section id="license">
-  <h1 class="page-header"><span>License</span></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'><span>Plugins</span></h2>
+  <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>
@@ -17,17 +17,17 @@
        <li><a href='https://github.com/seiyria/bootstrap-slider'>Bootstrap Slider</a></li>
        <li><a href='http://ionden.com/a/plugins/ion.rangeSlider/en.html' target="_blank">Ion Slider</a></li>
        <li><a href='http://bootstrap-datepicker.readthedocs.org/' target="_blank">Date Picker</a></li>
-        <li><a href='http://www.improvely.com/' target="_blank">Date Range Picker</a></li>
+        <li><a href='http://www.daterangepicker.com/' target="_blank">Date Range Picker</a></li>
        <li><a href='http://mjolnic.github.io/bootstrap-colorpicker/' target="_blank">Color Picker</a></li>
        <li><a href='https://github.com/jdewit/bootstrap-timepicker' target="_blank">Time Picker</a></li>
-        <li><a href='http://git.io/arlzeA' target="_blank">iCheck</a></li>
+        <li><a href='http://fronteed.com/iCheck/' target="_blank">iCheck</a></li>
        <li><a href='http://github.com/RobinHerbots/jquery.inputmask' target="_blank">Input Mask</a></li>
      </ul>
    </div><!-- /.col -->
    <div class='col-sm-3'>
      <ul class="list-unstyled">
        <li><h4>Editors</h4></li>
-        <li><a href='https://github.com/Waxolunist/bootstrap3-wysihtml5-bower' target="_blank">Bootstrap WYSIHTML5</a></li>
+        <li><a href='https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg' target="_blank">Bootstrap WYSIHTML5</a></li>
        <li><a href='http://ckeditor.com' target="_blank">CK Editor</a></li>
      </ul>
    </div><!-- /. col -->
@@ -35,11 +35,11 @@
      <ul class="list-unstyled">
        <li><h4>Other</h4></li>
        <li><a href='https://datatables.net/examples/styling/bootstrap.html' target="_blank">Data Tables</a></li>
-        <li><a href='http://arshaw.com/fullcalendar/' target="_blank">Full Calendar</a></li>
+        <li><a href='http://fullcalendar.io/' target="_blank">Full Calendar</a></li>
        <li><a href='http://jqueryui.com' target="_blank">jQuery UI</a></li>
        <li><a href='http://anthonyterrien.com/knob/' target="_blank">jQuery Knob</a></li>
        <li><a href='http://jvectormap.com/' target="_blank">jVector Map</a></li>
-        <li><a href='http://rocha.la' target="_blank">Slim Scroll</a></li>
+        <li><a href='http://rocha.la/jQuery-slimScroll' target="_blank">Slim Scroll</a></li>
        <li><a href='http://github.hubspot.com/pace/docs/welcome/' target="_blank">Pace</a></li>
      </ul>
    </div><!-- /.col -->
--- a/documentation/build/include/upgrade.html
+++ b/documentation/build/include/upgrade.html
@@ -1,5 +1,5 @@
 <section id='upgrade'>
-  <h2 class='page-header'><span>Upgrade Guide</span></h2>
+  <h2 class='page-header'><a href="#upgrade">Upgrade Guide</a></h2>
  <p class="lead">To upgrade from version 1.x to the lateset version, follow this guide.</p>
  <h3>New Files</h3>
  <p>Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not
--- a/documentation/build/index.html
+++ b/documentation/build/index.html
@@ -5,22 +5,22 @@
    <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" />
+    <link href="../dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="style.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 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,22 +53,24 @@
      <!-- 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 class='active'><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-info-box'>Info Box</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>
              </ul>
@@ -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 "introduction.html"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-          <!-- ============================================================= -->
+include "upgrade.html"
+
+<!-- ============================================================= -->
+
+include "implementations.html"
+
+<!-- ============================================================= -->
+
+include "faq.html"
+
+<!-- ============================================================= -->
+
+include "license.html"

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

@@ -149,10 +163,21 @@
        <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 -->
--- a/documentation/docs.js
+++ b/documentation/docs.js
@@ -1,5 +1,5 @@
 /* 
- * Documentation specific JS script
+ * Documentation JS script
 */
 $(function () {
  var slideToTop = $("<div />");
@@ -42,13 +42,22 @@ $(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"
      }, 500);
    }
  });
+  //Skin switcher
+  var current_skin = "skin-blue";
+  $('#layout-skins-list [data-skin]').click(function(e) {
+    e.preventDefault();
+    var skinName = $(this).data('skin');
+    $('body').removeClass(current_skin);
+    $('body').addClass(skinName);
+    current_skin = skinName;
+  });
 });
--- a/documentation/index.html
+++ b/documentation/index.html
--- a/documentation/style.css
+++ b/documentation/style.css
@@ -4,6 +4,19 @@
 .content-wrapper p {
  padding: 0 10px;
  font-size: 16px;
+  position: relative;
+  z-index: 30;
+}
+.bring-up {
+  position: relative;
+  z-index: 30;
+}
+.nth-2-center > tbody > tr > td:last-of-type {
+  text-align: center!important;
+}
+.content {  
+  font-size: 16px;
+  z-index: 500;
 }

 #components > h3 {
@@ -15,9 +28,12 @@
  font-size: 20px;
  color: #000;
 }
+ul {
+  margin-bottom: 20px;
+}
 .page-header {
  /*border-bottom: 1px solid #ddd;        */
-  margin: 20px 0 20px 0;
+  margin: 20px 0 10px 0!important;
  position: relative;
  z-index: 1;
  font-size: 30px;
@@ -27,6 +43,7 @@
  z-index: 5;
  display: block;
  background-color: #ecf0f5;
+  color: #000;
 }
 .page-header span::before,
 .page-header a::before {
@@ -42,6 +59,7 @@
  margin-top: -60px; 
  height: 60px; 
  visibility: hidden; 
+  z-index: -10;
 }

 .lead {
@@ -77,40 +95,7 @@
 pre {
  border: none;
 }
-/* desert scheme ported from vim to google prettify */
-pre.prettyprint {display: block; background-color: #333; max-height: 300px; border: none!important; margin-bottom: 20px;}
-pre .nocode { background-color: none; color: #000 }
-pre .str { color: #ffa0a0;} /* string  - pink */
-pre .kwd { color: #f0e68c; font-weight: bold }
-pre .com { color: #87ceeb } /* comment - skyblue */
-pre .typ { color: #98fb98 } /* type    - lightgreen */
-pre .lit { color: #cd5c5c } /* literal - darkred */
-pre .pun { color: #fff }    /* punctuation */
-pre .pln { color: #fff }    /* plaintext */
-pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag    - lightyellow */
-pre .atn { color: #bdb76b; font-weight: bold } /* attribute name  - khaki */
-pre .atv { color: #ffa0a0 } /* attribute value - pink */
-pre .dec { color: #98fb98 } /* decimal         - lightgreen */

-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE } /* IE indents via margin-left */
-li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
-/* Alternate shading for lines */
-li.L1,li.L3,li.L5,li.L7,li.L9 { }
-
-@media print {
-  pre.prettyprint { background-color: none }
-  pre .str, code .str { color: #060 }
-  pre .kwd, code .kwd { color: #006; font-weight: bold }
-  pre .com, code .com { color: #600; font-style: italic }
-  pre .typ, code .typ { color: #404; font-weight: bold }
-  pre .lit, code .lit { color: #044 }
-  pre .pun, code .pun { color: #440 }
-  pre .pln, code .pln { color: #000 }
-  pre .tag, code .tag { color: #006; font-weight: bold }
-  pre .atn, code .atn { color: #404 }
-  pre .atv, code .atv { color: #060 }
-}
 .sidebar {
  margin-top: 0;
  padding-top: 0!important;
@@ -125,4 +110,152 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
 }
 p {
  padding: 0!important;
+}
+/* Hemisu Light */
+/* Original theme - http://noahfrederick.com/vim-color-scheme-hemisu/ */
+pre.prettyprint {
+  background: white;
+  font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid #dedede!important;
+  padding: 10px;
+  max-height: 300px;
+  width: auto;
+  overflow: auto!important;
+}
+pre.prettyprint > code {
+  width: auto;
+  overflow: auto!important;
+}
+
+.pln {
+  color: #111111;
+}
+
+@media screen {
+  .str {
+    color: #739200;
+  }
+
+  .kwd {
+    color: #739200;
+  }
+
+  .com {
+    color: #999999;
+  }
+
+  .typ {
+    color: #ff0055;
+  }
+
+  .lit {
+    color: #538192;
+  }
+
+  .pun {
+    color: #111111;
+  }
+
+  .opn {
+    color: #111111;
+  }
+
+  .clo {
+    color: #111111;
+  }
+
+  .tag {
+    color: #111111;
+  }
+
+  .atn {
+    color: #739200;
+  }
+
+  .atv {
+    color: #ff0055;
+  }
+
+  .dec {
+    color: #111111;
+  }
+
+  .var {
+    color: #111111;
+  }
+
+  .fun {
+    color: #538192;
+  }
+}
+@media print, projection {
+  .str {
+    color: #006600;
+  }
+
+  .kwd {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .com {
+    color: #600;
+    font-style: italic;
+  }
+
+  .typ {
+    color: #404;
+    font-weight: bold;
+  }
+
+  .lit {
+    color: #004444;
+  }
+
+  .pun, .opn, .clo {
+    color: #444400;
+  }
+
+  .tag {
+    color: #006;
+    font-weight: bold;
+  }
+
+  .atn {
+    color: #440044;
+  }
+
+  .atv {
+    color: #006600;
+  }
+}
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+  /* */
+}
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+  /* */
 }
--- a/index.html
+++ b/index.html
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +32,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 +281,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 +351,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 +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 -->
@@ -887,12 +898,179 @@
        </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-warning 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 UI 1.11.2 -->
-    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
+    <!-- jQuery 2.1.4 -->
+    <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
+    <!-- jQuery UI 1.11.4 -->
+    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <script>
      $.widget.bridge('uibutton', $.ui.button);
@@ -900,7 +1078,7 @@
    <!-- 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>
    <!-- Sparkline -->
    <script src="plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
@@ -910,24 +1088,23 @@
    <!-- 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>
-</html>
+</html>
--- a/index2.html
+++ b/index2.html
@@ -3,38 +3,42 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +274,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 +345,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 +437,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 +533,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 +652,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 +945,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 +1050,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 +1100,6 @@
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
-
        </section><!-- /.content -->
      </div><!-- /.content-wrapper -->

@@ -1108,10 +1110,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-warning 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 +1290,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 -->
@@ -1140,4 +1301,4 @@
    <!-- AdminLTE for demo purposes -->
    <script src="dist/js/demo.js" type="text/javascript"></script>
  </body>
-</html>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,11 +1,18 @@
 {
-  "name": "AdminLTE",
-  "version": "2.0.0",
+  "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
@@ -3,31 +3,38 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +272,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 +300,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 +342,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 +434,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 +1331,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-warning 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
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | General UI</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +20,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 +35,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 +300,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 +328,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 +370,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 +462,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 +482,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 +668,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 +705,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 +724,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 +761,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 +1212,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-warning 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
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Modals</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +20,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 +38,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 +310,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 +352,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 +444,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 +465,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 +598,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-warning 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
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | UI Sliders</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +26,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 +278,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 +306,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 +348,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 +440,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 +544,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-warning 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
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Timeline</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +20,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 +272,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 +300,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 +342,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 +434,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 +621,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-warning 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
@@ -3,13 +3,14 @@
  <head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Calendar</title>
+    <!-- Tell the browser to be responsive to screen width -->
    <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 +23,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 +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>
@@ -334,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>
@@ -425,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 -->
@@ -523,14 +531,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-warning 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 -->
-    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
+    <!-- jQuery UI 1.11.4 -->
+    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <!-- Slimscroll -->
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <!-- FastClick -->
@@ -540,7 +715,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">
@@ -701,4 +876,4 @@
    </script>

  </body>
-</html>
+</html>
--- a/Show More
+++ b/Show More
				`@@ -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}}