diff --git a/modules/backend/assets/js/october.js b/modules/backend/assets/js/october.js
index 7837b6558..987d63f1f 100644
--- a/modules/backend/assets/js/october.js
+++ b/modules/backend/assets/js/october.js
@@ -10,7 +10,12 @@
 =require ../../../system/assets/ui/js/foundation.js
 =require ../../../system/assets/ui/js/flashmessage.js
 =require ../../../system/assets/ui/js/dropdown.js
+=require ../../../system/assets/ui/js/tooltip.js
+=require ../../../system/assets/ui/js/loader.js
+=require ../../../system/assets/ui/js/popover.js
+=require ../../../system/assets/ui/js/popup.js
 =require ../../../system/assets/ui/js/list.js
+=require ../../../system/assets/ui/js/tab.js
 
 =require october.controls.js
 =require october.utils.js
@@ -19,19 +24,13 @@
 =require october.dragscroll.js
 =require october.dragvalue.js
 =require october.toolbar.js
-=require october.tooltip.js
 =require october.verticalmenu.js
 =require october.navbar.js
 =require october.sidenav.js
-=require october.tab.js
-=require october.popover.js
-=require october.popup.js
 =require october.goalmeter.js
 =require october.scrollbar.js
 =require october.filelist.js
 =require october.hotkey.js
-=require october.loadindicator.js
-=require october.stripeloadindicator.js
 =require october.inputpreset.js
 =require october.layout.js
 =require october.sidepaneltab.js
diff --git a/modules/backend/assets/js/vendor/vendor.js b/modules/backend/assets/js/vendor/vendor.js
index dd5595269..744901e4c 100644
--- a/modules/backend/assets/js/vendor/vendor.js
+++ b/modules/backend/assets/js/vendor/vendor.js
@@ -20,12 +20,6 @@
 =require ../../vendor/dropzone/dropzone.js
 =require ../../vendor/sweet-alert/sweet-alert.js
 
-=require ../../../../../modules/system/assets/vendor/bootstrap/js/tooltip.js
-=require ../../../../../modules/system/assets/vendor/bootstrap/js/modal.js
-=require ../../../../../modules/system/assets/vendor/bootstrap/js/tab.js
-=require ../../../../../modules/system/assets/vendor/bootstrap/js/transition.js
-=require ../../../../../modules/system/assets/vendor/bootstrap/js/dropdown.js
-
 =require ../../vendor/flot/jquery.flot.js
 =require ../../vendor/flot/jquery.flot.tooltip.js
 =require ../../vendor/flot/jquery.flot.resize.js
diff --git a/modules/backend/assets/less/controls.less b/modules/backend/assets/less/controls.less
deleted file mode 100644
index 46a10593b..000000000
--- a/modules/backend/assets/less/controls.less
+++ /dev/null
@@ -1,37 +0,0 @@
-//
-// Combines control styles
-//
-
-@import "core/boot.less";
-
-@import "controls/forms.less";
-@import "controls/lists.less";
-@import "controls/simplelist.less";
-@import "controls/filters.less";
-@import "controls/popup.less";
-@import "controls/loadindicator.less";
-@import "controls/scrollbar.less";
-@import "controls/filelist.less";
-@import "controls/button.less";
-@import "controls/toolbar.less";
-@import "controls/common.less";
-@import "controls/dropdown.less";
-@import "controls/tab.less";
-@import "controls/pagination.less";
-@import "controls/scoreboard.less";
-@import "controls/charts.less";
-@import "controls/popover.less";
-@import "controls/inspector.less";
-@import "controls/ballooncontrols.less";
-@import "controls/reportwidgets.less";
-@import "controls/treelist.less";
-@import "controls/treeview.less";
-@import "controls/callout.less";
-@import "controls/sidenav-tree.less";
-@import "controls/panels.less";
-@import "controls/selector-group.less";
-@import "controls/tree-path.less";
-@import "controls/namevaluelist.less";
-@import "controls/progressbar.less";
-@import "controls/alert.less";
-@import "controls/scrollpad.less";
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/button.less b/modules/backend/assets/less/controls/button.less
deleted file mode 100644
index 7225c136c..000000000
--- a/modules/backend/assets/less/controls/button.less
+++ /dev/null
@@ -1,132 +0,0 @@
-//
-// Buttons
-// --------------------------------------------------
-
-.btn {
-    font-size: 13px;
-    border: none;
-    text-align: left;
-    outline: none !important;
-
-    &[class^="oc-icon-"],
-    &[class*=" oc-icon-"] {
-        &:before {
-            font-size: 14px;
-            line-height: 14px;
-            position: relative;
-        }
-    }
-
-    &[disabled] {
-        background-color: @color-button-disabled-bg;
-        color: @color-button-disabled-text;
-    }
-
-    &.active,
-    &:active {
-       .box-shadow(none);
-    }
-}
-
-.btn-default.on {
-    background-color: #95a5a6;
-    color: #f9f9f9;
-}
-
-.btn-group {
-    .btn{
-        border-right: 1px solid rgba(0,0,0,0.09);
-        margin-left: 0!important;
-
-        &:last-child, &.last {
-            border-right: none;
-        }
-
-        &.last {
-            .border-right-radius(@border-radius-base)!important;
-        }
-    }
-
-    > .dropdown {
-        float: left;
-
-        &:not(:last-child, .last) > .btn {
-            border-right: 1px solid rgba(0,0,0,0.09);
-            .border-right-radius(0)!important;
-        }
-
-        &:not(:first-child) > .btn {
-            .border-left-radius(0)!important;
-        }
-
-        &.last {
-            .btn {
-                border-right: none;
-            }
-        }
-    }
-}
-
-.btn, .btn-group {
-    &.offset-right {
-        margin-right: 10px;
-    }
-}
-
-.btn-icon {
-    display: inline-block;
-    height: 36px;
-    font-size: 21px;
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &:before {
-        display: block;
-        color: @color-icon-btn-default;
-    }
-
-    &:hover:before {
-        color: @color-link;
-    }
-
-    &.danger:hover:before {
-        color: @color-btn-danger;
-    }
-
-    &.pull-right:before {
-        margin-right: 0;
-    }
-
-    &.margin-left {
-        margin-left: 5px;
-    }
-
-    &.small {
-        font-size: 17px;
-        height: 17px;
-        line-height: 15px;
-    }
-
-    &.larger {
-        font-size: 21px;
-        height: 21px;
-        line-height: 17px;
-    }
-}
-
-.btn-text {
-    font-size: 13px;
-    padding: 9px 0;
-    vertical-align: middle;
-    display: inline-block;
-
-    a {
-        color: @btn-default-color;
-
-        &:hover {
-            color: @color-link;
-            text-decoration: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/forms.less b/modules/backend/assets/less/controls/forms.less
deleted file mode 100644
index 9dcff95c0..000000000
--- a/modules/backend/assets/less/controls/forms.less
+++ /dev/null
@@ -1,841 +0,0 @@
-//
-// Forms
-// --------------------------------------------------
-
-//
-// Resets to bootstrap
-//
-
-label {
-    font-weight: 600;
-}
-
-.form-control {
-    .transition(none);
-    .box-shadow(none);
-    .border-radius(3px);
-    &:focus {
-        .box-shadow(none);
-    }
-
-    &.align-right {
-        text-align: right;
-    }
-}
-
-//
-// Form containers
-//
-
-.form-preview {
-    padding: 15px;
-    margin-bottom: 20px;
-    background: white;
-    border: 1px solid #eee;
-
-    >.form-group:last-child {
-        padding-bottom: 0;
-    }
-
-    // Form to sit flush to the element above
-    &.form-flush {
-        border-top: none;
-    }
-}
-
-
-//
-// Nice forms
-//
-
-.form-elements, .form-tabless-fields {
-    .clearfix();
-}
-
-label {
-    font-size: 12px;
-}
-
-.radio.nolabel label,
-.checkbox.nolabel label {
-    .text-hide();
-}
-
-.form-control {
-    border: 1px solid @color-form-field-border;
-    position: relative;
-    -webkit-appearance: none;
-    font-size: 13px;
-
-    &:focus {
-        border: 1px solid @color-form-field-border-focus;
-    }
-
-    &.icon {
-        background-repeat: no-repeat;
-        background-position: right -2px;
-        padding-right: 30px !important;
-        background-image: url('../images/bitmap-icons.png');
-
-        &.plus { background-position: right -124px; }
-        &.search { background-position: right -84px; }
-        &.user { background-position: right -41px; }
-        &.lock { background-position: right 0; }
-    }
-
-    &.growable {
-        width: 110px;
-        //.transition(width 0.2s);
-        &:focus, &:active {
-            width: 200px !important;
-        }
-    }
-}
-
-.form-group {
-    position: relative;
-
-    &:empty {
-        display: none;
-    }
-
-    &, &.layout-item {
-        padding-bottom: 20px;
-        margin-bottom: 0;
-    }
-
-    .box-sizing(border-box);
-
-    &.is-required {
-        > label:after {
-            color: @color-form-required-asterisk;
-            vertical-align: super;
-            font-size: 60%;
-            content: " *";
-            text-shadow: 0 0 2px darken(@color-form-required-asterisk, 15%);
-        }
-    }
-
-    &.span-full {
-        width: 100%;
-        float: left;
-    }
-
-    &.span-left {
-        float: left;
-        width: 48.5%;
-        clear: left;
-    }
-
-    &.span-right {
-        float: right;
-        width: 48.5%;
-        clear: right;
-    }
-
-    &.layout-relative {
-        padding-bottom: 0;
-    }
-
-    &.checkbox-field {
-        padding-bottom: 5px;
-    }
-
-    &.number-field {
-        > .form-control { text-align: right; }
-    }
-
-    &.checkbox-align {
-        padding-left: 23px;
-        margin-top: -5px;
-    }
-
-    &.field-slim {
-        &.span-left, &.span-right {
-            width: 50%;
-        }
-    }
-
-    &.field-indent {
-        padding-left: 23px;
-    }
-
-    &.input-sidebar-control {
-        padding-right: 35px;
-
-        .sidebar-control {
-            position: absolute;
-            right: 8px;
-            top: 34px;
-            font-size: 16px;
-            color: @color-input-sidebar-control;
-            &:hover, &:focus {
-                text-decoration: none;
-                color: @color-link;
-                outline: none;
-            }
-        }
-    }
-}
-
-.form-group-preview {
-
-    .form-control {
-        background-color: @color-form-field-preview;
-        height: auto;
-        min-height: 38px;
-    }
-
-    .custom-checkbox,
-    .custom-radio {
-        label { cursor: default; }
-    }
-}
-
-.help-block {
-    font-size: 12px;
-    margin-bottom: 0;
-    &.before-field {
-        margin-top: 0;
-        margin-bottom: 10px;
-    }
-}
-
-.input-with-icon {
-    position: relative;
-
-    > .icon {
-        position: absolute;
-        z-index: 2;
-        padding: 13px;
-        pointer-events: none;
-        color: @color-form-field-icon;
-        font-size: 15px;
-    }
-
-    &.right-align {
-        > .icon { right: 0; }
-        input { padding-right: 32px !important; }
-    }
-
-    &.left-align {
-        > .icon { left: 0; }
-        input { padding-left: 32px !important; }
-    }
-}
-
-.field-section {
-    border-bottom: 1px solid @color-form-field-border;
-    padding-top: 3px;
-    padding-bottom: 7px;
-
-    > h4 {
-        color: rgba(0,0,0,.6);
-    }
-
-    > p:first-child,
-    > h4:first-child {
-        margin: 0;
-    }
-
-    &.is-collapsible {
-        cursor: pointer;
-
-        > h4:before {
-            // Icon
-            display: inline-block;
-            .icon-FontAutumn();
-            vertical-align: baseline;
-            content: @caret-down;
-
-            margin: 0 8px;
-            float: right;
-            color: rgba(0,0,0,.4);
-        }
-
-        &:hover {
-            border-bottom: 1px solid darken(@color-form-field-border, 10%);
-            > h4:before {
-                color: inherit;
-            }
-        }
-    }
-}
-
-.field-textarea {
-    resize: vertical;
-    &.size-tiny { min-height: @size-tiny; }
-    &.size-small { min-height: @size-small; }
-    &.size-large { min-height: @size-large; }
-    &.size-huge { min-height: @size-huge; }
-    &.size-giant { min-height: @size-giant; }
-}
-
-.field-checkboxlist {
-    .checkbox:last-of-type {
-        margin-bottom: 0;
-    }
-}
-
-.field-checkboxlist-scrollable {
-    background: white;
-    border: 1px solid @color-list-border;
-    padding-left: 15px;
-    height: @size-large + 100;
-
-    // First checkbox
-    .checkbox {
-        margin-top: 15px;
-        margin-bottom: 5px;
-    }
-
-    // All others
-    .checkbox ~ .checkbox { margin-top: 0; }
-}
-
-.field-recordfinder {
-    background-color: @color-form-field-bg;
-    border: 1px solid @color-form-field-border;
-    overflow: hidden;
-    position: relative;
-    .form-control {
-        background: transparent;
-        border-color: transparent;
-        height: auto;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        padding: 8px 30px 10px 11px;
-    }
-    .btn {
-        background: transparent;
-        position: absolute;
-        right: -2px;
-        top: 50%;
-        margin-top: -44px;
-        height: 88px;
-        color: lighten(@btn-default-color, 15%);
-
-        i {
-            font-size: 14px;
-        }
-
-        &:hover {
-            color: @btn-default-color;
-        }
-    }
-    .text-muted i {
-        font-size: 14px;
-        position: relative;
-        top: 1px;
-        display: inline-block;
-        margin: 0 2px;
-    }
-    .primary {
-        font-weight: 600;
-    }
-}
-
-.recordfinder-search {
-    background-position: right -81px !important;
-    border-top: none  !important;
-    border-left: none  !important;
-    border-right: none  !important;
-    border-radius: 0;
-}
-
-.form-buttons {
-    .clearfix();
-    padding-bottom: 20px;
-    font-size: 0;
-
-    .btn {
-        margin-right: 10px;
-
-        &.no-margin-right {
-            margin-right: 0;
-        }
-    }
-
-    .pull-right {
-        margin-right: 0;
-        margin-left: 10px;
-    }
-
-    &.buttons-offset {
-        padding-left: 20px;
-    }
-}
-
-body.slim-container {
-    .form-buttons {
-        padding: 0 20px 20px;
-    }
-}
-
-@media (max-width: @menu-breakpoint-max) {
-    .form-group {
-        &.span-left, &.span-right {
-            width: 100%;
-            clear: none;
-        }
-    }
-}
-
-//
-// Nice Checkboxes & Radios
-//
-
-.custom-checkbox,
-.custom-radio {
-    padding-left: 23px;
-    margin-top: 0;
-
-    input[type=radio],
-    input[type=checkbox] {
-        display: none;
-    }
-
-    label {
-        display: inline-block;
-        cursor: pointer;
-        position: relative;
-        padding-left: 20px;
-        margin-right: 15px;
-        margin-left: -20px;
-
-        font-size: 12px;
-        &:before {
-            content: "";
-            display: inline-block;
-            text-align: center;
-
-            width: 16px;
-            height: 16px;
-
-            margin-right: 10px;
-            position: absolute;
-            left: -3px;
-            bottom: 1px;
-            background-color: #FFFFFF;
-            border: 1px solid @color-custom-input-border;
-            color: @color-custom-input-icon;
-
-        }
-        &:hover:before {
-            border-color: darken(@color-custom-input-border, 10%);
-            color: darken(@color-custom-input-icon, 10%);
-        }
-        &:active:before {
-            border-color: darken(@color-custom-input-border, 20%);
-            color: darken(@color-custom-input-icon, 20%);
-        }
-    }
-
-    input[type=radio]:checked + label:before {
-        .icon(@circle);
-        font-size: 9px;
-        line-height: 12px;
-        border-width: 2px;
-    }
-
-    input[type=checkbox]:checked + label:before {
-        .icon(@check);
-        font-size: 10px;
-        line-height: 12px;
-        border-width: 2px;
-    }
-
-    &:focus {
-        outline: none;
-        label:before {
-            border-color: @color-focus;
-        }
-    }
-
-    p.help-block {
-        margin-top: 0;
-    }
-}
-
-.custom-radio label:before {
-    border-radius: 8px;
-}
-
-.custom-checkbox label:before {
-    border-radius: @border-radius-base;
-}
-
-//
-// ON / OFF Switcher
-//
-
-.switch-field {
-    .field-switch {
-        padding-left: 75px;
-        float: left;
-    }
-}
-
-.custom-switch {
-    display: block;
-    width: 58px;
-    height: 26px;
-    position: relative;
-    text-transform: uppercase;
-    border: none;
-    cursor: pointer;
-    .border-radius(3px);
-
-    * { .box-sizing(border-box); }
-    &.disabled { .opacity(.5); }
-    .slide-button {
-        z-index: 4;
-        display: block;
-        position: absolute;
-        right: 34px;
-        top: 2px;
-        width: 22px;
-        height: 22px;
-        background-color: @color-switch-input-bg;
-        .border-radius(20px);
-        .transition(all 0.1s);
-    }
-
-    label,
-    > span {
-        line-height: 23px;
-        vertical-align: middle;
-    }
-
-    label {
-        z-index: 3;
-        width: 100%;
-        display: block;
-        position: relative;
-    }
-
-    input {
-        z-index: 5;
-        position: absolute;
-        .opacity(0);
-        &:checked {
-            ~ .slide-button { 
-                right: 2px; 
-            }
-            ~ span { background-color: @color-switch-input-on; }
-            ~ span span {
-                &:first-of-type { 
-                    color: #FFFFFF;
-                    display: block;
-                }
-                &:last-of-type {
-                    color: #666666;
-                    display: none;
-                }
-            }
-        }
-    }
-
-    > span {
-        display: block;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        width: 100%;
-        background-color: @color-switch-input-off;
-        font-size: 11px;
-        .user-select(none);
-        .border-radius(20px);
-
-        span {
-            z-index: 5;
-            display: block;
-            width: 50%;
-            position: absolute;
-            top: 1px;
-            left: 0;
-            .box-sizing(border-box);
-            &:last-child {
-                left: 50%; 
-                color: #FFFFFF;
-                display: block;
-            }
-            &:first-of-type {
-                padding-left: 9px;
-                display: none;
-                color: #666666;
-            }
-        }
-    }
-}
-
-
-//
-// Nice Dropdowns
-//
-
-.custom-select {
-
-    //
-    // Allows Select2 to work with Bootstrap
-    //
-    
-    .select2-choice {
-        border: 0;
-        border-radius: @border-radius-base;
-        .select2-arrow {
-            border-radius: 0 @border-radius-base @border-radius-base 0;
-        }
-    }
-
-    &.select2-container {
-        padding: 0px;
-        .select2-choices {
-            border: 0 !important;
-            border-radius: @border-radius-base;
-        }
-
-        .loading-indicator {
-            background: transparent;
-
-            > span {
-                background-image:url(../images/loading-indicator-transparent.svg);
-                left: auto;
-                right: 10px;
-                top: 19px;
-                background-size: 17px 17px;
-            }
-        }
-
-        &.in-progress {
-            .select2-choice .select2-arrow {
-                display: none !important;
-            }
-        }
-    }
-
-    &.select2-container.select2-dropdown-open {
-        border-color: @color-form-field-border-focus;
-        &,.select2-choices {
-            border-radius: @border-radius-base @border-radius-base 0 0;
-        }
-
-        &.select2-drop-above {
-            border-radius: 0 0 @border-radius-base @border-radius-base;
-        }
-    }
-
-    &.select2-container-active {
-        border-color: @color-form-field-border-focus;
-    }
-
-    //
-    // Restyle Select2
-    //
-
-    &.select2-container {
-        .select2-choice {
-            height: 36px;
-            line-height: 36px;
-            padding: 0 0 0 15px;
-            border: none;
-            background: #FFFFFF;
-
-            .select2-arrow {
-                width: 38px;
-                background: none;
-                background: transparent;
-                border-left: none;
-                b {
-                    background: none !important;
-                    text-align: center;
-                    color: @color-custom-input-icon;
-                    &:before { .icon(@angle-down); }
-                }
-            }
-        }
-
-        &.select2-container-disabled {
-            background-color: #f4f4f4;
-            .select2-choice {
-                background-color: #f4f4f4;
-                .select2-arrow b { .opacity(.5); }
-            }
-        }
-    }
-
-    &.select2-container.select2-container-active {
-        .select2-choice,
-        .select2-choices {
-            .box-shadow(none);
-        }
-    }
-
-    &.select2-container.select2-dropdown-open,
-    &.select2-container.select2-dropdown-open.select2-drop-above {
-        .select2-choice {
-            background: @color-custom-select-bg;
-            .select2-arrow {
-                border-left-color: transparent;
-                b {
-                    &:before { .icon(@angle-up); }
-                }
-            }
-        }
-    }
-}
-
-//
-// Multi select
-//
-
-.select2-container-multi {
-    &.form-control {
-        height: auto;
-    }
-
-    .select2-choices {
-        min-height: 28px;
-        line-height: 28px;
-        padding-left: 10px;
-        background: none;
-
-        .select2-search-choice {
-            background: none;
-            padding: 8px 15px;
-            margin: 4px 0 4px 5px;
-            .box-shadow(none);
-            .transition(.25s linear);
-
-            &:hover {
-                padding: 8px 7px 8px 23px;
-                .select2-search-choice-close {
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-    .select2-search-choice-close {
-        .transition(.25s linear);
-        opacity: 0;
-        left: 7px;
-    }
-}
-
-.select2-drop-multi {
-    .select2-no-results {
-        padding: 7px;
-    }
-}
-
-//
-// Outside Select2 container
-//
-
-.select2-drop {
-    .box-shadow(none);
-    border: 1px solid @color-custom-select-border;
-    border-top: none;
-
-    &.select2-drop-above {
-        .box-shadow(none);
-        border: 1px solid @color-custom-select-border;
-        border-bottom: none;
-    }
-
-    &.select2-drop-active {
-        .border-bottom-radius(@border-radius-base);
-    }
-
-    &.select2-drop-above.select2-drop-active {
-        border-top: 1px solid @color-custom-select-border;
-        .border-bottom-radius(0);
-    }
-
-    .select2-search {
-        padding: 0;
-        min-height: 36px;
-        input {
-            min-height: 36px;
-            border: none;
-            border-bottom: 1px solid @color-custom-select-border;
-            background: transparent url('../images/bitmap-icons.png') no-repeat 100% -84px !important;
-        }
-    }
-
-    .select2-results {
-        padding: 0;
-        margin: 0;
-        font-size: 13px;
-        .select2-no-results,
-        .select2-searching,
-        .select2-selection-limit {
-            background: #FFFFFF;
-        }
-
-        .select2-no-results {
-            padding: 7px!important;
-        }
-
-        .select2-highlighted {
-            background: @color-custom-select-bg-hover;
-        }
-
-        > li > div {
-            padding: 5px 7px 5px;
-        }
-    }
-}
-
-//
-// Controls inside toolbar
-//
-
-[data-control=toolbar] {
-    .form-control {
-        display: inline-block;
-        margin-right: 15px;
-
-        &.width-50 {
-            width: 50px;
-        }
-
-        &.width-100 {
-            width: 100px;
-        }
-
-        &.width-150 {
-            width: 150px;
-        }
-    }
-
-    input[type=text].form-control, label {
-        position: relative;
-        top: 5px;
-    }
-
-    label {
-        margin-right: 7px;
-
-        &.standalone {
-            margin-right: 15px;
-        }
-    }
-
-    .select2-container {
-        display: inline-block;
-        width: auto;
-        height: 36px;
-
-        .select2-choice {
-            height: 34px;
-            line-height: 34px;
-        }
-    }
-
-    select.form-control.custom-select {
-        display: none;
-    }
-}
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/lists.less b/modules/backend/assets/less/controls/lists.less
deleted file mode 100644
index 6ed45f52d..000000000
--- a/modules/backend/assets/less/controls/lists.less
+++ /dev/null
@@ -1,533 +0,0 @@
-//
-// Lists
-// --------------------------------------------------
-//
-// Usage:
-//   <div class="control-list">
-//       <table class="table data" data-control="rowlink">
-//           <thead>
-//               <tr>
-//                   <th class="list-checkbox">
-//                       <div class="checkbox custom-checkbox nolabel">
-//                           <input type="checkbox" id="checkboxAll" />
-//                           <label for="checkboxAll"></label>
-//                       </div>
-//                   </th>
-//                   <th class="sort-desc"><a href="/">Title</a></th>
-//                   <th class="active sort-asc"><a href="/">Created</a></th>
-//                   <th class="sort-desc"><a href="/">Author</a></th>
-//                   <th><span>Categories</span></th>
-//                   <th><span>Published</span></th>
-//                   <th><span>Updated</span></th>
-//                   <th class="list-setup"><a href="/" title="List options"></a></th>
-//               </tr>
-//           </thead>
-//           <tbody>
-//               <tr>
-//                   <td class="list-checkbox nolink">
-//                       <div class="checkbox custom-checkbox nolabel">
-//                           <input id="checkbox_1" type="checkbox" />
-//                           <label for="checkbox_1">Check</label>
-//                       </div>
-//                   </td>
-//                   <td><a href="/">Welcome to October</a></td>
-//                   <td>Oct 01, 2013</td>
-//                   <td>Adam Person</td>
-//                   <td>News</td>
-//                   <td>Oct 01, 2013</td>
-//                   <td>Oct 01, 2013</td>
-//                   <td>&nbsp;</td>
-//               </tr>
-//           </body>
-//           <tfoot>
-//               <tr>
-//                   <td colspan="8" class="list-pagination nolink">
-//                       <div class="control-pagination">
-//                           <span class="page-iteration">1-5 of 20</span>
-//                           <a href="#" class="page-back" title="Previous page"></a><a href="#" class="page-next" title="Next page"></a>
-//                       </div>
-//                   </td>
-//               </tr>
-//           </tfoot>
-//       </table>
-//   </div>
-//
-
-
-//
-// List Data Table
-//
-
-table.table.data {
-    .list-head-icon(@icon) {
-        > span, > a {
-            &:after {
-                font-size: 14px;
-                line-height: 14px;
-                display: inline-block;
-                margin-left: 8px;
-                vertical-align: baseline;
-                .opacity(.2);
-                .icon(@icon);
-            }
-            &:hover:after { .opacity(.6); }
-        }
-    }
-
-    font-size: 12px;
-
-    thead {
-        background: @color-list-head-bg;
-
-        td, th {
-            border-width: 1px;
-            border-top: 1px solid @color-list-border !important;
-            border-color: @color-list-border;
-            padding: 0;
-            font-weight: normal;
-
-            > a, > span {
-                display: block;
-                padding: 13px 15px;
-                text-transform: uppercase;
-                color: @color-list-text-head;
-                text-decoration: none;
-                &:hover { color: @color-list-text-active; }
-            }
-
-            &.sort-desc { .list-head-icon(@angle-down); }
-            &.sort-asc { .list-head-icon(@angle-up); }
-
-            &.active {
-                background-color: inherit;
-                > span, > a {
-                    &:after {
-                        color: @color-list-active-sort;
-                        .opacity(1) !important;
-                    }
-                }
-            }
-        }
-        tr th:first-child {
-            padding-left: 5px;
-        }
-    }
-
-    tbody {
-        tr:nth-child(even) {
-            td, th { background-color: @color-list-accent; }
-        }
-        td, th {
-            padding: 11px 15px;
-            color: @color-list-text;
-            border-color: @color-list-grid;
-
-            a {
-                color: @color-list-text;
-                &:hover {
-                    text-decoration: none;
-                }
-            }
-
-            div.progress {
-                position: relative;
-                overflow: visible;
-                height: auto;
-                margin-bottom: 0;
-                background-color: transparent;
-                .border-radius(0);
-                .box-shadow(none);
-
-                div.bar {
-                    position: absolute;
-                    left: -15px;
-                    top: -11px;
-                    bottom: -11px;
-                    background: @color-list-progress-bg;
-                    .opacity(0.3);
-                }
-
-                a {
-                    position: relative;
-                }
-            }
-        }
-        tr:first-child {
-            th, td {
-                border-top-width: 0;
-            }
-        }
-
-        tr td:first-child {
-            border-left: 3px solid transparent;
-            padding-left: 17px;
-        }
-        tr.active td {
-            color: @color-list-text-active;
-
-            &:first-child {
-                border-left: 3px solid @color-list-stripe-active;
-            }
-        }
-        tr:not(.no-data):hover td, tr:not(.no-data).selected td, {
-           background: @color-list-hover-bg !important;
-           color: white;
-
-            a, span, i[class^="icon-"] {
-               color: white;
-            }
-        }
-
-        tr.hidden {
-            td, th, td a, th a {
-                display: none;
-            }
-        }
-
-        tr.strike {
-            td, th, td a, th a {
-                text-decoration: line-through;
-            }
-        }
-
-        tr.processing {
-            td, th, td a, th a {
-                color: #666666;
-            }
-        }
-
-        tr.negative {
-            td, th, td a, th a {
-                color: #b2341c;
-            }
-        }
-
-        tr.positive {
-            td, th, td a, th a {
-                color: #278731;
-            }
-        }
-
-        tr.disabled, tr.deleted {
-            td, th, td a, th a {
-                color: #888888;
-            }
-        }
-
-        tr.new, tr.important {
-            td, th, td a, th a {
-                font-weight: 600;
-            }
-        }
-
-        tr.safe, tr.special {
-            td, th, td a, th a {
-                color: #98a7a8;
-            }
-        }
-
-        td.column-break-word {
-            word-wrap: break-word;
-            word-break: break-all;
-        }
-
-        // Requires "max-width" with px value
-        td.column-single-line {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        td.column-slim {
-            padding-left: 0;
-            padding-right: 0;
-        }
-
-        &.icons {
-            td i[class^="icon-"] {
-                display: inline-block;
-                margin-right: 7px;
-                font-size: 15px;
-                color: #95a5a6;
-                position: relative;
-                top: 1px;
-            }
-        }
-
-        &.clickable {
-            cursor: pointer;
-            .user-select(none);
-        }
-
-        td.column-compact {
-            padding: 0;
-        }
-    }
-
-    tfoot {
-        a { color: @color-list-text; text-decoration: none; }
-        td, th {
-            border-color: @color-list-border;
-            padding: 10px 15px;
-        }
-    }
-
-    th.list-cell-type-switch,
-    td.list-cell-type-switch {
-        text-align: center;
-    }
-
-    .list-checkbox {
-        padding-left: 16px;
-        padding-right: 8px;
-        width: 52px;
-        vertical-align: top;
-        border-right: 1px solid @color-list-border-light;
-        .checkbox { margin: 0; }
-        .custom-checkbox {
-            position: relative;
-            top: 5px;
-            left: -2px;
-            label { margin-right: 0; }
-        }
-    }
-
-    thead tr th.list-checkbox {
-        padding: 18px 0 0 20px;
-    }
-
-    .list-tree {
-        width: 10px;
-        padding: 0;
-
-        a.list-expand-collapse {
-            padding: 5px;
-            display: block;
-            text-align: center;
-            font-size: 14px;
-            position: relative;
-            top: 5px;
-            left: 10px;
-            text-decoration: none !important;
-        }
-    }
-
-    // Tree levels 1 - 25
-    .makeTreeLevel(@count) when (@count < 26) {
-        tr.list-tree-level-@{count} {
-            a.list-expand-collapse { left: 20px + (10 * @count); }
-            td.list-cell-index-1 { padding-left: 25px + (10 * @count); }
-        }
-        .makeTreeLevel(@count + 1);
-    }
-    .makeTreeLevel(1);
-
-}
-
-//
-// List containers
-//
-
-.list-preview {
-    padding: 0;
-    margin-bottom: 20px;
-    background: white;
-    border: 1px solid @color-list-border;
-
-    .list-header:first-child {
-        padding-top: 20px;
-    }
-
-    .control-list:last-child > table {
-        margin-bottom: 0;
-    }
-}
-
-// List to sit flush to the element above (no toolbar)
-.list-flush {
-    table.table.data {
-        thead tr th {
-            border-top: none !important;
-        }
-    }
-}
-
-//
-// List control
-//
-
-.control-list {
-    p.no-data {
-        padding: 18px 20px;
-        margin: 0 20px;
-        color: @color-list-norecords-text;
-        font-size: 14px;
-        text-align: center;
-        font-weight: 300;
-        .border-radius(@border-radius-base);
-    }
-
-    table.table.data {
-        .list-setup {
-            width: 48px;
-            a {
-                display: block;
-                color: #000000;
-                &:before {
-                    font-size: 14px;
-                    line-height: 14px;
-                    .icon(@list-ul);
-                    display: inline-block;
-                    margin-left: 8px;
-                    vertical-align: baseline;
-                    .opacity(.6);
-                }
-
-                &:hover:before {
-                    .opacity(1);
-                    color: @color-list-hover-bg !important;
-                }
-            }
-        }
-
-        .list-pagination {
-            font-size: 14px;
-            text-align: right;
-            padding-top: 20px;
-
-            .loading-indicator {
-                div {
-                    margin-left: 20px;
-                    font-size: 12px;
-                }
-            }
-        }
-    }
-}
-
-.list-header {
-    background-color: @color-list-header-bg;
-    padding: 0 20px 1px 20px;
-
-    h3 {
-        font-size: 14px;
-        color: @color-status-list-text;
-        text-transform: uppercase;
-        font-weight: 600;
-        margin-top: 0;
-        margin-bottom: 15px;
-    }
-}
-
-.report-widget {
-    .table-container {
-        margin: -15px;
-
-        table.table.data {
-            margin-bottom: 0;
-
-            thead tr {
-                th {
-                    border-top: none !important;
-                }
-            }
-
-            tbody {
-                tr:nth-child(even) {
-                    td, th { background-color: transparent; }
-                }
-            }
-        }
-    }
-}
-
-//
-// Responsive Table
-//
-
-@media only screen and (max-width: 960px) {
-
-    .control-list {
-        table, thead, tbody, th, td, tr {
-            display: block;
-        }
-
-        table {
-            position: relative;
-            border-top: 1px solid @color-list-border;
-
-            thead tr {
-                td, th {
-                    position: absolute;
-                    top: -9999px;
-                    left: -9999px;
-                }
-
-                th.list-setup {
-                    position: absolute;
-                    top: auto;
-                    left: auto;
-                    bottom: 0;
-                    right: 0;
-                    border: none!important;
-
-                    a {
-                        padding: 10px 15px;
-                    }
-                }
-            }
-
-            tbody tr {
-                border-bottom: 1px solid @color-list-border;
-
-                td {
-                    border: none;
-                    border-left: 3px solid transparent;
-                    position: relative;
-                    padding-left: 40%!important;
-                    white-space: normal;
-                    text-align: left;
-                    min-height: 40px;
-                }
-
-                td:before {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 35%;
-                    padding: 11px 15px;
-                    white-space: nowrap;
-                    text-align: left;
-                    color: @color-list-text-head;
-                    content: attr(data-title);
-                }
-
-                &:hover {
-                    td:before {
-                        color: white !important;
-                    }
-                }
-
-                &.active {
-                    td {
-                        border-left: 3px solid @color-list-stripe-active;
-                        &:before { color: @color-list-text-active; }
-                    }
-                }
-
-                td.list-setup { display: none; }
-            }
-
-            tfoot tr {
-                td { border: none; }
-            }
-
-            .list-checkbox {
-                width: 100% !important;
-                border-right: none !important;
-                padding-left: 16px !important;
-            }
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/modules/backend/assets/less/core/boot.less b/modules/backend/assets/less/core/boot.less
index fa365c31c..da5e36254 100644
--- a/modules/backend/assets/less/core/boot.less
+++ b/modules/backend/assets/less/core/boot.less
@@ -5,9 +5,10 @@
 //
 
 // Core variables and mixins
-@import "../../../../system/assets/vendor/bootstrap/less/variables.less";
-@import "../../../../system/assets/vendor/bootstrap/less/mixins.less";
-@import "../../../../system/assets/vendor/font-autumn/less/variables.less";
-@import "../../../../system/assets/vendor/font-autumn/less/mixins.less";
+@import "../../../system/assets/ui/less/global.less";
+@import "../../../system/assets/ui/less/site.variables.less";
+@import "../../../system/assets/ui/less/site.mixins.less";
+@import "../../../system/assets/ui/less/icon.variables.less";
+@import "../../../system/assets/ui/less/icon.mixins.less";
 @import "variables.less";
 @import "mixins.less";
diff --git a/modules/backend/assets/less/core/bootstrap.less b/modules/backend/assets/less/core/bootstrap.less
deleted file mode 100644
index 0e14096c0..000000000
--- a/modules/backend/assets/less/core/bootstrap.less
+++ /dev/null
@@ -1,50 +0,0 @@
-/*!
- * October CMS build on the Twitter Bootstrap framework.
- */
-
-// Core variables and mixins
-//@import "../../../../system/assets/vendor/bootstrap/less/variables";
-//@import "../../../../system/assets/vendor/bootstrap/less/mixins";
-
-// Reset
-//@import "../../../../system/assets/vendor/bootstrap/less/normalize";
-//@import "../../../../system/assets/vendor/bootstrap/less/print";
-
-// Core CSS
-//@import "../../../../system/assets/vendor/bootstrap/less/scaffolding";
-//@import "../../../../system/assets/vendor/bootstrap/less/type";
-//@import "../../../../system/assets/vendor/bootstrap/less/grid";
-//@import "../../../../system/assets/vendor/bootstrap/less/tables";
-//@import "../../../../system/assets/vendor/bootstrap/less/forms";
-//@import "../../../../system/assets/vendor/bootstrap/less/buttons";
-
-// Components
-//@import "../../../../system/assets/vendor/bootstrap/less/dropdowns";
-//@import "../../../../system/assets/vendor/bootstrap/less/button-groups";
-//@import "../../../../system/assets/vendor/bootstrap/less/input-groups";
-@import "../../../../system/assets/vendor/bootstrap/less/navs";
-//@import "../../../../system/assets/vendor/bootstrap/less/progress-bars";
-//@import "../../../../system/assets/vendor/bootstrap/less/close";
-
-// Components w/ JavaScript
-@import "../../../../system/assets/vendor/bootstrap/less/modals";
-@import "../../../../system/assets/vendor/bootstrap/less/tooltip";
-
-// Utility classes
-//@import "../../../../system/assets/vendor/bootstrap/less/utilities";
-//@import "../../../../system/assets/vendor/bootstrap/less/responsive-utilities";
-
-// Jasny
-//@import "../../../../system/assets/vendor/bootstrap/less/rowlink";
-
-// Override some Bootstrap styles
-table {
-    border-collapse: separate;
-}
-
-.row-compact {
-    [class*="col-"] {
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-    }
-}
\ No newline at end of file
diff --git a/modules/backend/assets/less/core/mixins.less b/modules/backend/assets/less/core/mixins.less
index 4058c6b67..b1f1f3090 100644
--- a/modules/backend/assets/less/core/mixins.less
+++ b/modules/backend/assets/less/core/mixins.less
@@ -86,67 +86,6 @@
 }
 
 
-// Scroll markers
-// --------------------------------------------------
-
-.vertical-scroll-marker(@color) {
-    .scroll-marker {
-        position: absolute;
-        left: 0;
-        width: 100%;
-        height: 10px;
-        display: none;
-
-        &:after {
-            .icon(@ellipsis-h);
-            display: block;
-            position: absolute;
-            left: 50%;
-            margin-left: -3px;
-            top: 0;
-            height: 9px;
-            font-size: 10px;
-            color: @color;
-        }
-
-        &.before {top: 0;}
-        &.after {
-            bottom: 3px;
-            &:after {
-                top: 2px;
-            }
-        }
-    }
-
-    &.scroll-before .scroll-marker.before {display: block;}
-    &.scroll-after .scroll-marker.after {display: block;}
-}
-
-.horizontal-scroll-indicators(@color) {
-    &:after, &:before {
-        display: none;
-        position: absolute;
-        top: 50%;
-        margin-top: -7px;
-        height: 9px;
-        font-size: 10px;
-        color: @color;
-    }
-
-    &:before {
-        left: -6px;
-        .icon(@angle-left);
-    }
-
-    &:after {
-        right: -8px;
-        .icon(@angle-right);
-    }
-
-    &.scroll-before:before {display: block;}
-    &.scroll-after:after {display: block;}
-}
-
 // --------------------------------------------------
 // Flexbox LESS mixins
 // The spec: http://www.w3.org/TR/css3-flexbox
diff --git a/modules/backend/assets/less/core/variables.less b/modules/backend/assets/less/core/variables.less
index be15a3e3a..40b1770a8 100644
--- a/modules/backend/assets/less/core/variables.less
+++ b/modules/backend/assets/less/core/variables.less
@@ -20,12 +20,6 @@
 @link-color:                     darken(@brand-primary, 15%);
 @link-hover-color:               darken(@link-color, 30%);
 
-//
-// Override Font Awesome variables
-// --------------------------------------------------
-
-@FontAutumnPath:    "../../../system/assets/vendor/font-autumn/font";
-
 //
 // Fonts
 // --------------------------------------------------
@@ -92,31 +86,6 @@
 @color-sidebarnav-back-link-bg:              #2b3e50;
 @color-sidebarnav-back-link-text:            #bdc3c7;
 
-@color-list-active:                          #dddddd;
-@color-list-hover:                           #dddddd;
-@color-list-active-border:                   #e67e22;
-@color-list-arrow:                           #cfcfcf;
-@color-list-icon:                            #a1aab1;
-@color-list-parent-bg:                       #ffffff;
-@color-list-nav-arrow:                       #34495e;
-@color-list-header-bg:                       transparent;
-@color-list-head-bg:                         #ffffff;
-@color-list-progress-bg:                     #0181b9;
-@color-list-border:                          #e2e2e2;
-@color-list-border-light:                    #eeeeee;
-@color-list-text-head:                       #333333;
-@color-list-text:                            #666666;
-@color-list-text-active:                     #000000;
-@color-list-stripe-active:                   #ff9933;
-@color-list-accent:                          #f5f5f5;
-@color-list-norecords-text:                  #666666;
-@color-list-hover-bg:                        #4da7e8;
-@color-list-active-sort:                     #c63e26;
-@color-list-grid:                            #eeeeee;
-
-@color-text-title:                           #405261;
-@color-text-description:                     #8f8f8f;
-
 @color-scrollbar-track:                      transparent;
 @color-scrollbar-thumb:                      #aaa;
 @color-scrollpanel-border:                   #efefef;
@@ -129,32 +98,8 @@
 @color-richeditor-toolbar-btn-bg-active:     #404040;
 @color-richeditor-toolbar-btn-color-hover:   #ffffff;
 
-@color-form-field-border:                    #e0e0e0;
-@color-form-field-border-focus:              #808c8d;
-@color-form-required-asterisk:               #ff0000;
-@color-form-sidebar:                         #ecf0f1;
-@color-form-field-preview:                   #f6f6f6;
-@color-form-field-bg:                        #ffffff;
-@color-form-field-icon:                      #bdbdbd;
-
 @color-panel-light:                          #ECF0F1;
 
-@color-button-disabled-bg:                   #dbdbdb;
-@color-button-disabled-text:                 #aaaaaa;
-
-@color-loading-indicator-text:               #999999;
-@color-stripe-loader:                        #0090c0;
-
-@color-tab-inactive-text:                    #cccccc;
-@color-tab-active-text:                      @color-text-title;
-@color-tab-active-border:                    #5fb6f5;
-@color-tab-bg:                               #ffffff;
-@color-tab-active-marker:                    #ec8017;
-@color-tab-content-active-bg:                #ffffff;
-@color-tab-content-border:                   #e3e5e7;
-
-@color-ui-border:                            #d7d7d7;
-
 @color-outer-muted-text:                     rgba(255,255,255,.44);
 @color-outer-heading:                        #feffff;
 @color-outer-description:                    #999999;
@@ -191,11 +136,6 @@
 @color-custom-select-bg:                     #f6f6f6;
 @color-custom-select-bg-hover:               #4da7e8;
 
-@color-popover-bg:                           #ffffff;
-@color-popover-border:                       @dropdown-border;
-@color-popover-head-bg:                      #d35400;
-@color-popover-head-text:                    #ffffff;
-
 @color-filter-border:                        @dropdown-border;
 @color-filter-text:                          #949ea6;
 @color-filter-items-bg:                      #fafafa;
@@ -242,17 +182,9 @@
 @color-fancy-form-placeholder:               #f4c69e;
 @color-fancy-form-inactive-tab:              #b9530f;
 
-@color-popup-header-bg:                      #d35400;
-@color-popup-header-text:                    #ECF0F1;
-@color-popup-footer-bg:                      transparent;
-@color-popup-content-bg:                     @color-body-bg;
-
 @color-sortable-caret:                       #999999;
 @color-sortable-active:                      #e67e22;
 
-@color-icon-btn-default:                     #bcc3c7;
-@color-btn-danger:                           #c63e26;
-
 @color-balloon-control-default-text:         #ffffff;
 @color-balloon-control-default-bg:           #bcc3c7;
 @color-balloon-control-hover-bg:             #0181b9;
diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less
index d86ba4c45..fa6f05897 100644
--- a/modules/backend/assets/less/october.less
+++ b/modules/backend/assets/less/october.less
@@ -11,7 +11,35 @@
 //
 
 //
-// Controls
+// October Controls
+//
+
+@import "core/boot.less";
+@import "controls/simplelist.less";
+@import "controls/filters.less";
+@import "controls/scrollbar.less";
+@import "controls/filelist.less";
+@import "controls/toolbar.less";
+@import "controls/common.less";
+@import "controls/pagination.less";
+@import "controls/scoreboard.less";
+@import "controls/charts.less";
+@import "controls/inspector.less";
+@import "controls/ballooncontrols.less";
+@import "controls/reportwidgets.less";
+@import "controls/treelist.less";
+@import "controls/treeview.less";
+@import "controls/callout.less";
+@import "controls/sidenav-tree.less";
+@import "controls/panels.less";
+@import "controls/selector-group.less";
+@import "controls/tree-path.less";
+@import "controls/namevaluelist.less";
+@import "controls/alert.less";
+@import "controls/scrollpad.less";
+
+//
+// UI Controls
 //
 
 @import "../../../system/assets/ui/less/global.less";
@@ -25,13 +53,15 @@
 @import "../../../system/assets/ui/less/list.less";
 @import "../../../system/assets/ui/less/progressbar.less";
 @import "../../../system/assets/ui/less/dropdown.less";
+@import "../../../system/assets/ui/less/loader.less";
+@import "../../../system/assets/ui/less/popover.less";
+@import "../../../system/assets/ui/less/popup.less";
 
 //
 // Combines layout and vendor styles
 //
 
 // Core (shared elements)
-@import "core/bootstrap.less";
 @import "core/fonts.less";
 @import "core/animations.less";
 
diff --git a/modules/system/assets/css/styles.css b/modules/system/assets/css/styles.css
index 3ca5d1efb..ede1a3ef4 100644
--- a/modules/system/assets/css/styles.css
+++ b/modules/system/assets/css/styles.css
@@ -356,6 +356,10 @@ hr {
   margin-left: -15px;
   margin-right: -15px;
 }
+.row-compact [class*="col-"] {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
 .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
   position: relative;
   min-height: 1px;
@@ -1328,6 +1332,2310 @@ address {
   font-style: normal;
   line-height: 1.428571429;
 }
+.oc-icon-glass:before,
+.icon-glass:before {
+  content: "\f000";
+}
+.oc-icon-music:before,
+.icon-music:before {
+  content: "\f001";
+}
+.oc-icon-search:before,
+.icon-search:before {
+  content: "\f002";
+}
+.oc-icon-envelope-o:before,
+.icon-envelope-o:before {
+  content: "\f003";
+}
+.oc-icon-heart:before,
+.icon-heart:before {
+  content: "\f004";
+}
+.oc-icon-star:before,
+.icon-star:before {
+  content: "\f005";
+}
+.oc-icon-star-o:before,
+.icon-star-o:before {
+  content: "\f006";
+}
+.oc-icon-user:before,
+.icon-user:before {
+  content: "\f007";
+}
+.oc-icon-film:before,
+.icon-film:before {
+  content: "\f008";
+}
+.oc-icon-th-large:before,
+.icon-th-large:before {
+  content: "\f009";
+}
+.oc-icon-th:before,
+.icon-th:before {
+  content: "\f00a";
+}
+.oc-icon-th-list:before,
+.icon-th-list:before {
+  content: "\f00b";
+}
+.oc-icon-check:before,
+.icon-check:before {
+  content: "\f00c";
+}
+.oc-icon-remove:before,
+.icon-remove:before,
+.oc-icon-close:before,
+.icon-close:before,
+.oc-icon-times:before,
+.icon-times:before {
+  content: "\f00d";
+}
+.oc-icon-search-plus:before,
+.icon-search-plus:before {
+  content: "\f00e";
+}
+.oc-icon-search-minus:before,
+.icon-search-minus:before {
+  content: "\f010";
+}
+.oc-icon-power-off:before,
+.icon-power-off:before {
+  content: "\f011";
+}
+.oc-icon-signal:before,
+.icon-signal:before {
+  content: "\f012";
+}
+.oc-icon-gear:before,
+.icon-gear:before,
+.oc-icon-cog:before,
+.icon-cog:before {
+  content: "\f013";
+}
+.oc-icon-trash-o:before,
+.icon-trash-o:before {
+  content: "\f014";
+}
+.oc-icon-home:before,
+.icon-home:before {
+  content: "\f015";
+}
+.oc-icon-file-o:before,
+.icon-file-o:before {
+  content: "\f016";
+}
+.oc-icon-clock-o:before,
+.icon-clock-o:before {
+  content: "\f017";
+}
+.oc-icon-road:before,
+.icon-road:before {
+  content: "\f018";
+}
+.oc-icon-download:before,
+.icon-download:before {
+  content: "\f019";
+}
+.oc-icon-arrow-circle-o-down:before,
+.icon-arrow-circle-o-down:before {
+  content: "\f01a";
+}
+.oc-icon-arrow-circle-o-up:before,
+.icon-arrow-circle-o-up:before {
+  content: "\f01b";
+}
+.oc-icon-inbox:before,
+.icon-inbox:before {
+  content: "\f01c";
+}
+.oc-icon-play-circle-o:before,
+.icon-play-circle-o:before {
+  content: "\f01d";
+}
+.oc-icon-rotate-right:before,
+.icon-rotate-right:before,
+.oc-icon-repeat:before,
+.icon-repeat:before {
+  content: "\f01e";
+}
+.oc-icon-refresh:before,
+.icon-refresh:before {
+  content: "\f021";
+}
+.oc-icon-list-alt:before,
+.icon-list-alt:before {
+  content: "\f022";
+}
+.oc-icon-lock:before,
+.icon-lock:before {
+  content: "\f023";
+}
+.oc-icon-flag:before,
+.icon-flag:before {
+  content: "\f024";
+}
+.oc-icon-headphones:before,
+.icon-headphones:before {
+  content: "\f025";
+}
+.oc-icon-volume-off:before,
+.icon-volume-off:before {
+  content: "\f026";
+}
+.oc-icon-volume-down:before,
+.icon-volume-down:before {
+  content: "\f027";
+}
+.oc-icon-volume-up:before,
+.icon-volume-up:before {
+  content: "\f028";
+}
+.oc-icon-qrcode:before,
+.icon-qrcode:before {
+  content: "\f029";
+}
+.oc-icon-barcode:before,
+.icon-barcode:before {
+  content: "\f02a";
+}
+.oc-icon-tag:before,
+.icon-tag:before {
+  content: "\f02b";
+}
+.oc-icon-tags:before,
+.icon-tags:before {
+  content: "\f02c";
+}
+.oc-icon-book:before,
+.icon-book:before {
+  content: "\f02d";
+}
+.oc-icon-bookmark:before,
+.icon-bookmark:before {
+  content: "\f02e";
+}
+.oc-icon-print:before,
+.icon-print:before {
+  content: "\f02f";
+}
+.oc-icon-camera:before,
+.icon-camera:before {
+  content: "\f030";
+}
+.oc-icon-font:before,
+.icon-font:before {
+  content: "\f031";
+}
+.oc-icon-bold:before,
+.icon-bold:before {
+  content: "\f032";
+}
+.oc-icon-italic:before,
+.icon-italic:before {
+  content: "\f033";
+}
+.oc-icon-text-height:before,
+.icon-text-height:before {
+  content: "\f034";
+}
+.oc-icon-text-width:before,
+.icon-text-width:before {
+  content: "\f035";
+}
+.oc-icon-align-left:before,
+.icon-align-left:before {
+  content: "\f036";
+}
+.oc-icon-align-center:before,
+.icon-align-center:before {
+  content: "\f037";
+}
+.oc-icon-align-right:before,
+.icon-align-right:before {
+  content: "\f038";
+}
+.oc-icon-align-justify:before,
+.icon-align-justify:before {
+  content: "\f039";
+}
+.oc-icon-list:before,
+.icon-list:before {
+  content: "\f03a";
+}
+.oc-icon-dedent:before,
+.icon-dedent:before,
+.oc-icon-outdent:before,
+.icon-outdent:before {
+  content: "\f03b";
+}
+.oc-icon-indent:before,
+.icon-indent:before {
+  content: "\f03c";
+}
+.oc-icon-video-camera:before,
+.icon-video-camera:before {
+  content: "\f03d";
+}
+.oc-icon-photo:before,
+.icon-photo:before,
+.oc-icon-image:before,
+.icon-image:before,
+.oc-icon-picture-o:before,
+.icon-picture-o:before {
+  content: "\f03e";
+}
+.oc-icon-pencil:before,
+.icon-pencil:before {
+  content: "\f040";
+}
+.oc-icon-map-marker:before,
+.icon-map-marker:before {
+  content: "\f041";
+}
+.oc-icon-adjust:before,
+.icon-adjust:before {
+  content: "\f042";
+}
+.oc-icon-tint:before,
+.icon-tint:before {
+  content: "\f043";
+}
+.oc-icon-edit:before,
+.icon-edit:before,
+.oc-icon-pencil-square-o:before,
+.icon-pencil-square-o:before {
+  content: "\f044";
+}
+.oc-icon-share-square-o:before,
+.icon-share-square-o:before {
+  content: "\f045";
+}
+.oc-icon-check-square-o:before,
+.icon-check-square-o:before {
+  content: "\f046";
+}
+.oc-icon-arrows:before,
+.icon-arrows:before {
+  content: "\f047";
+}
+.oc-icon-step-backward:before,
+.icon-step-backward:before {
+  content: "\f048";
+}
+.oc-icon-fast-backward:before,
+.icon-fast-backward:before {
+  content: "\f049";
+}
+.oc-icon-backward:before,
+.icon-backward:before {
+  content: "\f04a";
+}
+.oc-icon-play:before,
+.icon-play:before {
+  content: "\f04b";
+}
+.oc-icon-pause:before,
+.icon-pause:before {
+  content: "\f04c";
+}
+.oc-icon-stop:before,
+.icon-stop:before {
+  content: "\f04d";
+}
+.oc-icon-forward:before,
+.icon-forward:before {
+  content: "\f04e";
+}
+.oc-icon-fast-forward:before,
+.icon-fast-forward:before {
+  content: "\f050";
+}
+.oc-icon-step-forward:before,
+.icon-step-forward:before {
+  content: "\f051";
+}
+.oc-icon-eject:before,
+.icon-eject:before {
+  content: "\f052";
+}
+.oc-icon-chevron-left:before,
+.icon-chevron-left:before {
+  content: "\f053";
+}
+.oc-icon-chevron-right:before,
+.icon-chevron-right:before {
+  content: "\f054";
+}
+.oc-icon-plus-circle:before,
+.icon-plus-circle:before {
+  content: "\f055";
+}
+.oc-icon-minus-circle:before,
+.icon-minus-circle:before {
+  content: "\f056";
+}
+.oc-icon-times-circle:before,
+.icon-times-circle:before {
+  content: "\f057";
+}
+.oc-icon-check-circle:before,
+.icon-check-circle:before {
+  content: "\f058";
+}
+.oc-icon-question-circle:before,
+.icon-question-circle:before {
+  content: "\f059";
+}
+.oc-icon-info-circle:before,
+.icon-info-circle:before {
+  content: "\f05a";
+}
+.oc-icon-crosshairs:before,
+.icon-crosshairs:before {
+  content: "\f05b";
+}
+.oc-icon-times-circle-o:before,
+.icon-times-circle-o:before {
+  content: "\f05c";
+}
+.oc-icon-check-circle-o:before,
+.icon-check-circle-o:before {
+  content: "\f05d";
+}
+.oc-icon-ban:before,
+.icon-ban:before {
+  content: "\f05e";
+}
+.oc-icon-arrow-left:before,
+.icon-arrow-left:before {
+  content: "\f060";
+}
+.oc-icon-arrow-right:before,
+.icon-arrow-right:before {
+  content: "\f061";
+}
+.oc-icon-arrow-up:before,
+.icon-arrow-up:before {
+  content: "\f062";
+}
+.oc-icon-arrow-down:before,
+.icon-arrow-down:before {
+  content: "\f063";
+}
+.oc-icon-mail-forward:before,
+.icon-mail-forward:before,
+.oc-icon-share:before,
+.icon-share:before {
+  content: "\f064";
+}
+.oc-icon-expand:before,
+.icon-expand:before {
+  content: "\f065";
+}
+.oc-icon-compress:before,
+.icon-compress:before {
+  content: "\f066";
+}
+.oc-icon-plus:before,
+.icon-plus:before {
+  content: "\f067";
+}
+.oc-icon-minus:before,
+.icon-minus:before {
+  content: "\f068";
+}
+.oc-icon-asterisk:before,
+.icon-asterisk:before {
+  content: "\f069";
+}
+.oc-icon-exclamation-circle:before,
+.icon-exclamation-circle:before {
+  content: "\f06a";
+}
+.oc-icon-gift:before,
+.icon-gift:before {
+  content: "\f06b";
+}
+.oc-icon-leaf:before,
+.icon-leaf:before {
+  content: "\f06c";
+}
+.oc-icon-fire:before,
+.icon-fire:before {
+  content: "\f06d";
+}
+.oc-icon-eye:before,
+.icon-eye:before {
+  content: "\f06e";
+}
+.oc-icon-eye-slash:before,
+.icon-eye-slash:before {
+  content: "\f070";
+}
+.oc-icon-warning:before,
+.icon-warning:before,
+.oc-icon-exclamation-triangle:before,
+.icon-exclamation-triangle:before {
+  content: "\f071";
+}
+.oc-icon-plane:before,
+.icon-plane:before {
+  content: "\f072";
+}
+.oc-icon-calendar:before,
+.icon-calendar:before {
+  content: "\f073";
+}
+.oc-icon-random:before,
+.icon-random:before {
+  content: "\f074";
+}
+.oc-icon-comment:before,
+.icon-comment:before {
+  content: "\f075";
+}
+.oc-icon-magnet:before,
+.icon-magnet:before {
+  content: "\f076";
+}
+.oc-icon-chevron-up:before,
+.icon-chevron-up:before {
+  content: "\f077";
+}
+.oc-icon-chevron-down:before,
+.icon-chevron-down:before {
+  content: "\f078";
+}
+.oc-icon-retweet:before,
+.icon-retweet:before {
+  content: "\f079";
+}
+.oc-icon-shopping-cart:before,
+.icon-shopping-cart:before {
+  content: "\f07a";
+}
+.oc-icon-folder:before,
+.icon-folder:before {
+  content: "\f07b";
+}
+.oc-icon-folder-open:before,
+.icon-folder-open:before {
+  content: "\f07c";
+}
+.oc-icon-arrows-v:before,
+.icon-arrows-v:before {
+  content: "\f07d";
+}
+.oc-icon-arrows-h:before,
+.icon-arrows-h:before {
+  content: "\f07e";
+}
+.oc-icon-bar-chart-o:before,
+.icon-bar-chart-o:before,
+.oc-icon-bar-chart:before,
+.icon-bar-chart:before {
+  content: "\f080";
+}
+.oc-icon-twitter-square:before,
+.icon-twitter-square:before {
+  content: "\f081";
+}
+.oc-icon-facebook-square:before,
+.icon-facebook-square:before {
+  content: "\f082";
+}
+.oc-icon-camera-retro:before,
+.icon-camera-retro:before {
+  content: "\f083";
+}
+.oc-icon-key:before,
+.icon-key:before {
+  content: "\f084";
+}
+.oc-icon-gears:before,
+.icon-gears:before,
+.oc-icon-cogs:before,
+.icon-cogs:before {
+  content: "\f085";
+}
+.oc-icon-comments:before,
+.icon-comments:before {
+  content: "\f086";
+}
+.oc-icon-thumbs-o-up:before,
+.icon-thumbs-o-up:before {
+  content: "\f087";
+}
+.oc-icon-thumbs-o-down:before,
+.icon-thumbs-o-down:before {
+  content: "\f088";
+}
+.oc-icon-star-half:before,
+.icon-star-half:before {
+  content: "\f089";
+}
+.oc-icon-heart-o:before,
+.icon-heart-o:before {
+  content: "\f08a";
+}
+.oc-icon-sign-out:before,
+.icon-sign-out:before {
+  content: "\f08b";
+}
+.oc-icon-linkedin-square:before,
+.icon-linkedin-square:before {
+  content: "\f08c";
+}
+.oc-icon-thumb-tack:before,
+.icon-thumb-tack:before {
+  content: "\f08d";
+}
+.oc-icon-external-link:before,
+.icon-external-link:before {
+  content: "\f08e";
+}
+.oc-icon-sign-in:before,
+.icon-sign-in:before {
+  content: "\f090";
+}
+.oc-icon-trophy:before,
+.icon-trophy:before {
+  content: "\f091";
+}
+.oc-icon-github-square:before,
+.icon-github-square:before {
+  content: "\f092";
+}
+.oc-icon-upload:before,
+.icon-upload:before {
+  content: "\f093";
+}
+.oc-icon-lemon-o:before,
+.icon-lemon-o:before {
+  content: "\f094";
+}
+.oc-icon-phone:before,
+.icon-phone:before {
+  content: "\f095";
+}
+.oc-icon-square-o:before,
+.icon-square-o:before {
+  content: "\f096";
+}
+.oc-icon-bookmark-o:before,
+.icon-bookmark-o:before {
+  content: "\f097";
+}
+.oc-icon-phone-square:before,
+.icon-phone-square:before {
+  content: "\f098";
+}
+.oc-icon-twitter:before,
+.icon-twitter:before {
+  content: "\f099";
+}
+.oc-icon-facebook-f:before,
+.icon-facebook-f:before,
+.oc-icon-facebook:before,
+.icon-facebook:before {
+  content: "\f09a";
+}
+.oc-icon-github:before,
+.icon-github:before {
+  content: "\f09b";
+}
+.oc-icon-unlock:before,
+.icon-unlock:before {
+  content: "\f09c";
+}
+.oc-icon-credit-card:before,
+.icon-credit-card:before {
+  content: "\f09d";
+}
+.oc-icon-rss:before,
+.icon-rss:before {
+  content: "\f09e";
+}
+.oc-icon-hdd-o:before,
+.icon-hdd-o:before {
+  content: "\f0a0";
+}
+.oc-icon-bullhorn:before,
+.icon-bullhorn:before {
+  content: "\f0a1";
+}
+.oc-icon-bell:before,
+.icon-bell:before {
+  content: "\f0f3";
+}
+.oc-icon-certificate:before,
+.icon-certificate:before {
+  content: "\f0a3";
+}
+.oc-icon-hand-o-right:before,
+.icon-hand-o-right:before {
+  content: "\f0a4";
+}
+.oc-icon-hand-o-left:before,
+.icon-hand-o-left:before {
+  content: "\f0a5";
+}
+.oc-icon-hand-o-up:before,
+.icon-hand-o-up:before {
+  content: "\f0a6";
+}
+.oc-icon-hand-o-down:before,
+.icon-hand-o-down:before {
+  content: "\f0a7";
+}
+.oc-icon-arrow-circle-left:before,
+.icon-arrow-circle-left:before {
+  content: "\f0a8";
+}
+.oc-icon-arrow-circle-right:before,
+.icon-arrow-circle-right:before {
+  content: "\f0a9";
+}
+.oc-icon-arrow-circle-up:before,
+.icon-arrow-circle-up:before {
+  content: "\f0aa";
+}
+.oc-icon-arrow-circle-down:before,
+.icon-arrow-circle-down:before {
+  content: "\f0ab";
+}
+.oc-icon-globe:before,
+.icon-globe:before {
+  content: "\f0ac";
+}
+.oc-icon-wrench:before,
+.icon-wrench:before {
+  content: "\f0ad";
+}
+.oc-icon-tasks:before,
+.icon-tasks:before {
+  content: "\f0ae";
+}
+.oc-icon-filter:before,
+.icon-filter:before {
+  content: "\f0b0";
+}
+.oc-icon-briefcase:before,
+.icon-briefcase:before {
+  content: "\f0b1";
+}
+.oc-icon-arrows-alt:before,
+.icon-arrows-alt:before {
+  content: "\f0b2";
+}
+.oc-icon-group:before,
+.icon-group:before,
+.oc-icon-users:before,
+.icon-users:before {
+  content: "\f0c0";
+}
+.oc-icon-chain:before,
+.icon-chain:before,
+.oc-icon-link:before,
+.icon-link:before {
+  content: "\f0c1";
+}
+.oc-icon-cloud:before,
+.icon-cloud:before {
+  content: "\f0c2";
+}
+.oc-icon-flask:before,
+.icon-flask:before {
+  content: "\f0c3";
+}
+.oc-icon-cut:before,
+.icon-cut:before,
+.oc-icon-scissors:before,
+.icon-scissors:before {
+  content: "\f0c4";
+}
+.oc-icon-copy:before,
+.icon-copy:before,
+.oc-icon-files-o:before,
+.icon-files-o:before {
+  content: "\f0c5";
+}
+.oc-icon-paperclip:before,
+.icon-paperclip:before {
+  content: "\f0c6";
+}
+.oc-icon-save:before,
+.icon-save:before,
+.oc-icon-floppy-o:before,
+.icon-floppy-o:before {
+  content: "\f0c7";
+}
+.oc-icon-square:before,
+.icon-square:before {
+  content: "\f0c8";
+}
+.oc-icon-navicon:before,
+.icon-navicon:before,
+.oc-icon-reorder:before,
+.icon-reorder:before,
+.oc-icon-bars:before,
+.icon-bars:before {
+  content: "\f0c9";
+}
+.oc-icon-list-ul:before,
+.icon-list-ul:before {
+  content: "\f0ca";
+}
+.oc-icon-list-ol:before,
+.icon-list-ol:before {
+  content: "\f0cb";
+}
+.oc-icon-strikethrough:before,
+.icon-strikethrough:before {
+  content: "\f0cc";
+}
+.oc-icon-underline:before,
+.icon-underline:before {
+  content: "\f0cd";
+}
+.oc-icon-table:before,
+.icon-table:before {
+  content: "\f0ce";
+}
+.oc-icon-magic:before,
+.icon-magic:before {
+  content: "\f0d0";
+}
+.oc-icon-truck:before,
+.icon-truck:before {
+  content: "\f0d1";
+}
+.oc-icon-pinterest:before,
+.icon-pinterest:before {
+  content: "\f0d2";
+}
+.oc-icon-pinterest-square:before,
+.icon-pinterest-square:before {
+  content: "\f0d3";
+}
+.oc-icon-google-plus-square:before,
+.icon-google-plus-square:before {
+  content: "\f0d4";
+}
+.oc-icon-google-plus:before,
+.icon-google-plus:before {
+  content: "\f0d5";
+}
+.oc-icon-money:before,
+.icon-money:before {
+  content: "\f0d6";
+}
+.oc-icon-caret-down:before,
+.icon-caret-down:before {
+  content: "\f0d7";
+}
+.oc-icon-caret-up:before,
+.icon-caret-up:before {
+  content: "\f0d8";
+}
+.oc-icon-caret-left:before,
+.icon-caret-left:before {
+  content: "\f0d9";
+}
+.oc-icon-caret-right:before,
+.icon-caret-right:before {
+  content: "\f0da";
+}
+.oc-icon-columns:before,
+.icon-columns:before {
+  content: "\f0db";
+}
+.oc-icon-unsorted:before,
+.icon-unsorted:before,
+.oc-icon-sort:before,
+.icon-sort:before {
+  content: "\f0dc";
+}
+.oc-icon-sort-down:before,
+.icon-sort-down:before,
+.oc-icon-sort-desc:before,
+.icon-sort-desc:before {
+  content: "\f0dd";
+}
+.oc-icon-sort-up:before,
+.icon-sort-up:before,
+.oc-icon-sort-asc:before,
+.icon-sort-asc:before {
+  content: "\f0de";
+}
+.oc-icon-envelope:before,
+.icon-envelope:before {
+  content: "\f0e0";
+}
+.oc-icon-linkedin:before,
+.icon-linkedin:before {
+  content: "\f0e1";
+}
+.oc-icon-rotate-left:before,
+.icon-rotate-left:before,
+.oc-icon-undo:before,
+.icon-undo:before {
+  content: "\f0e2";
+}
+.oc-icon-legal:before,
+.icon-legal:before,
+.oc-icon-gavel:before,
+.icon-gavel:before {
+  content: "\f0e3";
+}
+.oc-icon-dashboard:before,
+.icon-dashboard:before,
+.oc-icon-tachometer:before,
+.icon-tachometer:before {
+  content: "\f0e4";
+}
+.oc-icon-comment-o:before,
+.icon-comment-o:before {
+  content: "\f0e5";
+}
+.oc-icon-comments-o:before,
+.icon-comments-o:before {
+  content: "\f0e6";
+}
+.oc-icon-flash:before,
+.icon-flash:before,
+.oc-icon-bolt:before,
+.icon-bolt:before {
+  content: "\f0e7";
+}
+.oc-icon-sitemap:before,
+.icon-sitemap:before {
+  content: "\f0e8";
+}
+.oc-icon-umbrella:before,
+.icon-umbrella:before {
+  content: "\f0e9";
+}
+.oc-icon-paste:before,
+.icon-paste:before,
+.oc-icon-clipboard:before,
+.icon-clipboard:before {
+  content: "\f0ea";
+}
+.oc-icon-lightbulb-o:before,
+.icon-lightbulb-o:before {
+  content: "\f0eb";
+}
+.oc-icon-exchange:before,
+.icon-exchange:before {
+  content: "\f0ec";
+}
+.oc-icon-cloud-download:before,
+.icon-cloud-download:before {
+  content: "\f0ed";
+}
+.oc-icon-cloud-upload:before,
+.icon-cloud-upload:before {
+  content: "\f0ee";
+}
+.oc-icon-user-md:before,
+.icon-user-md:before {
+  content: "\f0f0";
+}
+.oc-icon-stethoscope:before,
+.icon-stethoscope:before {
+  content: "\f0f1";
+}
+.oc-icon-suitcase:before,
+.icon-suitcase:before {
+  content: "\f0f2";
+}
+.oc-icon-bell-o:before,
+.icon-bell-o:before {
+  content: "\f0a2";
+}
+.oc-icon-coffee:before,
+.icon-coffee:before {
+  content: "\f0f4";
+}
+.oc-icon-cutlery:before,
+.icon-cutlery:before {
+  content: "\f0f5";
+}
+.oc-icon-file-text-o:before,
+.icon-file-text-o:before {
+  content: "\f0f6";
+}
+.oc-icon-building-o:before,
+.icon-building-o:before {
+  content: "\f0f7";
+}
+.oc-icon-hospital-o:before,
+.icon-hospital-o:before {
+  content: "\f0f8";
+}
+.oc-icon-ambulance:before,
+.icon-ambulance:before {
+  content: "\f0f9";
+}
+.oc-icon-medkit:before,
+.icon-medkit:before {
+  content: "\f0fa";
+}
+.oc-icon-fighter-jet:before,
+.icon-fighter-jet:before {
+  content: "\f0fb";
+}
+.oc-icon-beer:before,
+.icon-beer:before {
+  content: "\f0fc";
+}
+.oc-icon-h-square:before,
+.icon-h-square:before {
+  content: "\f0fd";
+}
+.oc-icon-plus-square:before,
+.icon-plus-square:before {
+  content: "\f0fe";
+}
+.oc-icon-angle-double-left:before,
+.icon-angle-double-left:before {
+  content: "\f100";
+}
+.oc-icon-angle-double-right:before,
+.icon-angle-double-right:before {
+  content: "\f101";
+}
+.oc-icon-angle-double-up:before,
+.icon-angle-double-up:before {
+  content: "\f102";
+}
+.oc-icon-angle-double-down:before,
+.icon-angle-double-down:before {
+  content: "\f103";
+}
+.oc-icon-angle-left:before,
+.icon-angle-left:before {
+  content: "\f104";
+}
+.oc-icon-angle-right:before,
+.icon-angle-right:before {
+  content: "\f105";
+}
+.oc-icon-angle-up:before,
+.icon-angle-up:before {
+  content: "\f106";
+}
+.oc-icon-angle-down:before,
+.icon-angle-down:before {
+  content: "\f107";
+}
+.oc-icon-desktop:before,
+.icon-desktop:before {
+  content: "\f108";
+}
+.oc-icon-laptop:before,
+.icon-laptop:before {
+  content: "\f109";
+}
+.oc-icon-tablet:before,
+.icon-tablet:before {
+  content: "\f10a";
+}
+.oc-icon-mobile-phone:before,
+.icon-mobile-phone:before,
+.oc-icon-mobile:before,
+.icon-mobile:before {
+  content: "\f10b";
+}
+.oc-icon-circle-o:before,
+.icon-circle-o:before {
+  content: "\f10c";
+}
+.oc-icon-quote-left:before,
+.icon-quote-left:before {
+  content: "\f10d";
+}
+.oc-icon-quote-right:before,
+.icon-quote-right:before {
+  content: "\f10e";
+}
+.oc-icon-spinner:before,
+.icon-spinner:before {
+  content: "\f110";
+}
+.oc-icon-circle:before,
+.icon-circle:before {
+  content: "\f111";
+}
+.oc-icon-mail-reply:before,
+.icon-mail-reply:before,
+.oc-icon-reply:before,
+.icon-reply:before {
+  content: "\f112";
+}
+.oc-icon-github-alt:before,
+.icon-github-alt:before {
+  content: "\f113";
+}
+.oc-icon-folder-o:before,
+.icon-folder-o:before {
+  content: "\f114";
+}
+.oc-icon-folder-open-o:before,
+.icon-folder-open-o:before {
+  content: "\f115";
+}
+.oc-icon-smile-o:before,
+.icon-smile-o:before {
+  content: "\f118";
+}
+.oc-icon-frown-o:before,
+.icon-frown-o:before {
+  content: "\f119";
+}
+.oc-icon-meh-o:before,
+.icon-meh-o:before {
+  content: "\f11a";
+}
+.oc-icon-gamepad:before,
+.icon-gamepad:before {
+  content: "\f11b";
+}
+.oc-icon-keyboard-o:before,
+.icon-keyboard-o:before {
+  content: "\f11c";
+}
+.oc-icon-flag-o:before,
+.icon-flag-o:before {
+  content: "\f11d";
+}
+.oc-icon-flag-checkered:before,
+.icon-flag-checkered:before {
+  content: "\f11e";
+}
+.oc-icon-terminal:before,
+.icon-terminal:before {
+  content: "\f120";
+}
+.oc-icon-code:before,
+.icon-code:before {
+  content: "\f121";
+}
+.oc-icon-mail-reply-all:before,
+.icon-mail-reply-all:before,
+.oc-icon-reply-all:before,
+.icon-reply-all:before {
+  content: "\f122";
+}
+.oc-icon-star-half-empty:before,
+.icon-star-half-empty:before,
+.oc-icon-star-half-full:before,
+.icon-star-half-full:before,
+.oc-icon-star-half-o:before,
+.icon-star-half-o:before {
+  content: "\f123";
+}
+.oc-icon-location-arrow:before,
+.icon-location-arrow:before {
+  content: "\f124";
+}
+.oc-icon-crop:before,
+.icon-crop:before {
+  content: "\f125";
+}
+.oc-icon-code-fork:before,
+.icon-code-fork:before {
+  content: "\f126";
+}
+.oc-icon-unlink:before,
+.icon-unlink:before,
+.oc-icon-chain-broken:before,
+.icon-chain-broken:before {
+  content: "\f127";
+}
+.oc-icon-question:before,
+.icon-question:before {
+  content: "\f128";
+}
+.oc-icon-info:before,
+.icon-info:before {
+  content: "\f129";
+}
+.oc-icon-exclamation:before,
+.icon-exclamation:before {
+  content: "\f12a";
+}
+.oc-icon-superscript:before,
+.icon-superscript:before {
+  content: "\f12b";
+}
+.oc-icon-subscript:before,
+.icon-subscript:before {
+  content: "\f12c";
+}
+.oc-icon-eraser:before,
+.icon-eraser:before {
+  content: "\f12d";
+}
+.oc-icon-puzzle-piece:before,
+.icon-puzzle-piece:before {
+  content: "\f12e";
+}
+.oc-icon-microphone:before,
+.icon-microphone:before {
+  content: "\f130";
+}
+.oc-icon-microphone-slash:before,
+.icon-microphone-slash:before {
+  content: "\f131";
+}
+.oc-icon-shield:before,
+.icon-shield:before {
+  content: "\f132";
+}
+.oc-icon-calendar-o:before,
+.icon-calendar-o:before {
+  content: "\f133";
+}
+.oc-icon-fire-extinguisher:before,
+.icon-fire-extinguisher:before {
+  content: "\f134";
+}
+.oc-icon-rocket:before,
+.icon-rocket:before {
+  content: "\f135";
+}
+.oc-icon-maxcdn:before,
+.icon-maxcdn:before {
+  content: "\f136";
+}
+.oc-icon-chevron-circle-left:before,
+.icon-chevron-circle-left:before {
+  content: "\f137";
+}
+.oc-icon-chevron-circle-right:before,
+.icon-chevron-circle-right:before {
+  content: "\f138";
+}
+.oc-icon-chevron-circle-up:before,
+.icon-chevron-circle-up:before {
+  content: "\f139";
+}
+.oc-icon-chevron-circle-down:before,
+.icon-chevron-circle-down:before {
+  content: "\f13a";
+}
+.oc-icon-html5:before,
+.icon-html5:before {
+  content: "\f13b";
+}
+.oc-icon-css3:before,
+.icon-css3:before {
+  content: "\f13c";
+}
+.oc-icon-anchor:before,
+.icon-anchor:before {
+  content: "\f13d";
+}
+.oc-icon-unlock-alt:before,
+.icon-unlock-alt:before {
+  content: "\f13e";
+}
+.oc-icon-bullseye:before,
+.icon-bullseye:before {
+  content: "\f140";
+}
+.oc-icon-ellipsis-h:before,
+.icon-ellipsis-h:before {
+  content: "\f141";
+}
+.oc-icon-ellipsis-v:before,
+.icon-ellipsis-v:before {
+  content: "\f142";
+}
+.oc-icon-rss-square:before,
+.icon-rss-square:before {
+  content: "\f143";
+}
+.oc-icon-play-circle:before,
+.icon-play-circle:before {
+  content: "\f144";
+}
+.oc-icon-ticket:before,
+.icon-ticket:before {
+  content: "\f145";
+}
+.oc-icon-minus-square:before,
+.icon-minus-square:before {
+  content: "\f146";
+}
+.oc-icon-minus-square-o:before,
+.icon-minus-square-o:before {
+  content: "\f147";
+}
+.oc-icon-level-up:before,
+.icon-level-up:before {
+  content: "\f148";
+}
+.oc-icon-level-down:before,
+.icon-level-down:before {
+  content: "\f149";
+}
+.oc-icon-check-square:before,
+.icon-check-square:before {
+  content: "\f14a";
+}
+.oc-icon-pencil-square:before,
+.icon-pencil-square:before {
+  content: "\f14b";
+}
+.oc-icon-external-link-square:before,
+.icon-external-link-square:before {
+  content: "\f14c";
+}
+.oc-icon-share-square:before,
+.icon-share-square:before {
+  content: "\f14d";
+}
+.oc-icon-compass:before,
+.icon-compass:before {
+  content: "\f14e";
+}
+.oc-icon-toggle-down:before,
+.icon-toggle-down:before,
+.oc-icon-caret-square-o-down:before,
+.icon-caret-square-o-down:before {
+  content: "\f150";
+}
+.oc-icon-toggle-up:before,
+.icon-toggle-up:before,
+.oc-icon-caret-square-o-up:before,
+.icon-caret-square-o-up:before {
+  content: "\f151";
+}
+.oc-icon-toggle-right:before,
+.icon-toggle-right:before,
+.oc-icon-caret-square-o-right:before,
+.icon-caret-square-o-right:before {
+  content: "\f152";
+}
+.oc-icon-euro:before,
+.icon-euro:before,
+.oc-icon-eur:before,
+.icon-eur:before {
+  content: "\f153";
+}
+.oc-icon-gbp:before,
+.icon-gbp:before {
+  content: "\f154";
+}
+.oc-icon-dollar:before,
+.icon-dollar:before,
+.oc-icon-usd:before,
+.icon-usd:before {
+  content: "\f155";
+}
+.oc-icon-rupee:before,
+.icon-rupee:before,
+.oc-icon-inr:before,
+.icon-inr:before {
+  content: "\f156";
+}
+.oc-icon-cny:before,
+.icon-cny:before,
+.oc-icon-rmb:before,
+.icon-rmb:before,
+.oc-icon-yen:before,
+.icon-yen:before,
+.oc-icon-jpy:before,
+.icon-jpy:before {
+  content: "\f157";
+}
+.oc-icon-ruble:before,
+.icon-ruble:before,
+.oc-icon-rouble:before,
+.icon-rouble:before,
+.oc-icon-rub:before,
+.icon-rub:before {
+  content: "\f158";
+}
+.oc-icon-won:before,
+.icon-won:before,
+.oc-icon-krw:before,
+.icon-krw:before {
+  content: "\f159";
+}
+.oc-icon-bitcoin:before,
+.icon-bitcoin:before,
+.oc-icon-btc:before,
+.icon-btc:before {
+  content: "\f15a";
+}
+.oc-icon-file:before,
+.icon-file:before {
+  content: "\f15b";
+}
+.oc-icon-file-text:before,
+.icon-file-text:before {
+  content: "\f15c";
+}
+.oc-icon-sort-alpha-asc:before,
+.icon-sort-alpha-asc:before {
+  content: "\f15d";
+}
+.oc-icon-sort-alpha-desc:before,
+.icon-sort-alpha-desc:before {
+  content: "\f15e";
+}
+.oc-icon-sort-amount-asc:before,
+.icon-sort-amount-asc:before {
+  content: "\f160";
+}
+.oc-icon-sort-amount-desc:before,
+.icon-sort-amount-desc:before {
+  content: "\f161";
+}
+.oc-icon-sort-numeric-asc:before,
+.icon-sort-numeric-asc:before {
+  content: "\f162";
+}
+.oc-icon-sort-numeric-desc:before,
+.icon-sort-numeric-desc:before {
+  content: "\f163";
+}
+.oc-icon-thumbs-up:before,
+.icon-thumbs-up:before {
+  content: "\f164";
+}
+.oc-icon-thumbs-down:before,
+.icon-thumbs-down:before {
+  content: "\f165";
+}
+.oc-icon-youtube-square:before,
+.icon-youtube-square:before {
+  content: "\f166";
+}
+.oc-icon-youtube:before,
+.icon-youtube:before {
+  content: "\f167";
+}
+.oc-icon-xing:before,
+.icon-xing:before {
+  content: "\f168";
+}
+.oc-icon-xing-square:before,
+.icon-xing-square:before {
+  content: "\f169";
+}
+.oc-icon-youtube-play:before,
+.icon-youtube-play:before {
+  content: "\f16a";
+}
+.oc-icon-dropbox:before,
+.icon-dropbox:before {
+  content: "\f16b";
+}
+.oc-icon-stack-overflow:before,
+.icon-stack-overflow:before {
+  content: "\f16c";
+}
+.oc-icon-instagram:before,
+.icon-instagram:before {
+  content: "\f16d";
+}
+.oc-icon-flickr:before,
+.icon-flickr:before {
+  content: "\f16e";
+}
+.oc-icon-adn:before,
+.icon-adn:before {
+  content: "\f170";
+}
+.oc-icon-bitbucket:before,
+.icon-bitbucket:before {
+  content: "\f171";
+}
+.oc-icon-bitbucket-square:before,
+.icon-bitbucket-square:before {
+  content: "\f172";
+}
+.oc-icon-tumblr:before,
+.icon-tumblr:before {
+  content: "\f173";
+}
+.oc-icon-tumblr-square:before,
+.icon-tumblr-square:before {
+  content: "\f174";
+}
+.oc-icon-long-arrow-down:before,
+.icon-long-arrow-down:before {
+  content: "\f175";
+}
+.oc-icon-long-arrow-up:before,
+.icon-long-arrow-up:before {
+  content: "\f176";
+}
+.oc-icon-long-arrow-left:before,
+.icon-long-arrow-left:before {
+  content: "\f177";
+}
+.oc-icon-long-arrow-right:before,
+.icon-long-arrow-right:before {
+  content: "\f178";
+}
+.oc-icon-apple:before,
+.icon-apple:before {
+  content: "\f179";
+}
+.oc-icon-windows:before,
+.icon-windows:before {
+  content: "\f17a";
+}
+.oc-icon-android:before,
+.icon-android:before {
+  content: "\f17b";
+}
+.oc-icon-linux:before,
+.icon-linux:before {
+  content: "\f17c";
+}
+.oc-icon-dribbble:before,
+.icon-dribbble:before {
+  content: "\f17d";
+}
+.oc-icon-skype:before,
+.icon-skype:before {
+  content: "\f17e";
+}
+.oc-icon-foursquare:before,
+.icon-foursquare:before {
+  content: "\f180";
+}
+.oc-icon-trello:before,
+.icon-trello:before {
+  content: "\f181";
+}
+.oc-icon-female:before,
+.icon-female:before {
+  content: "\f182";
+}
+.oc-icon-male:before,
+.icon-male:before {
+  content: "\f183";
+}
+.oc-icon-gittip:before,
+.icon-gittip:before,
+.oc-icon-gratipay:before,
+.icon-gratipay:before {
+  content: "\f184";
+}
+.oc-icon-sun-o:before,
+.icon-sun-o:before {
+  content: "\f185";
+}
+.oc-icon-moon-o:before,
+.icon-moon-o:before {
+  content: "\f186";
+}
+.oc-icon-archive:before,
+.icon-archive:before {
+  content: "\f187";
+}
+.oc-icon-bug:before,
+.icon-bug:before {
+  content: "\f188";
+}
+.oc-icon-vk:before,
+.icon-vk:before {
+  content: "\f189";
+}
+.oc-icon-weibo:before,
+.icon-weibo:before {
+  content: "\f18a";
+}
+.oc-icon-renren:before,
+.icon-renren:before {
+  content: "\f18b";
+}
+.oc-icon-pagelines:before,
+.icon-pagelines:before {
+  content: "\f18c";
+}
+.oc-icon-stack-exchange:before,
+.icon-stack-exchange:before {
+  content: "\f18d";
+}
+.oc-icon-arrow-circle-o-right:before,
+.icon-arrow-circle-o-right:before {
+  content: "\f18e";
+}
+.oc-icon-arrow-circle-o-left:before,
+.icon-arrow-circle-o-left:before {
+  content: "\f190";
+}
+.oc-icon-toggle-left:before,
+.icon-toggle-left:before,
+.oc-icon-caret-square-o-left:before,
+.icon-caret-square-o-left:before {
+  content: "\f191";
+}
+.oc-icon-dot-circle-o:before,
+.icon-dot-circle-o:before {
+  content: "\f192";
+}
+.oc-icon-wheelchair:before,
+.icon-wheelchair:before {
+  content: "\f193";
+}
+.oc-icon-vimeo-square:before,
+.icon-vimeo-square:before {
+  content: "\f194";
+}
+.oc-icon-turkish-lira:before,
+.icon-turkish-lira:before,
+.oc-icon-try:before,
+.icon-try:before {
+  content: "\f195";
+}
+.oc-icon-plus-square-o:before,
+.icon-plus-square-o:before {
+  content: "\f196";
+}
+.oc-icon-space-shuttle:before,
+.icon-space-shuttle:before {
+  content: "\f197";
+}
+.oc-icon-slack:before,
+.icon-slack:before {
+  content: "\f198";
+}
+.oc-icon-envelope-square:before,
+.icon-envelope-square:before {
+  content: "\f199";
+}
+.oc-icon-wordpress:before,
+.icon-wordpress:before {
+  content: "\f19a";
+}
+.oc-icon-openid:before,
+.icon-openid:before {
+  content: "\f19b";
+}
+.oc-icon-institution:before,
+.icon-institution:before,
+.oc-icon-bank:before,
+.icon-bank:before,
+.oc-icon-university:before,
+.icon-university:before {
+  content: "\f19c";
+}
+.oc-icon-mortar-board:before,
+.icon-mortar-board:before,
+.oc-icon-graduation-cap:before,
+.icon-graduation-cap:before {
+  content: "\f19d";
+}
+.oc-icon-yahoo:before,
+.icon-yahoo:before {
+  content: "\f19e";
+}
+.oc-icon-google:before,
+.icon-google:before {
+  content: "\f1a0";
+}
+.oc-icon-reddit:before,
+.icon-reddit:before {
+  content: "\f1a1";
+}
+.oc-icon-reddit-square:before,
+.icon-reddit-square:before {
+  content: "\f1a2";
+}
+.oc-icon-stumbleupon-circle:before,
+.icon-stumbleupon-circle:before {
+  content: "\f1a3";
+}
+.oc-icon-stumbleupon:before,
+.icon-stumbleupon:before {
+  content: "\f1a4";
+}
+.oc-icon-delicious:before,
+.icon-delicious:before {
+  content: "\f1a5";
+}
+.oc-icon-digg:before,
+.icon-digg:before {
+  content: "\f1a6";
+}
+.oc-icon-pied-piper:before,
+.icon-pied-piper:before {
+  content: "\f1a7";
+}
+.oc-icon-pied-piper-alt:before,
+.icon-pied-piper-alt:before {
+  content: "\f1a8";
+}
+.oc-icon-drupal:before,
+.icon-drupal:before {
+  content: "\f1a9";
+}
+.oc-icon-joomla:before,
+.icon-joomla:before {
+  content: "\f1aa";
+}
+.oc-icon-language:before,
+.icon-language:before {
+  content: "\f1ab";
+}
+.oc-icon-fax:before,
+.icon-fax:before {
+  content: "\f1ac";
+}
+.oc-icon-building:before,
+.icon-building:before {
+  content: "\f1ad";
+}
+.oc-icon-child:before,
+.icon-child:before {
+  content: "\f1ae";
+}
+.oc-icon-paw:before,
+.icon-paw:before {
+  content: "\f1b0";
+}
+.oc-icon-spoon:before,
+.icon-spoon:before {
+  content: "\f1b1";
+}
+.oc-icon-cube:before,
+.icon-cube:before {
+  content: "\f1b2";
+}
+.oc-icon-cubes:before,
+.icon-cubes:before {
+  content: "\f1b3";
+}
+.oc-icon-behance:before,
+.icon-behance:before {
+  content: "\f1b4";
+}
+.oc-icon-behance-square:before,
+.icon-behance-square:before {
+  content: "\f1b5";
+}
+.oc-icon-steam:before,
+.icon-steam:before {
+  content: "\f1b6";
+}
+.oc-icon-steam-square:before,
+.icon-steam-square:before {
+  content: "\f1b7";
+}
+.oc-icon-recycle:before,
+.icon-recycle:before {
+  content: "\f1b8";
+}
+.oc-icon-automobile:before,
+.icon-automobile:before,
+.oc-icon-car:before,
+.icon-car:before {
+  content: "\f1b9";
+}
+.oc-icon-cab:before,
+.icon-cab:before,
+.oc-icon-taxi:before,
+.icon-taxi:before {
+  content: "\f1ba";
+}
+.oc-icon-tree:before,
+.icon-tree:before {
+  content: "\f1bb";
+}
+.oc-icon-spotify:before,
+.icon-spotify:before {
+  content: "\f1bc";
+}
+.oc-icon-deviantart:before,
+.icon-deviantart:before {
+  content: "\f1bd";
+}
+.oc-icon-soundcloud:before,
+.icon-soundcloud:before {
+  content: "\f1be";
+}
+.oc-icon-database:before,
+.icon-database:before {
+  content: "\f1c0";
+}
+.oc-icon-file-pdf-o:before,
+.icon-file-pdf-o:before {
+  content: "\f1c1";
+}
+.oc-icon-file-word-o:before,
+.icon-file-word-o:before {
+  content: "\f1c2";
+}
+.oc-icon-file-excel-o:before,
+.icon-file-excel-o:before {
+  content: "\f1c3";
+}
+.oc-icon-file-powerpoint-o:before,
+.icon-file-powerpoint-o:before {
+  content: "\f1c4";
+}
+.oc-icon-file-photo-o:before,
+.icon-file-photo-o:before,
+.oc-icon-file-picture-o:before,
+.icon-file-picture-o:before,
+.oc-icon-file-image-o:before,
+.icon-file-image-o:before {
+  content: "\f1c5";
+}
+.oc-icon-file-zip-o:before,
+.icon-file-zip-o:before,
+.oc-icon-file-archive-o:before,
+.icon-file-archive-o:before {
+  content: "\f1c6";
+}
+.oc-icon-file-sound-o:before,
+.icon-file-sound-o:before,
+.oc-icon-file-audio-o:before,
+.icon-file-audio-o:before {
+  content: "\f1c7";
+}
+.oc-icon-file-movie-o:before,
+.icon-file-movie-o:before,
+.oc-icon-file-video-o:before,
+.icon-file-video-o:before {
+  content: "\f1c8";
+}
+.oc-icon-file-code-o:before,
+.icon-file-code-o:before {
+  content: "\f1c9";
+}
+.oc-icon-vine:before,
+.icon-vine:before {
+  content: "\f1ca";
+}
+.oc-icon-codepen:before,
+.icon-codepen:before {
+  content: "\f1cb";
+}
+.oc-icon-jsfiddle:before,
+.icon-jsfiddle:before {
+  content: "\f1cc";
+}
+.oc-icon-life-bouy:before,
+.icon-life-bouy:before,
+.oc-icon-life-buoy:before,
+.icon-life-buoy:before,
+.oc-icon-life-saver:before,
+.icon-life-saver:before,
+.oc-icon-support:before,
+.icon-support:before,
+.oc-icon-life-ring:before,
+.icon-life-ring:before {
+  content: "\f1cd";
+}
+.oc-icon-circle-o-notch:before,
+.icon-circle-o-notch:before {
+  content: "\f1ce";
+}
+.oc-icon-ra:before,
+.icon-ra:before,
+.oc-icon-rebel:before,
+.icon-rebel:before {
+  content: "\f1d0";
+}
+.oc-icon-ge:before,
+.icon-ge:before,
+.oc-icon-empire:before,
+.icon-empire:before {
+  content: "\f1d1";
+}
+.oc-icon-git-square:before,
+.icon-git-square:before {
+  content: "\f1d2";
+}
+.oc-icon-git:before,
+.icon-git:before {
+  content: "\f1d3";
+}
+.oc-icon-hacker-news:before,
+.icon-hacker-news:before {
+  content: "\f1d4";
+}
+.oc-icon-tencent-weibo:before,
+.icon-tencent-weibo:before {
+  content: "\f1d5";
+}
+.oc-icon-qq:before,
+.icon-qq:before {
+  content: "\f1d6";
+}
+.oc-icon-wechat:before,
+.icon-wechat:before,
+.oc-icon-weixin:before,
+.icon-weixin:before {
+  content: "\f1d7";
+}
+.oc-icon-send:before,
+.icon-send:before,
+.oc-icon-paper-plane:before,
+.icon-paper-plane:before {
+  content: "\f1d8";
+}
+.oc-icon-send-o:before,
+.icon-send-o:before,
+.oc-icon-paper-plane-o:before,
+.icon-paper-plane-o:before {
+  content: "\f1d9";
+}
+.oc-icon-history:before,
+.icon-history:before {
+  content: "\f1da";
+}
+.oc-icon-genderless:before,
+.icon-genderless:before,
+.oc-icon-circle-thin:before,
+.icon-circle-thin:before {
+  content: "\f1db";
+}
+.oc-icon-header:before,
+.icon-header:before {
+  content: "\f1dc";
+}
+.oc-icon-paragraph:before,
+.icon-paragraph:before {
+  content: "\f1dd";
+}
+.oc-icon-sliders:before,
+.icon-sliders:before {
+  content: "\f1de";
+}
+.oc-icon-share-alt:before,
+.icon-share-alt:before {
+  content: "\f1e0";
+}
+.oc-icon-share-alt-square:before,
+.icon-share-alt-square:before {
+  content: "\f1e1";
+}
+.oc-icon-bomb:before,
+.icon-bomb:before {
+  content: "\f1e2";
+}
+.oc-icon-soccer-ball-o:before,
+.icon-soccer-ball-o:before,
+.oc-icon-futbol-o:before,
+.icon-futbol-o:before {
+  content: "\f1e3";
+}
+.oc-icon-tty:before,
+.icon-tty:before {
+  content: "\f1e4";
+}
+.oc-icon-binoculars:before,
+.icon-binoculars:before {
+  content: "\f1e5";
+}
+.oc-icon-plug:before,
+.icon-plug:before {
+  content: "\f1e6";
+}
+.oc-icon-slideshare:before,
+.icon-slideshare:before {
+  content: "\f1e7";
+}
+.oc-icon-twitch:before,
+.icon-twitch:before {
+  content: "\f1e8";
+}
+.oc-icon-yelp:before,
+.icon-yelp:before {
+  content: "\f1e9";
+}
+.oc-icon-newspaper-o:before,
+.icon-newspaper-o:before {
+  content: "\f1ea";
+}
+.oc-icon-wifi:before,
+.icon-wifi:before {
+  content: "\f1eb";
+}
+.oc-icon-calculator:before,
+.icon-calculator:before {
+  content: "\f1ec";
+}
+.oc-icon-paypal:before,
+.icon-paypal:before {
+  content: "\f1ed";
+}
+.oc-icon-google-wallet:before,
+.icon-google-wallet:before {
+  content: "\f1ee";
+}
+.oc-icon-cc-visa:before,
+.icon-cc-visa:before {
+  content: "\f1f0";
+}
+.oc-icon-cc-mastercard:before,
+.icon-cc-mastercard:before {
+  content: "\f1f1";
+}
+.oc-icon-cc-discover:before,
+.icon-cc-discover:before {
+  content: "\f1f2";
+}
+.oc-icon-cc-amex:before,
+.icon-cc-amex:before {
+  content: "\f1f3";
+}
+.oc-icon-cc-paypal:before,
+.icon-cc-paypal:before {
+  content: "\f1f4";
+}
+.oc-icon-cc-stripe:before,
+.icon-cc-stripe:before {
+  content: "\f1f5";
+}
+.oc-icon-bell-slash:before,
+.icon-bell-slash:before {
+  content: "\f1f6";
+}
+.oc-icon-bell-slash-o:before,
+.icon-bell-slash-o:before {
+  content: "\f1f7";
+}
+.oc-icon-trash:before,
+.icon-trash:before {
+  content: "\f1f8";
+}
+.oc-icon-copyright:before,
+.icon-copyright:before {
+  content: "\f1f9";
+}
+.oc-icon-at:before,
+.icon-at:before {
+  content: "\f1fa";
+}
+.oc-icon-eyedropper:before,
+.icon-eyedropper:before {
+  content: "\f1fb";
+}
+.oc-icon-paint-brush:before,
+.icon-paint-brush:before {
+  content: "\f1fc";
+}
+.oc-icon-birthday-cake:before,
+.icon-birthday-cake:before {
+  content: "\f1fd";
+}
+.oc-icon-area-chart:before,
+.icon-area-chart:before {
+  content: "\f1fe";
+}
+.oc-icon-pie-chart:before,
+.icon-pie-chart:before {
+  content: "\f200";
+}
+.oc-icon-line-chart:before,
+.icon-line-chart:before {
+  content: "\f201";
+}
+.oc-icon-lastfm:before,
+.icon-lastfm:before {
+  content: "\f202";
+}
+.oc-icon-lastfm-square:before,
+.icon-lastfm-square:before {
+  content: "\f203";
+}
+.oc-icon-toggle-off:before,
+.icon-toggle-off:before {
+  content: "\f204";
+}
+.oc-icon-toggle-on:before,
+.icon-toggle-on:before {
+  content: "\f205";
+}
+.oc-icon-bicycle:before,
+.icon-bicycle:before {
+  content: "\f206";
+}
+.oc-icon-bus:before,
+.icon-bus:before {
+  content: "\f207";
+}
+.oc-icon-ioxhost:before,
+.icon-ioxhost:before {
+  content: "\f208";
+}
+.oc-icon-angellist:before,
+.icon-angellist:before {
+  content: "\f209";
+}
+.oc-icon-cc:before,
+.icon-cc:before {
+  content: "\f20a";
+}
+.oc-icon-shekel:before,
+.icon-shekel:before,
+.oc-icon-sheqel:before,
+.icon-sheqel:before,
+.oc-icon-ils:before,
+.icon-ils:before {
+  content: "\f20b";
+}
+.oc-icon-meanpath:before,
+.icon-meanpath:before {
+  content: "\f20c";
+}
+.oc-icon-buysellads:before,
+.icon-buysellads:before {
+  content: "\f20d";
+}
+.oc-icon-connectdevelop:before,
+.icon-connectdevelop:before {
+  content: "\f20e";
+}
+.oc-icon-dashcube:before,
+.icon-dashcube:before {
+  content: "\f210";
+}
+.oc-icon-forumbee:before,
+.icon-forumbee:before {
+  content: "\f211";
+}
+.oc-icon-leanpub:before,
+.icon-leanpub:before {
+  content: "\f212";
+}
+.oc-icon-sellsy:before,
+.icon-sellsy:before {
+  content: "\f213";
+}
+.oc-icon-shirtsinbulk:before,
+.icon-shirtsinbulk:before {
+  content: "\f214";
+}
+.oc-icon-simplybuilt:before,
+.icon-simplybuilt:before {
+  content: "\f215";
+}
+.oc-icon-skyatlas:before,
+.icon-skyatlas:before {
+  content: "\f216";
+}
+.oc-icon-cart-plus:before,
+.icon-cart-plus:before {
+  content: "\f217";
+}
+.oc-icon-cart-arrow-down:before,
+.icon-cart-arrow-down:before {
+  content: "\f218";
+}
+.oc-icon-diamond:before,
+.icon-diamond:before {
+  content: "\f219";
+}
+.oc-icon-ship:before,
+.icon-ship:before {
+  content: "\f21a";
+}
+.oc-icon-user-secret:before,
+.icon-user-secret:before {
+  content: "\f21b";
+}
+.oc-icon-motorcycle:before,
+.icon-motorcycle:before {
+  content: "\f21c";
+}
+.oc-icon-street-view:before,
+.icon-street-view:before {
+  content: "\f21d";
+}
+.oc-icon-heartbeat:before,
+.icon-heartbeat:before {
+  content: "\f21e";
+}
+.oc-icon-venus:before,
+.icon-venus:before {
+  content: "\f221";
+}
+.oc-icon-mars:before,
+.icon-mars:before {
+  content: "\f222";
+}
+.oc-icon-mercury:before,
+.icon-mercury:before {
+  content: "\f223";
+}
+.oc-icon-transgender:before,
+.icon-transgender:before {
+  content: "\f224";
+}
+.oc-icon-transgender-alt:before,
+.icon-transgender-alt:before {
+  content: "\f225";
+}
+.oc-icon-venus-double:before,
+.icon-venus-double:before {
+  content: "\f226";
+}
+.oc-icon-mars-double:before,
+.icon-mars-double:before {
+  content: "\f227";
+}
+.oc-icon-venus-mars:before,
+.icon-venus-mars:before {
+  content: "\f228";
+}
+.oc-icon-mars-stroke:before,
+.icon-mars-stroke:before {
+  content: "\f229";
+}
+.oc-icon-mars-stroke-v:before,
+.icon-mars-stroke-v:before {
+  content: "\f22a";
+}
+.oc-icon-mars-stroke-h:before,
+.icon-mars-stroke-h:before {
+  content: "\f22b";
+}
+.oc-icon-neuter:before,
+.icon-neuter:before {
+  content: "\f22c";
+}
+.oc-icon-facebook-official:before,
+.icon-facebook-official:before {
+  content: "\f230";
+}
+.oc-icon-pinterest-p:before,
+.icon-pinterest-p:before {
+  content: "\f231";
+}
+.oc-icon-whatsapp:before,
+.icon-whatsapp:before {
+  content: "\f232";
+}
+.oc-icon-server:before,
+.icon-server:before {
+  content: "\f233";
+}
+.oc-icon-user-plus:before,
+.icon-user-plus:before {
+  content: "\f234";
+}
+.oc-icon-user-times:before,
+.icon-user-times:before {
+  content: "\f235";
+}
+.oc-icon-hotel:before,
+.icon-hotel:before,
+.oc-icon-bed:before,
+.icon-bed:before {
+  content: "\f236";
+}
+.oc-icon-viacoin:before,
+.icon-viacoin:before {
+  content: "\f237";
+}
+.oc-icon-train:before,
+.icon-train:before {
+  content: "\f238";
+}
+.oc-icon-subway:before,
+.icon-subway:before {
+  content: "\f239";
+}
+.oc-icon-medium:before,
+.icon-medium:before {
+  content: "\f23a";
+}
+.close {
+  float: right;
+  font-size: 21px;
+  font-weight: bold;
+  line-height: 1;
+  color: #000000;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.2;
+  filter: alpha(opacity=20);
+}
+.close:hover,
+.close:focus {
+  color: #000000;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../font/fontawesome-webfont.eot?v=1.0.0');
+  src: url('../font/fontawesome-webfont.eot?#iefix&v=1.0.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=1.0.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=1.0.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=1.0.0') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[class^="icon-"],
+[class*=" icon-"] {
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+  display: inline;
+  width: auto;
+  height: auto;
+  line-height: normal;
+  vertical-align: baseline;
+  background-image: none;
+  background-position: 0% 0%;
+  background-repeat: repeat;
+  margin-top: 0;
+}
+[class^="icon-"]:before,
+[class*=" icon-"]:before {
+  text-decoration: inherit;
+  display: inline-block;
+  speak: none;
+}
+[class^="icon-"].pull-left,
+[class*=" icon-"].pull-left {
+  margin-right: .3em;
+}
+[class^="icon-"].pull-right,
+[class*=" icon-"].pull-right {
+  margin-left: .3em;
+}
+[class^="oc-icon-"]:before,
+[class*=" oc-icon-"]:before {
+  display: inline-block;
+  margin-right: 8px;
+  font-family: FontAwesome;
+  font-weight: normal;
+  font-style: normal;
+  text-decoration: inherit;
+  -webkit-font-smoothing: antialiased;
+  *margin-right: .3em;
+  vertical-align: baseline;
+}
+[class^="oc-icon-"].empty:before,
+[class*=" oc-icon-"].empty:before {
+  margin-right: 0;
+}
 @font-face {
   font-family: 'Open Sans';
   src: url('../font/OpenSans-Light-webfont.eot');
diff --git a/modules/system/assets/less/styles.less b/modules/system/assets/less/styles.less
index 97341be19..5bad93c20 100644
--- a/modules/system/assets/less/styles.less
+++ b/modules/system/assets/less/styles.less
@@ -1,5 +1,6 @@
 // Basic grid system
 @import "../ui/less/site.less";
+@import "../ui/less/icon.less";
 
 @fontOpenSans: 'Open Sans', Arial, sans-serif;
 @colorBase: #405261;
diff --git a/modules/system/assets/ui/docs/foundation.md b/modules/system/assets/ui/docs/foundation.md
new file mode 100644
index 000000000..facd1ac97
--- /dev/null
+++ b/modules/system/assets/ui/docs/foundation.md
@@ -0,0 +1,4 @@
+# Foundation
+
+Welcome to the October client-side administration framework, referred to as *October Storm*.
+
diff --git a/modules/system/assets/ui/docs/inspector.md b/modules/system/assets/ui/docs/inspector.md
new file mode 100644
index 000000000..4d923ee7e
--- /dev/null
+++ b/modules/system/assets/ui/docs/inspector.md
@@ -0,0 +1,87 @@
+# Inspector
+
+## Dependencies
+
+- Form
+- Popover
+
+# Example
+
+    <div class="layout-column full-height-strict justify-center align-center">
+        <div class="outer-form-container layout-item center relative" id="cmplist" style="width: 690px">
+
+            <div class="control-componentlist">
+                <ul data-control="toolbar">
+                    <li class="oc-icon-bullhorn">
+                        <span class="name">Blog archive</span>
+                        <span class="description">blogArchive</span>
+                    </li>
+                    <li class="oc-icon-shopping-cart">
+                        <span class="name">Shopping cart</span>
+                        <span class="description">cart</span>
+                    </li>
+                    <li class="oc-icon-plane">
+                        <span class="name">Flight schedule</span>
+                        <span class="description">flights</span>
+                    </li>
+                    <li class="oc-icon-download-alt">
+                        <span class="name">Download list</span>
+                        <span class="description">downloads</span>
+                    </li>
+
+                </ul>
+            </div>
+
+        </div>
+    </div>
+
+    <script type="text/template" id="inspectortpl">
+        <div class="popover-head">
+            <h3>Blog archive</h3>
+            <p>Provides access to old blog posts by category name or month.</p>
+            <button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button>
+        </div>
+        <table class="inspector-fields">
+            <tr>
+                <th>Alias</th>
+                <td class="text"><input type="text" value="blogArchive"/></td>
+            </tr>
+            <tr>
+                <th>Page param</th>
+                <td class="active text"><input type="text" value="page"/></td>
+            </tr>
+            <tr>
+                <th>Paginate</th>
+                <td>
+                    <div tabindex="0" class="checkbox custom-checkbox nolabel">
+                        <input id="check3" type="checkbox" name="check"/>
+                        <label for="check3">Paginate</label>
+                    </div>
+                </td>
+            </tr>
+            <tr>
+                <th>Posts / page</th>
+                <td class="text"><input type="text" value="20"/></td>
+            </tr>
+        </table>
+    </script>
+
+    <script>
+        $('#btn1').on('show.oc.popover', function(e, popover){
+            popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
+        })
+
+        $('.control-componentlist ul li').on('click', function(){
+            $(this).ocPopover({
+                content: $('#inspectortpl').html(),
+               // highlightModalTarget: true,
+               // modal: true,
+                width: 220,
+                placement: 'bottom',
+                container: '#cmplist',
+                containerClass: 'control-inspector'
+            })
+
+            return false
+        })
+    </script>
diff --git a/modules/system/assets/ui/docs/popover.md b/modules/system/assets/ui/docs/popover.md
new file mode 100644
index 000000000..35a363295
--- /dev/null
+++ b/modules/system/assets/ui/docs/popover.md
@@ -0,0 +1,64 @@
+# Popover
+
+Popover
+
+# Example
+
+    <div class="layout-column full-height-strict justify-center align-center">
+        <div class="outer-form-container layout-item center relative" id="btngroup" style="width: 560px">
+            <div class="btn-group">
+                <a href="#" id="btn1" class="btn btn-primary oc-icon-angle-left" data-control="popover" data-container="#btngroup" data-content="This is a popover" data-placement="left">
+                    Popover on left
+                </a>
+                <a href="#" id="btn2" class="btn btn-primary oc-icon-angle-down">
+                    Popover on bottom
+                </a>
+                <a href="#" id="btn3" class="btn btn-primary oc-icon-angle-up">
+                    Popover on top
+                </a>
+                <a href="#" id="btn4" class="btn btn-primary oc-icon-angle-right" data-control="popover" data-container="#btngroup" data-content="<p>Default popover content</p>" data-placement="right" data-width="200">
+                    Popover on right
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        $('#btn1').on('show.oc.popover', function(e, popover){
+            popover.options.content = '<div class="popover-body"><p>Some other content</p></div>'
+        })
+
+        $('#btn2').on('click', function(){
+            $(this).ocPopover({
+                content: $('#popovertemplate').html(),
+                modal: true,
+                highlightModalTarget: true,
+                placement: 'bottom',
+                container: '#btngroup'
+            })
+
+            return false
+        })
+
+        $('#btn3').on('click', function(){
+            $(this).ocPopover({
+                content: function(element, popover) {
+                    return '<p>This is a generated content<button type="button" class="close" data-dismiss="popover" aria-hidden="true">&times;</button></p>'
+                },
+                placement: 'top',
+                container: '#btngroup'
+            })
+
+            return false
+        })
+    </script>
+
+    <script type="text/template" id="popovertemplate">
+        <div class="popover-body">
+            <p>Modal popover</p>
+            <p>Modal popover</p>
+            <p>Modal popover</p>
+            <p>Modal popover</p>
+            <a class="btn btn-danger" href="#" onclick="$(this).trigger('close.oc.popover'); return false">Close</a>
+        </div>
+    </script>
diff --git a/modules/system/assets/ui/docs/popup.md b/modules/system/assets/ui/docs/popup.md
new file mode 100644
index 000000000..682a6b885
--- /dev/null
+++ b/modules/system/assets/ui/docs/popup.md
@@ -0,0 +1,45 @@
+# Popups
+
+Displays a modal popup
+
+# Example
+
+    <!-- Basic Popup -->
+    <a data-toggle="modal" href="#content-basic" class="btn btn-primary btn-lg">Launch basic content</a>
+
+    <div class="control-popup modal fade" id="content-basic" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <p>This is a very basic example of a popup...</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- Confirmation Popup -->
+    <a data-toggle="modal" href="#content-confirmation" class="btn btn-primary btn-lg">Launch Confirmation dialog</a>
+
+    <div class="control-popup modal fade" id="content-confirmation" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title">Are you sure you wanna do that?</h4>
+                </div>
+                <div class="modal-body">
+                    <p>This is your last chance. After this, there is no turning back.</p>
+                    <p>You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland, and I show you how deep the rabbit hole goes.</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Blue Pill</button>
+                    <button type="button" class="btn btn-primary" data-dismiss="modal">Red Pill</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Ajax Popup -->
+    <a data-control="popup" data-ajax="popup-content.htm" href="javascript:;" class="btn btn-primary btn-lg">Launch Ajax Form</a>
diff --git a/modules/system/assets/ui/js/dropdown.js b/modules/system/assets/ui/js/dropdown.js
index e38c96591..bd2b13629 100644
--- a/modules/system/assets/ui/js/dropdown.js
+++ b/modules/system/assets/ui/js/dropdown.js
@@ -1,252 +1,3 @@
-/* ========================================================================
- * Bootstrap: dropdown.js v3.1.1
- * http://getbootstrap.com/javascript/#dropdowns
- * ========================================================================
- * Copyright 2011-2014 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * ======================================================================== */
-
-
-+function ($) {
-    'use strict';
-
-    // DROPDOWN CLASS DEFINITION
-    // =========================
-
-    var backdrop = '.dropdown-backdrop'
-    var toggle   = '[data-toggle=dropdown]'
-    var Dropdown = function (element) {
-        $(element).on('click.bs.dropdown', this.toggle)
-    }
-
-    Dropdown.prototype.toggle = function (e) {
-        var $this = $(this)
-
-        if ($this.is('.disabled, :disabled')) return
-
-        var $parent  = getParent($this)
-        var isActive = $parent.hasClass('open')
-
-        clearMenus()
-
-        if (!isActive) {
-            if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-                // if mobile we use a backdrop because click events don't delegate
-                $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
-            }
-
-            var relatedTarget = { relatedTarget: this }
-            $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
-
-            if (e.isDefaultPrevented()) return
-
-            $parent
-                .toggleClass('open')
-                .trigger('shown.bs.dropdown', relatedTarget)
-
-            $this.focus()
-        }
-
-        return false
-    }
-
-    Dropdown.prototype.keydown = function (e) {
-        if (!/(38|40|27)/.test(e.keyCode)) return
-
-        var $this = $(this)
-
-        e.preventDefault()
-        e.stopPropagation()
-
-        if ($this.is('.disabled, :disabled')) return
-
-        var $parent  = getParent($this)
-        var isActive = $parent.hasClass('open')
-
-        if (!isActive || (isActive && e.keyCode == 27)) {
-            if (e.which == 27) $parent.find(toggle).focus()
-            return $this.click()
-        }
-
-        var desc = ' li:not(.divider):visible a'
-        var $items = $parent.find('[role=menu]' + desc + ', [role=listbox]' + desc)
-
-        if (!$items.length) return
-
-        var index = $items.index($items.filter(':focus'))
-
-        if (e.keyCode == 38 && index > 0)                 index--                        // up
-        if (e.keyCode == 40 && index < $items.length - 1) index++                        // down
-        if (!~index)                                      index = 0
-
-        $items.eq(index).focus()
-    }
-
-    function clearMenus(e) {
-        $(backdrop).remove()
-        $(toggle).each(function () {
-            var $parent = getParent($(this))
-            var relatedTarget = { relatedTarget: this }
-            if (!$parent.hasClass('open')) return
-            $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
-            if (e.isDefaultPrevented()) return
-            $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
-        })
-    }
-
-    function getParent($this) {
-        var selector = $this.attr('data-target')
-
-        if (!selector) {
-            selector = $this.attr('href')
-            selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
-        }
-
-        var $parent = selector && $(selector)
-
-        return $parent && $parent.length ? $parent : $this.parent()
-    }
-
-
-    // DROPDOWN PLUGIN DEFINITION
-    // ==========================
-
-    var old = $.fn.dropdown
-
-    $.fn.dropdown = function (option) {
-        return this.each(function () {
-            var $this = $(this)
-            var data  = $this.data('bs.dropdown')
-
-            if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
-            if (typeof option == 'string') data[option].call($this)
-        })
-    }
-
-    $.fn.dropdown.Constructor = Dropdown
-
-
-    // DROPDOWN NO CONFLICT
-    // ====================
-
-    $.fn.dropdown.noConflict = function () {
-        $.fn.dropdown = old
-        return this
-    }
-
-
-    // APPLY TO STANDARD DROPDOWN ELEMENTS
-    // ===================================
-
-    $(document)
-        .on('click.bs.dropdown.data-api', clearMenus)
-        .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
-        .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
-        .on('keydown.bs.dropdown.data-api', toggle + ', [role=menu], [role=listbox]', Dropdown.prototype.keydown)
-
-}(jQuery);
-
-
-
 /*
- * Dropdown menus. 
- *
- * This script customizes the Twitter Bootstrap drop-downs.
- *
- */
-+function ($) { "use strict";
-
-    $(document).on('shown.bs.dropdown', '.dropdown', function(){
-        $(document.body).addClass('dropdown-open')
-
-        var dropdown = $('.dropdown-menu', this),
-            dropdownContainer = $(this).data('dropdown-container')
-
-        if ($('.dropdown-container', dropdown).length == 0) {
-            var 
-                title = $('[data-toggle=dropdown]', this).text(),
-                titleAttr = dropdown.data('dropdown-title'),
-                timer = null;
-
-            if (titleAttr !== undefined)
-                title = titleAttr
-
-            $('li:first-child', dropdown).addClass('first-item')
-            dropdown.prepend($('<li/>').addClass('dropdown-title').text(title))
-
-            var 
-                container = $('<li/>').addClass('dropdown-container'),
-                ul = $('<ul/>')
-
-            container.prepend(ul)
-            ul.prepend(dropdown.children())
-            dropdown.prepend(container)
-
-            dropdown.on('touchstart', function(){
-                window.setTimeout(function(){
-                    dropdown.addClass('scroll')
-                }, 200)
-            })
-
-            dropdown.on('touchend', function(){
-                window.setTimeout(function(){
-                    dropdown.removeClass('scroll')
-                }, 200)
-            })
-
-            dropdown.on('click', 'a', function(){
-                if (dropdown.hasClass('scroll'))
-                    return false
-            })
-        }
-
-        if (dropdownContainer !== undefined && dropdownContainer == 'body') {
-            $(this).data('oc.dropdown', dropdown)
-            $(document.body).append(dropdown)
-
-            dropdown.css({
-                'visibility': 'hidden',
-                'left': 0,
-                'top' : 0,
-                'display': 'block'
-            })
-
-            var targetOffset = $(this).offset(),
-                targetHeight = $(this).height(),
-                targetWidth = $(this).width(),
-                position = {
-                    x: targetOffset.left,
-                    y: targetOffset.top + targetHeight
-                },
-                leftOffset = targetWidth < 30 ? -16 : 0,
-                documentHeight = $(document).height(),
-                dropdownHeight = dropdown.height()
-
-            if ((dropdownHeight + position.y) > $(document).height()) {
-                position.y = targetOffset.top - dropdownHeight - 12
-                dropdown.addClass('top')
-            } else
-                dropdown.removeClass('top')
-
-            dropdown.css({
-                'left': position.x + leftOffset,
-                'top': position.y,
-                'visibility': 'visible'
-            })
-        }
-
-        if ($('.dropdown-overlay', document.body).length == 0)
-            $(document.body).prepend($('<div/>').addClass('dropdown-overlay'));
-    })
-
-    $(document).on('hidden.bs.dropdown', '.dropdown', function(){
-        var dropdown = $(this).data('oc.dropdown')
-        if (dropdown !== undefined) {
-            dropdown.css('display', 'none')
-            $(this).append(dropdown)
-        }
-
-        $(document.body).removeClass('dropdown-open');
-    })
-
-}(window.jQuery);
\ No newline at end of file
+=require ../vendor/bootstrap/js/dropdown.js
+*/
diff --git a/modules/system/assets/ui/less/button.less b/modules/system/assets/ui/less/button.less
index af12a7e58..45ff10a17 100644
--- a/modules/system/assets/ui/less/button.less
+++ b/modules/system/assets/ui/less/button.less
@@ -12,3 +12,141 @@
 @import "button.variables";
 @import "button.base";
 @import "button.groups";
+
+@color-button-disabled-bg:                   #dbdbdb;
+@color-button-disabled-text:                 #aaaaaa;
+@color-icon-btn-default:                     #bcc3c7;
+@color-btn-danger:                           #c63e26;
+
+//
+// Buttons
+// --------------------------------------------------
+
+.btn {
+    font-size: 13px;
+    border: none;
+    text-align: left;
+    outline: none !important;
+
+    &[class^="oc-icon-"],
+    &[class*=" oc-icon-"] {
+        &:before {
+            font-size: 14px;
+            line-height: 14px;
+            position: relative;
+        }
+    }
+
+    &[disabled] {
+        background-color: @color-button-disabled-bg;
+        color: @color-button-disabled-text;
+    }
+
+    &.active,
+    &:active {
+       .box-shadow(none);
+    }
+}
+
+.btn-default.on {
+    background-color: #95a5a6;
+    color: #f9f9f9;
+}
+
+.btn-group {
+    .btn{
+        border-right: 1px solid rgba(0,0,0,0.09);
+        margin-left: 0!important;
+
+        &:last-child, &.last {
+            border-right: none;
+        }
+
+        &.last {
+            .border-right-radius(@border-radius-base)!important;
+        }
+    }
+
+    > .dropdown {
+        float: left;
+
+        &:not(:last-child, .last) > .btn {
+            border-right: 1px solid rgba(0,0,0,0.09);
+            .border-right-radius(0)!important;
+        }
+
+        &:not(:first-child) > .btn {
+            .border-left-radius(0)!important;
+        }
+
+        &.last {
+            .btn {
+                border-right: none;
+            }
+        }
+    }
+}
+
+.btn, .btn-group {
+    &.offset-right {
+        margin-right: 10px;
+    }
+}
+
+.btn-icon {
+    display: inline-block;
+    height: 36px;
+    font-size: 21px;
+    background: transparent;
+    border: none;
+    outline: none;
+
+    &:before {
+        display: block;
+        color: @color-icon-btn-default;
+    }
+
+    &:hover:before {
+        color: @color-link;
+    }
+
+    &.danger:hover:before {
+        color: @color-btn-danger;
+    }
+
+    &.pull-right:before {
+        margin-right: 0;
+    }
+
+    &.margin-left {
+        margin-left: 5px;
+    }
+
+    &.small {
+        font-size: 17px;
+        height: 17px;
+        line-height: 15px;
+    }
+
+    &.larger {
+        font-size: 21px;
+        height: 21px;
+        line-height: 17px;
+    }
+}
+
+.btn-text {
+    font-size: 13px;
+    padding: 9px 0;
+    vertical-align: middle;
+    display: inline-block;
+
+    a {
+        color: @btn-default-color;
+
+        &:hover {
+            color: @color-link;
+            text-decoration: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/modules/system/assets/ui/less/global.variables.less b/modules/system/assets/ui/less/global.variables.less
index 574b23d70..063f56923 100644
--- a/modules/system/assets/ui/less/global.variables.less
+++ b/modules/system/assets/ui/less/global.variables.less
@@ -108,6 +108,9 @@
 //
 // Colors
 // --------------------------------------------------
+@color-text-title:                           #405261;
+@color-text-description:                     #8f8f8f;
+
 @color-focus:                                @brand-primary;
 @color-border:                               #cccccc;
 @color-border-light:                         #e1e1e1;
diff --git a/modules/system/assets/ui/less/list.base.less b/modules/system/assets/ui/less/list.base.less
index c41989c04..79b4fce09 100644
--- a/modules/system/assets/ui/less/list.base.less
+++ b/modules/system/assets/ui/less/list.base.less
@@ -4,74 +4,76 @@
 
 
 table {
-  max-width: 100%;
-  background-color: @table-bg;
+    max-width: 100%;
+    background-color: @table-bg;
 }
 th {
-  text-align: left;
+    text-align: left;
 }
 
 
 // Baseline styles
 
 .table {
-  width: 100%;
-  margin-bottom: @line-height-computed;
-  // Cells
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        padding: @table-cell-padding;
-        line-height: @line-height-base;
-        vertical-align: top;
-        border-top: 1px solid @table-border-color;
-      }
-    }
-  }
-  // Bottom align for column headings
-  > thead > tr > th {
-    vertical-align: bottom;
-    border-bottom: 2px solid @table-border-color;
-  }
-  // Remove top border from thead by default
-  > caption + thead,
-  > colgroup + thead,
-  > thead:first-child {
-    > tr:first-child {
-      > th,
-      > td {
-        border-top: 0;
-      }
-    }
-  }
-  // Account for multiple tbody instances
-  > tbody + tbody {
-    border-top: 2px solid @table-border-color;
-  }
+    width: 100%;
+    margin-bottom: @line-height-computed;
+    border-collapse: separate;
 
-  // Nesting
-  .table {
-    background-color: @body-bg;
-  }
+    // Cells
+    > thead,
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                padding: @table-cell-padding;
+                line-height: @line-height-base;
+                vertical-align: top;
+                border-top: 1px solid @table-border-color;
+            }
+        }
+    }
+    // Bottom align for column headings
+    > thead > tr > th {
+        vertical-align: bottom;
+        border-bottom: 2px solid @table-border-color;
+    }
+    // Remove top border from thead by default
+    > caption + thead,
+    > colgroup + thead,
+    > thead:first-child {
+        > tr:first-child {
+            > th,
+            > td {
+                border-top: 0;
+            }
+        }
+    }
+    // Account for multiple tbody instances
+    > tbody + tbody {
+        border-top: 2px solid @table-border-color;
+    }
+
+    // Nesting
+    .table {
+        background-color: @body-bg;
+    }
 }
 
 
 // Condensed table w/ half padding
 
 .table-condensed {
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        padding: @table-condensed-cell-padding;
-      }
+    > thead,
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                padding: @table-condensed-cell-padding;
+            }
+        }
     }
-  }
 }
 
 
@@ -80,23 +82,23 @@ th {
 // Add borders all around the table and between all the columns.
 
 .table-bordered {
-  border: 1px solid @table-border-color;
-  > thead,
-  > tbody,
-  > tfoot {
-    > tr {
-      > th,
-      > td {
-        border: 1px solid @table-border-color;
-      }
+    border: 1px solid @table-border-color;
+    > thead,
+    > tbody,
+    > tfoot {
+        > tr {
+            > th,
+            > td {
+                border: 1px solid @table-border-color;
+            }
+        }
     }
-  }
-  > thead > tr {
-    > th,
-    > td {
-      border-bottom-width: 2px;
+    > thead > tr {
+        > th,
+        > td {
+            border-bottom-width: 2px;
+        }
     }
-  }
 }
 
 
@@ -105,12 +107,12 @@ th {
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
 .table-striped {
-  > tbody > tr:nth-child(odd) {
-    > td,
-    > th {
-      background-color: @table-bg-accent;
+    > tbody > tr:nth-child(odd) {
+        > td,
+        > th {
+            background-color: @table-bg-accent;
+        }
     }
-  }
 }
 
 
@@ -119,12 +121,12 @@ th {
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  > tbody > tr:hover {
-    > td,
-    > th {
-      background-color: @table-bg-hover;
+    > tbody > tr:hover {
+        > td,
+        > th {
+            background-color: @table-bg-hover;
+        }
     }
-  }
 }
 
 
@@ -133,19 +135,19 @@ th {
 // Reset default table behavior
 
 table col[class*="col-"] {
-  position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
-  float: none;
-  display: table-column;
+    position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
+    float: none;
+    display: table-column;
 }
 table {
-  td,
-  th {
-    &[class*="col-"] {
-      position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
-      float: none;
-      display: table-cell;
+    td,
+    th {
+        &[class*="col-"] {
+            position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623)
+            float: none;
+            display: table-cell;
+        }
     }
-  }
 }
 
 
@@ -169,65 +171,65 @@ table {
 // will display normally.
 
 @media (max-width: @screen-xs-max) {
-  .table-responsive {
-    width: 100%;
-    margin-bottom: (@line-height-computed * 0.75);
-    overflow-y: hidden;
-    overflow-x: scroll;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid @table-border-color;
-    -webkit-overflow-scrolling: touch;
+    .table-responsive {
+        width: 100%;
+        margin-bottom: (@line-height-computed * 0.75);
+        overflow-y: hidden;
+        overflow-x: scroll;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        border: 1px solid @table-border-color;
+        -webkit-overflow-scrolling: touch;
 
-    // Tighten up spacing
-    > .table {
-      margin-bottom: 0;
+        // Tighten up spacing
+        > .table {
+            margin-bottom: 0;
+
+            // Ensure the content doesn't wrap
+            > thead,
+            > tbody,
+            > tfoot {
+                > tr {
+                    > th,
+                    > td {
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+
+        // Special overrides for the bordered tables
+        > .table-bordered {
+            border: 0;
+
+            // Nuke the appropriate borders so that the parent can handle them
+            > thead,
+            > tbody,
+            > tfoot {
+                > tr {
+                    > th:first-child,
+                    > td:first-child {
+                        border-left: 0;
+                    }
+                    > th:last-child,
+                    > td:last-child {
+                        border-right: 0;
+                    }
+                }
+            }
+
+            // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
+            // chances are there will be only one `tr` in a `thead` and that would
+            // remove the border altogether.
+            > tbody,
+            > tfoot {
+                > tr:last-child {
+                    > th,
+                    > td {
+                        border-bottom: 0;
+                    }
+                }
+            }
 
-      // Ensure the content doesn't wrap
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th,
-          > td {
-            white-space: nowrap;
-          }
         }
-      }
     }
-
-    // Special overrides for the bordered tables
-    > .table-bordered {
-      border: 0;
-
-      // Nuke the appropriate borders so that the parent can handle them
-      > thead,
-      > tbody,
-      > tfoot {
-        > tr {
-          > th:first-child,
-          > td:first-child {
-            border-left: 0;
-          }
-          > th:last-child,
-          > td:last-child {
-            border-right: 0;
-          }
-        }
-      }
-
-      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
-      // chances are there will be only one `tr` in a `thead` and that would
-      // remove the border altogether.
-      > tbody,
-      > tfoot {
-        > tr:last-child {
-          > th,
-          > td {
-            border-bottom: 0;
-          }
-        }
-      }
-
-    }
-  }
 }
diff --git a/modules/system/assets/ui/less/site.grid.less b/modules/system/assets/ui/less/site.grid.less
index b6011c47f..603144596 100644
--- a/modules/system/assets/ui/less/site.grid.less
+++ b/modules/system/assets/ui/less/site.grid.less
@@ -7,17 +7,17 @@
 // Set the container width, and override it for fixed navbars in media queries.
 
 .container {
-  .container-fixed();
+    .container-fixed();
 
-  @media (min-width: @screen-sm-min) {
-    width: @container-sm;
-  }
-  @media (min-width: @screen-md-min) {
-    width: @container-md;
-  }
-  @media (min-width: @screen-lg-min) {
-    width: @container-lg;
-  }
+    @media (min-width: @screen-sm-min) {
+        width: @container-sm;
+    }
+    @media (min-width: @screen-md-min) {
+        width: @container-md;
+    }
+    @media (min-width: @screen-lg-min) {
+        width: @container-lg;
+    }
 }
 
 
@@ -27,7 +27,7 @@
 // width for fluid, full width layouts.
 
 .container-fluid {
-  .container-fixed();
+    .container-fixed();
 }
 
 
@@ -36,9 +36,17 @@
 // Rows contain and clear the floats of your columns.
 
 .row {
-  .make-row();
+    .make-row();
 }
 
+// Compact rows
+
+.row-compact {
+    [class*="col-"] {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+}
 
 // Columns
 //
@@ -61,7 +69,7 @@
 // to tablets.
 
 @media (min-width: @screen-sm-min) {
-  .make-grid(sm);
+    .make-grid(sm);
 }
 
 
@@ -70,7 +78,7 @@
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
 @media (min-width: @screen-md-min) {
-  .make-grid(md);
+    .make-grid(md);
 }
 
 
@@ -79,5 +87,5 @@
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
 @media (min-width: @screen-lg-min) {
-  .make-grid(lg);
+    .make-grid(lg);
 }
diff --git a/modules/system/assets/ui/less/site.mixins.less b/modules/system/assets/ui/less/site.mixins.less
index 5df97b95f..37086e1b7 100644
--- a/modules/system/assets/ui/less/site.mixins.less
+++ b/modules/system/assets/ui/less/site.mixins.less
@@ -60,7 +60,6 @@
     }
 }
 
-
 // Generate the small columns
 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
     position: relative;
@@ -89,7 +88,6 @@
     }
 }
 
-
 // Generate the medium columns
 .make-md-column(@columns; @gutter: @grid-gutter-width) {
     position: relative;
@@ -118,7 +116,6 @@
     }
 }
 
-
 // Generate the large columns
 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
     position: relative;
@@ -147,7 +144,6 @@
     }
 }
 
-
 // Framework grid generation
 //
 // Used only by Bootstrap to generate the correct number of grid classes given