diff --git a/less/account.less b/less/account.less
new file mode 100644
index 0000000..196ecec
--- /dev/null
+++ b/less/account.less
@@ -0,0 +1,136 @@
+.account {
+    .profile {
+        .user-info {
+            text-align: center;
+            margin-top: 10px;
+            
+            .user-avatar {
+                .user-avatar(120px);
+            }
+            
+            .user-icon {
+                .user-icon(120px, 6em);
+            }
+            
+            .user-avatar, .user-icon {
+                box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
+            }
+            
+            [component="user/status"] {
+                position: relative;
+                left: 60px;
+                top: -125px;
+                display: block;
+                font-size: 18px;
+            }
+            
+            .fullname {
+                margin-top: 10px;
+            }
+        }
+    }
+    
+    .account-stats {
+        text-align: center;
+        padding: 20px 0;
+        
+        .stat {
+            display: inline-block;
+            min-width: 100px;
+            
+            .human-readable-number {
+                font-size: 24px;
+                font-weight: 600;
+            }
+            
+            .stat-label {
+                color: #777;
+            }
+        }
+    }
+    
+    .posts-list {
+        .posts-list-item {
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #eaeaea;
+            
+            .post-body {
+                .topic-title {
+                    font-weight: 600;
+                    font-size: 18px;
+                    color: #333;
+                }
+                
+                .topic-category>a, .timeago {
+                    color: #777;
+                    font-size: 85%;
+                }
+            }
+        }
+    }
+    
+    .user-setting {
+        margin-bottom: 20px;
+        padding: 5px 0 20px;
+        border-bottom: 1px solid #eaeaea;
+    }
+    
+    .section-title {
+        margin-bottom: 30px;
+        margin-top: 0;
+    }
+    
+    .account-picture-block {
+        
+        .user-avatar {
+            .user-avatar(120px);
+            margin: 5px 0 20px;
+        }
+        
+        .user-icon {
+            .user-icon(120px, 5em);
+            margin: 5px 0 20px;
+        }
+    }
+    
+    .account-menu {
+        margin-bottom: 10px;
+    }
+    
+    .show-success {
+		.form-control {
+			border-color: #5cb85c;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.form-feedback {
+			color: #5cb85c;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
+	
+	.show-danger {
+		.form-control {
+			border-color: #d9534f;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.form-feedback {
+			color: #d9534f;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
+}
\ No newline at end of file
diff --git a/less/alerts.less b/less/alerts.less
new file mode 100644
index 0000000..098f96a
--- /dev/null
+++ b/less/alerts.less
@@ -0,0 +1,43 @@
+.alert-window {
+	position: fixed;
+	width: 300px;
+	z-index: 10002;
+
+	right: 20px;
+	bottom: 0;
+
+	.alert {
+		background-color: white;
+		border: 0;
+		border-left: 5px solid !important;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.25);
+
+		strong {
+			text-transform: uppercase;
+		}
+
+		p {
+			padding: 10px 0 0;
+		}
+
+		&.alert-info {
+			color: @brand-info;
+			border-color: @brand-info;
+		}
+
+		&.alert-warning {
+			color: #FFA000;
+			border-color: #FFA000;
+		}
+
+		&.alert-success {
+			color: @brand-success;
+			border-color: @brand-success;
+		}
+
+		&.alert-danger {
+			color: @brand-danger;
+			border-color: @brand-danger;
+		}
+	}
+}
\ No newline at end of file
diff --git a/less/bootstrap/.csscomb.json b/less/bootstrap/.csscomb.json
new file mode 100644
index 0000000..40695a4
--- /dev/null
+++ b/less/bootstrap/.csscomb.json
@@ -0,0 +1,304 @@
+{
+  "always-semicolon": true,
+  "block-indent": 2,
+  "color-case": "lower",
+  "color-shorthand": true,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": false,
+  "remove-empty-rulesets": true,
+  "space-after-colon": 1,
+  "space-after-combinator": 1,
+  "space-before-selector-delimiter": 0,
+  "space-between-declarations": "\n",
+  "space-after-opening-brace": "\n",
+  "space-before-closing-brace": "\n",
+  "space-before-colon": 0,
+  "space-before-combinator": 1,
+  "space-before-opening-brace": 1,
+  "strip-spaces": true,
+  "unitless-zero": true,
+  "vendor-prefix-align": true,
+  "sort-order": [
+    [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "z-index",
+      "display",
+      "float",
+      "width",
+      "min-width",
+      "max-width",
+      "height",
+      "min-height",
+      "max-height",
+      "-webkit-box-sizing",
+      "-moz-box-sizing",
+      "box-sizing",
+      "-webkit-appearance",
+      "padding",
+      "padding-top",
+      "padding-right",
+      "padding-bottom",
+      "padding-left",
+      "margin",
+      "margin-top",
+      "margin-right",
+      "margin-bottom",
+      "margin-left",
+      "overflow",
+      "overflow-x",
+      "overflow-y",
+      "-webkit-overflow-scrolling",
+      "-ms-overflow-x",
+      "-ms-overflow-y",
+      "-ms-overflow-style",
+      "clip",
+      "clear",
+      "font",
+      "font-family",
+      "font-size",
+      "font-style",
+      "font-weight",
+      "font-variant",
+      "font-size-adjust",
+      "font-stretch",
+      "font-effect",
+      "font-emphasize",
+      "font-emphasize-position",
+      "font-emphasize-style",
+      "font-smooth",
+      "-webkit-hyphens",
+      "-moz-hyphens",
+      "hyphens",
+      "line-height",
+      "color",
+      "text-align",
+      "-webkit-text-align-last",
+      "-moz-text-align-last",
+      "-ms-text-align-last",
+      "text-align-last",
+      "text-emphasis",
+      "text-emphasis-color",
+      "text-emphasis-style",
+      "text-emphasis-position",
+      "text-decoration",
+      "text-indent",
+      "text-justify",
+      "text-outline",
+      "-ms-text-overflow",
+      "text-overflow",
+      "text-overflow-ellipsis",
+      "text-overflow-mode",
+      "text-shadow",
+      "text-transform",
+      "text-wrap",
+      "-webkit-text-size-adjust",
+      "-ms-text-size-adjust",
+      "letter-spacing",
+      "-ms-word-break",
+      "word-break",
+      "word-spacing",
+      "-ms-word-wrap",
+      "word-wrap",
+      "-moz-tab-size",
+      "-o-tab-size",
+      "tab-size",
+      "white-space",
+      "vertical-align",
+      "list-style",
+      "list-style-position",
+      "list-style-type",
+      "list-style-image",
+      "pointer-events",
+      "-ms-touch-action",
+      "touch-action",
+      "cursor",
+      "visibility",
+      "zoom",
+      "flex-direction",
+      "flex-order",
+      "flex-pack",
+      "flex-align",
+      "table-layout",
+      "empty-cells",
+      "caption-side",
+      "border-spacing",
+      "border-collapse",
+      "content",
+      "quotes",
+      "counter-reset",
+      "counter-increment",
+      "resize",
+      "-webkit-user-select",
+      "-moz-user-select",
+      "-ms-user-select",
+      "-o-user-select",
+      "user-select",
+      "nav-index",
+      "nav-up",
+      "nav-right",
+      "nav-down",
+      "nav-left",
+      "background",
+      "background-color",
+      "background-image",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.gradient",
+      "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+      "filter",
+      "background-repeat",
+      "background-attachment",
+      "background-position",
+      "background-position-x",
+      "background-position-y",
+      "-webkit-background-clip",
+      "-moz-background-clip",
+      "background-clip",
+      "background-origin",
+      "-webkit-background-size",
+      "-moz-background-size",
+      "-o-background-size",
+      "background-size",
+      "border",
+      "border-color",
+      "border-style",
+      "border-width",
+      "border-top",
+      "border-top-color",
+      "border-top-style",
+      "border-top-width",
+      "border-right",
+      "border-right-color",
+      "border-right-style",
+      "border-right-width",
+      "border-bottom",
+      "border-bottom-color",
+      "border-bottom-style",
+      "border-bottom-width",
+      "border-left",
+      "border-left-color",
+      "border-left-style",
+      "border-left-width",
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "-webkit-border-image",
+      "-moz-border-image",
+      "-o-border-image",
+      "border-image",
+      "-webkit-border-image-source",
+      "-moz-border-image-source",
+      "-o-border-image-source",
+      "border-image-source",
+      "-webkit-border-image-slice",
+      "-moz-border-image-slice",
+      "-o-border-image-slice",
+      "border-image-slice",
+      "-webkit-border-image-width",
+      "-moz-border-image-width",
+      "-o-border-image-width",
+      "border-image-width",
+      "-webkit-border-image-outset",
+      "-moz-border-image-outset",
+      "-o-border-image-outset",
+      "border-image-outset",
+      "-webkit-border-image-repeat",
+      "-moz-border-image-repeat",
+      "-o-border-image-repeat",
+      "border-image-repeat",
+      "outline",
+      "outline-width",
+      "outline-style",
+      "outline-color",
+      "outline-offset",
+      "-webkit-box-shadow",
+      "-moz-box-shadow",
+      "box-shadow",
+      "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+      "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+      "opacity",
+      "-ms-interpolation-mode",
+      "-webkit-transition",
+      "-moz-transition",
+      "-ms-transition",
+      "-o-transition",
+      "transition",
+      "-webkit-transition-delay",
+      "-moz-transition-delay",
+      "-ms-transition-delay",
+      "-o-transition-delay",
+      "transition-delay",
+      "-webkit-transition-timing-function",
+      "-moz-transition-timing-function",
+      "-ms-transition-timing-function",
+      "-o-transition-timing-function",
+      "transition-timing-function",
+      "-webkit-transition-duration",
+      "-moz-transition-duration",
+      "-ms-transition-duration",
+      "-o-transition-duration",
+      "transition-duration",
+      "-webkit-transition-property",
+      "-moz-transition-property",
+      "-ms-transition-property",
+      "-o-transition-property",
+      "transition-property",
+      "-webkit-transform",
+      "-moz-transform",
+      "-ms-transform",
+      "-o-transform",
+      "transform",
+      "-webkit-transform-origin",
+      "-moz-transform-origin",
+      "-ms-transform-origin",
+      "-o-transform-origin",
+      "transform-origin",
+      "-webkit-animation",
+      "-moz-animation",
+      "-ms-animation",
+      "-o-animation",
+      "animation",
+      "-webkit-animation-name",
+      "-moz-animation-name",
+      "-ms-animation-name",
+      "-o-animation-name",
+      "animation-name",
+      "-webkit-animation-duration",
+      "-moz-animation-duration",
+      "-ms-animation-duration",
+      "-o-animation-duration",
+      "animation-duration",
+      "-webkit-animation-play-state",
+      "-moz-animation-play-state",
+      "-ms-animation-play-state",
+      "-o-animation-play-state",
+      "animation-play-state",
+      "-webkit-animation-timing-function",
+      "-moz-animation-timing-function",
+      "-ms-animation-timing-function",
+      "-o-animation-timing-function",
+      "animation-timing-function",
+      "-webkit-animation-delay",
+      "-moz-animation-delay",
+      "-ms-animation-delay",
+      "-o-animation-delay",
+      "animation-delay",
+      "-webkit-animation-iteration-count",
+      "-moz-animation-iteration-count",
+      "-ms-animation-iteration-count",
+      "-o-animation-iteration-count",
+      "animation-iteration-count",
+      "-webkit-animation-direction",
+      "-moz-animation-direction",
+      "-ms-animation-direction",
+      "-o-animation-direction",
+      "animation-direction"
+    ]
+  ]
+}
diff --git a/less/bootstrap/.csslintrc b/less/bootstrap/.csslintrc
new file mode 100644
index 0000000..005b862
--- /dev/null
+++ b/less/bootstrap/.csslintrc
@@ -0,0 +1,19 @@
+{
+  "adjoining-classes": false,
+  "box-sizing": false,
+  "box-model": false,
+  "compatible-vendor-prefixes": false,
+  "floats": false,
+  "font-sizes": false,
+  "gradients": false,
+  "important": false,
+  "known-properties": false,
+  "outline-none": false,
+  "qualified-headings": false,
+  "regex-selectors": false,
+  "shorthand": false,
+  "text-indent": false,
+  "unique-headings": false,
+  "universal-selector": false,
+  "unqualified-attributes": false
+}
diff --git a/less/bootstrap/alerts.less b/less/bootstrap/alerts.less
new file mode 100644
index 0000000..c4199db
--- /dev/null
+++ b/less/bootstrap/alerts.less
@@ -0,0 +1,73 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: @alert-padding;
+  margin-bottom: @line-height-computed;
+  border: 1px solid transparent;
+  border-radius: @alert-border-radius;
+
+  // Headings for larger alerts
+  h4 {
+    margin-top: 0;
+    // Specified for the h4 to prevent conflicts of changing @headings-color
+    color: inherit;
+  }
+
+  // Provide class for links that match alerts
+  .alert-link {
+    font-weight: @alert-link-font-weight;
+  }
+
+  // Improve alignment and spacing of inner content
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+
+  > p + p {
+    margin-top: 5px;
+  }
+}
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
+.alert-dismissible {
+  padding-right: (@alert-padding + 20);
+
+  // Adjust close link position
+  .close {
+    position: relative;
+    top: -2px;
+    right: -21px;
+    color: inherit;
+  }
+}
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+.alert-success {
+  .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
+}
+
+.alert-info {
+  .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
+}
+
+.alert-warning {
+  .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
+}
+
+.alert-danger {
+  .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
+}
diff --git a/less/bootstrap/badges.less b/less/bootstrap/badges.less
new file mode 100644
index 0000000..6ee16dc
--- /dev/null
+++ b/less/bootstrap/badges.less
@@ -0,0 +1,66 @@
+//
+// Badges
+// --------------------------------------------------
+
+
+// Base class
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: @font-size-small;
+  font-weight: @badge-font-weight;
+  color: @badge-color;
+  line-height: @badge-line-height;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: @badge-bg;
+  border-radius: @badge-border-radius;
+
+  // Empty badges collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn-xs &,
+  .btn-group-xs > .btn & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // Hover state, but only for links
+  a& {
+    &:hover,
+    &:focus {
+      color: @badge-link-hover-color;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  // Account for badges in navs
+  .list-group-item.active > &,
+  .nav-pills > .active > a > & {
+    color: @badge-active-color;
+    background-color: @badge-active-bg;
+  }
+
+  .list-group-item > & {
+    float: right;
+  }
+
+  .list-group-item > & + & {
+    margin-right: 5px;
+  }
+
+  .nav-pills > li > a > & {
+    margin-left: 3px;
+  }
+}
diff --git a/less/bootstrap/bootstrap.less b/less/bootstrap/bootstrap.less
new file mode 100644
index 0000000..1662f94
--- /dev/null
+++ b/less/bootstrap/bootstrap.less
@@ -0,0 +1,56 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "variables.less";
+@import "mixins.less";
+
+// Reset and dependencies
+@import "normalize.less";
+@import "print.less";
+//@import "glyphicons.less";
+
+// Core CSS
+@import "scaffolding.less";
+@import "type.less";
+@import "code.less";
+@import "grid.less";
+@import "tables.less";
+@import "forms.less";
+@import "buttons.less";
+
+// Components
+@import "component-animations.less";
+@import "dropdowns.less";
+@import "button-groups.less";
+@import "input-groups.less";
+@import "navs.less";
+@import "navbar.less";
+@import "breadcrumbs.less";
+@import "pagination.less";
+//@import "pager.less";
+@import "labels.less";
+//@import "badges.less";
+//@import "jumbotron.less";
+@import "thumbnails.less";
+@import "alerts.less";
+@import "progress-bars.less";
+@import "media.less";
+@import "list-group.less";
+@import "panels.less";
+@import "responsive-embed.less";
+//@import "wells.less";
+@import "close.less";
+
+// Components w/ JavaScript
+@import "modals.less";
+@import "tooltip.less";
+@import "popovers.less";
+//@import "carousel.less";
+
+// Utility classes
+@import "utilities.less";
+@import "responsive-utilities.less";
diff --git a/less/bootstrap/breadcrumbs.less b/less/bootstrap/breadcrumbs.less
new file mode 100644
index 0000000..cb01d50
--- /dev/null
+++ b/less/bootstrap/breadcrumbs.less
@@ -0,0 +1,26 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
+  margin-bottom: @line-height-computed;
+  list-style: none;
+  background-color: @breadcrumb-bg;
+  border-radius: @border-radius-base;
+
+  > li {
+    display: inline-block;
+
+    + li:before {
+      content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
+      padding: 0 5px;
+      color: @breadcrumb-color;
+    }
+  }
+
+  > .active {
+    color: @breadcrumb-active-color;
+  }
+}
diff --git a/less/bootstrap/button-groups.less b/less/bootstrap/button-groups.less
new file mode 100644
index 0000000..16db0c6
--- /dev/null
+++ b/less/bootstrap/button-groups.less
@@ -0,0 +1,244 @@
+//
+// Button groups
+// --------------------------------------------------
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // match .btn alignment given font-size hack above
+  > .btn {
+    position: relative;
+    float: left;
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+  }
+}
+
+// Prevent double borders when buttons are next to each other
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.btn-toolbar {
+  margin-left: -5px; // Offset the first child's margin
+  &:extend(.clearfix all);
+
+  .btn,
+  .btn-group,
+  .input-group {
+    float: left;
+  }
+  > .btn,
+  > .btn-group,
+  > .input-group {
+    margin-left: 5px;
+  }
+}
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-left: 0;
+  &:not(:last-child):not(.dropdown-toggle) {
+    .border-right-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  .border-left-radius(0);
+}
+
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
+}
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-right-radius(0);
+  }
+}
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  .border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { &:extend(.btn-xs); }
+.btn-group-sm > .btn { &:extend(.btn-sm); }
+.btn-group-lg > .btn { &:extend(.btn-lg); }
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.btn-group > .btn-lg + .dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group.open .dropdown-toggle {
+  .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    .box-shadow(none);
+  }
+}
+
+
+// Reposition the caret
+.btn .caret {
+  margin-left: 0;
+}
+// Carets in other button sizes
+.btn-lg .caret {
+  border-width: @caret-width-large @caret-width-large 0;
+  border-bottom-width: 0;
+}
+// Upside down carets for .dropup
+.dropup .btn-lg .caret {
+  border-width: 0 @caret-width-large @caret-width-large;
+}
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+  > .btn,
+  > .btn-group,
+  > .btn-group > .btn {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    &:extend(.clearfix all);
+    > .btn {
+      float: none;
+    }
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -1px;
+    margin-left: 0;
+  }
+}
+
+.btn-group-vertical > .btn {
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  &:first-child:not(:last-child) {
+    .border-top-radius(@btn-border-radius-base);
+    .border-bottom-radius(0);
+  }
+  &:last-child:not(:first-child) {
+    .border-top-radius(0);
+    .border-bottom-radius(@btn-border-radius-base);
+  }
+}
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-bottom-radius(0);
+  }
+}
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  .border-top-radius(0);
+}
+
+
+// Justified button groups
+// ----------------------
+
+.btn-group-justified {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  > .btn,
+  > .btn-group {
+    float: none;
+    display: table-cell;
+    width: 1%;
+  }
+  > .btn-group .btn {
+    width: 100%;
+  }
+
+  > .btn-group .dropdown-menu {
+    left: auto;
+  }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+[data-toggle="buttons"] {
+  > .btn,
+  > .btn-group > .btn {
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0,0,0,0);
+      pointer-events: none;
+    }
+  }
+}
diff --git a/less/bootstrap/buttons.less b/less/bootstrap/buttons.less
new file mode 100644
index 0000000..9cbb8f4
--- /dev/null
+++ b/less/bootstrap/buttons.less
@@ -0,0 +1,166 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0; // For input.btn
+  font-weight: @btn-font-weight;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid transparent;
+  white-space: nowrap;
+  .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);
+  .user-select(none);
+
+  &,
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      .tab-focus();
+    }
+  }
+
+  &:hover,
+  &:focus,
+  &.focus {
+    color: @btn-default-color;
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    outline: 0;
+    background-image: none;
+    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+    .opacity(.65);
+    .box-shadow(none);
+  }
+
+  a& {
+    &.disabled,
+    fieldset[disabled] & {
+      pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+    }
+  }
+}
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+.btn-default {
+  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
+}
+.btn-primary {
+  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
+}
+// Success appears as green
+.btn-success {
+  .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
+}
+// Info appears as blue-green
+.btn-info {
+  .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
+}
+// Warning appears as orange
+.btn-warning {
+  .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
+}
+// Danger and error appear as red
+.btn-danger {
+  .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
+}
+
+
+// Link buttons
+// -------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  color: @link-color;
+  font-weight: normal;
+  border-radius: 0;
+
+  &,
+  &:active,
+  &.active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+    .box-shadow(none);
+  }
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    border-color: transparent;
+  }
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+    text-decoration: @link-hover-decoration;
+    background-color: transparent;
+  }
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus {
+      color: @btn-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+.btn-lg {
+  // line-height: ensure even-numbered height of button next to large input
+  .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large);
+}
+.btn-sm {
+  // line-height: ensure proper height of button next to small input
+  .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+}
+.btn-xs {
+  .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small);
+}
+
+
+// Block button
+// --------------------------------------------------
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
diff --git a/less/bootstrap/carousel.less b/less/bootstrap/carousel.less
new file mode 100644
index 0000000..252011e
--- /dev/null
+++ b/less/bootstrap/carousel.less
@@ -0,0 +1,270 @@
+//
+// Carousel
+// --------------------------------------------------
+
+
+// Wrapper for the slide container and indicators
+.carousel {
+  position: relative;
+}
+
+.carousel-inner {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  > .item {
+    display: none;
+    position: relative;
+    .transition(.6s ease-in-out left);
+
+    // Account for jankitude on images
+    > img,
+    > a > img {
+      &:extend(.img-responsive);
+      line-height: 1;
+    }
+
+    // WebKit CSS3 transforms for supported devices
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      .transition-transform(~'0.6s ease-in-out');
+      .backface-visibility(~'hidden');
+      .perspective(1000px);
+
+      &.next,
+      &.active.right {
+        .translate3d(100%, 0, 0);
+        left: 0;
+      }
+      &.prev,
+      &.active.left {
+        .translate3d(-100%, 0, 0);
+        left: 0;
+      }
+      &.next.left,
+      &.prev.right,
+      &.active {
+        .translate3d(0, 0, 0);
+        left: 0;
+      }
+    }
+  }
+
+  > .active,
+  > .next,
+  > .prev {
+    display: block;
+  }
+
+  > .active {
+    left: 0;
+  }
+
+  > .next,
+  > .prev {
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  > .next {
+    left: 100%;
+  }
+  > .prev {
+    left: -100%;
+  }
+  > .next.left,
+  > .prev.right {
+    left: 0;
+  }
+
+  > .active.left {
+    left: -100%;
+  }
+  > .active.right {
+    left: 100%;
+  }
+
+}
+
+// Left/right controls for nav
+// ---------------------------
+
+.carousel-control {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: @carousel-control-width;
+  .opacity(@carousel-control-opacity);
+  font-size: @carousel-control-font-size;
+  color: @carousel-control-color;
+  text-align: center;
+  text-shadow: @carousel-text-shadow;
+  background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
+  // We can't have this transition here because WebKit cancels the carousel
+  // animation if you trip this while in the middle of another animation.
+
+  // Set gradients for backgrounds
+  &.left {
+    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
+  }
+  &.right {
+    left: auto;
+    right: 0;
+    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
+  }
+
+  // Hover/focus state
+  &:hover,
+  &:focus {
+    outline: 0;
+    color: @carousel-control-color;
+    text-decoration: none;
+    .opacity(.9);
+  }
+
+  // Toggles
+  .icon-prev,
+  .icon-next,
+  .glyphicon-chevron-left,
+  .glyphicon-chevron-right {
+    position: absolute;
+    top: 50%;
+    margin-top: -10px;
+    z-index: 5;
+    display: inline-block;
+  }
+  .icon-prev,
+  .glyphicon-chevron-left {
+    left: 50%;
+    margin-left: -10px;
+  }
+  .icon-next,
+  .glyphicon-chevron-right {
+    right: 50%;
+    margin-right: -10px;
+  }
+  .icon-prev,
+  .icon-next {
+    width:  20px;
+    height: 20px;
+    line-height: 1;
+    font-family: serif;
+  }
+
+
+  .icon-prev {
+    &:before {
+      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
+    }
+  }
+  .icon-next {
+    &:before {
+      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
+    }
+  }
+}
+
+// Optional indicator pips
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  z-index: 15;
+  width: 60%;
+  margin-left: -30%;
+  padding-left: 0;
+  list-style: none;
+  text-align: center;
+
+  li {
+    display: inline-block;
+    width:  10px;
+    height: 10px;
+    margin: 1px;
+    text-indent: -999px;
+    border: 1px solid @carousel-indicator-border-color;
+    border-radius: 10px;
+    cursor: pointer;
+
+    // IE8-9 hack for event handling
+    //
+    // Internet Explorer 8-9 does not support clicks on elements without a set
+    // `background-color`. We cannot use `filter` since that's not viewed as a
+    // background color by the browser. Thus, a hack is needed.
+    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
+    //
+    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
+    // set alpha transparency for the best results possible.
+    background-color: #000 \9; // IE8
+    background-color: rgba(0,0,0,0); // IE9
+  }
+  .active {
+    margin: 0;
+    width:  12px;
+    height: 12px;
+    background-color: @carousel-indicator-active-bg;
+  }
+}
+
+// Optional captions
+// -----------------------------
+// Hidden by default for smaller viewports
+.carousel-caption {
+  position: absolute;
+  left: 15%;
+  right: 15%;
+  bottom: 20px;
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: @carousel-caption-color;
+  text-align: center;
+  text-shadow: @carousel-text-shadow;
+  & .btn {
+    text-shadow: none; // No shadow for button elements in carousel-caption
+  }
+}
+
+
+// Scale up controls for tablets and up
+@media screen and (min-width: @screen-sm-min) {
+
+  // Scale up the controls a smidge
+  .carousel-control {
+    .glyphicon-chevron-left,
+    .glyphicon-chevron-right,
+    .icon-prev,
+    .icon-next {
+      width: (@carousel-control-font-size * 1.5);
+      height: (@carousel-control-font-size * 1.5);
+      margin-top: (@carousel-control-font-size / -2);
+      font-size: (@carousel-control-font-size * 1.5);
+    }
+    .glyphicon-chevron-left,
+    .icon-prev {
+      margin-left: (@carousel-control-font-size / -2);
+    }
+    .glyphicon-chevron-right,
+    .icon-next {
+      margin-right: (@carousel-control-font-size / -2);
+    }
+  }
+
+  // Show and left align the captions
+  .carousel-caption {
+    left: 20%;
+    right: 20%;
+    padding-bottom: 30px;
+  }
+
+  // Move up the indicators
+  .carousel-indicators {
+    bottom: 20px;
+  }
+}
diff --git a/less/bootstrap/close.less b/less/bootstrap/close.less
new file mode 100644
index 0000000..6d5bfe0
--- /dev/null
+++ b/less/bootstrap/close.less
@@ -0,0 +1,34 @@
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+  float: right;
+  font-size: (@font-size-base * 1.5);
+  font-weight: @close-font-weight;
+  line-height: 1;
+  color: @close-color;
+  text-shadow: @close-text-shadow;
+  .opacity(.2);
+
+  &:hover,
+  &:focus {
+    color: @close-color;
+    text-decoration: none;
+    cursor: pointer;
+    .opacity(.5);
+  }
+
+  // Additional properties for button version
+  // iOS requires the button element instead of an anchor tag.
+  // If you want the anchor version, it requires `href="#"`.
+  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+  button& {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
+}
diff --git a/less/bootstrap/code.less b/less/bootstrap/code.less
new file mode 100644
index 0000000..a08b4d4
--- /dev/null
+++ b/less/bootstrap/code.less
@@ -0,0 +1,69 @@
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+  font-family: @font-family-monospace;
+}
+
+// Inline code
+code {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: @code-color;
+  background-color: @code-bg;
+  border-radius: @border-radius-base;
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: 2px 4px;
+  font-size: 90%;
+  color: @kbd-color;
+  background-color: @kbd-bg;
+  border-radius: @border-radius-small;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+
+  kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: bold;
+    box-shadow: none;
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+  padding: ((@line-height-computed - 1) / 2);
+  margin: 0 0 (@line-height-computed / 2);
+  font-size: (@font-size-base - 1); // 14px to 13px
+  line-height: @line-height-base;
+  word-break: break-all;
+  word-wrap: break-word;
+  color: @pre-color;
+  background-color: @pre-bg;
+  border: 1px solid @pre-border-color;
+  border-radius: @border-radius-base;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: @pre-scrollable-max-height;
+  overflow-y: scroll;
+}
diff --git a/less/bootstrap/component-animations.less b/less/bootstrap/component-animations.less
new file mode 100644
index 0000000..0bcee91
--- /dev/null
+++ b/less/bootstrap/component-animations.less
@@ -0,0 +1,33 @@
+//
+// Component animations
+// --------------------------------------------------
+
+// Heads up!
+//
+// We don't use the `.opacity()` mixin here since it causes a bug with text
+// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
+
+.fade {
+  opacity: 0;
+  .transition(opacity .15s linear);
+  &.in {
+    opacity: 1;
+  }
+}
+
+.collapse {
+  display: none;
+
+  &.in      { display: block; }
+  tr&.in    { display: table-row; }
+  tbody&.in { display: table-row-group; }
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  .transition-property(~"height, visibility");
+  .transition-duration(.35s);
+  .transition-timing-function(ease);
+}
diff --git a/less/bootstrap/dropdowns.less b/less/bootstrap/dropdowns.less
new file mode 100644
index 0000000..f6876c1
--- /dev/null
+++ b/less/bootstrap/dropdowns.less
@@ -0,0 +1,216 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Dropdown arrow/caret
+.caret {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: 2px;
+  vertical-align: middle;
+  border-top:   @caret-width-base dashed;
+  border-top:   @caret-width-base solid ~"\9"; // IE8
+  border-right: @caret-width-base solid transparent;
+  border-left:  @caret-width-base solid transparent;
+}
+
+// The dropdown wrapper (div)
+.dropup,
+.dropdown {
+  position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+  outline: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: @zindex-dropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0; // override default ul
+  list-style: none;
+  font-size: @font-size-base;
+  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+  background-color: @dropdown-bg;
+  border: 1px solid @dropdown-fallback-border; // IE8 fallback
+  border: 1px solid @dropdown-border;
+  border-radius: @border-radius-base;
+  .box-shadow(0 6px 12px rgba(0,0,0,.175));
+  background-clip: padding-box;
+
+  // Aligns the dropdown menu to right
+  //
+  // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    .nav-divider(@dropdown-divider-bg);
+  }
+
+  // Links within the dropdown menu
+  > li > a {
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: normal;
+    line-height: @line-height-base;
+    color: @dropdown-link-color;
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+  }
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @dropdown-link-hover-color;
+    background-color: @dropdown-link-hover-bg;
+  }
+}
+
+// Active state
+.dropdown-menu > .active > a {
+  &,
+  &:hover,
+  &:focus {
+    color: @dropdown-link-active-color;
+    text-decoration: none;
+    outline: 0;
+    background-color: @dropdown-link-active-bg;
+  }
+}
+
+// Disabled state
+//
+// Gray out text and ensure the hover/focus state remains gray
+
+.dropdown-menu > .disabled > a {
+  &,
+  &:hover,
+  &:focus {
+    color: @dropdown-link-disabled-color;
+  }
+
+  // Nuke hover/focus effects
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: transparent;
+    background-image: none; // Remove CSS gradient
+    .reset-filter();
+    cursor: @cursor-disabled;
+  }
+}
+
+// Open state for the dropdown
+.open {
+  // Show the menu
+  > .dropdown-menu {
+    display: block;
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  left: auto; // Reset the default from `.dropdown-menu`
+  right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  left: 0;
+  right: auto;
+}
+
+// Dropdown section headers
+.dropdown-header {
+  display: block;
+  padding: 3px 20px;
+  font-size: @font-size-small;
+  line-height: @line-height-base;
+  color: @dropdown-header-color;
+  white-space: nowrap; // as with > li > a
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  z-index: (@zindex-dropdown - 10);
+}
+
+// Right aligned dropdowns
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+//
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Reverse the caret
+  .caret {
+    border-top: 0;
+    border-bottom: @caret-width-base dashed;
+    border-bottom: @caret-width-base solid ~"\9"; // IE8
+    content: "";
+  }
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 2px;
+  }
+}
+
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-right {
+    .dropdown-menu {
+      .dropdown-menu-right();
+    }
+    // Necessary for overrides of the default right aligned menu.
+    // Will remove come v4 in all likelihood.
+    .dropdown-menu-left {
+      .dropdown-menu-left();
+    }
+  }
+}
diff --git a/less/bootstrap/forms.less b/less/bootstrap/forms.less
new file mode 100644
index 0000000..9377d38
--- /dev/null
+++ b/less/bootstrap/forms.less
@@ -0,0 +1,613 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+  // so we reset that to ensure it behaves more like a standard block element.
+  // See https://github.com/twbs/bootstrap/issues/12359.
+  min-width: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: @line-height-computed;
+  font-size: (@font-size-base * 1.5);
+  line-height: inherit;
+  color: @legend-color;
+  border: 0;
+  border-bottom: 1px solid @legend-border-color;
+}
+
+label {
+  display: inline-block;
+  max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+
+// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+  .box-sizing(border-box);
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+  margin: 4px 0 0;
+  margin-top: 1px \9; // IE8-9
+  line-height: normal;
+}
+
+input[type="file"] {
+  display: block;
+}
+
+// Make range inputs behave like textual form controls
+input[type="range"] {
+  display: block;
+  width: 100%;
+}
+
+// Make multiple select elements height not fixed
+select[multiple],
+select[size] {
+  height: auto;
+}
+
+// Focus for file, radio, and checkbox
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+  .tab-focus();
+}
+
+// Adjust output element
+output {
+  display: block;
+  padding-top: (@padding-base-vertical + 1);
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+}
+
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @input-color;
+  background-color: @input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid @input-border;
+  border-radius: @input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+  // Customize the `:focus` state to imitate native WebKit styles.
+  .form-control-focus();
+
+  // Placeholder
+  .placeholder();
+
+  // Unstyle the caret on `<select>`s in IE10+.
+  &::-ms-expand {
+    border: 0;
+    background-color: transparent;
+  }
+
+  // Disabled and read-only inputs
+  //
+  // HTML5 says that controls under a fieldset > legend:first-child won't be
+  // disabled if the fieldset is disabled. Due to implementation difficulty, we
+  // don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    background-color: @input-bg-disabled;
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+}
+
+
+// Search inputs in iOS
+//
+// This overrides the extra rounded corners on search inputs in iOS so that our
+// `.form-control` class can properly style them. Note that this cannot simply
+// be added to `.form-control` as it's not specific enough. For details, see
+// https://github.com/twbs/bootstrap/issues/11586.
+
+input[type="search"] {
+  -webkit-appearance: none;
+}
+
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 9.3, iOS doesn't support `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  input[type="month"] {
+    &.form-control {
+      line-height: @input-height-base;
+    }
+
+    &.input-sm,
+    .input-group-sm & {
+      line-height: @input-height-small;
+    }
+
+    &.input-lg,
+    .input-group-lg & {
+      line-height: @input-height-large;
+    }
+  }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: @form-group-margin-bottom;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+
+  label {
+    min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+    padding-left: 20px;
+    margin-bottom: 0;
+    font-weight: normal;
+    cursor: pointer;
+  }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 4px \9;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+  margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+  position: relative;
+  display: inline-block;
+  padding-left: 20px;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-weight: normal;
+  cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+  margin-top: 0;
+  margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+  &[disabled],
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+  &.disabled,
+  fieldset[disabled] & {
+    cursor: @cursor-disabled;
+  }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+  &.disabled,
+  fieldset[disabled] & {
+    label {
+      cursor: @cursor-disabled;
+    }
+  }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.form-control-static {
+  // Size it appropriately next to real form controls
+  padding-top: (@padding-base-vertical + 1);
+  padding-bottom: (@padding-base-vertical + 1);
+  // Remove default margin from `p`
+  margin-bottom: 0;
+  min-height: (@line-height-computed + @font-size-base);
+
+  &.input-lg,
+  &.input-sm {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.input-sm {
+  .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
+}
+.form-group-sm {
+  .form-control {
+    height: @input-height-small;
+    padding: @padding-small-vertical @padding-small-horizontal;
+    font-size: @font-size-small;
+    line-height: @line-height-small;
+    border-radius: @input-border-radius-small;
+  }
+  select.form-control {
+    height: @input-height-small;
+    line-height: @input-height-small;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-small;
+    min-height: (@line-height-computed + @font-size-small);
+    padding: (@padding-small-vertical + 1) @padding-small-horizontal;
+    font-size: @font-size-small;
+    line-height: @line-height-small;
+  }
+}
+
+.input-lg {
+  .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @input-border-radius-large);
+}
+.form-group-lg {
+  .form-control {
+    height: @input-height-large;
+    padding: @padding-large-vertical @padding-large-horizontal;
+    font-size: @font-size-large;
+    line-height: @line-height-large;
+    border-radius: @input-border-radius-large;
+  }
+  select.form-control {
+    height: @input-height-large;
+    line-height: @input-height-large;
+  }
+  textarea.form-control,
+  select[multiple].form-control {
+    height: auto;
+  }
+  .form-control-static {
+    height: @input-height-large;
+    min-height: (@line-height-computed + @font-size-large);
+    padding: (@padding-large-vertical + 1) @padding-large-horizontal;
+    font-size: @font-size-large;
+    line-height: @line-height-large;
+  }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.has-feedback {
+  // Enable absolute positioning
+  position: relative;
+
+  // Ensure icons don't overlap text
+  .form-control {
+    padding-right: (@input-height-base * 1.25);
+  }
+}
+// Feedback icon (requires .glyphicon classes)
+.form-control-feedback {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2; // Ensure icon is above input groups
+  display: block;
+  width: @input-height-base;
+  height: @input-height-base;
+  line-height: @input-height-base;
+  text-align: center;
+  pointer-events: none;
+}
+.input-lg + .form-control-feedback,
+.input-group-lg + .form-control-feedback,
+.form-group-lg .form-control + .form-control-feedback {
+  width: @input-height-large;
+  height: @input-height-large;
+  line-height: @input-height-large;
+}
+.input-sm + .form-control-feedback,
+.input-group-sm + .form-control-feedback,
+.form-group-sm .form-control + .form-control-feedback {
+  width: @input-height-small;
+  height: @input-height-small;
+  line-height: @input-height-small;
+}
+
+// Feedback states
+.has-success {
+  .form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+}
+.has-warning {
+  .form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+}
+.has-error {
+  .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+}
+
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
+
+  & ~ .form-control-feedback {
+    top: (@line-height-computed + 5); // Height of the `label` and its margin
+  }
+  &.sr-only ~ .form-control-feedback {
+    top: 0;
+  }
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+  display: block; // account for any element using help-block
+  margin-top: 5px;
+  margin-bottom: 10px;
+  color: lighten(@text-color, 25%); // lighten the text some for contrast
+}
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+.form-inline {
+
+  // Kick in the inline
+  @media (min-width: @screen-sm-min) {
+    // Inline-block all the things for "inline"
+    .form-group {
+      display: inline-block;
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // In navbar-form, allow folks to *not* use `.form-group`
+    .form-control {
+      display: inline-block;
+      width: auto; // Prevent labels from stacking above inputs in `.form-group`
+      vertical-align: middle;
+    }
+
+    // Make static controls behave like regular ones
+    .form-control-static {
+      display: inline-block;
+    }
+
+    .input-group {
+      display: inline-table;
+      vertical-align: middle;
+
+      .input-group-addon,
+      .input-group-btn,
+      .form-control {
+        width: auto;
+      }
+    }
+
+    // Input groups need that 100% width though
+    .input-group > .form-control {
+      width: 100%;
+    }
+
+    .control-label {
+      margin-bottom: 0;
+      vertical-align: middle;
+    }
+
+    // Remove default margin on radios/checkboxes that were used for stacking, and
+    // then undo the floating of radios and checkboxes to match.
+    .radio,
+    .checkbox {
+      display: inline-block;
+      margin-top: 0;
+      margin-bottom: 0;
+      vertical-align: middle;
+
+      label {
+        padding-left: 0;
+      }
+    }
+    .radio input[type="radio"],
+    .checkbox input[type="checkbox"] {
+      position: relative;
+      margin-left: 0;
+    }
+
+    // Re-override the feedback icon.
+    .has-feedback .form-control-feedback {
+      top: 0;
+    }
+  }
+}
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal {
+
+  // Consistent vertical alignment of radios and checkboxes
+  //
+  // Labels also get some reset styles, but that is scoped to a media query below.
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+  }
+  // Account for padding we're adding to ensure the alignment and of help text
+  // and other content below items
+  .radio,
+  .checkbox {
+    min-height: (@line-height-computed + (@padding-base-vertical + 1));
+  }
+
+  // Make form groups behave like rows
+  .form-group {
+    .make-row();
+  }
+
+  // Reset spacing and right align labels, but scope to media queries so that
+  // labels on narrow viewports stack the same as a default form example.
+  @media (min-width: @screen-sm-min) {
+    .control-label {
+      text-align: right;
+      margin-bottom: 0;
+      padding-top: (@padding-base-vertical + 1); // Default padding plus a border
+    }
+  }
+
+  // Validation states
+  //
+  // Reposition the icon because it's now within a grid column and columns have
+  // `position: relative;` on them. Also accounts for the grid gutter padding.
+  .has-feedback .form-control-feedback {
+    right: floor((@grid-gutter-width / 2));
+  }
+
+  // Form group sizes
+  //
+  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+  // inputs and labels within a `.form-group`.
+  .form-group-lg {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@padding-large-vertical + 1);
+        font-size: @font-size-large;
+      }
+    }
+  }
+  .form-group-sm {
+    @media (min-width: @screen-sm-min) {
+      .control-label {
+        padding-top: (@padding-small-vertical + 1);
+        font-size: @font-size-small;
+      }
+    }
+  }
+}
diff --git a/less/bootstrap/glyphicons.less b/less/bootstrap/glyphicons.less
new file mode 100644
index 0000000..7bc5852
--- /dev/null
+++ b/less/bootstrap/glyphicons.less
@@ -0,0 +1,305 @@
+//
+// Glyphicons for Bootstrap
+//
+// Since icons are fonts, they can be placed anywhere text is placed and are
+// thus automatically sized to match the surrounding child. To use, create an
+// inline element with the appropriate classes, like so:
+//
+// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+
+// Import the fonts
+@font-face {
+  font-family: 'Glyphicons Halflings';
+  src: url('@{icon-font-path}@{icon-font-name}.eot');
+  src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
+       url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'),
+       url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
+       url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
+       url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg');
+}
+
+// Catchall baseclass
+.glyphicon {
+  position: relative;
+  top: 1px;
+  display: inline-block;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Individual icons
+.glyphicon-asterisk               { &:before { content: "\002a"; } }
+.glyphicon-plus                   { &:before { content: "\002b"; } }
+.glyphicon-euro,
+.glyphicon-eur                    { &:before { content: "\20ac"; } }
+.glyphicon-minus                  { &:before { content: "\2212"; } }
+.glyphicon-cloud                  { &:before { content: "\2601"; } }
+.glyphicon-envelope               { &:before { content: "\2709"; } }
+.glyphicon-pencil                 { &:before { content: "\270f"; } }
+.glyphicon-glass                  { &:before { content: "\e001"; } }
+.glyphicon-music                  { &:before { content: "\e002"; } }
+.glyphicon-search                 { &:before { content: "\e003"; } }
+.glyphicon-heart                  { &:before { content: "\e005"; } }
+.glyphicon-star                   { &:before { content: "\e006"; } }
+.glyphicon-star-empty             { &:before { content: "\e007"; } }
+.glyphicon-user                   { &:before { content: "\e008"; } }
+.glyphicon-film                   { &:before { content: "\e009"; } }
+.glyphicon-th-large               { &:before { content: "\e010"; } }
+.glyphicon-th                     { &:before { content: "\e011"; } }
+.glyphicon-th-list                { &:before { content: "\e012"; } }
+.glyphicon-ok                     { &:before { content: "\e013"; } }
+.glyphicon-remove                 { &:before { content: "\e014"; } }
+.glyphicon-zoom-in                { &:before { content: "\e015"; } }
+.glyphicon-zoom-out               { &:before { content: "\e016"; } }
+.glyphicon-off                    { &:before { content: "\e017"; } }
+.glyphicon-signal                 { &:before { content: "\e018"; } }
+.glyphicon-cog                    { &:before { content: "\e019"; } }
+.glyphicon-trash                  { &:before { content: "\e020"; } }
+.glyphicon-home                   { &:before { content: "\e021"; } }
+.glyphicon-file                   { &:before { content: "\e022"; } }
+.glyphicon-time                   { &:before { content: "\e023"; } }
+.glyphicon-road                   { &:before { content: "\e024"; } }
+.glyphicon-download-alt           { &:before { content: "\e025"; } }
+.glyphicon-download               { &:before { content: "\e026"; } }
+.glyphicon-upload                 { &:before { content: "\e027"; } }
+.glyphicon-inbox                  { &:before { content: "\e028"; } }
+.glyphicon-play-circle            { &:before { content: "\e029"; } }
+.glyphicon-repeat                 { &:before { content: "\e030"; } }
+.glyphicon-refresh                { &:before { content: "\e031"; } }
+.glyphicon-list-alt               { &:before { content: "\e032"; } }
+.glyphicon-lock                   { &:before { content: "\e033"; } }
+.glyphicon-flag                   { &:before { content: "\e034"; } }
+.glyphicon-headphones             { &:before { content: "\e035"; } }
+.glyphicon-volume-off             { &:before { content: "\e036"; } }
+.glyphicon-volume-down            { &:before { content: "\e037"; } }
+.glyphicon-volume-up              { &:before { content: "\e038"; } }
+.glyphicon-qrcode                 { &:before { content: "\e039"; } }
+.glyphicon-barcode                { &:before { content: "\e040"; } }
+.glyphicon-tag                    { &:before { content: "\e041"; } }
+.glyphicon-tags                   { &:before { content: "\e042"; } }
+.glyphicon-book                   { &:before { content: "\e043"; } }
+.glyphicon-bookmark               { &:before { content: "\e044"; } }
+.glyphicon-print                  { &:before { content: "\e045"; } }
+.glyphicon-camera                 { &:before { content: "\e046"; } }
+.glyphicon-font                   { &:before { content: "\e047"; } }
+.glyphicon-bold                   { &:before { content: "\e048"; } }
+.glyphicon-italic                 { &:before { content: "\e049"; } }
+.glyphicon-text-height            { &:before { content: "\e050"; } }
+.glyphicon-text-width             { &:before { content: "\e051"; } }
+.glyphicon-align-left             { &:before { content: "\e052"; } }
+.glyphicon-align-center           { &:before { content: "\e053"; } }
+.glyphicon-align-right            { &:before { content: "\e054"; } }
+.glyphicon-align-justify          { &:before { content: "\e055"; } }
+.glyphicon-list                   { &:before { content: "\e056"; } }
+.glyphicon-indent-left            { &:before { content: "\e057"; } }
+.glyphicon-indent-right           { &:before { content: "\e058"; } }
+.glyphicon-facetime-video         { &:before { content: "\e059"; } }
+.glyphicon-picture                { &:before { content: "\e060"; } }
+.glyphicon-map-marker             { &:before { content: "\e062"; } }
+.glyphicon-adjust                 { &:before { content: "\e063"; } }
+.glyphicon-tint                   { &:before { content: "\e064"; } }
+.glyphicon-edit                   { &:before { content: "\e065"; } }
+.glyphicon-share                  { &:before { content: "\e066"; } }
+.glyphicon-check                  { &:before { content: "\e067"; } }
+.glyphicon-move                   { &:before { content: "\e068"; } }
+.glyphicon-step-backward          { &:before { content: "\e069"; } }
+.glyphicon-fast-backward          { &:before { content: "\e070"; } }
+.glyphicon-backward               { &:before { content: "\e071"; } }
+.glyphicon-play                   { &:before { content: "\e072"; } }
+.glyphicon-pause                  { &:before { content: "\e073"; } }
+.glyphicon-stop                   { &:before { content: "\e074"; } }
+.glyphicon-forward                { &:before { content: "\e075"; } }
+.glyphicon-fast-forward           { &:before { content: "\e076"; } }
+.glyphicon-step-forward           { &:before { content: "\e077"; } }
+.glyphicon-eject                  { &:before { content: "\e078"; } }
+.glyphicon-chevron-left           { &:before { content: "\e079"; } }
+.glyphicon-chevron-right          { &:before { content: "\e080"; } }
+.glyphicon-plus-sign              { &:before { content: "\e081"; } }
+.glyphicon-minus-sign             { &:before { content: "\e082"; } }
+.glyphicon-remove-sign            { &:before { content: "\e083"; } }
+.glyphicon-ok-sign                { &:before { content: "\e084"; } }
+.glyphicon-question-sign          { &:before { content: "\e085"; } }
+.glyphicon-info-sign              { &:before { content: "\e086"; } }
+.glyphicon-screenshot             { &:before { content: "\e087"; } }
+.glyphicon-remove-circle          { &:before { content: "\e088"; } }
+.glyphicon-ok-circle              { &:before { content: "\e089"; } }
+.glyphicon-ban-circle             { &:before { content: "\e090"; } }
+.glyphicon-arrow-left             { &:before { content: "\e091"; } }
+.glyphicon-arrow-right            { &:before { content: "\e092"; } }
+.glyphicon-arrow-up               { &:before { content: "\e093"; } }
+.glyphicon-arrow-down             { &:before { content: "\e094"; } }
+.glyphicon-share-alt              { &:before { content: "\e095"; } }
+.glyphicon-resize-full            { &:before { content: "\e096"; } }
+.glyphicon-resize-small           { &:before { content: "\e097"; } }
+.glyphicon-exclamation-sign       { &:before { content: "\e101"; } }
+.glyphicon-gift                   { &:before { content: "\e102"; } }
+.glyphicon-leaf                   { &:before { content: "\e103"; } }
+.glyphicon-fire                   { &:before { content: "\e104"; } }
+.glyphicon-eye-open               { &:before { content: "\e105"; } }
+.glyphicon-eye-close              { &:before { content: "\e106"; } }
+.glyphicon-warning-sign           { &:before { content: "\e107"; } }
+.glyphicon-plane                  { &:before { content: "\e108"; } }
+.glyphicon-calendar               { &:before { content: "\e109"; } }
+.glyphicon-random                 { &:before { content: "\e110"; } }
+.glyphicon-comment                { &:before { content: "\e111"; } }
+.glyphicon-magnet                 { &:before { content: "\e112"; } }
+.glyphicon-chevron-up             { &:before { content: "\e113"; } }
+.glyphicon-chevron-down           { &:before { content: "\e114"; } }
+.glyphicon-retweet                { &:before { content: "\e115"; } }
+.glyphicon-shopping-cart          { &:before { content: "\e116"; } }
+.glyphicon-folder-close           { &:before { content: "\e117"; } }
+.glyphicon-folder-open            { &:before { content: "\e118"; } }
+.glyphicon-resize-vertical        { &:before { content: "\e119"; } }
+.glyphicon-resize-horizontal      { &:before { content: "\e120"; } }
+.glyphicon-hdd                    { &:before { content: "\e121"; } }
+.glyphicon-bullhorn               { &:before { content: "\e122"; } }
+.glyphicon-bell                   { &:before { content: "\e123"; } }
+.glyphicon-certificate            { &:before { content: "\e124"; } }
+.glyphicon-thumbs-up              { &:before { content: "\e125"; } }
+.glyphicon-thumbs-down            { &:before { content: "\e126"; } }
+.glyphicon-hand-right             { &:before { content: "\e127"; } }
+.glyphicon-hand-left              { &:before { content: "\e128"; } }
+.glyphicon-hand-up                { &:before { content: "\e129"; } }
+.glyphicon-hand-down              { &:before { content: "\e130"; } }
+.glyphicon-circle-arrow-right     { &:before { content: "\e131"; } }
+.glyphicon-circle-arrow-left      { &:before { content: "\e132"; } }
+.glyphicon-circle-arrow-up        { &:before { content: "\e133"; } }
+.glyphicon-circle-arrow-down      { &:before { content: "\e134"; } }
+.glyphicon-globe                  { &:before { content: "\e135"; } }
+.glyphicon-wrench                 { &:before { content: "\e136"; } }
+.glyphicon-tasks                  { &:before { content: "\e137"; } }
+.glyphicon-filter                 { &:before { content: "\e138"; } }
+.glyphicon-briefcase              { &:before { content: "\e139"; } }
+.glyphicon-fullscreen             { &:before { content: "\e140"; } }
+.glyphicon-dashboard              { &:before { content: "\e141"; } }
+.glyphicon-paperclip              { &:before { content: "\e142"; } }
+.glyphicon-heart-empty            { &:before { content: "\e143"; } }
+.glyphicon-link                   { &:before { content: "\e144"; } }
+.glyphicon-phone                  { &:before { content: "\e145"; } }
+.glyphicon-pushpin                { &:before { content: "\e146"; } }
+.glyphicon-usd                    { &:before { content: "\e148"; } }
+.glyphicon-gbp                    { &:before { content: "\e149"; } }
+.glyphicon-sort                   { &:before { content: "\e150"; } }
+.glyphicon-sort-by-alphabet       { &:before { content: "\e151"; } }
+.glyphicon-sort-by-alphabet-alt   { &:before { content: "\e152"; } }
+.glyphicon-sort-by-order          { &:before { content: "\e153"; } }
+.glyphicon-sort-by-order-alt      { &:before { content: "\e154"; } }
+.glyphicon-sort-by-attributes     { &:before { content: "\e155"; } }
+.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
+.glyphicon-unchecked              { &:before { content: "\e157"; } }
+.glyphicon-expand                 { &:before { content: "\e158"; } }
+.glyphicon-collapse-down          { &:before { content: "\e159"; } }
+.glyphicon-collapse-up            { &:before { content: "\e160"; } }
+.glyphicon-log-in                 { &:before { content: "\e161"; } }
+.glyphicon-flash                  { &:before { content: "\e162"; } }
+.glyphicon-log-out                { &:before { content: "\e163"; } }
+.glyphicon-new-window             { &:before { content: "\e164"; } }
+.glyphicon-record                 { &:before { content: "\e165"; } }
+.glyphicon-save                   { &:before { content: "\e166"; } }
+.glyphicon-open                   { &:before { content: "\e167"; } }
+.glyphicon-saved                  { &:before { content: "\e168"; } }
+.glyphicon-import                 { &:before { content: "\e169"; } }
+.glyphicon-export                 { &:before { content: "\e170"; } }
+.glyphicon-send                   { &:before { content: "\e171"; } }
+.glyphicon-floppy-disk            { &:before { content: "\e172"; } }
+.glyphicon-floppy-saved           { &:before { content: "\e173"; } }
+.glyphicon-floppy-remove          { &:before { content: "\e174"; } }
+.glyphicon-floppy-save            { &:before { content: "\e175"; } }
+.glyphicon-floppy-open            { &:before { content: "\e176"; } }
+.glyphicon-credit-card            { &:before { content: "\e177"; } }
+.glyphicon-transfer               { &:before { content: "\e178"; } }
+.glyphicon-cutlery                { &:before { content: "\e179"; } }
+.glyphicon-header                 { &:before { content: "\e180"; } }
+.glyphicon-compressed             { &:before { content: "\e181"; } }
+.glyphicon-earphone               { &:before { content: "\e182"; } }
+.glyphicon-phone-alt              { &:before { content: "\e183"; } }
+.glyphicon-tower                  { &:before { content: "\e184"; } }
+.glyphicon-stats                  { &:before { content: "\e185"; } }
+.glyphicon-sd-video               { &:before { content: "\e186"; } }
+.glyphicon-hd-video               { &:before { content: "\e187"; } }
+.glyphicon-subtitles              { &:before { content: "\e188"; } }
+.glyphicon-sound-stereo           { &:before { content: "\e189"; } }
+.glyphicon-sound-dolby            { &:before { content: "\e190"; } }
+.glyphicon-sound-5-1              { &:before { content: "\e191"; } }
+.glyphicon-sound-6-1              { &:before { content: "\e192"; } }
+.glyphicon-sound-7-1              { &:before { content: "\e193"; } }
+.glyphicon-copyright-mark         { &:before { content: "\e194"; } }
+.glyphicon-registration-mark      { &:before { content: "\e195"; } }
+.glyphicon-cloud-download         { &:before { content: "\e197"; } }
+.glyphicon-cloud-upload           { &:before { content: "\e198"; } }
+.glyphicon-tree-conifer           { &:before { content: "\e199"; } }
+.glyphicon-tree-deciduous         { &:before { content: "\e200"; } }
+.glyphicon-cd                     { &:before { content: "\e201"; } }
+.glyphicon-save-file              { &:before { content: "\e202"; } }
+.glyphicon-open-file              { &:before { content: "\e203"; } }
+.glyphicon-level-up               { &:before { content: "\e204"; } }
+.glyphicon-copy                   { &:before { content: "\e205"; } }
+.glyphicon-paste                  { &:before { content: "\e206"; } }
+// The following 2 Glyphicons are omitted for the time being because
+// they currently use Unicode codepoints that are outside the
+// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
+// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
+// Notably, the bug affects some older versions of the Android Browser.
+// More info: https://github.com/twbs/bootstrap/issues/10106
+// .glyphicon-door                   { &:before { content: "\1f6aa"; } }
+// .glyphicon-key                    { &:before { content: "\1f511"; } }
+.glyphicon-alert                  { &:before { content: "\e209"; } }
+.glyphicon-equalizer              { &:before { content: "\e210"; } }
+.glyphicon-king                   { &:before { content: "\e211"; } }
+.glyphicon-queen                  { &:before { content: "\e212"; } }
+.glyphicon-pawn                   { &:before { content: "\e213"; } }
+.glyphicon-bishop                 { &:before { content: "\e214"; } }
+.glyphicon-knight                 { &:before { content: "\e215"; } }
+.glyphicon-baby-formula           { &:before { content: "\e216"; } }
+.glyphicon-tent                   { &:before { content: "\26fa"; } }
+.glyphicon-blackboard             { &:before { content: "\e218"; } }
+.glyphicon-bed                    { &:before { content: "\e219"; } }
+.glyphicon-apple                  { &:before { content: "\f8ff"; } }
+.glyphicon-erase                  { &:before { content: "\e221"; } }
+.glyphicon-hourglass              { &:before { content: "\231b"; } }
+.glyphicon-lamp                   { &:before { content: "\e223"; } }
+.glyphicon-duplicate              { &:before { content: "\e224"; } }
+.glyphicon-piggy-bank             { &:before { content: "\e225"; } }
+.glyphicon-scissors               { &:before { content: "\e226"; } }
+.glyphicon-bitcoin                { &:before { content: "\e227"; } }
+.glyphicon-btc                    { &:before { content: "\e227"; } }
+.glyphicon-xbt                    { &:before { content: "\e227"; } }
+.glyphicon-yen                    { &:before { content: "\00a5"; } }
+.glyphicon-jpy                    { &:before { content: "\00a5"; } }
+.glyphicon-ruble                  { &:before { content: "\20bd"; } }
+.glyphicon-rub                    { &:before { content: "\20bd"; } }
+.glyphicon-scale                  { &:before { content: "\e230"; } }
+.glyphicon-ice-lolly              { &:before { content: "\e231"; } }
+.glyphicon-ice-lolly-tasted       { &:before { content: "\e232"; } }
+.glyphicon-education              { &:before { content: "\e233"; } }
+.glyphicon-option-horizontal      { &:before { content: "\e234"; } }
+.glyphicon-option-vertical        { &:before { content: "\e235"; } }
+.glyphicon-menu-hamburger         { &:before { content: "\e236"; } }
+.glyphicon-modal-window           { &:before { content: "\e237"; } }
+.glyphicon-oil                    { &:before { content: "\e238"; } }
+.glyphicon-grain                  { &:before { content: "\e239"; } }
+.glyphicon-sunglasses             { &:before { content: "\e240"; } }
+.glyphicon-text-size              { &:before { content: "\e241"; } }
+.glyphicon-text-color             { &:before { content: "\e242"; } }
+.glyphicon-text-background        { &:before { content: "\e243"; } }
+.glyphicon-object-align-top       { &:before { content: "\e244"; } }
+.glyphicon-object-align-bottom    { &:before { content: "\e245"; } }
+.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
+.glyphicon-object-align-left      { &:before { content: "\e247"; } }
+.glyphicon-object-align-vertical  { &:before { content: "\e248"; } }
+.glyphicon-object-align-right     { &:before { content: "\e249"; } }
+.glyphicon-triangle-right         { &:before { content: "\e250"; } }
+.glyphicon-triangle-left          { &:before { content: "\e251"; } }
+.glyphicon-triangle-bottom        { &:before { content: "\e252"; } }
+.glyphicon-triangle-top           { &:before { content: "\e253"; } }
+.glyphicon-console                { &:before { content: "\e254"; } }
+.glyphicon-superscript            { &:before { content: "\e255"; } }
+.glyphicon-subscript              { &:before { content: "\e256"; } }
+.glyphicon-menu-left              { &:before { content: "\e257"; } }
+.glyphicon-menu-right             { &:before { content: "\e258"; } }
+.glyphicon-menu-down              { &:before { content: "\e259"; } }
+.glyphicon-menu-up                { &:before { content: "\e260"; } }
diff --git a/less/bootstrap/grid.less b/less/bootstrap/grid.less
new file mode 100644
index 0000000..e100655
--- /dev/null
+++ b/less/bootstrap/grid.less
@@ -0,0 +1,84 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.container {
+  .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;
+  }
+}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+  .container-fixed();
+}
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+  .make-row();
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+.make-grid-columns();
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(lg);
+}
diff --git a/less/bootstrap/input-groups.less b/less/bootstrap/input-groups.less
new file mode 100644
index 0000000..d0763db
--- /dev/null
+++ b/less/bootstrap/input-groups.less
@@ -0,0 +1,171 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+  position: relative; // For dropdowns
+  display: table;
+  border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+  // Undo padding and float of grid classes
+  &[class*="col-"] {
+    float: none;
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .form-control {
+    // Ensure that the input is always above the *appended* addon button for
+    // proper border colors.
+    position: relative;
+    z-index: 2;
+
+    // IE9 fubars the placeholder attribute in text inputs and the arrows on
+    // select elements in input groups. To fix it, we float the input. Details:
+    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+    float: left;
+
+    width: 100%;
+    margin-bottom: 0;
+
+    &:focus {
+      z-index: 3;
+    }
+  }
+}
+
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-btn > .btn {
+  .input-lg();
+}
+.input-group-sm > .form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-btn > .btn {
+  .input-sm();
+}
+
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group .form-control {
+  display: table-cell;
+
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: 1;
+  color: @input-color;
+  text-align: center;
+  background-color: @input-group-addon-bg;
+  border: 1px solid @input-group-addon-border-color;
+  border-radius: @input-border-radius;
+
+  // Sizing
+  &.input-sm {
+    padding: @padding-small-vertical @padding-small-horizontal;
+    font-size: @font-size-small;
+    border-radius: @input-border-radius-small;
+  }
+  &.input-lg {
+    padding: @padding-large-vertical @padding-large-horizontal;
+    font-size: @font-size-large;
+    border-radius: @input-border-radius-large;
+  }
+
+  // Nuke default margins from checkboxes and radios to vertically center within.
+  input[type="radio"],
+  input[type="checkbox"] {
+    margin-top: 0;
+  }
+}
+
+// Reset rounded corners
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .btn,
+.input-group-btn:first-child > .btn-group > .btn,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
+  .border-right-radius(0);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .btn,
+.input-group-btn:last-child > .btn-group > .btn,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child),
+.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
+  .border-left-radius(0);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn {
+  position: relative;
+  // Jankily prevent input button groups from wrapping with `white-space` and
+  // `font-size` in combination with `inline-block` on buttons.
+  font-size: 0;
+  white-space: nowrap;
+
+  // Negative margin for spacing, position for bringing hovered/focused/actived
+  // element above the siblings.
+  > .btn {
+    position: relative;
+    + .btn {
+      margin-left: -1px;
+    }
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 2;
+    }
+  }
+
+  // Negative margin to only have a 1px border between the two
+  &:first-child {
+    > .btn,
+    > .btn-group {
+      margin-right: -1px;
+    }
+  }
+  &:last-child {
+    > .btn,
+    > .btn-group {
+      z-index: 2;
+      margin-left: -1px;
+    }
+  }
+}
diff --git a/less/bootstrap/jumbotron.less b/less/bootstrap/jumbotron.less
new file mode 100644
index 0000000..1d9b515
--- /dev/null
+++ b/less/bootstrap/jumbotron.less
@@ -0,0 +1,54 @@
+//
+// Jumbotron
+// --------------------------------------------------
+
+
+.jumbotron {
+  padding-top:    @jumbotron-padding;
+  padding-bottom: @jumbotron-padding;
+  margin-bottom: @jumbotron-padding;
+  color: @jumbotron-color;
+  background-color: @jumbotron-bg;
+
+  h1,
+  .h1 {
+    color: @jumbotron-heading-color;
+  }
+
+  p {
+    margin-bottom: (@jumbotron-padding / 2);
+    font-size: @jumbotron-font-size;
+    font-weight: 200;
+  }
+
+  > hr {
+    border-top-color: darken(@jumbotron-bg, 10%);
+  }
+
+  .container &,
+  .container-fluid & {
+    border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
+    padding-left:  (@grid-gutter-width / 2);
+    padding-right: (@grid-gutter-width / 2);
+  }
+
+  .container {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: @screen-sm-min) {
+    padding-top:    (@jumbotron-padding * 1.6);
+    padding-bottom: (@jumbotron-padding * 1.6);
+
+    .container &,
+    .container-fluid & {
+      padding-left:  (@jumbotron-padding * 2);
+      padding-right: (@jumbotron-padding * 2);
+    }
+
+    h1,
+    .h1 {
+      font-size: @jumbotron-heading-font-size;
+    }
+  }
+}
diff --git a/less/bootstrap/labels.less b/less/bootstrap/labels.less
new file mode 100644
index 0000000..9a5a270
--- /dev/null
+++ b/less/bootstrap/labels.less
@@ -0,0 +1,64 @@
+//
+// Labels
+// --------------------------------------------------
+
+.label {
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  color: @label-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+
+  // Add hover effects, but only for links
+  a& {
+    &:hover,
+    &:focus {
+      color: @label-link-hover-color;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  // Empty labels collapse automatically (not available in IE8)
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for labels in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+}
+
+// Colors
+// Contextual variations (linked labels get darker on :hover)
+
+.label-default {
+  .label-variant(@label-default-bg);
+}
+
+.label-primary {
+  .label-variant(@label-primary-bg);
+}
+
+.label-success {
+  .label-variant(@label-success-bg);
+}
+
+.label-info {
+  .label-variant(@label-info-bg);
+}
+
+.label-warning {
+  .label-variant(@label-warning-bg);
+}
+
+.label-danger {
+  .label-variant(@label-danger-bg);
+}
diff --git a/less/bootstrap/list-group.less b/less/bootstrap/list-group.less
new file mode 100644
index 0000000..216b912
--- /dev/null
+++ b/less/bootstrap/list-group.less
@@ -0,0 +1,130 @@
+//
+// List groups
+// --------------------------------------------------
+
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+  // No need to set list-style: none; since .list-group-item is block level
+  margin-bottom: 20px;
+  padding-left: 0; // reset padding because ul and ol
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+  position: relative;
+  display: block;
+  padding: 10px 15px;
+  // Place the border on the list items and negative margin up for better styling
+  margin-bottom: -1px;
+  background-color: @list-group-bg;
+  border: 1px solid @list-group-border;
+
+  // Round the first and last items
+  &:first-child {
+    .border-top-radius(@list-group-border-radius);
+  }
+  &:last-child {
+    margin-bottom: 0;
+    .border-bottom-radius(@list-group-border-radius);
+  }
+}
+
+
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
+// Includes an extra `.active` modifier class for showing selected items.
+
+a.list-group-item,
+button.list-group-item {
+  color: @list-group-link-color;
+
+  .list-group-item-heading {
+    color: @list-group-link-heading-color;
+  }
+
+  // Hover state
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: @list-group-link-hover-color;
+    background-color: @list-group-hover-bg;
+  }
+}
+
+button.list-group-item {
+  width: 100%;
+  text-align: left;
+}
+
+.list-group-item {
+  // Disabled state
+  &.disabled,
+  &.disabled:hover,
+  &.disabled:focus {
+    background-color: @list-group-disabled-bg;
+    color: @list-group-disabled-color;
+    cursor: @cursor-disabled;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-disabled-text-color;
+    }
+  }
+
+  // Active class on item itself, not parent
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: @list-group-active-color;
+    background-color: @list-group-active-bg;
+    border-color: @list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: @list-group-active-text-color;
+    }
+  }
+}
+
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+.list-group-item-variant(success; @state-success-bg; @state-success-text);
+.list-group-item-variant(info; @state-info-bg; @state-info-text);
+.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
+.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
+
+
+// Custom content options
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
+
+.list-group-item-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+.list-group-item-text {
+  margin-bottom: 0;
+  line-height: 1.3;
+}
diff --git a/less/bootstrap/media.less b/less/bootstrap/media.less
new file mode 100644
index 0000000..8c835e8
--- /dev/null
+++ b/less/bootstrap/media.less
@@ -0,0 +1,66 @@
+.media {
+  // Proper spacing between instances of .media
+  margin-top: 15px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.media,
+.media-body {
+  zoom: 1;
+  overflow: hidden;
+}
+
+.media-body {
+  width: 10000px;
+}
+
+.media-object {
+  display: block;
+
+  // Fix collapse in webkit from max-width: 100% and display: table-cell.
+  &.img-thumbnail {
+    max-width: none;
+  }
+}
+
+.media-right,
+.media > .pull-right {
+  padding-left: 10px;
+}
+
+.media-left,
+.media > .pull-left {
+  padding-right: 10px;
+}
+
+.media-left,
+.media-right,
+.media-body {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.media-middle {
+  vertical-align: middle;
+}
+
+.media-bottom {
+  vertical-align: bottom;
+}
+
+// Reset margins on headings for tighter default spacing
+.media-heading {
+  margin-top: 0;
+  margin-bottom: 5px;
+}
+
+// Media list variation
+//
+// Undo default ul/ol styles
+.media-list {
+  padding-left: 0;
+  list-style: none;
+}
diff --git a/less/bootstrap/mixins.less b/less/bootstrap/mixins.less
new file mode 100644
index 0000000..e6f9fe6
--- /dev/null
+++ b/less/bootstrap/mixins.less
@@ -0,0 +1,40 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "mixins/hide-text.less";
+@import "mixins/opacity.less";
+@import "mixins/image.less";
+@import "mixins/labels.less";
+@import "mixins/reset-filter.less";
+@import "mixins/resize.less";
+@import "mixins/responsive-visibility.less";
+@import "mixins/size.less";
+@import "mixins/tab-focus.less";
+@import "mixins/reset-text.less";
+@import "mixins/text-emphasis.less";
+@import "mixins/text-overflow.less";
+@import "mixins/vendor-prefixes.less";
+
+// Components
+@import "mixins/alerts.less";
+@import "mixins/buttons.less";
+@import "mixins/panels.less";
+@import "mixins/pagination.less";
+@import "mixins/list-group.less";
+@import "mixins/nav-divider.less";
+@import "mixins/forms.less";
+@import "mixins/progress-bar.less";
+@import "mixins/table-row.less";
+
+// Skins
+@import "mixins/background-variant.less";
+@import "mixins/border-radius.less";
+@import "mixins/gradients.less";
+
+// Layout
+@import "mixins/clearfix.less";
+@import "mixins/center-block.less";
+@import "mixins/nav-vertical-align.less";
+@import "mixins/grid-framework.less";
+@import "mixins/grid.less";
diff --git a/less/bootstrap/mixins/alerts.less b/less/bootstrap/mixins/alerts.less
new file mode 100644
index 0000000..396196f
--- /dev/null
+++ b/less/bootstrap/mixins/alerts.less
@@ -0,0 +1,14 @@
+// Alerts
+
+.alert-variant(@background; @border; @text-color) {
+  background-color: @background;
+  border-color: @border;
+  color: @text-color;
+
+  hr {
+    border-top-color: darken(@border, 5%);
+  }
+  .alert-link {
+    color: darken(@text-color, 10%);
+  }
+}
diff --git a/less/bootstrap/mixins/background-variant.less b/less/bootstrap/mixins/background-variant.less
new file mode 100644
index 0000000..a85c22b
--- /dev/null
+++ b/less/bootstrap/mixins/background-variant.less
@@ -0,0 +1,9 @@
+// Contextual backgrounds
+
+.bg-variant(@color) {
+  background-color: @color;
+  a&:hover,
+  a&:focus {
+    background-color: darken(@color, 10%);
+  }
+}
diff --git a/less/bootstrap/mixins/border-radius.less b/less/bootstrap/mixins/border-radius.less
new file mode 100644
index 0000000..ca05dbf
--- /dev/null
+++ b/less/bootstrap/mixins/border-radius.less
@@ -0,0 +1,18 @@
+// Single side border-radius
+
+.border-top-radius(@radius) {
+  border-top-right-radius: @radius;
+   border-top-left-radius: @radius;
+}
+.border-right-radius(@radius) {
+  border-bottom-right-radius: @radius;
+     border-top-right-radius: @radius;
+}
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius;
+   border-bottom-left-radius: @radius;
+}
+.border-left-radius(@radius) {
+  border-bottom-left-radius: @radius;
+     border-top-left-radius: @radius;
+}
diff --git a/less/bootstrap/mixins/buttons.less b/less/bootstrap/mixins/buttons.less
new file mode 100644
index 0000000..b294d8c
--- /dev/null
+++ b/less/bootstrap/mixins/buttons.less
@@ -0,0 +1,65 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+.button-variant(@color; @background; @border) {
+  color: @color;
+  background-color: @background;
+  border-color: @border;
+
+  &:focus,
+  &.focus {
+    color: @color;
+    background-color: darken(@background, 10%);
+        border-color: darken(@border, 25%);
+  }
+  &:hover {
+    color: @color;
+    background-color: darken(@background, 10%);
+        border-color: darken(@border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    color: @color;
+    background-color: darken(@background, 10%);
+        border-color: darken(@border, 12%);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: @color;
+      background-color: darken(@background, 17%);
+          border-color: darken(@border, 25%);
+    }
+  }
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: @background;
+          border-color: @border;
+    }
+  }
+
+  .badge {
+    color: @background;
+    background-color: @color;
+  }
+}
+
+// Button sizes
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+}
diff --git a/less/bootstrap/mixins/center-block.less b/less/bootstrap/mixins/center-block.less
new file mode 100644
index 0000000..d18d6de
--- /dev/null
+++ b/less/bootstrap/mixins/center-block.less
@@ -0,0 +1,7 @@
+// Center-align a block level element
+
+.center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/less/bootstrap/mixins/clearfix.less b/less/bootstrap/mixins/clearfix.less
new file mode 100644
index 0000000..3f7a382
--- /dev/null
+++ b/less/bootstrap/mixins/clearfix.less
@@ -0,0 +1,22 @@
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+.clearfix() {
+  &:before,
+  &:after {
+    content: " "; // 1
+    display: table; // 2
+  }
+  &:after {
+    clear: both;
+  }
+}
diff --git a/less/bootstrap/mixins/forms.less b/less/bootstrap/mixins/forms.less
new file mode 100644
index 0000000..6f55ed9
--- /dev/null
+++ b/less/bootstrap/mixins/forms.less
@@ -0,0 +1,85 @@
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  &.radio label,
+  &.checkbox label,
+  &.radio-inline label,
+  &.checkbox-inline label  {
+    color: @text-color;
+  }
+  // Set the border and box shadow on specific inputs to match
+  .form-control {
+    border-color: @border-color;
+    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+    &:focus {
+      border-color: darken(@border-color, 10%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
+    }
+  }
+  // Set validation states also for addons
+  .input-group-addon {
+    color: @text-color;
+    border-color: @border-color;
+    background-color: @background-color;
+  }
+  // Optional feedback icon
+  .form-control-feedback {
+    color: @text-color;
+  }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `@input-border-focus` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+.form-control-focus(@color: @input-border-focus) {
+  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+  &:focus {
+    border-color: @color;
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
+  }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  height: @input-height;
+  padding: @padding-vertical @padding-horizontal;
+  font-size: @font-size;
+  line-height: @line-height;
+  border-radius: @border-radius;
+
+  select& {
+    height: @input-height;
+    line-height: @input-height;
+  }
+
+  textarea&,
+  select[multiple]& {
+    height: auto;
+  }
+}
diff --git a/less/bootstrap/mixins/gradients.less b/less/bootstrap/mixins/gradients.less
new file mode 100644
index 0000000..0b88a89
--- /dev/null
+++ b/less/bootstrap/mixins/gradients.less
@@ -0,0 +1,59 @@
+// Gradients
+
+#gradient {
+
+  // Horizontal gradient, from left to right
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
+    background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12
+    background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
+  }
+
+  // Vertical gradient, from top to bottom
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
+    background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent);  // Opera 12
+    background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
+  }
+
+  .directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
+    background-repeat: repeat-x;
+    background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12
+    background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+  }
+  .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
+    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
+    background-repeat: no-repeat;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+  .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
+    background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+    background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+    background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
+    background-repeat: no-repeat;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+  .radial(@inner-color: #555; @outer-color: #333) {
+    background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
+    background-image: radial-gradient(circle, @inner-color, @outer-color);
+    background-repeat: no-repeat;
+  }
+  .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
+    background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+    background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+    background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+  }
+}
diff --git a/less/bootstrap/mixins/grid-framework.less b/less/bootstrap/mixins/grid-framework.less
new file mode 100644
index 0000000..8c23eed
--- /dev/null
+++ b/less/bootstrap/mixins/grid-framework.less
@@ -0,0 +1,91 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `@grid-columns`.
+
+.make-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  .col(@index) { // initial
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
+    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      position: relative;
+      // Prevent columns from collapsing when empty
+      min-height: 1px;
+      // Inner gutter via padding
+      padding-left:  ceil((@grid-gutter-width / 2));
+      padding-right: floor((@grid-gutter-width / 2));
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".col-@{class}-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  .col(@index, @list) when (@index > @grid-columns) { // terminal
+    @{list} {
+      float: left;
+    }
+  }
+  .col(1); // kickstart it
+}
+
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+  .col-@{class}-@{index} {
+    width: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
+  .col-@{class}-push-@{index} {
+    left: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
+  .col-@{class}-push-0 {
+    left: auto;
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
+  .col-@{class}-pull-@{index} {
+    right: percentage((@index / @grid-columns));
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
+  .col-@{class}-pull-0 {
+    right: auto;
+  }
+}
+.calc-grid-column(@index, @class, @type) when (@type = offset) {
+  .col-@{class}-offset-@{index} {
+    margin-left: percentage((@index / @grid-columns));
+  }
+}
+
+// Basic looping in LESS
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+  .calc-grid-column(@index, @class, @type);
+  // next iteration
+  .loop-grid-columns((@index - 1), @class, @type);
+}
+
+// Create grid for specific class
+.make-grid(@class) {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class, width);
+  .loop-grid-columns(@grid-columns, @class, pull);
+  .loop-grid-columns(@grid-columns, @class, push);
+  .loop-grid-columns(@grid-columns, @class, offset);
+}
diff --git a/less/bootstrap/mixins/grid.less b/less/bootstrap/mixins/grid.less
new file mode 100644
index 0000000..df496d0
--- /dev/null
+++ b/less/bootstrap/mixins/grid.less
@@ -0,0 +1,122 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+.container-fixed(@gutter: @grid-gutter-width) {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left:  floor((@gutter / 2));
+  padding-right: ceil((@gutter / 2));
+  &:extend(.clearfix all);
+}
+
+// Creates a wrapper for a series of columns
+.make-row(@gutter: @grid-gutter-width) {
+  margin-left:  ceil((@gutter / -2));
+  margin-right: floor((@gutter / -2));
+  &:extend(.clearfix all);
+}
+
+// Generate the extra small columns
+.make-xs-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  float: left;
+  width: percentage((@columns / @grid-columns));
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+}
+.make-xs-column-offset(@columns) {
+  margin-left: percentage((@columns / @grid-columns));
+}
+.make-xs-column-push(@columns) {
+  left: percentage((@columns / @grid-columns));
+}
+.make-xs-column-pull(@columns) {
+  right: percentage((@columns / @grid-columns));
+}
+
+// Generate the small columns
+.make-sm-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-sm-min) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-sm-column-offset(@columns) {
+  @media (min-width: @screen-sm-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-sm-column-push(@columns) {
+  @media (min-width: @screen-sm-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-sm-column-pull(@columns) {
+  @media (min-width: @screen-sm-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the medium columns
+.make-md-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-md-min) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-offset(@columns) {
+  @media (min-width: @screen-md-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-push(@columns) {
+  @media (min-width: @screen-md-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-md-column-pull(@columns) {
+  @media (min-width: @screen-md-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
+
+// Generate the large columns
+.make-lg-column(@columns; @gutter: @grid-gutter-width) {
+  position: relative;
+  min-height: 1px;
+  padding-left:  (@gutter / 2);
+  padding-right: (@gutter / 2);
+
+  @media (min-width: @screen-lg-min) {
+    float: left;
+    width: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-offset(@columns) {
+  @media (min-width: @screen-lg-min) {
+    margin-left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-push(@columns) {
+  @media (min-width: @screen-lg-min) {
+    left: percentage((@columns / @grid-columns));
+  }
+}
+.make-lg-column-pull(@columns) {
+  @media (min-width: @screen-lg-min) {
+    right: percentage((@columns / @grid-columns));
+  }
+}
diff --git a/less/bootstrap/mixins/hide-text.less b/less/bootstrap/mixins/hide-text.less
new file mode 100644
index 0000000..2bb84a3
--- /dev/null
+++ b/less/bootstrap/mixins/hide-text.less
@@ -0,0 +1,21 @@
+// CSS image replacement
+//
+// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (has been removed in v4)
+.hide-text() {
+  font: ~"0/0" a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+// New mixin to use as of v3.0.1
+.text-hide() {
+  .hide-text();
+}
diff --git a/less/bootstrap/mixins/image.less b/less/bootstrap/mixins/image.less
new file mode 100644
index 0000000..f233cb3
--- /dev/null
+++ b/less/bootstrap/mixins/image.less
@@ -0,0 +1,33 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+.img-responsive(@display: block) {
+  display: @display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size. Note that the
+// spelling of `min--moz-device-pixel-ratio` is intentional.
+.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
+  background-image: url("@{file-1x}");
+
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (   min--moz-device-pixel-ratio: 2),
+  only screen and (     -o-min-device-pixel-ratio: 2/1),
+  only screen and (        min-device-pixel-ratio: 2),
+  only screen and (                min-resolution: 192dpi),
+  only screen and (                min-resolution: 2dppx) {
+    background-image: url("@{file-2x}");
+    background-size: @width-1x @height-1x;
+  }
+}
diff --git a/less/bootstrap/mixins/labels.less b/less/bootstrap/mixins/labels.less
new file mode 100644
index 0000000..9f7a67e
--- /dev/null
+++ b/less/bootstrap/mixins/labels.less
@@ -0,0 +1,12 @@
+// Labels
+
+.label-variant(@color) {
+  background-color: @color;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken(@color, 10%);
+    }
+  }
+}
diff --git a/less/bootstrap/mixins/list-group.less b/less/bootstrap/mixins/list-group.less
new file mode 100644
index 0000000..03aa190
--- /dev/null
+++ b/less/bootstrap/mixins/list-group.less
@@ -0,0 +1,30 @@
+// List Groups
+
+.list-group-item-variant(@state; @background; @color) {
+  .list-group-item-@{state} {
+    color: @color;
+    background-color: @background;
+
+    a&,
+    button& {
+      color: @color;
+
+      .list-group-item-heading {
+        color: inherit;
+      }
+
+      &:hover,
+      &:focus {
+        color: @color;
+        background-color: darken(@background, 5%);
+      }
+      &.active,
+      &.active:hover,
+      &.active:focus {
+        color: #fff;
+        background-color: @color;
+        border-color: @color;
+      }
+    }
+  }
+}
diff --git a/less/bootstrap/mixins/nav-divider.less b/less/bootstrap/mixins/nav-divider.less
new file mode 100644
index 0000000..feb1e9e
--- /dev/null
+++ b/less/bootstrap/mixins/nav-divider.less
@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+.nav-divider(@color: #e5e5e5) {
+  height: 1px;
+  margin: ((@line-height-computed / 2) - 1) 0;
+  overflow: hidden;
+  background-color: @color;
+}
diff --git a/less/bootstrap/mixins/nav-vertical-align.less b/less/bootstrap/mixins/nav-vertical-align.less
new file mode 100644
index 0000000..d458c78
--- /dev/null
+++ b/less/bootstrap/mixins/nav-vertical-align.less
@@ -0,0 +1,9 @@
+// Navbar vertical align
+//
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+
+.navbar-vertical-align(@element-height) {
+  margin-top: ((@navbar-height - @element-height) / 2);
+  margin-bottom: ((@navbar-height - @element-height) / 2);
+}
diff --git a/less/bootstrap/mixins/opacity.less b/less/bootstrap/mixins/opacity.less
new file mode 100644
index 0000000..33ed25c
--- /dev/null
+++ b/less/bootstrap/mixins/opacity.less
@@ -0,0 +1,8 @@
+// Opacity
+
+.opacity(@opacity) {
+  opacity: @opacity;
+  // IE8 filter
+  @opacity-ie: (@opacity * 100);
+  filter: ~"alpha(opacity=@{opacity-ie})";
+}
diff --git a/less/bootstrap/mixins/pagination.less b/less/bootstrap/mixins/pagination.less
new file mode 100644
index 0000000..618804f
--- /dev/null
+++ b/less/bootstrap/mixins/pagination.less
@@ -0,0 +1,24 @@
+// Pagination
+
+.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  > li {
+    > a,
+    > span {
+      padding: @padding-vertical @padding-horizontal;
+      font-size: @font-size;
+      line-height: @line-height;
+    }
+    &:first-child {
+      > a,
+      > span {
+        .border-left-radius(@border-radius);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius);
+      }
+    }
+  }
+}
diff --git a/less/bootstrap/mixins/panels.less b/less/bootstrap/mixins/panels.less
new file mode 100644
index 0000000..49ee10d
--- /dev/null
+++ b/less/bootstrap/mixins/panels.less
@@ -0,0 +1,24 @@
+// Panels
+
+.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
+  border-color: @border;
+
+  & > .panel-heading {
+    color: @heading-text-color;
+    background-color: @heading-bg-color;
+    border-color: @heading-border;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: @border;
+    }
+    .badge {
+      color: @heading-bg-color;
+      background-color: @heading-text-color;
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse > .panel-body {
+      border-bottom-color: @border;
+    }
+  }
+}
diff --git a/less/bootstrap/mixins/progress-bar.less b/less/bootstrap/mixins/progress-bar.less
new file mode 100644
index 0000000..f07996a
--- /dev/null
+++ b/less/bootstrap/mixins/progress-bar.less
@@ -0,0 +1,10 @@
+// Progress bars
+
+.progress-bar-variant(@color) {
+  background-color: @color;
+
+  // Deprecated parent class requirement as of v3.2.0
+  .progress-striped & {
+    #gradient > .striped();
+  }
+}
diff --git a/less/bootstrap/mixins/reset-filter.less b/less/bootstrap/mixins/reset-filter.less
new file mode 100644
index 0000000..68cdb5e
--- /dev/null
+++ b/less/bootstrap/mixins/reset-filter.less
@@ -0,0 +1,8 @@
+// Reset filters for IE
+//
+// When you need to remove a gradient background, do not forget to use this to reset
+// the IE filter for IE9 and below.
+
+.reset-filter() {
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
diff --git a/less/bootstrap/mixins/reset-text.less b/less/bootstrap/mixins/reset-text.less
new file mode 100644
index 0000000..58dd4d1
--- /dev/null
+++ b/less/bootstrap/mixins/reset-text.less
@@ -0,0 +1,18 @@
+.reset-text() {
+  font-family: @font-family-base;
+  // We deliberately do NOT reset font-size.
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: @line-height-base;
+  text-align: left; // Fallback for where `start` is not supported
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}
diff --git a/less/bootstrap/mixins/resize.less b/less/bootstrap/mixins/resize.less
new file mode 100644
index 0000000..3acd3af
--- /dev/null
+++ b/less/bootstrap/mixins/resize.less
@@ -0,0 +1,6 @@
+// Resize anything
+
+.resizable(@direction) {
+  resize: @direction; // Options: horizontal, vertical, both
+  overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+}
diff --git a/less/bootstrap/mixins/responsive-visibility.less b/less/bootstrap/mixins/responsive-visibility.less
new file mode 100644
index 0000000..ecf1e97
--- /dev/null
+++ b/less/bootstrap/mixins/responsive-visibility.less
@@ -0,0 +1,15 @@
+// Responsive utilities
+
+//
+// More easily include all the states for responsive-utilities.less.
+.responsive-visibility() {
+  display: block !important;
+  table&  { display: table !important; }
+  tr&     { display: table-row !important; }
+  th&,
+  td&     { display: table-cell !important; }
+}
+
+.responsive-invisibility() {
+  display: none !important;
+}
diff --git a/less/bootstrap/mixins/size.less b/less/bootstrap/mixins/size.less
new file mode 100644
index 0000000..a8be650
--- /dev/null
+++ b/less/bootstrap/mixins/size.less
@@ -0,0 +1,10 @@
+// Sizing shortcuts
+
+.size(@width; @height) {
+  width: @width;
+  height: @height;
+}
+
+.square(@size) {
+  .size(@size; @size);
+}
diff --git a/less/bootstrap/mixins/tab-focus.less b/less/bootstrap/mixins/tab-focus.less
new file mode 100644
index 0000000..d12d236
--- /dev/null
+++ b/less/bootstrap/mixins/tab-focus.less
@@ -0,0 +1,9 @@
+// WebKit-style focus
+
+.tab-focus() {
+  // WebKit-specific. Other browsers will keep their default outline style.
+  // (Initially tried to also force default via `outline: initial`,
+  // but that seems to erroneously remove the outline in Firefox altogether.)
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
diff --git a/less/bootstrap/mixins/table-row.less b/less/bootstrap/mixins/table-row.less
new file mode 100644
index 0000000..0f287f1
--- /dev/null
+++ b/less/bootstrap/mixins/table-row.less
@@ -0,0 +1,28 @@
+// Tables
+
+.table-row-variant(@state; @background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.@{state},
+    > th.@{state},
+    &.@{state} > td,
+    &.@{state} > th {
+      background-color: @background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td,
+    &:hover > .@{state},
+    &.@{state}:hover > th {
+      background-color: darken(@background, 5%);
+    }
+  }
+}
diff --git a/less/bootstrap/mixins/text-emphasis.less b/less/bootstrap/mixins/text-emphasis.less
new file mode 100644
index 0000000..9e8a77a
--- /dev/null
+++ b/less/bootstrap/mixins/text-emphasis.less
@@ -0,0 +1,9 @@
+// Typography
+
+.text-emphasis-variant(@color) {
+  color: @color;
+  a&:hover,
+  a&:focus {
+    color: darken(@color, 10%);
+  }
+}
diff --git a/less/bootstrap/mixins/text-overflow.less b/less/bootstrap/mixins/text-overflow.less
new file mode 100644
index 0000000..c11ad2f
--- /dev/null
+++ b/less/bootstrap/mixins/text-overflow.less
@@ -0,0 +1,8 @@
+// Text overflow
+// Requires inline-block or block for proper styling
+
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/less/bootstrap/mixins/vendor-prefixes.less b/less/bootstrap/mixins/vendor-prefixes.less
new file mode 100644
index 0000000..2b5e74b
--- /dev/null
+++ b/less/bootstrap/mixins/vendor-prefixes.less
@@ -0,0 +1,227 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They have been removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+
+
+// Animations
+.animation(@animation) {
+  -webkit-animation: @animation;
+       -o-animation: @animation;
+          animation: @animation;
+}
+.animation-name(@name) {
+  -webkit-animation-name: @name;
+          animation-name: @name;
+}
+.animation-duration(@duration) {
+  -webkit-animation-duration: @duration;
+          animation-duration: @duration;
+}
+.animation-timing-function(@timing-function) {
+  -webkit-animation-timing-function: @timing-function;
+          animation-timing-function: @timing-function;
+}
+.animation-delay(@delay) {
+  -webkit-animation-delay: @delay;
+          animation-delay: @delay;
+}
+.animation-iteration-count(@iteration-count) {
+  -webkit-animation-iteration-count: @iteration-count;
+          animation-iteration-count: @iteration-count;
+}
+.animation-direction(@direction) {
+  -webkit-animation-direction: @direction;
+          animation-direction: @direction;
+}
+.animation-fill-mode(@fill-mode) {
+  -webkit-animation-fill-mode: @fill-mode;
+          animation-fill-mode: @fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+.backface-visibility(@visibility) {
+  -webkit-backface-visibility: @visibility;
+     -moz-backface-visibility: @visibility;
+          backface-visibility: @visibility;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+
+.box-shadow(@shadow) {
+  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
+          box-shadow: @shadow;
+}
+
+// Box sizing
+.box-sizing(@boxmodel) {
+  -webkit-box-sizing: @boxmodel;
+     -moz-box-sizing: @boxmodel;
+          box-sizing: @boxmodel;
+}
+
+// CSS3 Content Columns
+.content-columns(@column-count; @column-gap: @grid-gutter-width) {
+  -webkit-column-count: @column-count;
+     -moz-column-count: @column-count;
+          column-count: @column-count;
+  -webkit-column-gap: @column-gap;
+     -moz-column-gap: @column-gap;
+          column-gap: @column-gap;
+}
+
+// Optional hyphenation
+.hyphens(@mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: @mode;
+     -moz-hyphens: @mode;
+      -ms-hyphens: @mode; // IE10+
+       -o-hyphens: @mode;
+          hyphens: @mode;
+}
+
+// Placeholder text
+.placeholder(@color: @input-color-placeholder) {
+  // Firefox
+  &::-moz-placeholder {
+    color: @color;
+    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+  }
+  &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
+  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
+}
+
+// Transformations
+.scale(@ratio) {
+  -webkit-transform: scale(@ratio);
+      -ms-transform: scale(@ratio); // IE9 only
+       -o-transform: scale(@ratio);
+          transform: scale(@ratio);
+}
+.scale(@ratioX; @ratioY) {
+  -webkit-transform: scale(@ratioX, @ratioY);
+      -ms-transform: scale(@ratioX, @ratioY); // IE9 only
+       -o-transform: scale(@ratioX, @ratioY);
+          transform: scale(@ratioX, @ratioY);
+}
+.scaleX(@ratio) {
+  -webkit-transform: scaleX(@ratio);
+      -ms-transform: scaleX(@ratio); // IE9 only
+       -o-transform: scaleX(@ratio);
+          transform: scaleX(@ratio);
+}
+.scaleY(@ratio) {
+  -webkit-transform: scaleY(@ratio);
+      -ms-transform: scaleY(@ratio); // IE9 only
+       -o-transform: scaleY(@ratio);
+          transform: scaleY(@ratio);
+}
+.skew(@x; @y) {
+  -webkit-transform: skewX(@x) skewY(@y);
+      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+       -o-transform: skewX(@x) skewY(@y);
+          transform: skewX(@x) skewY(@y);
+}
+.translate(@x; @y) {
+  -webkit-transform: translate(@x, @y);
+      -ms-transform: translate(@x, @y); // IE9 only
+       -o-transform: translate(@x, @y);
+          transform: translate(@x, @y);
+}
+.translate3d(@x; @y; @z) {
+  -webkit-transform: translate3d(@x, @y, @z);
+          transform: translate3d(@x, @y, @z);
+}
+.rotate(@degrees) {
+  -webkit-transform: rotate(@degrees);
+      -ms-transform: rotate(@degrees); // IE9 only
+       -o-transform: rotate(@degrees);
+          transform: rotate(@degrees);
+}
+.rotateX(@degrees) {
+  -webkit-transform: rotateX(@degrees);
+      -ms-transform: rotateX(@degrees); // IE9 only
+       -o-transform: rotateX(@degrees);
+          transform: rotateX(@degrees);
+}
+.rotateY(@degrees) {
+  -webkit-transform: rotateY(@degrees);
+      -ms-transform: rotateY(@degrees); // IE9 only
+       -o-transform: rotateY(@degrees);
+          transform: rotateY(@degrees);
+}
+.perspective(@perspective) {
+  -webkit-perspective: @perspective;
+     -moz-perspective: @perspective;
+          perspective: @perspective;
+}
+.perspective-origin(@perspective) {
+  -webkit-perspective-origin: @perspective;
+     -moz-perspective-origin: @perspective;
+          perspective-origin: @perspective;
+}
+.transform-origin(@origin) {
+  -webkit-transform-origin: @origin;
+     -moz-transform-origin: @origin;
+      -ms-transform-origin: @origin; // IE9 only
+          transform-origin: @origin;
+}
+
+
+// Transitions
+
+.transition(@transition) {
+  -webkit-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+.transition-property(@transition-property) {
+  -webkit-transition-property: @transition-property;
+          transition-property: @transition-property;
+}
+.transition-delay(@transition-delay) {
+  -webkit-transition-delay: @transition-delay;
+          transition-delay: @transition-delay;
+}
+.transition-duration(@transition-duration) {
+  -webkit-transition-duration: @transition-duration;
+          transition-duration: @transition-duration;
+}
+.transition-timing-function(@timing-function) {
+  -webkit-transition-timing-function: @timing-function;
+          transition-timing-function: @timing-function;
+}
+.transition-transform(@transition) {
+  -webkit-transition: -webkit-transform @transition;
+     -moz-transition: -moz-transform @transition;
+       -o-transition: -o-transform @transition;
+          transition: transform @transition;
+}
+
+
+// User select
+// For selecting text on the page
+
+.user-select(@select) {
+  -webkit-user-select: @select;
+     -moz-user-select: @select;
+      -ms-user-select: @select; // IE10+
+          user-select: @select;
+}
diff --git a/less/bootstrap/modals.less b/less/bootstrap/modals.less
new file mode 100644
index 0000000..767ce36
--- /dev/null
+++ b/less/bootstrap/modals.less
@@ -0,0 +1,150 @@
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal;
+  -webkit-overflow-scrolling: touch;
+
+  // Prevent Chrome on Windows from adding a focus outline. For details, see
+  // https://github.com/twbs/bootstrap/pull/10951.
+  outline: 0;
+
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    .translate(0, -25%);
+    .transition-transform(~"0.3s ease-out");
+  }
+  &.in .modal-dialog { .translate(0, 0) }
+}
+.modal-open .modal {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 10px;
+}
+
+// Actual modal
+.modal-content {
+  position: relative;
+  background-color: @modal-content-bg;
+  border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+  border: 1px solid @modal-content-border-color;
+  border-radius: @border-radius-large;
+  .box-shadow(0 3px 9px rgba(0,0,0,.5));
+  background-clip: padding-box;
+  // Remove focus outline from opened modal
+  outline: 0;
+}
+
+// Modal background
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: @zindex-modal-background;
+  background-color: @modal-backdrop-bg;
+  // Fade for backdrop
+  &.fade { .opacity(0); }
+  &.in { .opacity(@modal-backdrop-opacity); }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+  padding: @modal-title-padding;
+  border-bottom: 1px solid @modal-header-border-color;
+  &:extend(.clearfix all);
+}
+// Close icon
+.modal-header .close {
+  margin-top: -2px;
+}
+
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: @modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+  position: relative;
+  padding: @modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+  padding: @modal-inner-padding;
+  text-align: right; // right align buttons
+  border-top: 1px solid @modal-footer-border-color;
+  &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: 5px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+  // and override it for block buttons as well
+  .btn-block + .btn-block {
+    margin-left: 0;
+  }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+  position: absolute;
+  top: -9999px;
+  width: 50px;
+  height: 50px;
+  overflow: scroll;
+}
+
+// Scale up the modal
+@media (min-width: @screen-sm-min) {
+  // Automatically set modal's width for larger viewports
+  .modal-dialog {
+    width: @modal-md;
+    margin: 30px auto;
+  }
+  .modal-content {
+    .box-shadow(0 5px 15px rgba(0,0,0,.5));
+  }
+
+  // Modal sizes
+  .modal-sm { width: @modal-sm; }
+}
+
+@media (min-width: @screen-md-min) {
+  .modal-lg { width: @modal-lg; }
+}
diff --git a/less/bootstrap/navbar.less b/less/bootstrap/navbar.less
new file mode 100644
index 0000000..6d751bb
--- /dev/null
+++ b/less/bootstrap/navbar.less
@@ -0,0 +1,660 @@
+//
+// Navbars
+// --------------------------------------------------
+
+
+// Wrapper and base class
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+  position: relative;
+  min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+  margin-bottom: @navbar-margin-bottom;
+  border: 1px solid transparent;
+
+  // Prevent floats from breaking the navbar
+  &:extend(.clearfix all);
+
+  @media (min-width: @grid-float-breakpoint) {
+    border-radius: @navbar-border-radius;
+  }
+}
+
+
+// Navbar heading
+//
+// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
+// styling of responsive aspects.
+
+.navbar-header {
+  &:extend(.clearfix all);
+
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+  }
+}
+
+
+// Navbar collapse (body)
+//
+// Group your navbar content into this for easy collapsing and expanding across
+// various device sizes. By default, this content is collapsed when <768px, but
+// will expand past that for a horizontal display.
+//
+// To start (on mobile devices) the navbar links, forms, and buttons are stacked
+// vertically and include a `max-height` to overflow in case you have too much
+// content for the user's viewport.
+
+.navbar-collapse {
+  overflow-x: visible;
+  padding-right: @navbar-padding-horizontal;
+  padding-left:  @navbar-padding-horizontal;
+  border-top: 1px solid transparent;
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+  &:extend(.clearfix all);
+  -webkit-overflow-scrolling: touch;
+
+  &.in {
+    overflow-y: auto;
+  }
+
+  @media (min-width: @grid-float-breakpoint) {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+
+    &.collapse {
+      display: block !important;
+      height: auto !important;
+      padding-bottom: 0; // Override default setting
+      overflow: visible !important;
+    }
+
+    &.in {
+      overflow-y: visible;
+    }
+
+    // Undo the collapse side padding for navbars with containers to ensure
+    // alignment of right-aligned contents.
+    .navbar-fixed-top &,
+    .navbar-static-top &,
+    .navbar-fixed-bottom & {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  .navbar-collapse {
+    max-height: @navbar-collapse-max-height;
+
+    @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
+      max-height: 200px;
+    }
+  }
+}
+
+
+// Both navbar header and collapse
+//
+// When a container is present, change the behavior of the header and collapse.
+
+.container,
+.container-fluid {
+  > .navbar-header,
+  > .navbar-collapse {
+    margin-right: -@navbar-padding-horizontal;
+    margin-left:  -@navbar-padding-horizontal;
+
+    @media (min-width: @grid-float-breakpoint) {
+      margin-right: 0;
+      margin-left:  0;
+    }
+  }
+}
+
+
+//
+// Navbar alignment options
+//
+// Display the navbar across the entirety of the page or fixed it to the top or
+// bottom of the page.
+
+// Static top (unfixed, but 100% wide) navbar
+.navbar-static-top {
+  z-index: @zindex-navbar;
+  border-width: 0 0 1px;
+
+  @media (min-width: @grid-float-breakpoint) {
+    border-radius: 0;
+  }
+}
+
+// Fix the top/bottom navbars when screen real estate supports it
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  position: fixed;
+  right: 0;
+  left: 0;
+  z-index: @zindex-navbar-fixed;
+
+  // Undo the rounded corners
+  @media (min-width: @grid-float-breakpoint) {
+    border-radius: 0;
+  }
+}
+.navbar-fixed-top {
+  top: 0;
+  border-width: 0 0 1px;
+}
+.navbar-fixed-bottom {
+  bottom: 0;
+  margin-bottom: 0; // override .navbar defaults
+  border-width: 1px 0 0;
+}
+
+
+// Brand/project name
+
+.navbar-brand {
+  float: left;
+  padding: @navbar-padding-vertical @navbar-padding-horizontal;
+  font-size: @font-size-large;
+  line-height: @line-height-computed;
+  height: @navbar-height;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+
+  > img {
+    display: block;
+  }
+
+  @media (min-width: @grid-float-breakpoint) {
+    .navbar > .container &,
+    .navbar > .container-fluid & {
+      margin-left: -@navbar-padding-horizontal;
+    }
+  }
+}
+
+
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
+
+.navbar-toggle {
+  position: relative;
+  float: right;
+  margin-right: @navbar-padding-horizontal;
+  padding: 9px 10px;
+  .navbar-vertical-align(34px);
+  background-color: transparent;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid transparent;
+  border-radius: @border-radius-base;
+
+  // We remove the `outline` here, but later compensate by attaching `:hover`
+  // styles to `:focus`.
+  &:focus {
+    outline: 0;
+  }
+
+  // Bars
+  .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+  }
+  .icon-bar + .icon-bar {
+    margin-top: 4px;
+  }
+
+  @media (min-width: @grid-float-breakpoint) {
+    display: none;
+  }
+}
+
+
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+
+.navbar-nav {
+  margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
+
+  > li > a {
+    padding-top:    10px;
+    padding-bottom: 10px;
+    line-height: @line-height-computed;
+  }
+
+  @media (max-width: @grid-float-breakpoint-max) {
+    // Dropdowns get custom display when collapsed
+    .open .dropdown-menu {
+      position: static;
+      float: none;
+      width: auto;
+      margin-top: 0;
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+      > li > a,
+      .dropdown-header {
+        padding: 5px 15px 5px 25px;
+      }
+      > li > a {
+        line-height: @line-height-computed;
+        &:hover,
+        &:focus {
+          background-image: none;
+        }
+      }
+    }
+  }
+
+  // Uncollapse the nav
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    margin: 0;
+
+    > li {
+      float: left;
+      > a {
+        padding-top:    @navbar-padding-vertical;
+        padding-bottom: @navbar-padding-vertical;
+      }
+    }
+  }
+}
+
+
+// Navbar form
+//
+// Extension of the `.form-inline` with some extra flavor for optimum display in
+// our navbars.
+
+.navbar-form {
+  margin-left: -@navbar-padding-horizontal;
+  margin-right: -@navbar-padding-horizontal;
+  padding: 10px @navbar-padding-horizontal;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+  .box-shadow(@shadow);
+
+  // Mixin behavior for optimum display
+  .form-inline();
+
+  .form-group {
+    @media (max-width: @grid-float-breakpoint-max) {
+      margin-bottom: 5px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // Vertically center in expanded, horizontal navbar
+  .navbar-vertical-align(@input-height-base);
+
+  // Undo 100% width for pull classes
+  @media (min-width: @grid-float-breakpoint) {
+    width: auto;
+    border: 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    .box-shadow(none);
+  }
+}
+
+
+// Dropdown menus
+
+// Menu position and menu carets
+.navbar-nav > li > .dropdown-menu {
+  margin-top: 0;
+  .border-top-radius(0);
+}
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+  margin-bottom: 0;
+  .border-top-radius(@navbar-border-radius);
+  .border-bottom-radius(0);
+}
+
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-btn {
+  .navbar-vertical-align(@input-height-base);
+
+  &.btn-sm {
+    .navbar-vertical-align(@input-height-small);
+  }
+  &.btn-xs {
+    .navbar-vertical-align(22);
+  }
+}
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+  .navbar-vertical-align(@line-height-computed);
+
+  @media (min-width: @grid-float-breakpoint) {
+    float: left;
+    margin-left: @navbar-padding-horizontal;
+    margin-right: @navbar-padding-horizontal;
+  }
+}
+
+
+// Component alignment
+//
+// Repurpose the pull utilities as their own navbar utilities to avoid specificity
+// issues with parents and chaining. Only do this when the navbar is uncollapsed
+// though so that navbar contents properly stack and align in mobile.
+//
+// Declared after the navbar components to ensure more specificity on the margins.
+
+@media (min-width: @grid-float-breakpoint) {
+  .navbar-left  { .pull-left(); }
+  .navbar-right {
+    .pull-right();
+    margin-right: -@navbar-padding-horizontal;
+
+    ~ .navbar-right {
+      margin-right: 0;
+    }
+  }
+}
+
+
+// Alternate navbars
+// --------------------------------------------------
+
+// Default navbar
+.navbar-default {
+  background-color: @navbar-default-bg;
+  border-color: @navbar-default-border;
+
+  .navbar-brand {
+    color: @navbar-default-brand-color;
+    &:hover,
+    &:focus {
+      color: @navbar-default-brand-hover-color;
+      background-color: @navbar-default-brand-hover-bg;
+    }
+  }
+
+  .navbar-text {
+    color: @navbar-default-color;
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: @navbar-default-link-color;
+
+      &:hover,
+      &:focus {
+        color: @navbar-default-link-hover-color;
+        background-color: @navbar-default-link-hover-bg;
+      }
+    }
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @navbar-default-link-active-color;
+        background-color: @navbar-default-link-active-bg;
+      }
+    }
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @navbar-default-link-disabled-color;
+        background-color: @navbar-default-link-disabled-bg;
+      }
+    }
+  }
+
+  .navbar-toggle {
+    border-color: @navbar-default-toggle-border-color;
+    &:hover,
+    &:focus {
+      background-color: @navbar-default-toggle-hover-bg;
+    }
+    .icon-bar {
+      background-color: @navbar-default-toggle-icon-bar-bg;
+    }
+  }
+
+  .navbar-collapse,
+  .navbar-form {
+    border-color: @navbar-default-border;
+  }
+
+  // Dropdown menu items
+  .navbar-nav {
+    // Remove background color from open dropdown
+    > .open > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: @navbar-default-link-active-bg;
+        color: @navbar-default-link-active-color;
+      }
+    }
+
+    @media (max-width: @grid-float-breakpoint-max) {
+      // Dropdowns get custom display when collapsed
+      .open .dropdown-menu {
+        > li > a {
+          color: @navbar-default-link-color;
+          &:hover,
+          &:focus {
+            color: @navbar-default-link-hover-color;
+            background-color: @navbar-default-link-hover-bg;
+          }
+        }
+        > .active > a {
+          &,
+          &:hover,
+          &:focus {
+            color: @navbar-default-link-active-color;
+            background-color: @navbar-default-link-active-bg;
+          }
+        }
+        > .disabled > a {
+          &,
+          &:hover,
+          &:focus {
+            color: @navbar-default-link-disabled-color;
+            background-color: @navbar-default-link-disabled-bg;
+          }
+        }
+      }
+    }
+  }
+
+
+  // Links in navbars
+  //
+  // Add a class to ensure links outside the navbar nav are colored correctly.
+
+  .navbar-link {
+    color: @navbar-default-link-color;
+    &:hover {
+      color: @navbar-default-link-hover-color;
+    }
+  }
+
+  .btn-link {
+    color: @navbar-default-link-color;
+    &:hover,
+    &:focus {
+      color: @navbar-default-link-hover-color;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:focus {
+        color: @navbar-default-link-disabled-color;
+      }
+    }
+  }
+}
+
+// Inverse navbar
+
+.navbar-inverse {
+  background-color: @navbar-inverse-bg;
+  border-color: @navbar-inverse-border;
+
+  .navbar-brand {
+    color: @navbar-inverse-brand-color;
+    &:hover,
+    &:focus {
+      color: @navbar-inverse-brand-hover-color;
+      background-color: @navbar-inverse-brand-hover-bg;
+    }
+  }
+
+  .navbar-text {
+    color: @navbar-inverse-color;
+  }
+
+  .navbar-nav {
+    > li > a {
+      color: @navbar-inverse-link-color;
+
+      &:hover,
+      &:focus {
+        color: @navbar-inverse-link-hover-color;
+        background-color: @navbar-inverse-link-hover-bg;
+      }
+    }
+    > .active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @navbar-inverse-link-active-color;
+        background-color: @navbar-inverse-link-active-bg;
+      }
+    }
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @navbar-inverse-link-disabled-color;
+        background-color: @navbar-inverse-link-disabled-bg;
+      }
+    }
+  }
+
+  // Darken the responsive nav toggle
+  .navbar-toggle {
+    border-color: @navbar-inverse-toggle-border-color;
+    &:hover,
+    &:focus {
+      background-color: @navbar-inverse-toggle-hover-bg;
+    }
+    .icon-bar {
+      background-color: @navbar-inverse-toggle-icon-bar-bg;
+    }
+  }
+
+  .navbar-collapse,
+  .navbar-form {
+    border-color: darken(@navbar-inverse-bg, 7%);
+  }
+
+  // Dropdowns
+  .navbar-nav {
+    > .open > a {
+      &,
+      &:hover,
+      &:focus {
+        background-color: @navbar-inverse-link-active-bg;
+        color: @navbar-inverse-link-active-color;
+      }
+    }
+
+    @media (max-width: @grid-float-breakpoint-max) {
+      // Dropdowns get custom display
+      .open .dropdown-menu {
+        > .dropdown-header {
+          border-color: @navbar-inverse-border;
+        }
+        .divider {
+          background-color: @navbar-inverse-border;
+        }
+        > li > a {
+          color: @navbar-inverse-link-color;
+          &:hover,
+          &:focus {
+            color: @navbar-inverse-link-hover-color;
+            background-color: @navbar-inverse-link-hover-bg;
+          }
+        }
+        > .active > a {
+          &,
+          &:hover,
+          &:focus {
+            color: @navbar-inverse-link-active-color;
+            background-color: @navbar-inverse-link-active-bg;
+          }
+        }
+        > .disabled > a {
+          &,
+          &:hover,
+          &:focus {
+            color: @navbar-inverse-link-disabled-color;
+            background-color: @navbar-inverse-link-disabled-bg;
+          }
+        }
+      }
+    }
+  }
+
+  .navbar-link {
+    color: @navbar-inverse-link-color;
+    &:hover {
+      color: @navbar-inverse-link-hover-color;
+    }
+  }
+
+  .btn-link {
+    color: @navbar-inverse-link-color;
+    &:hover,
+    &:focus {
+      color: @navbar-inverse-link-hover-color;
+    }
+    &[disabled],
+    fieldset[disabled] & {
+      &:hover,
+      &:focus {
+        color: @navbar-inverse-link-disabled-color;
+      }
+    }
+  }
+}
diff --git a/less/bootstrap/navs.less b/less/bootstrap/navs.less
new file mode 100644
index 0000000..a3d11b1
--- /dev/null
+++ b/less/bootstrap/navs.less
@@ -0,0 +1,242 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// Base class
+// --------------------------------------------------
+
+.nav {
+  margin-bottom: 0;
+  padding-left: 0; // Override default ul/ol
+  list-style: none;
+  &:extend(.clearfix all);
+
+  > li {
+    position: relative;
+    display: block;
+
+    > a {
+      position: relative;
+      display: block;
+      padding: @nav-link-padding;
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: @nav-link-hover-bg;
+      }
+    }
+
+    // Disabled state sets text to gray and nukes hover/tab effects
+    &.disabled > a {
+      color: @nav-disabled-link-color;
+
+      &:hover,
+      &:focus {
+        color: @nav-disabled-link-hover-color;
+        text-decoration: none;
+        background-color: transparent;
+        cursor: @cursor-disabled;
+      }
+    }
+  }
+
+  // Open dropdowns
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: @nav-link-hover-bg;
+      border-color: @link-color;
+    }
+  }
+
+  // Nav dividers (deprecated with v3.0.1)
+  //
+  // This should have been removed in v3 with the dropping of `.nav-list`, but
+  // we missed it. We don't currently support this anywhere, but in the interest
+  // of maintaining backward compatibility in case you use it, it's deprecated.
+  .nav-divider {
+    .nav-divider();
+  }
+
+  // Prevent IE8 from misplacing imgs
+  //
+  // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+  > li > a > img {
+    max-width: none;
+  }
+}
+
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+.nav-tabs {
+  border-bottom: 1px solid @nav-tabs-border-color;
+  > li {
+    float: left;
+    // Make the list-items overlay the bottom border
+    margin-bottom: -1px;
+
+    // Actual tabs (as links)
+    > a {
+      margin-right: 2px;
+      line-height: @line-height-base;
+      border: 1px solid transparent;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+      &:hover {
+        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
+      }
+    }
+
+    // Active state, and its :hover to override normal :hover
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-tabs-active-link-hover-color;
+        background-color: @nav-tabs-active-link-hover-bg;
+        border: 1px solid @nav-tabs-active-link-hover-border-color;
+        border-bottom-color: transparent;
+        cursor: default;
+      }
+    }
+  }
+  // pulling this in mainly for less shorthand
+  &.nav-justified {
+    .nav-justified();
+    .nav-tabs-justified();
+  }
+}
+
+
+// Pills
+// -------------------------
+.nav-pills {
+  > li {
+    float: left;
+
+    // Links rendered as pills
+    > a {
+      border-radius: @nav-pills-border-radius;
+    }
+    + li {
+      margin-left: 2px;
+    }
+
+    // Active state
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @nav-pills-active-link-hover-color;
+        background-color: @nav-pills-active-link-hover-bg;
+      }
+    }
+  }
+}
+
+
+// Stacked pills
+.nav-stacked {
+  > li {
+    float: none;
+    + li {
+      margin-top: 2px;
+      margin-left: 0; // no need for this gap between nav items
+    }
+  }
+}
+
+
+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+  width: 100%;
+
+  > li {
+    float: none;
+    > a {
+      text-align: center;
+      margin-bottom: 5px;
+    }
+  }
+
+  > .dropdown .dropdown-menu {
+    top: auto;
+    left: auto;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    > li {
+      display: table-cell;
+      width: 1%;
+      > a {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+.nav-tabs-justified {
+  border-bottom: 0;
+
+  > li > a {
+    // Override margin from .nav-tabs
+    margin-right: 0;
+    border-radius: @border-radius-base;
+  }
+
+  > .active > a,
+  > .active > a:hover,
+  > .active > a:focus {
+    border: 1px solid @nav-tabs-justified-link-border-color;
+  }
+
+  @media (min-width: @screen-sm-min) {
+    > li > a {
+      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+    > .active > a,
+    > .active > a:hover,
+    > .active > a:focus {
+      border-bottom-color: @nav-tabs-justified-active-link-border-color;
+    }
+  }
+}
+
+
+// Tabbable tabs
+// -------------------------
+
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+  > .tab-pane {
+    display: none;
+  }
+  > .active {
+    display: block;
+  }
+}
+
+
+// Dropdowns
+// -------------------------
+
+// Specific dropdowns
+.nav-tabs .dropdown-menu {
+  // make dropdown border overlap tab border
+  margin-top: -1px;
+  // Remove the top rounded corners here since there is a hard edge above the menu
+  .border-top-radius(0);
+}
diff --git a/less/bootstrap/normalize.less b/less/bootstrap/normalize.less
new file mode 100644
index 0000000..9dddf73
--- /dev/null
+++ b/less/bootstrap/normalize.less
@@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+//
+// 1. Set default font family to sans-serif.
+// 2. Prevent iOS and IE text size adjust after device orientation change,
+//    without disabling user zoom.
+//
+
+html {
+  font-family: sans-serif; // 1
+  -ms-text-size-adjust: 100%; // 2
+  -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+  margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; // 1
+  vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+  display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+  background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+  border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+  margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+  overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+//    Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; // 1
+  font: inherit; // 2
+  margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+  overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+//    `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; // 2
+  cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+  line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; // 1
+  padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+//
+
+input[type="search"] {
+  -webkit-appearance: textfield; // 1
+  box-sizing: content-box; //2
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+  border: 0; // 1
+  padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+  overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/less/bootstrap/pager.less b/less/bootstrap/pager.less
new file mode 100644
index 0000000..41abaaa
--- /dev/null
+++ b/less/bootstrap/pager.less
@@ -0,0 +1,54 @@
+//
+// Pager pagination
+// --------------------------------------------------
+
+
+.pager {
+  padding-left: 0;
+  margin: @line-height-computed 0;
+  list-style: none;
+  text-align: center;
+  &:extend(.clearfix all);
+  li {
+    display: inline;
+    > a,
+    > span {
+      display: inline-block;
+      padding: 5px 14px;
+      background-color: @pager-bg;
+      border: 1px solid @pager-border;
+      border-radius: @pager-border-radius;
+    }
+
+    > a:hover,
+    > a:focus {
+      text-decoration: none;
+      background-color: @pager-hover-bg;
+    }
+  }
+
+  .next {
+    > a,
+    > span {
+      float: right;
+    }
+  }
+
+  .previous {
+    > a,
+    > span {
+      float: left;
+    }
+  }
+
+  .disabled {
+    > a,
+    > a:hover,
+    > a:focus,
+    > span {
+      color: @pager-disabled-color;
+      background-color: @pager-bg;
+      cursor: @cursor-disabled;
+    }
+  }
+}
diff --git a/less/bootstrap/pagination.less b/less/bootstrap/pagination.less
new file mode 100644
index 0000000..31f77aa
--- /dev/null
+++ b/less/bootstrap/pagination.less
@@ -0,0 +1,89 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: @line-height-computed 0;
+  border-radius: @border-radius-base;
+
+  > li {
+    display: inline; // Remove list-style and block-level defaults
+    > a,
+    > span {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: @padding-base-vertical @padding-base-horizontal;
+      line-height: @line-height-base;
+      text-decoration: none;
+      color: @pagination-color;
+      background-color: @pagination-bg;
+      border: 1px solid @pagination-border;
+      margin-left: -1px;
+    }
+    &:first-child {
+      > a,
+      > span {
+        margin-left: 0;
+        .border-left-radius(@border-radius-base);
+      }
+    }
+    &:last-child {
+      > a,
+      > span {
+        .border-right-radius(@border-radius-base);
+      }
+    }
+  }
+
+  > li > a,
+  > li > span {
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: @pagination-hover-color;
+      background-color: @pagination-hover-bg;
+      border-color: @pagination-hover-border;
+    }
+  }
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 3;
+      color: @pagination-active-color;
+      background-color: @pagination-active-bg;
+      border-color: @pagination-active-border;
+      cursor: default;
+    }
+  }
+
+  > .disabled {
+    > span,
+    > span:hover,
+    > span:focus,
+    > a,
+    > a:hover,
+    > a:focus {
+      color: @pagination-disabled-color;
+      background-color: @pagination-disabled-bg;
+      border-color: @pagination-disabled-border;
+      cursor: @cursor-disabled;
+    }
+  }
+}
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-lg {
+  .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
+}
+
+// Small
+.pagination-sm {
+  .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+}
diff --git a/less/bootstrap/panels.less b/less/bootstrap/panels.less
new file mode 100644
index 0000000..65aa3a8
--- /dev/null
+++ b/less/bootstrap/panels.less
@@ -0,0 +1,271 @@
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+  margin-bottom: @line-height-computed;
+  background-color: @panel-bg;
+  border: 1px solid transparent;
+  border-radius: @panel-border-radius;
+  .box-shadow(0 1px 1px rgba(0,0,0,.05));
+}
+
+// Panel contents
+.panel-body {
+  padding: @panel-body-padding;
+  &:extend(.clearfix all);
+}
+
+// Optional heading
+.panel-heading {
+  padding: @panel-heading-padding;
+  border-bottom: 1px solid transparent;
+  .border-top-radius((@panel-border-radius - 1));
+
+  > .dropdown .dropdown-toggle {
+    color: inherit;
+  }
+}
+
+// Within heading, strip any `h*` tag of its default margins for spacing.
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: ceil((@font-size-base * 1.125));
+  color: inherit;
+
+  > a,
+  > small,
+  > .small,
+  > small > a,
+  > .small > a {
+    color: inherit;
+  }
+}
+
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+  padding: @panel-footer-padding;
+  background-color: @panel-footer-bg;
+  border-top: 1px solid @panel-inner-border;
+  .border-bottom-radius((@panel-border-radius - 1));
+}
+
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+  > .list-group,
+  > .panel-collapse > .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+      border-radius: 0;
+    }
+
+    // Add border top radius for first one
+    &:first-child {
+      .list-group-item:first-child {
+        border-top: 0;
+        .border-top-radius((@panel-border-radius - 1));
+      }
+    }
+
+    // Add border bottom radius for last one
+    &:last-child {
+      .list-group-item:last-child {
+        border-bottom: 0;
+        .border-bottom-radius((@panel-border-radius - 1));
+      }
+    }
+  }
+  > .panel-heading + .panel-collapse > .list-group {
+    .list-group-item:first-child {
+      .border-top-radius(0);
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+.list-group + .panel-footer {
+  border-top-width: 0;
+}
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  > .table,
+  > .table-responsive > .table,
+  > .panel-collapse > .table {
+    margin-bottom: 0;
+
+    caption {
+      padding-left: @panel-body-padding;
+      padding-right: @panel-body-padding;
+    }
+  }
+  // Add border top radius for first one
+  > .table:first-child,
+  > .table-responsive:first-child > .table:first-child {
+    .border-top-radius((@panel-border-radius - 1));
+
+    > thead:first-child,
+    > tbody:first-child {
+      > tr:first-child {
+        border-top-left-radius: (@panel-border-radius - 1);
+        border-top-right-radius: (@panel-border-radius - 1);
+
+        td:first-child,
+        th:first-child {
+          border-top-left-radius: (@panel-border-radius - 1);
+        }
+        td:last-child,
+        th:last-child {
+          border-top-right-radius: (@panel-border-radius - 1);
+        }
+      }
+    }
+  }
+  // Add border bottom radius for last one
+  > .table:last-child,
+  > .table-responsive:last-child > .table:last-child {
+    .border-bottom-radius((@panel-border-radius - 1));
+
+    > tbody:last-child,
+    > tfoot:last-child {
+      > tr:last-child {
+        border-bottom-left-radius: (@panel-border-radius - 1);
+        border-bottom-right-radius: (@panel-border-radius - 1);
+
+        td:first-child,
+        th:first-child {
+          border-bottom-left-radius: (@panel-border-radius - 1);
+        }
+        td:last-child,
+        th:last-child {
+          border-bottom-right-radius: (@panel-border-radius - 1);
+        }
+      }
+    }
+  }
+  > .panel-body + .table,
+  > .panel-body + .table-responsive,
+  > .table + .panel-body,
+  > .table-responsive + .panel-body {
+    border-top: 1px solid @table-border-color;
+  }
+  > .table > tbody:first-child > tr:first-child th,
+  > .table > tbody:first-child > tr:first-child td {
+    border-top: 0;
+  }
+  > .table-bordered,
+  > .table-responsive > .table-bordered {
+    border: 0;
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th:first-child,
+        > td:first-child {
+          border-left: 0;
+        }
+        > th:last-child,
+        > td:last-child {
+          border-right: 0;
+        }
+      }
+    }
+    > thead,
+    > tbody {
+      > tr:first-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+    > tbody,
+    > tfoot {
+      > tr:last-child {
+        > td,
+        > th {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+  > .table-responsive {
+    border: 0;
+    margin-bottom: 0;
+  }
+}
+
+
+// Collapsible panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  margin-bottom: @line-height-computed;
+
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: @panel-border-radius;
+
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
+  .panel-heading {
+    border-bottom: 0;
+
+    + .panel-collapse > .panel-body,
+    + .panel-collapse > .list-group {
+      border-top: 1px solid @panel-inner-border;
+    }
+  }
+
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid @panel-inner-border;
+    }
+  }
+}
+
+
+// Contextual variations
+.panel-default {
+  .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border);
+}
+.panel-primary {
+  .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border);
+}
+.panel-success {
+  .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border);
+}
+.panel-info {
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+}
+.panel-warning {
+  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
+}
+.panel-danger {
+  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
+}
diff --git a/less/bootstrap/popovers.less b/less/bootstrap/popovers.less
new file mode 100644
index 0000000..3a62a64
--- /dev/null
+++ b/less/bootstrap/popovers.less
@@ -0,0 +1,131 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: @zindex-popover;
+  display: none;
+  max-width: @popover-max-width;
+  padding: 1px;
+  // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  .reset-text();
+  font-size: @font-size-base;
+
+  background-color: @popover-bg;
+  background-clip: padding-box;
+  border: 1px solid @popover-fallback-border-color;
+  border: 1px solid @popover-border-color;
+  border-radius: @border-radius-large;
+  .box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+  // Offset the popover to account for the popover arrow
+  &.top     { margin-top: -@popover-arrow-width; }
+  &.right   { margin-left: @popover-arrow-width; }
+  &.bottom  { margin-top: @popover-arrow-width; }
+  &.left    { margin-left: -@popover-arrow-width; }
+}
+
+.popover-title {
+  margin: 0; // reset heading margin
+  padding: 8px 14px;
+  font-size: @font-size-base;
+  background-color: @popover-title-bg;
+  border-bottom: 1px solid darken(@popover-title-bg, 5%);
+  border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0;
+}
+
+.popover-content {
+  padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover > .arrow {
+  &,
+  &:after {
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+}
+.popover > .arrow {
+  border-width: @popover-arrow-outer-width;
+}
+.popover > .arrow:after {
+  border-width: @popover-arrow-width;
+  content: "";
+}
+
+.popover {
+  &.top > .arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+    border-bottom-width: 0;
+    border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-top-color: @popover-arrow-outer-color;
+    bottom: -@popover-arrow-outer-width;
+    &:after {
+      content: " ";
+      bottom: 1px;
+      margin-left: -@popover-arrow-width;
+      border-bottom-width: 0;
+      border-top-color: @popover-arrow-color;
+    }
+  }
+  &.right > .arrow {
+    top: 50%;
+    left: -@popover-arrow-outer-width;
+    margin-top: -@popover-arrow-outer-width;
+    border-left-width: 0;
+    border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-right-color: @popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      left: 1px;
+      bottom: -@popover-arrow-width;
+      border-left-width: 0;
+      border-right-color: @popover-arrow-color;
+    }
+  }
+  &.bottom > .arrow {
+    left: 50%;
+    margin-left: -@popover-arrow-outer-width;
+    border-top-width: 0;
+    border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-bottom-color: @popover-arrow-outer-color;
+    top: -@popover-arrow-outer-width;
+    &:after {
+      content: " ";
+      top: 1px;
+      margin-left: -@popover-arrow-width;
+      border-top-width: 0;
+      border-bottom-color: @popover-arrow-color;
+    }
+  }
+
+  &.left > .arrow {
+    top: 50%;
+    right: -@popover-arrow-outer-width;
+    margin-top: -@popover-arrow-outer-width;
+    border-right-width: 0;
+    border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
+    border-left-color: @popover-arrow-outer-color;
+    &:after {
+      content: " ";
+      right: 1px;
+      border-right-width: 0;
+      border-left-color: @popover-arrow-color;
+      bottom: -@popover-arrow-width;
+    }
+  }
+}
diff --git a/less/bootstrap/print.less b/less/bootstrap/print.less
new file mode 100644
index 0000000..66e54ab
--- /dev/null
+++ b/less/bootstrap/print.less
@@ -0,0 +1,101 @@
+/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
+
+// ==========================================================================
+// Print styles.
+// Inlined to avoid the additional HTTP request: h5bp.com/r
+// ==========================================================================
+
+@media print {
+    *,
+    *:before,
+    *:after {
+        background: transparent !important;
+        color: #000 !important; // Black prints faster: h5bp.com/s
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline;
+    }
+
+    a[href]:after {
+        content: " (" attr(href) ")";
+    }
+
+    abbr[title]:after {
+        content: " (" attr(title) ")";
+    }
+
+    // Don't show links that are fragment identifiers,
+    // or use the `javascript:` pseudo protocol
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+        content: "";
+    }
+
+    pre,
+    blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+    }
+
+    thead {
+        display: table-header-group; // h5bp.com/t
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3;
+        widows: 3;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid;
+    }
+
+    // Bootstrap specific changes start
+
+    // Bootstrap components
+    .navbar {
+        display: none;
+    }
+    .btn,
+    .dropup > .btn {
+        > .caret {
+            border-top-color: #000 !important;
+        }
+    }
+    .label {
+        border: 1px solid #000;
+    }
+
+    .table {
+        border-collapse: collapse !important;
+
+        td,
+        th {
+            background-color: #fff !important;
+        }
+    }
+    .table-bordered {
+        th,
+        td {
+            border: 1px solid #ddd !important;
+        }
+    }
+
+    // Bootstrap specific changes end
+}
diff --git a/less/bootstrap/progress-bars.less b/less/bootstrap/progress-bars.less
new file mode 100644
index 0000000..8868a1f
--- /dev/null
+++ b/less/bootstrap/progress-bars.less
@@ -0,0 +1,87 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// Bar animations
+// -------------------------
+
+// WebKit
+@-webkit-keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+
+// Bar itself
+// -------------------------
+
+// Outer container
+.progress {
+  overflow: hidden;
+  height: @line-height-computed;
+  margin-bottom: @line-height-computed;
+  background-color: @progress-bg;
+  border-radius: @progress-border-radius;
+  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+}
+
+// Bar of progress
+.progress-bar {
+  float: left;
+  width: 0%;
+  height: 100%;
+  font-size: @font-size-small;
+  line-height: @line-height-computed;
+  color: @progress-bar-color;
+  text-align: center;
+  background-color: @progress-bar-bg;
+  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+  .transition(width .6s ease);
+}
+
+// Striped bars
+//
+// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar-striped` class, which you just add to an existing
+// `.progress-bar`.
+.progress-striped .progress-bar,
+.progress-bar-striped {
+  #gradient > .striped();
+  background-size: 40px 40px;
+}
+
+// Call animation for the active one
+//
+// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar.active` approach.
+.progress.active .progress-bar,
+.progress-bar.active {
+  .animation(progress-bar-stripes 2s linear infinite);
+}
+
+
+// Variations
+// -------------------------
+
+.progress-bar-success {
+  .progress-bar-variant(@progress-bar-success-bg);
+}
+
+.progress-bar-info {
+  .progress-bar-variant(@progress-bar-info-bg);
+}
+
+.progress-bar-warning {
+  .progress-bar-variant(@progress-bar-warning-bg);
+}
+
+.progress-bar-danger {
+  .progress-bar-variant(@progress-bar-danger-bg);
+}
diff --git a/less/bootstrap/responsive-embed.less b/less/bootstrap/responsive-embed.less
new file mode 100644
index 0000000..080a511
--- /dev/null
+++ b/less/bootstrap/responsive-embed.less
@@ -0,0 +1,35 @@
+// Embeds responsive
+//
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+// Modifier class for 16:9 aspect ratio
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+
+// Modifier class for 4:3 aspect ratio
+.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}
diff --git a/less/bootstrap/responsive-utilities.less b/less/bootstrap/responsive-utilities.less
new file mode 100644
index 0000000..b1db31d
--- /dev/null
+++ b/less/bootstrap/responsive-utilities.less
@@ -0,0 +1,194 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@-ms-viewport {
+  width: device-width;
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+  .responsive-invisibility();
+}
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+  display: none !important;
+}
+
+.visible-xs {
+  @media (max-width: @screen-xs-max) {
+    .responsive-visibility();
+  }
+}
+.visible-xs-block {
+  @media (max-width: @screen-xs-max) {
+    display: block !important;
+  }
+}
+.visible-xs-inline {
+  @media (max-width: @screen-xs-max) {
+    display: inline !important;
+  }
+}
+.visible-xs-inline-block {
+  @media (max-width: @screen-xs-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-sm {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    .responsive-visibility();
+  }
+}
+.visible-sm-block {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: block !important;
+  }
+}
+.visible-sm-inline {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: inline !important;
+  }
+}
+.visible-sm-inline-block {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-md {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    .responsive-visibility();
+  }
+}
+.visible-md-block {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: block !important;
+  }
+}
+.visible-md-inline {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: inline !important;
+  }
+}
+.visible-md-inline-block {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    display: inline-block !important;
+  }
+}
+
+.visible-lg {
+  @media (min-width: @screen-lg-min) {
+    .responsive-visibility();
+  }
+}
+.visible-lg-block {
+  @media (min-width: @screen-lg-min) {
+    display: block !important;
+  }
+}
+.visible-lg-inline {
+  @media (min-width: @screen-lg-min) {
+    display: inline !important;
+  }
+}
+.visible-lg-inline-block {
+  @media (min-width: @screen-lg-min) {
+    display: inline-block !important;
+  }
+}
+
+.hidden-xs {
+  @media (max-width: @screen-xs-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-sm {
+  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-md {
+  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+    .responsive-invisibility();
+  }
+}
+.hidden-lg {
+  @media (min-width: @screen-lg-min) {
+    .responsive-invisibility();
+  }
+}
+
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+// Note: Deprecated .visible-print as of v3.2.0
+.visible-print {
+  .responsive-invisibility();
+
+  @media print {
+    .responsive-visibility();
+  }
+}
+.visible-print-block {
+  display: none !important;
+
+  @media print {
+    display: block !important;
+  }
+}
+.visible-print-inline {
+  display: none !important;
+
+  @media print {
+    display: inline !important;
+  }
+}
+.visible-print-inline-block {
+  display: none !important;
+
+  @media print {
+    display: inline-block !important;
+  }
+}
+
+.hidden-print {
+  @media print {
+    .responsive-invisibility();
+  }
+}
diff --git a/less/bootstrap/scaffolding.less b/less/bootstrap/scaffolding.less
new file mode 100644
index 0000000..64a29c6
--- /dev/null
+++ b/less/bootstrap/scaffolding.less
@@ -0,0 +1,161 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing
+* {
+  .box-sizing(border-box);
+}
+*:before,
+*:after {
+  .box-sizing(border-box);
+}
+
+
+// Body reset
+
+html {
+  font-size: 10px;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+  font-family: @font-family-base;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @text-color;
+  background-color: @body-bg;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+
+// Links
+
+a {
+  color: @link-color;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: @link-hover-color;
+    text-decoration: @link-hover-decoration;
+  }
+
+  &:focus {
+    .tab-focus();
+  }
+}
+
+
+// Figures
+//
+// We reset this here because previously Normalize had no `figure` margins. This
+// ensures we don't break anyone's use of the element.
+
+figure {
+  margin: 0;
+}
+
+
+// Images
+
+img {
+  vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+  .img-responsive();
+}
+
+// Rounded corners
+.img-rounded {
+  border-radius: @border-radius-large;
+}
+
+// Image thumbnails
+//
+// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
+.img-thumbnail {
+  padding: @thumbnail-padding;
+  line-height: @line-height-base;
+  background-color: @thumbnail-bg;
+  border: 1px solid @thumbnail-border;
+  border-radius: @thumbnail-border-radius;
+  .transition(all .2s ease-in-out);
+
+  // Keep them at most 100% wide
+  .img-responsive(inline-block);
+}
+
+// Perfect circle
+.img-circle {
+  border-radius: 50%; // set radius in percents
+}
+
+
+// Horizontal rules
+
+hr {
+  margin-top:    @line-height-computed;
+  margin-bottom: @line-height-computed;
+  border: 0;
+  border-top: 1px solid @hr-border;
+}
+
+
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
+
+
+// iOS "clickable elements" fix for role="button"
+//
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+[role="button"] {
+  cursor: pointer;
+}
diff --git a/less/bootstrap/tables.less b/less/bootstrap/tables.less
new file mode 100644
index 0000000..2242c03
--- /dev/null
+++ b/less/bootstrap/tables.less
@@ -0,0 +1,234 @@
+//
+// Tables
+// --------------------------------------------------
+
+
+table {
+  background-color: @table-bg;
+}
+caption {
+  padding-top: @table-cell-padding;
+  padding-bottom: @table-cell-padding;
+  color: @text-muted;
+  text-align: left;
+}
+th {
+  text-align: left;
+}
+
+
+// Baseline styles
+
+.table {
+  width: 100%;
+  max-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;
+  }
+
+  // Nesting
+  .table {
+    background-color: @body-bg;
+  }
+}
+
+
+// Condensed table w/ half padding
+
+.table-condensed {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: @table-condensed-cell-padding;
+      }
+    }
+  }
+}
+
+
+// Bordered version
+//
+// 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;
+      }
+    }
+  }
+  > thead > tr {
+    > th,
+    > td {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  > tbody > tr:nth-of-type(odd) {
+    background-color: @table-bg-accent;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover {
+    background-color: @table-bg-hover;
+  }
+}
+
+
+// Table cell sizing
+//
+// Reset default table behavior
+
+table col[class*="col-"] {
+  position: static; // Prevent border hiding in Firefox and IE9-11 (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-11 (see https://github.com/twbs/bootstrap/issues/11623)
+      float: none;
+      display: table-cell;
+    }
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+// Generate the contextual variants
+.table-row-variant(active; @table-bg-active);
+.table-row-variant(success; @state-success-bg);
+.table-row-variant(info; @state-info-bg);
+.table-row-variant(warning; @state-warning-bg);
+.table-row-variant(danger; @state-danger-bg);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+
+  @media screen and (max-width: @screen-xs-max) {
+    width: 100%;
+    margin-bottom: (@line-height-computed * 0.75);
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid @table-border-color;
+
+    // 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;
+          }
+        }
+      }
+
+    }
+  }
+}
diff --git a/less/bootstrap/theme.less b/less/bootstrap/theme.less
new file mode 100644
index 0000000..fb61744
--- /dev/null
+++ b/less/bootstrap/theme.less
@@ -0,0 +1,291 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+//
+// Load core variables and mixins
+// --------------------------------------------------
+
+@import "variables.less";
+@import "mixins.less";
+
+
+//
+// Buttons
+// --------------------------------------------------
+
+// Common styles
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+  .box-shadow(@shadow);
+
+  // Reset the shadow
+  &:active,
+  &.active {
+    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    .box-shadow(none);
+  }
+
+  .badge {
+    text-shadow: none;
+  }
+}
+
+// Mixin for generating new styles
+.btn-styles(@btn-color: #555) {
+  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
+  .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
+  background-repeat: repeat-x;
+  border-color: darken(@btn-color, 14%);
+
+  &:hover,
+  &:focus  {
+    background-color: darken(@btn-color, 12%);
+    background-position: 0 -15px;
+  }
+
+  &:active,
+  &.active {
+    background-color: darken(@btn-color, 12%);
+    border-color: darken(@btn-color, 14%);
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &,
+    &:hover,
+    &:focus,
+    &.focus,
+    &:active,
+    &.active {
+      background-color: darken(@btn-color, 12%);
+      background-image: none;
+    }
+  }
+}
+
+// Common styles
+.btn {
+  // Remove the gradient for the pressed/active state
+  &:active,
+  &.active {
+    background-image: none;
+  }
+}
+
+// Apply the mixin to the buttons
+.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
+.btn-primary { .btn-styles(@btn-primary-bg); }
+.btn-success { .btn-styles(@btn-success-bg); }
+.btn-info    { .btn-styles(@btn-info-bg); }
+.btn-warning { .btn-styles(@btn-warning-bg); }
+.btn-danger  { .btn-styles(@btn-danger-bg); }
+
+
+//
+// Images
+// --------------------------------------------------
+
+.thumbnail,
+.img-thumbnail {
+  .box-shadow(0 1px 2px rgba(0,0,0,.075));
+}
+
+
+//
+// Dropdowns
+// --------------------------------------------------
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
+  background-color: darken(@dropdown-link-hover-bg, 5%);
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+  background-color: darken(@dropdown-link-active-bg, 5%);
+}
+
+
+//
+// Navbar
+// --------------------------------------------------
+
+// Default navbar
+.navbar-default {
+  #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
+  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
+  border-radius: @navbar-border-radius;
+  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
+  .box-shadow(@shadow);
+
+  .navbar-nav > .open > a,
+  .navbar-nav > .active > a {
+    #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
+  }
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255,255,255,.25);
+}
+
+// Inverted navbar
+.navbar-inverse {
+  #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
+  .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
+  border-radius: @navbar-border-radius;
+  .navbar-nav > .open > a,
+  .navbar-nav > .active > a {
+    #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
+    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
+  }
+
+  .navbar-brand,
+  .navbar-nav > li > a {
+    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+  }
+}
+
+// Undo rounded corners in static and fixed navbars
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+
+// Fix active state of dropdown items in collapsed mode
+@media (max-width: @grid-float-breakpoint-max) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a {
+    &,
+    &:hover,
+    &:focus {
+      color: #fff;
+      #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
+    }
+  }
+}
+
+
+//
+// Alerts
+// --------------------------------------------------
+
+// Common styles
+.alert {
+  text-shadow: 0 1px 0 rgba(255,255,255,.2);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
+  .box-shadow(@shadow);
+}
+
+// Mixin for generating new styles
+.alert-styles(@color) {
+  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
+  border-color: darken(@color, 15%);
+}
+
+// Apply the mixin to the alerts
+.alert-success    { .alert-styles(@alert-success-bg); }
+.alert-info       { .alert-styles(@alert-info-bg); }
+.alert-warning    { .alert-styles(@alert-warning-bg); }
+.alert-danger     { .alert-styles(@alert-danger-bg); }
+
+
+//
+// Progress bars
+// --------------------------------------------------
+
+// Give the progress background some depth
+.progress {
+  #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
+}
+
+// Mixin for generating new styles
+.progress-bar-styles(@color) {
+  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
+}
+
+// Apply the mixin to the progress bars
+.progress-bar            { .progress-bar-styles(@progress-bar-bg); }
+.progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
+.progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
+.progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
+.progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }
+
+// Reset the striped class because our mixins don't do multiple gradients and
+// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
+.progress-bar-striped {
+  #gradient > .striped();
+}
+
+
+//
+// List groups
+// --------------------------------------------------
+
+.list-group {
+  border-radius: @border-radius-base;
+  .box-shadow(0 1px 2px rgba(0,0,0,.075));
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
+  #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
+  border-color: darken(@list-group-active-border, 7.5%);
+
+  .badge {
+    text-shadow: none;
+  }
+}
+
+
+//
+// Panels
+// --------------------------------------------------
+
+// Common styles
+.panel {
+  .box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+
+// Mixin for generating new styles
+.panel-heading-styles(@color) {
+  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
+}
+
+// Apply the mixin to the panel headings only
+.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
+.panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
+.panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
+.panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
+.panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
+.panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }
+
+
+//
+// Wells
+// --------------------------------------------------
+
+.well {
+  #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
+  border-color: darken(@well-bg, 10%);
+  @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+  .box-shadow(@shadow);
+}
diff --git a/less/bootstrap/thumbnails.less b/less/bootstrap/thumbnails.less
new file mode 100644
index 0000000..0713e67
--- /dev/null
+++ b/less/bootstrap/thumbnails.less
@@ -0,0 +1,36 @@
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// Mixin and adjust the regular image class
+.thumbnail {
+  display: block;
+  padding: @thumbnail-padding;
+  margin-bottom: @line-height-computed;
+  line-height: @line-height-base;
+  background-color: @thumbnail-bg;
+  border: 1px solid @thumbnail-border;
+  border-radius: @thumbnail-border-radius;
+  .transition(border .2s ease-in-out);
+
+  > img,
+  a > img {
+    &:extend(.img-responsive);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // Add a hover state for linked versions only
+  a&:hover,
+  a&:focus,
+  a&.active {
+    border-color: @link-color;
+  }
+
+  // Image captions
+  .caption {
+    padding: @thumbnail-caption-padding;
+    color: @thumbnail-caption-color;
+  }
+}
diff --git a/less/bootstrap/tooltip.less b/less/bootstrap/tooltip.less
new file mode 100644
index 0000000..b48d63e
--- /dev/null
+++ b/less/bootstrap/tooltip.less
@@ -0,0 +1,101 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+  position: absolute;
+  z-index: @zindex-tooltip;
+  display: block;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  .reset-text();
+  font-size: @font-size-small;
+
+  .opacity(0);
+
+  &.in     { .opacity(@tooltip-opacity); }
+  &.top    { margin-top:  -3px; padding: @tooltip-arrow-width 0; }
+  &.right  { margin-left:  3px; padding: 0 @tooltip-arrow-width; }
+  &.bottom { margin-top:   3px; padding: @tooltip-arrow-width 0; }
+  &.left   { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: @tooltip-max-width;
+  padding: 3px 8px;
+  color: @tooltip-color;
+  text-align: center;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+}
+
+// Arrows
+.tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+.tooltip {
+  &.top .tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.top-left .tooltip-arrow {
+    bottom: 0;
+    right: @tooltip-arrow-width;
+    margin-bottom: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.top-right .tooltip-arrow {
+    bottom: 0;
+    left: @tooltip-arrow-width;
+    margin-bottom: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+  &.right .tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+  &.left .tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+  &.bottom .tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+  &.bottom-left .tooltip-arrow {
+    top: 0;
+    right: @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+  &.bottom-right .tooltip-arrow {
+    top: 0;
+    left: @tooltip-arrow-width;
+    margin-top: -@tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+}
diff --git a/less/bootstrap/type.less b/less/bootstrap/type.less
new file mode 100644
index 0000000..0d4fee4
--- /dev/null
+++ b/less/bootstrap/type.less
@@ -0,0 +1,302 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: @headings-font-family;
+  font-weight: @headings-font-weight;
+  line-height: @headings-line-height;
+  color: @headings-color;
+
+  small,
+  .small {
+    font-weight: normal;
+    line-height: 1;
+    color: @headings-small-color;
+  }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+  margin-top: @line-height-computed;
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 65%;
+  }
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+  margin-top: (@line-height-computed / 2);
+  margin-bottom: (@line-height-computed / 2);
+
+  small,
+  .small {
+    font-size: 75%;
+  }
+}
+
+h1, .h1 { font-size: @font-size-h1; }
+h2, .h2 { font-size: @font-size-h2; }
+h3, .h3 { font-size: @font-size-h3; }
+h4, .h4 { font-size: @font-size-h4; }
+h5, .h5 { font-size: @font-size-h5; }
+h6, .h6 { font-size: @font-size-h6; }
+
+
+// Body text
+// -------------------------
+
+p {
+  margin: 0 0 (@line-height-computed / 2);
+}
+
+.lead {
+  margin-bottom: @line-height-computed;
+  font-size: floor((@font-size-base * 1.15));
+  font-weight: 300;
+  line-height: 1.4;
+
+  @media (min-width: @screen-sm-min) {
+    font-size: (@font-size-base * 1.5);
+  }
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+small,
+.small {
+  font-size: floor((100% * @font-size-small / @font-size-base));
+}
+
+mark,
+.mark {
+  background-color: @state-warning-bg;
+  padding: .2em;
+}
+
+// Alignment
+.text-left           { text-align: left; }
+.text-right          { text-align: right; }
+.text-center         { text-align: center; }
+.text-justify        { text-align: justify; }
+.text-nowrap         { white-space: nowrap; }
+
+// Transformation
+.text-lowercase      { text-transform: lowercase; }
+.text-uppercase      { text-transform: uppercase; }
+.text-capitalize     { text-transform: capitalize; }
+
+// Contextual colors
+.text-muted {
+  color: @text-muted;
+}
+.text-primary {
+  .text-emphasis-variant(@brand-primary);
+}
+.text-success {
+  .text-emphasis-variant(@state-success-text);
+}
+.text-info {
+  .text-emphasis-variant(@state-info-text);
+}
+.text-warning {
+  .text-emphasis-variant(@state-warning-text);
+}
+.text-danger {
+  .text-emphasis-variant(@state-danger-text);
+}
+
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+  // Given the contrast here, this is the only class to have its color inverted
+  // automatically.
+  color: #fff;
+  .bg-variant(@brand-primary);
+}
+.bg-success {
+  .bg-variant(@state-success-bg);
+}
+.bg-info {
+  .bg-variant(@state-info-bg);
+}
+.bg-warning {
+  .bg-variant(@state-warning-bg);
+}
+.bg-danger {
+  .bg-variant(@state-danger-bg);
+}
+
+
+// Page header
+// -------------------------
+
+.page-header {
+  padding-bottom: ((@line-height-computed / 2) - 1);
+  margin: (@line-height-computed * 2) 0 @line-height-computed;
+  border-bottom: 1px solid @page-header-border-color;
+}
+
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: (@line-height-computed / 2);
+  ul,
+  ol {
+    margin-bottom: 0;
+  }
+}
+
+// List options
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+.list-unstyled {
+  padding-left: 0;
+  list-style: none;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+  .list-unstyled();
+  margin-left: -5px;
+
+  > li {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+// Description Lists
+dl {
+  margin-top: 0; // Remove browser default
+  margin-bottom: @line-height-computed;
+}
+dt,
+dd {
+  line-height: @line-height-base;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 0; // Undo browser default
+}
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+.dl-horizontal {
+  dd {
+    &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
+  }
+
+  @media (min-width: @dl-horizontal-breakpoint) {
+    dt {
+      float: left;
+      width: (@dl-horizontal-offset - 20);
+      clear: left;
+      text-align: right;
+      .text-overflow();
+    }
+    dd {
+      margin-left: @dl-horizontal-offset;
+    }
+  }
+}
+
+
+// Misc
+// -------------------------
+
+// Abbreviations and acronyms
+abbr[title],
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+  cursor: help;
+  border-bottom: 1px dotted @abbr-border-color;
+}
+.initialism {
+  font-size: 90%;
+  .text-uppercase();
+}
+
+// Blockquotes
+blockquote {
+  padding: (@line-height-computed / 2) @line-height-computed;
+  margin: 0 0 @line-height-computed;
+  font-size: @blockquote-font-size;
+  border-left: 5px solid @blockquote-border-color;
+
+  p,
+  ul,
+  ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Note: Deprecated small and .small as of v3.1.0
+  // Context: https://github.com/twbs/bootstrap/issues/11660
+  footer,
+  small,
+  .small {
+    display: block;
+    font-size: 80%; // back to default font-size
+    line-height: @line-height-base;
+    color: @blockquote-small-color;
+
+    &:before {
+      content: '\2014 \00A0'; // em dash, nbsp
+    }
+  }
+}
+
+// Opposite alignment of blockquote
+//
+// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
+.blockquote-reverse,
+blockquote.pull-right {
+  padding-right: 15px;
+  padding-left: 0;
+  border-right: 5px solid @blockquote-border-color;
+  border-left: 0;
+  text-align: right;
+
+  // Account for citation
+  footer,
+  small,
+  .small {
+    &:before { content: ''; }
+    &:after {
+      content: '\00A0 \2014'; // nbsp, em dash
+    }
+  }
+}
+
+// Addresses
+address {
+  margin-bottom: @line-height-computed;
+  font-style: normal;
+  line-height: @line-height-base;
+}
diff --git a/less/bootstrap/utilities.less b/less/bootstrap/utilities.less
new file mode 100644
index 0000000..7a8ca27
--- /dev/null
+++ b/less/bootstrap/utilities.less
@@ -0,0 +1,55 @@
+//
+// Utility classes
+// --------------------------------------------------
+
+
+// Floats
+// -------------------------
+
+.clearfix {
+  .clearfix();
+}
+.center-block {
+  .center-block();
+}
+.pull-right {
+  float: right !important;
+}
+.pull-left {
+  float: left !important;
+}
+
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+.hide {
+  display: none !important;
+}
+.show {
+  display: block !important;
+}
+.invisible {
+  visibility: hidden;
+}
+.text-hide {
+  .text-hide();
+}
+
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+  display: none !important;
+}
+
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+  position: fixed;
+}
diff --git a/less/bootstrap/variables.less b/less/bootstrap/variables.less
new file mode 100644
index 0000000..9ca745b
--- /dev/null
+++ b/less/bootstrap/variables.less
@@ -0,0 +1,869 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+@gray-base:              #000;
+@gray-darker:            lighten(@gray-base, 13.5%); // #222
+@gray-dark:              lighten(@gray-base, 20%);   // #333
+@gray:                   lighten(@gray-base, 33.5%); // #555
+@gray-light:             lighten(@gray-base, 46.7%); // #777
+@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
+
+@brand-primary:         darken(#428bca, 6.5%); // #337ab7
+@brand-success:         #5cb85c;
+@brand-info:            #5bc0de;
+@brand-warning:         #f0ad4e;
+@brand-danger:          #d9534f;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+@body-bg:               #fff;
+//** Global text color on `<body>`.
+@text-color:            @gray-dark;
+
+//** Global textual link color.
+@link-color:            #039BE5; //@brand-primary;
+//** Link hover color set via `darken()` function.
+@link-hover-color:       #039BE5; //darken(@link-color, 15%);
+//** Link hover decoration.
+@link-hover-decoration: none; //underline;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+@font-family-sans-serif:  "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
+@font-family-serif:       Georgia, "Times New Roman", Times, serif;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          14px;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+//** By default, this inherits from the `<body>`.
+@headings-font-family:    inherit;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+@icon-font-path:          "../fonts/";
+//** File name for all font files.
+@icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
+
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small:         1.5;
+
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicate dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+@table-cell-padding:            8px;
+//** Padding for cells in `.table-condensed`.
+@table-condensed-cell-padding:  5px;
+
+//** Default background color used for all tables.
+@table-bg:                      transparent;
+//** Background color used for `.table-striped`.
+@table-bg-accent:               #f9f9f9;
+//** Background color used for `.table-hover`.
+@table-bg-hover:                #f5f5f5;
+@table-bg-active:               @table-bg-hover;
+
+//** Border color for table and cell borders.
+@table-border-color:            #ddd;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+@btn-font-weight:                normal;
+
+@btn-default-color:              #333;
+@btn-default-bg:                 #fff;
+@btn-default-border:             #ccc;
+
+@btn-primary-color:              #fff;
+@btn-primary-bg:                 @brand-primary;
+@btn-primary-border:             darken(@btn-primary-bg, 5%);
+
+@btn-success-color:              #fff;
+@btn-success-bg:                 @brand-success;
+@btn-success-border:             darken(@btn-success-bg, 5%);
+
+@btn-info-color:                 #fff;
+@btn-info-bg:                    @brand-info;
+@btn-info-border:                darken(@btn-info-bg, 5%);
+
+@btn-warning-color:              #fff;
+@btn-warning-bg:                 @brand-warning;
+@btn-warning-border:             darken(@btn-warning-bg, 5%);
+
+@btn-danger-color:               #fff;
+@btn-danger-bg:                  @brand-danger;
+@btn-danger-border:              darken(@btn-danger-bg, 5%);
+
+@btn-link-disabled-color:        @gray-light;
+
+// Allows for customizing button radius independently from global border radius
+@btn-border-radius-base:         @border-radius-base;
+@btn-border-radius-large:        @border-radius-large;
+@btn-border-radius-small:        @border-radius-small;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+@input-bg:                       #fff;
+//** `<input disabled>` background color
+@input-bg-disabled:              @gray-lighter;
+
+//** Text color for `<input>`s
+@input-color:                    @gray;
+//** `<input>` border color
+@input-border:                   #ccc;
+
+// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+@input-border-radius:            @border-radius-base;
+//** Large `.form-control` border radius
+@input-border-radius-large:      @border-radius-large;
+//** Small `.form-control` border radius
+@input-border-radius-small:      @border-radius-small;
+
+//** Border color for inputs on focus
+@input-border-focus:             #66afe9;
+
+//** Placeholder text color
+@input-color-placeholder:        #999;
+
+//** Default `.form-control` height
+@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
+//** Large `.form-control` height
+@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
+//** Small `.form-control` height
+@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
+
+//** `.form-group` margin
+@form-group-margin-bottom:       15px;
+
+@legend-color:                   @gray-dark;
+@legend-border-color:            #e5e5e5;
+
+//** Background color for textual input addons
+@input-group-addon-bg:           @gray-lighter;
+//** Border color for textual input addons
+@input-group-addon-border-color: @input-border;
+
+//** Disabled cursor for form controls and buttons.
+@cursor-disabled:                not-allowed;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+@dropdown-bg:                    #fff;
+//** Dropdown menu `border-color`.
+@dropdown-border:                rgba(0,0,0,.15);
+//** Dropdown menu `border-color` **for IE8**.
+@dropdown-fallback-border:       #ccc;
+//** Divider color for between dropdown items.
+@dropdown-divider-bg:            #e5e5e5;
+
+//** Dropdown link text color.
+@dropdown-link-color:            @gray-dark;
+//** Hover color for dropdown links.
+@dropdown-link-hover-color:      darken(@gray-dark, 5%);
+//** Hover background for dropdown links.
+@dropdown-link-hover-bg:         #f5f5f5;
+
+//** Active dropdown menu item text color.
+@dropdown-link-active-color:     @component-active-color;
+//** Active dropdown menu item background color.
+@dropdown-link-active-bg:        @component-active-bg;
+
+//** Disabled dropdown menu item background color.
+@dropdown-link-disabled-color:   @gray-light;
+
+//** Text color for headers within dropdown menus.
+@dropdown-header-color:          @gray-light;
+
+//** Deprecated `@dropdown-caret-color` as of v3.1.0
+@dropdown-caret-color:           #000;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+@zindex-navbar:            1000;
+@zindex-dropdown:          1000;
+@zindex-popover:           1060;
+@zindex-tooltip:           1070;
+@zindex-navbar-fixed:      1030;
+@zindex-modal-background:  1040;
+@zindex-modal:             1050;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `@screen-xs` as of v3.0.1
+@screen-xs:                  480px;
+//** Deprecated `@screen-xs-min` as of v3.2.0
+@screen-xs-min:              @screen-xs;
+//** Deprecated `@screen-phone` as of v3.0.1
+@screen-phone:               @screen-xs-min;
+
+// Small screen / tablet
+//** Deprecated `@screen-sm` as of v3.0.1
+@screen-sm:                  768px;
+@screen-sm-min:              @screen-sm;
+//** Deprecated `@screen-tablet` as of v3.0.1
+@screen-tablet:              @screen-sm-min;
+
+// Medium screen / desktop
+//** Deprecated `@screen-md` as of v3.0.1
+@screen-md:                  992px;
+@screen-md-min:              @screen-md;
+//** Deprecated `@screen-desktop` as of v3.0.1
+@screen-desktop:             @screen-md-min;
+
+// Large screen / wide desktop
+//** Deprecated `@screen-lg` as of v3.0.1
+@screen-lg:                  1200px;
+@screen-lg-min:              @screen-lg;
+//** Deprecated `@screen-lg-desktop` as of v3.0.1
+@screen-lg-desktop:          @screen-lg-min;
+
+// So media queries don't overlap when required, provide a maximum
+@screen-xs-max:              (@screen-sm-min - 1);
+@screen-sm-max:              (@screen-md-min - 1);
+@screen-md-max:              (@screen-lg-min - 1);
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+@grid-columns:              12;
+//** Padding between columns. Gets divided in half for the left and right.
+@grid-gutter-width:         30px;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+@grid-float-breakpoint:     @screen-sm-min;
+//** Point at which the navbar begins collapsing.
+@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+@container-tablet:             (720px + @grid-gutter-width);
+//** For `@screen-sm-min` and up.
+@container-sm:                 @container-tablet;
+
+// Medium screen / desktop
+@container-desktop:            (940px + @grid-gutter-width);
+//** For `@screen-md-min` and up.
+@container-md:                 @container-desktop;
+
+// Large screen / wide desktop
+@container-large-desktop:      (1140px + @grid-gutter-width);
+//** For `@screen-lg-min` and up.
+@container-lg:                 @container-large-desktop;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+@navbar-height:                    50px;
+@navbar-margin-bottom:             @line-height-computed;
+@navbar-border-radius:             @border-radius-base;
+@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
+@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
+@navbar-collapse-max-height:       340px;
+
+@navbar-default-color:             #777;
+@navbar-default-bg:                #f8f8f8;
+@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
+
+// Navbar links
+@navbar-default-link-color:                #777;
+@navbar-default-link-hover-color:          #333;
+@navbar-default-link-hover-bg:             transparent;
+@navbar-default-link-active-color:         #555;
+@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
+@navbar-default-link-disabled-color:       #ccc;
+@navbar-default-link-disabled-bg:          transparent;
+
+// Navbar brand label
+@navbar-default-brand-color:               @navbar-default-link-color;
+@navbar-default-brand-hover-color:         darken(@navbar-default-brand-color, 10%);
+@navbar-default-brand-hover-bg:            transparent;
+
+// Navbar toggle
+@navbar-default-toggle-hover-bg:           #ddd;
+@navbar-default-toggle-icon-bar-bg:        #888;
+@navbar-default-toggle-border-color:       #ddd;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+@navbar-inverse-color:                      lighten(@gray-light, 15%);
+@navbar-inverse-bg:                         #222;
+@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
+
+// Inverted navbar links
+@navbar-inverse-link-color:                 lighten(@gray-light, 15%);
+@navbar-inverse-link-hover-color:           #fff;
+@navbar-inverse-link-hover-bg:              transparent;
+@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
+@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-disabled-color:        #444;
+@navbar-inverse-link-disabled-bg:           transparent;
+
+// Inverted navbar brand label
+@navbar-inverse-brand-color:                @navbar-inverse-link-color;
+@navbar-inverse-brand-hover-color:          #fff;
+@navbar-inverse-brand-hover-bg:             transparent;
+
+// Inverted navbar toggle
+@navbar-inverse-toggle-hover-bg:            #333;
+@navbar-inverse-toggle-icon-bar-bg:         #fff;
+@navbar-inverse-toggle-border-color:        #333;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+@nav-link-padding:                          10px 15px;
+@nav-link-hover-bg:                         @gray-lighter;
+
+@nav-disabled-link-color:                   @gray-light;
+@nav-disabled-link-hover-color:             @gray-light;
+
+//== Tabs
+@nav-tabs-border-color:                     #ddd;
+
+@nav-tabs-link-hover-border-color:          @gray-lighter;
+
+@nav-tabs-active-link-hover-bg:             @body-bg;
+@nav-tabs-active-link-hover-color:          @gray;
+@nav-tabs-active-link-hover-border-color:   #ddd;
+
+@nav-tabs-justified-link-border-color:            #ddd;
+@nav-tabs-justified-active-link-border-color:     @body-bg;
+
+//== Pills
+@nav-pills-border-radius:                   @border-radius-base;
+@nav-pills-active-link-hover-bg:            @component-active-bg;
+@nav-pills-active-link-hover-color:         @component-active-color;
+
+
+//== Pagination
+//
+//##
+
+@pagination-color:                     @link-color;
+@pagination-bg:                        #fff;
+@pagination-border:                    #ddd;
+
+@pagination-hover-color:               @link-hover-color;
+@pagination-hover-bg:                  @gray-lighter;
+@pagination-hover-border:              #ddd;
+
+@pagination-active-color:              #fff;
+@pagination-active-bg:                 @brand-primary;
+@pagination-active-border:             @brand-primary;
+
+@pagination-disabled-color:            @gray-light;
+@pagination-disabled-bg:               #fff;
+@pagination-disabled-border:           #ddd;
+
+
+//== Pager
+//
+//##
+
+@pager-bg:                             @pagination-bg;
+@pager-border:                         @pagination-border;
+@pager-border-radius:                  15px;
+
+@pager-hover-bg:                       @pagination-hover-bg;
+
+@pager-active-bg:                      @pagination-active-bg;
+@pager-active-color:                   @pagination-active-color;
+
+@pager-disabled-color:                 @pagination-disabled-color;
+
+
+//== Jumbotron
+//
+//##
+
+@jumbotron-padding:              30px;
+@jumbotron-color:                inherit;
+@jumbotron-bg:                   @gray-lighter;
+@jumbotron-heading-color:        inherit;
+@jumbotron-font-size:            ceil((@font-size-base * 1.5));
+@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+@state-success-text:             #3c763d;
+@state-success-bg:               #dff0d8;
+@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
+
+@state-info-text:                #31708f;
+@state-info-bg:                  #d9edf7;
+@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
+
+@state-warning-text:             #8a6d3b;
+@state-warning-bg:               #fcf8e3;
+@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
+
+@state-danger-text:              #a94442;
+@state-danger-bg:                #f2dede;
+@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+@tooltip-max-width:           200px;
+//** Tooltip text color
+@tooltip-color:               #fff;
+//** Tooltip background color
+@tooltip-bg:                  #000;
+@tooltip-opacity:             .9;
+
+//** Tooltip arrow width
+@tooltip-arrow-width:         5px;
+//** Tooltip arrow color
+@tooltip-arrow-color:         @tooltip-bg;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg:                          #fff;
+//** Popover maximum width
+@popover-max-width:                   276px;
+//** Popover border color
+@popover-border-color:                rgba(0,0,0,.2);
+//** Popover fallback border color
+@popover-fallback-border-color:       #ccc;
+
+//** Popover title background color
+@popover-title-bg:                    darken(@popover-bg, 3%);
+
+//** Popover arrow width
+@popover-arrow-width:                 10px;
+//** Popover arrow color
+@popover-arrow-color:                 @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width:           (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color:           fadein(@popover-border-color, 5%);
+//** Popover outer arrow fallback color
+@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+@label-default-bg:            @gray-light;
+//** Primary label background color
+@label-primary-bg:            @brand-primary;
+//** Success label background color
+@label-success-bg:            @brand-success;
+//** Info label background color
+@label-info-bg:               @brand-info;
+//** Warning label background color
+@label-warning-bg:            @brand-warning;
+//** Danger label background color
+@label-danger-bg:             @brand-danger;
+
+//** Default label text color
+@label-color:                 #fff;
+//** Default text color of a linked label
+@label-link-hover-color:      #fff;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+@modal-inner-padding:         15px;
+
+//** Padding applied to the modal title
+@modal-title-padding:         15px;
+//** Modal title line-height
+@modal-title-line-height:     @line-height-base;
+
+//** Background color of modal content area
+@modal-content-bg:                             #fff;
+//** Modal content border color
+@modal-content-border-color:                   rgba(0,0,0,.2);
+//** Modal content border color **for IE8**
+@modal-content-fallback-border-color:          #999;
+
+//** Modal backdrop background color
+@modal-backdrop-bg:           #000;
+//** Modal backdrop opacity
+@modal-backdrop-opacity:      .5;
+//** Modal header border color
+@modal-header-border-color:   #e5e5e5;
+//** Modal footer border color
+@modal-footer-border-color:   @modal-header-border-color;
+
+@modal-lg:                    900px;
+@modal-md:                    600px;
+@modal-sm:                    300px;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+@alert-padding:               15px;
+@alert-border-radius:         @border-radius-base;
+@alert-link-font-weight:      bold;
+
+@alert-success-bg:            @state-success-bg;
+@alert-success-text:          @state-success-text;
+@alert-success-border:        @state-success-border;
+
+@alert-info-bg:               @state-info-bg;
+@alert-info-text:             @state-info-text;
+@alert-info-border:           @state-info-border;
+
+@alert-warning-bg:            @state-warning-bg;
+@alert-warning-text:          @state-warning-text;
+@alert-warning-border:        @state-warning-border;
+
+@alert-danger-bg:             @state-danger-bg;
+@alert-danger-text:           @state-danger-text;
+@alert-danger-border:         @state-danger-border;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+@progress-bg:                 #f5f5f5;
+//** Progress bar text color
+@progress-bar-color:          #fff;
+//** Variable for setting rounded corners on progress bar.
+@progress-border-radius:      @border-radius-base;
+
+//** Default progress bar color
+@progress-bar-bg:             @brand-primary;
+//** Success progress bar color
+@progress-bar-success-bg:     @brand-success;
+//** Warning progress bar color
+@progress-bar-warning-bg:     @brand-warning;
+//** Danger progress bar color
+@progress-bar-danger-bg:      @brand-danger;
+//** Info progress bar color
+@progress-bar-info-bg:        @brand-info;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+@list-group-bg:                 #fff;
+//** `.list-group-item` border color
+@list-group-border:             #ddd;
+//** List group border radius
+@list-group-border-radius:      @border-radius-base;
+
+//** Background color of single list items on hover
+@list-group-hover-bg:           #f5f5f5;
+//** Text color of active list items
+@list-group-active-color:       @component-active-color;
+//** Background color of active list items
+@list-group-active-bg:          @component-active-bg;
+//** Border color of active list elements
+@list-group-active-border:      @list-group-active-bg;
+//** Text color for content within active list items
+@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
+
+//** Text color of disabled list items
+@list-group-disabled-color:      @gray-light;
+//** Background color of disabled list items
+@list-group-disabled-bg:         @gray-lighter;
+//** Text color for content within disabled list items
+@list-group-disabled-text-color: @list-group-disabled-color;
+
+@list-group-link-color:         #555;
+@list-group-link-hover-color:   @list-group-link-color;
+@list-group-link-heading-color: #333;
+
+
+//== Panels
+//
+//##
+
+@panel-bg:                    #fff;
+@panel-body-padding:          15px;
+@panel-heading-padding:       10px 15px;
+@panel-footer-padding:        @panel-heading-padding;
+@panel-border-radius:         @border-radius-base;
+
+//** Border color for elements within panels
+@panel-inner-border:          #ddd;
+@panel-footer-bg:             #f5f5f5;
+
+@panel-default-text:          @gray-dark;
+@panel-default-border:        #ddd;
+@panel-default-heading-bg:    #f5f5f5;
+
+@panel-primary-text:          #fff;
+@panel-primary-border:        @brand-primary;
+@panel-primary-heading-bg:    @brand-primary;
+
+@panel-success-text:          @state-success-text;
+@panel-success-border:        @state-success-border;
+@panel-success-heading-bg:    @state-success-bg;
+
+@panel-info-text:             @state-info-text;
+@panel-info-border:           @state-info-border;
+@panel-info-heading-bg:       @state-info-bg;
+
+@panel-warning-text:          @state-warning-text;
+@panel-warning-border:        @state-warning-border;
+@panel-warning-heading-bg:    @state-warning-bg;
+
+@panel-danger-text:           @state-danger-text;
+@panel-danger-border:         @state-danger-border;
+@panel-danger-heading-bg:     @state-danger-bg;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+@thumbnail-padding:           4px;
+//** Thumbnail background color
+@thumbnail-bg:                @body-bg;
+//** Thumbnail border color
+@thumbnail-border:            #ddd;
+//** Thumbnail border radius
+@thumbnail-border-radius:     @border-radius-base;
+
+//** Custom text color for thumbnail captions
+@thumbnail-caption-color:     @text-color;
+//** Padding around the thumbnail caption
+@thumbnail-caption-padding:   9px;
+
+
+//== Wells
+//
+//##
+
+@well-bg:                     #f5f5f5;
+@well-border:                 darken(@well-bg, 7%);
+
+
+//== Badges
+//
+//##
+
+@badge-color:                 #fff;
+//** Linked badge text color on hover
+@badge-link-hover-color:      #fff;
+@badge-bg:                    @gray-light;
+
+//** Badge text color in active nav link
+@badge-active-color:          @link-color;
+//** Badge background color in active nav link
+@badge-active-bg:             #fff;
+
+@badge-font-weight:           bold;
+@badge-line-height:           1;
+@badge-border-radius:         10px;
+
+
+//== Breadcrumbs
+//
+//##
+
+@breadcrumb-padding-vertical:   8px;
+@breadcrumb-padding-horizontal: 0; //15px;
+//** Breadcrumb background color
+@breadcrumb-bg:                 transparent;//#f5f5f5;
+//** Breadcrumb text color
+@breadcrumb-color:              #ccc;
+//** Text color of current page in the breadcrumb
+@breadcrumb-active-color:       @gray-light;
+//** Textual separator for between breadcrumb elements
+@breadcrumb-separator:          ">"; //"/";
+
+
+//== Carousel
+//
+//##
+
+@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
+
+@carousel-control-color:                      #fff;
+@carousel-control-width:                      15%;
+@carousel-control-opacity:                    .5;
+@carousel-control-font-size:                  20px;
+
+@carousel-indicator-active-bg:                #fff;
+@carousel-indicator-border-color:             #fff;
+
+@carousel-caption-color:                      #fff;
+
+
+//== Close
+//
+//##
+
+@close-font-weight:           bold;
+@close-color:                 #000;
+@close-text-shadow:           0 1px 0 #fff;
+
+
+//== Code
+//
+//##
+
+@code-color:                  #c7254e;
+@code-bg:                     #f9f2f4;
+
+@kbd-color:                   #fff;
+@kbd-bg:                      #333;
+
+@pre-bg:                      #f5f5f5;
+@pre-color:                   @gray-dark;
+@pre-border-color:            #ccc;
+@pre-scrollable-max-height:   340px;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+@component-offset-horizontal: 180px;
+//** Text muted color
+@text-muted:                  @gray-light;
+//** Abbreviations and acronyms border color
+@abbr-border-color:           @gray-light;
+//** Headings small color
+@headings-small-color:        @gray-light;
+//** Blockquote small color
+@blockquote-small-color:      @gray-light;
+//** Blockquote font size
+@blockquote-font-size:        (@font-size-base * 1.25);
+//** Blockquote border color
+@blockquote-border-color:     @gray-lighter;
+//** Page header border color
+@page-header-border-color:    @gray-lighter;
+//** Width of horizontal description list titles
+@dl-horizontal-offset:        @component-offset-horizontal;
+//** Point at which .dl-horizontal becomes horizontal
+@dl-horizontal-breakpoint:    @grid-float-breakpoint;
+//** Horizontal line color.
+@hr-border:                   @gray-lighter;
diff --git a/less/bootstrap/wells.less b/less/bootstrap/wells.less
new file mode 100644
index 0000000..15d072b
--- /dev/null
+++ b/less/bootstrap/wells.less
@@ -0,0 +1,29 @@
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: @well-bg;
+  border: 1px solid @well-border;
+  border-radius: @border-radius-base;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+  blockquote {
+    border-color: #ddd;
+    border-color: rgba(0,0,0,.15);
+  }
+}
+
+// Sizes
+.well-lg {
+  padding: 24px;
+  border-radius: @border-radius-large;
+}
+.well-sm {
+  padding: 9px;
+  border-radius: @border-radius-small;
+}
diff --git a/less/bottom-sheet.less b/less/bottom-sheet.less
new file mode 100644
index 0000000..47bbbd7
--- /dev/null
+++ b/less/bottom-sheet.less
@@ -0,0 +1,54 @@
+.bottom-sheet {
+    @media (max-width: @screen-sm-max) {
+        .dropdown-menu {
+            display: block;
+        	visibility: hidden;
+        	
+        	position: fixed;
+        	left: 0;
+        	right: 0;
+        	bottom: 0;
+        
+        	margin: 0;
+        	max-height: 60%;
+        
+        	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
+        	overflow: auto;
+        	-webkit-overflow-scrolling: touch;
+        	transform: translate3d(0, 350px, 0);
+        	transition: transform 0.3s, visibility 0s 0.3s;
+        	z-index: 995;
+        	padding: 5px 0 10px;
+        	border: none;
+        	border-radius: 0;
+        	
+        	li {    
+        	    a {
+        	        padding: 10px 20px;
+        	    }
+        		
+        		&.divider {
+        		    padding: 0;
+        		}
+        
+        		&.active {
+        			background-color: @btn-primary-bg;
+        			color: @btn-primary-color;
+        		}
+        	}
+        }
+        
+        &.open {
+            .dropdown-menu {
+                transform: none;
+            	visibility: visible;
+            	transition-delay: 0s;
+            	top: initial;
+        	}
+        }
+        
+        .dropdown-backdrop {
+            background-color: rgba(0, 0, 0, .3);
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/categories.less b/less/categories.less
new file mode 100644
index 0000000..1894d26
--- /dev/null
+++ b/less/categories.less
@@ -0,0 +1,105 @@
+.categories {
+    
+    .categories-header {
+        font-weight: 500;
+        text-align: left;
+        text-transform: uppercase;
+        
+        .header-title {
+            padding-bottom: 20px;
+            margin-top: 10px;
+            border-bottom: 2px solid @primary-color;
+        }
+    }
+    
+    .category-info {
+        padding: 25px 0;
+        margin-right: 20px;
+    
+        @media (max-width: @screen-sm-max) {
+            padding: 20px 0;
+            margin-right: 0;
+        }
+    
+        .category-info-content {
+            
+            .category-icon {
+                float: left;
+                color: @primary-color;
+                font-size: 16px;
+                margin-top: 2px;
+            }
+            
+            .category-title {
+                font-weight: 700;
+                font-size: 20px;
+                color: #333;
+                margin-left: 10px;
+            }
+            
+            .category-description {
+                margin: 5px 0 0 30px;
+            }
+        }
+        
+        .subcategories {
+            margin-left: 27px;
+            
+            .subcategory {
+                display: inline-block;
+                margin: 10px 0;
+                
+                .subcategory-icon {
+                    color: @primary-color;
+                    font-size: 16px;
+                }
+                
+                &:not(:last-child) {
+                    margin-right: 20px;
+                }
+                
+                .subcategory-title {
+                    color: #333;
+                }
+            }
+        }
+    }
+    
+    .total-topic-count, .total-post-count {
+        padding: 25px 0;
+        font-weight: 700;
+        text-align: center;
+    }
+    
+    .teaser {
+        padding: 28px 0 22px;
+        font-size: 13px;
+        font-weight: 500;
+        
+        .user-icon, .user-avatar {
+            float: left;
+            margin-right: 10px;
+        }
+            
+        .user-icon {
+            .user-icon(40px, 1.7em);
+        }
+        
+        .user-avatar {
+            .user-avatar(40px);
+        }
+        
+        a {
+            display: table-row;
+            color: @primary-color;
+            
+            &:hover {
+                text-decoration: none;
+            }
+            
+            &.permalink {
+                color: #999;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/category.less b/less/category.less
new file mode 100644
index 0000000..3d72ba5
--- /dev/null
+++ b/less/category.less
@@ -0,0 +1,177 @@
+.category {
+    .topics-header {
+        padding-top: 15px;
+        margin-bottom: 10px;
+        font-weight: 500;
+        text-align: left;
+        text-transform: uppercase;
+        
+        .header-title {
+            padding-bottom: 20px;
+            margin-top: 10px;
+            border-bottom: 2px solid @primary-color;
+        }
+    }
+    
+    .topic-list {
+        @media (max-width: @screen-xs-max) {
+            margin-top: 15px;
+        }
+    }
+    
+    [component="category/topic"] {
+        padding: 15px 0;
+        
+        .topic-author {
+            display: table-cell;
+            padding-right: 15px;
+    
+            .user-avatar {
+                .user-avatar(45px);
+                
+                @media (max-width: @screen-xs-max) {
+                    .user-avatar(35px);
+                }
+            }
+            
+            .user-icon {
+                .user-icon(45px, 2em);
+                
+                @media (max-width: @screen-xs-max) {
+                    .user-icon(35px, 1.5em);
+                }
+            }
+        }
+        
+        .title {
+            font-weight: 600;
+            font-size: 18px;
+            display: table-cell;
+            vertical-align: top;
+            
+            a {
+                color: #333;
+            }
+            
+            @media (max-width: @screen-sm-max) {
+                font-size: 16px;
+            }
+            
+            small {
+                display: block;
+                font-size: 65%;
+                font-weight: 500;
+                padding-top: 5px;
+                color: #999;
+                
+                a {
+                    color: #999;
+                }
+            }
+        }
+        
+        &.unread {
+            .title {
+                a {
+                    color: @primary-color;
+                }
+                
+                small {
+                     a {
+                        color: #999;
+                    }
+                }
+            }
+        }
+        
+        &.deleted {
+            opacity: .3;
+        }
+        
+        .total-post-count, .total-view-count {
+            font-weight: 600;
+            text-align: center;
+        }
+        
+        .teaser {
+            font-size: 12px;
+            font-weight: 500;
+        
+            .user-avatar, .user-icon {
+                float: left;
+                margin-right: 10px;
+            }
+            
+            .user-avatar {
+                .user-avatar(32px);
+            }
+            
+            .user-icon {
+                .user-icon(32px, 1.4em);
+            }
+            
+            a {
+                display: table-row;
+                color: @primary-color;
+                
+                &:hover {
+                    text-decoration: none;
+                }
+                
+                &.permalink {
+                    color: #999;
+                }
+            }
+        }
+    }
+    
+    #category-no-topics {
+        margin-top: 20px;
+    }
+    
+    .subcategory {
+        .category-info {
+            padding: 15px 0;
+            
+            @media (max-width: @screen-sm-max) {
+                padding: 10px 0;
+            }
+            
+            .category-info-content {
+            
+                .category-icon {
+                    font-size: 14px;
+                }
+                
+                .category-title {
+                    font-weight: 600;
+                    font-size: 18px;
+                }
+                
+                .category-description {
+                    font-size: 12px;
+                }
+            }
+        }
+        
+        .total-topic-count, .total-post-count {
+            padding: 15px 0;
+        }
+        
+        .teaser {
+            padding: 18px 0 12px;
+            font-weight: 500;
+            font-size: 12px;
+            
+            .user-icon {
+                .user-icon(32px, 1.3em);
+                margin-right: 10px;
+            }
+            
+            .user-avatar {
+                .user-avatar(32px);
+                margin-right: 10px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/chat.less b/less/chat.less
new file mode 100644
index 0000000..6f342c3
--- /dev/null
+++ b/less/chat.less
@@ -0,0 +1,322 @@
+.chats.dropdown {
+    .dropdown-menu {
+        min-width: 250px;
+        list-style: none;
+        
+        .chat-list {
+            max-height: 250px;
+            overflow: auto;
+            
+            a {
+                padding: 10px;
+                margin-bottom: 5px;
+                display: flex;
+                cursor: pointer;
+                color: #333;
+                
+                .chat-image {
+					display: flex;
+		            flex: none;
+		            align-items: center;
+		            margin-right: 10px;
+                
+                    .user-avatar {
+                        .user-avatar(30px);
+                    }
+                    
+                    .user-icon {
+                        .user-icon(30px, 1.3em);
+                    }
+                }
+                
+                &.unread {
+                    background-color: @primary-color;
+                    color: #fff;
+                }
+            }
+        }
+        
+        .chat-dropdown-link {
+            text-align: center;
+            
+            a {
+                padding: 5px 0;
+            }
+        }
+        
+        .mark-all-read {
+            border-top: 1px solid #eaeaea;
+            border-bottom: 1px solid #eaeaea;
+        }
+    }
+}
+
+.chat-modal {
+    .modal-header {
+        
+        .chat-room-name {
+            margin: 0;
+        }
+        
+        .close {
+            padding: 0 10px;
+        }
+        
+        .users-tag-container {
+            .bootstrap-tagsinput {
+                .label {
+                    padding: .2em .6em 0;
+                }
+            }
+        }
+    }
+    
+    .modal-content {
+        border: none;
+    }
+    
+    .chat-content {
+        list-style: none;
+        padding-left: 0;
+        height: 250px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        resize: none;
+        word-wrap: break-word;
+        
+        .chat-message {
+            .message-header {
+                
+                .user-avatar {
+                    .user-avatar(30px);
+                    display: inline-block;
+                }
+                
+                .user-icon {
+                    .user-icon(30px, 1.3em);
+                    display: inline-block;
+                }
+                
+                .chat-user {
+                    margin-left: 10px;
+                }
+                
+                .chat-timestamp {
+                    font-size: 85%;
+                    color: #999;
+                    margin-left: 10px;
+                }
+            }
+            
+            &[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
+                &[data-break="false"] {
+                    .message-header {
+                        display: none;
+                    }
+                }
+            }
+            
+            .message-body {
+                padding-left: 45px;
+            }
+            
+            .controls {
+                display: none;
+            }
+            
+            &:hover {
+                .controls {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
+
+.expanded-chat {
+    
+    [component="chat/room/name"] {
+        margin: 5px 0;
+    }
+    
+    .users-tag-container {
+        .bootstrap-tagsinput {
+            .label {
+                padding: .2em .6em 0;
+            }
+        }
+    }
+    
+    .chat-content {
+        list-style: none;
+        padding-left: 0;
+        overflow: auto;
+        
+        .chat-message {
+            margin-top: 20px;
+            
+            .message-header {
+                .user-avatar {
+                    .user-avatar(30px);
+                    display: inline-block;
+                }
+                
+                .user-icon {
+                    .user-icon(30px, 1.3em);
+                    display: inline-block;
+                }
+                
+                .chat-user {
+                    margin-left: 10px;
+                }
+                
+                .chat-timestamp {
+                    font-size: 85%;
+                    color: #999;
+                    margin-left: 10px;
+                }
+            }
+            
+            &[data-self="0"] + [data-self="0"], &[data-self="1"] + [data-self="1"] {
+                &[data-break="false"] {
+                    margin-top: 0px;
+                    
+                    .message-header {
+                        display: none;
+                    }
+                }
+            }
+            
+            .message-body {
+                padding-left: 45px;
+                margin-top: 10px;
+                
+                p {
+                    margin: 0;
+                }
+            }
+            
+            .controls {
+                display: none;
+            }
+            
+            &:hover {
+                .controls {
+                    display: block;
+                }
+            }
+            
+            .text-muted {
+                padding: 3px 0 0 3px;
+            }
+        }
+    }
+}
+
+.chats-list {
+    list-style: none;
+    padding-left: 0;
+    border: 1px solid #eaeaea;
+    overflow: auto;
+    
+    [component="chat/recent/room"] {
+        padding: 10px;
+        border-bottom: 1px solid #eaeaea;
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+        
+        .chat-image {
+            display: flex;
+            flex: none;
+            align-items: center;
+            margin-right: 10px;
+            
+            .user-avatar {
+                .user-avatar(45px);
+            }
+            
+            .user-icon {
+                .user-icon(45px, 2em);
+            }
+        }
+        
+        .chat-body {
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            
+            .chat-main {
+                display: flex;
+                flex-direction: row;
+                
+                .chat-room-name {
+                    display: flex;
+                    flex-grow: 1;
+                }
+                
+                .teaser-timestamp {
+                    font-size: 10px;
+                    margin-left: 5px;
+                }
+            }
+            
+            .chat-secondary {
+                display: flex;
+                flex-direction: row;
+                
+                .teaser-content {
+                    display: flex;
+                    flex: 1;
+                    overflow: hidden;
+                    font-size: 12px;
+                    color: #999;
+                }
+                
+                .leave {
+                    color: #999;
+                    opacity: .3;
+                    
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        
+        &.bg-primary {
+            .chat-body {
+                .chat-secondary {
+                    .teaser-content {
+                        color: #ddd;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+.chat-search-list {
+    list-style: none;
+    padding-left: 0;
+    
+    [component="chat/search/user"] {
+        padding: 10px;
+        
+        img {
+            .user-avatar(32px);
+        }
+        
+        .user-icon {
+            .user-icon(32px, 1.3em);
+        }
+        
+        i.status {
+            position: relative;
+            top: -15px;
+            left: -7px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/composer.less b/less/composer.less
new file mode 100644
index 0000000..856aa8d
--- /dev/null
+++ b/less/composer.less
@@ -0,0 +1,7 @@
+.composer {
+    .preview {
+        background-color: #f5f5f5;
+        border: 1px solid #e3e3e3;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+    }
+}
\ No newline at end of file
diff --git a/less/groups.less b/less/groups.less
new file mode 100644
index 0000000..e0f2f8f
--- /dev/null
+++ b/less/groups.less
@@ -0,0 +1,75 @@
+.groups {
+    
+    #groups-list {
+        margin-top: 20px;
+    
+        .list-cover {
+    		display: block;
+    		background-size: cover;
+    		min-height: 125px;
+    		background-position: 50% 50%;
+    		
+    		.panel-title {
+    		    background-color: rgba(0,0,0,0.5);
+    		    color: #fff;
+    		    display: inline-block;
+                padding: 5px;
+    		}
+        }
+    }
+    
+    .members {
+        list-style: none;
+        padding: 0;
+        
+        .user-avatar {
+            .user-avatar(30px);
+        }
+        
+        .user-icon {
+            .user-icon(30px, 1.3em);
+        }
+    }
+    
+    .posts-list {
+        .posts-list-item {
+            margin-bottom: 20px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid #eaeaea;
+            
+            .post-body {
+                .topic-title {
+                    font-weight: 600;
+                    font-size: 18px;
+                    color: #333;
+                }
+                
+                .topic-category>a, .timeago {
+                    color: #777;
+                    font-size: 85%;
+                }
+            }
+        }
+    }
+    
+    .user-avatar {
+        .user-avatar(30px);
+    }
+    
+    .user-icon {
+        .user-icon(30px, 1.3em);
+    }
+    
+    .btn-info {
+        color: #fff;
+    }
+    
+    .panel-default {
+        border-color: #eaeaea;
+        
+        .panel-heading {
+            background: none;
+            border-color: #eaeaea;
+        }    
+    }
+}
\ No newline at end of file
diff --git a/less/header.less b/less/header.less
new file mode 100644
index 0000000..15f901c
--- /dev/null
+++ b/less/header.less
@@ -0,0 +1,197 @@
+.navbar-default {
+    background-color: #fff;
+    border-bottom-color: #fff;
+    transition: all 0.3s ease-in-out;
+    
+    &.scrolled {
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+        transition: all 0.3s ease-in-out;
+        
+        #main-nav {
+            .active>a {
+                color: initial;
+                border-bottom: 2px solid @primary-color;
+                transition: all 0.3s ease-in-out;
+            }
+        }
+    }
+    
+    .search-menu {
+        #search-button {
+            padding: 10px;
+            margin: 0 5px;
+        }
+        
+        #search-form {
+            padding-left: 0;
+            
+        	#search-button {
+        		float: right;
+        		max-width: 60px;
+        		width: auto;
+        		transition-property: max-width, padding-left, padding-right;
+        		transition-duration: .2s;
+        		transition-timing-function: ease;
+        		overflow: hidden;
+        	}
+        	
+        	#search-button.hidden {
+        		display: inline-block !important;
+        		visibility: visible !important;
+        		max-width: 0;
+        		padding-left: 0;
+        		padding-right: 0;
+        	}
+        	
+        	#search-fields {
+        		width: auto;
+        		max-width: 100%;
+        		overflow: hidden;
+        		transition: max-width 0.2s ease 0s;
+        		max-height: 42px;
+        		float: right;
+        		display: inline-block !important;
+        		visibility: visible !important;
+        
+        		&.hidden {
+        			max-width: 0;
+        		}
+        
+        		.form-group .advanced-search-link {
+        			margin: 0;
+        			width: 0;
+        			position: relative;
+        			left: -30px;
+        		}
+        	}
+        }
+        
+        #search-fields {
+            .form-control {
+                margin: 5px 0;
+            }
+        }
+    }
+    
+    .pagination-block {
+        transition: opacity 250ms ease-in;
+		opacity: 0;
+		pointer-events: none;
+
+		&.ready {
+			opacity: 1;
+			pointer-events: inherit;
+		}
+		
+        .dropdown-toggle {
+            display: inline-block;
+            margin: 0;
+        }
+        
+        .progress-container {
+			height: 2px;
+			position: absolute;
+			bottom: 8px;
+			left: 8px;
+			background: @gray-lighter;
+			width: 90%;
+			margin: auto;
+
+			.progress-bar {
+				background-color: @primary-color;
+				height: 2px;
+			}
+		}
+    }
+    
+    #main-nav {
+        .active>a {
+            color: @primary-color;
+            background: none;
+            
+            &:focus {
+                background: none;
+            }
+        }
+        
+        li>a {
+            border-bottom: 2px solid #fff;
+            
+            &:hover {
+                border-bottom-color: @primary-color;
+            }
+        }
+    }
+    
+    .navbar-nav {
+        >li>a {
+            padding: 20px 10px;
+            margin: 0 5px;
+        }
+    }
+    
+    .navbar-toggle {
+        border: none;
+    }
+}
+
+.navbar-brand {
+	padding: 5px 15px;
+	height: auto;
+	margin-top: 15px;
+}
+
+#user_label {
+    #user_dropdown {
+        padding: 15px 10px;
+    }
+    
+    .user-icon {
+        .user-icon(30px, 1.4em);
+    }
+    
+    .user-avatar {
+        .user-avatar(30px);
+    }
+}
+
+.unread-count:after {
+    content: attr(data-content);
+    position: absolute;
+    left: 18px;
+    top: 13px;
+    font-size: 11px;
+    text-align: center;
+    color: #fff;
+    font-weight: 500;
+    min-width: 16px;
+    border-radius: 3px;
+    background: #D50000;
+    padding: 2px 2px 0 2px;
+    font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.header {
+    .navbar-toggle {
+		.notification-icon {
+			position: absolute;
+			left: -13px;
+			top: 14px;
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+}
+
+#mobile-menu [component="notifications/icon"].unread-count:after, .slideout-menu .unread-count:after {
+	position: relative;
+	left: -6px;
+	top: -12px;
+	padding: 0 3px;
+}
+
+#mobile-menu [component="notifications/icon"].unread-count:after {
+    top: -6px;
+}
\ No newline at end of file
diff --git a/less/input.less b/less/input.less
new file mode 100644
index 0000000..44a5eff
--- /dev/null
+++ b/less/input.less
@@ -0,0 +1,223 @@
+/*
+ * Checkbox and Radio
+ */
+
+.input-helper:before,
+.input-helper:after,
+.checkbox label:before,
+.radio label:before,
+.radio-inline:before,
+.checkbox-inline:before {
+    -webkit-transition: all;
+    -o-transition: all;
+    transition: all;
+    -webkit-transition-duration: 250ms;
+    transition-duration: 250ms;
+}
+
+.checkbox label,
+.radio label,
+.radio-inline,
+.checkbox-inline {
+    padding-left: 30px;
+    position: relative;
+}
+
+.checkbox label:before,
+.radio label:before,
+.radio-inline:before,
+.checkbox-inline:before {
+    content: '';
+    width: 47px;
+    height: 47px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.04);
+    position: absolute;
+    left: -15px;
+    top: -15px;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+}
+
+.checkbox label:active:before,
+.radio label:active:before,
+.radio-inline:active:before,
+.checkbox-inline:active:before {
+    opacity: 1;
+    filter: alpha(opacity=100);
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+}
+
+.checkbox label,
+.radio label {
+    display: block;
+}
+
+.checkbox input,
+.radio input {
+    top: 0;
+    left: 0;
+    margin-left: 0 !important;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    filter: alpha(opacity=0);
+    margin-top: 0;
+}
+
+.checkbox input:checked+.input-helper:before,
+.radio input:checked+.input-helper:before {
+    border-color: @primary-color; //#26a69a;
+}
+
+.checkbox .input-helper:before,
+.radio .input-helper:before,
+.checkbox .input-helper:after,
+.radio .input-helper:after {
+    position: absolute;
+    content: "";
+}
+
+.checkbox .input-helper:before,
+.radio .input-helper:before {
+    left: 0;
+    border: 2px solid #7a7a7a;
+}
+
+.checkbox.disabled,
+.radio.disabled {
+    opacity: 0.6;
+    filter: alpha(opacity=60);
+}
+
+.checkbox input {
+    width: 17px;
+    height: 17px;
+}
+
+.checkbox input:checked+.input-helper:before {
+    background-color: @primary-color //#26a69a;
+}
+
+.checkbox input:checked+.input-helper:after {
+    opacity: 1;
+    filter: alpha(opacity=100);
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+}
+
+.checkbox .input-helper:before {
+    top: 0;
+    width: 17px;
+    height: 17px;
+    border-radius: 2px;
+}
+
+.checkbox .input-helper:after {
+    opacity: 0;
+    filter: alpha(opacity=0);
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+    content: '\f00c';
+    font-family: "FontAwesome";
+    position: absolute;
+    font-size: 12px;
+    left: 1px;
+    top: 1px;
+    color: #fff;
+}
+
+.radio input {
+    width: 19px;
+    height: 19px;
+}
+
+.radio input:checked+.input-helper:after {
+    -webkit-transform: scale(1);
+    -ms-transform: scale(1);
+    -o-transform: scale(1);
+    transform: scale(1);
+}
+
+.radio .input-helper:before {
+    top: -1px;
+    width: 19px;
+    height: 19px;
+    border-radius: 50%;
+}
+
+.radio .input-helper:after {
+    width: 9px;
+    height: 9px;
+    background: @primary-color; //#009688;
+    border-radius: 50%;
+    top: 4px;
+    left: 5px;
+    -webkit-transform: scale(0);
+    -ms-transform: scale(0);
+    -o-transform: scale(0);
+    transform: scale(0);
+}
+
+.checkbox-inline,
+.radio-inline {
+    vertical-align: top;
+    margin-top: 0;
+    padding-left: 25px;
+}
+
+.checkbox {
+    &.fa-check-square-o:before,
+    &.fa-square-o:before {
+        content: none;
+    }
+}
+
+[component="category/topic"] {
+    .checkbox .select {
+        top: 0;
+        left: 0;
+        margin-left: 0 !important;
+        z-index: 1;
+        cursor: pointer;
+        opacity: 0;
+        filter: alpha(opacity=0);
+        margin-top: 0;
+    }
+    
+    .checkbox .select {
+        width: 17px;
+        height: 17px;
+    }
+    
+    label {
+        padding-left: 20px;
+    }
+    
+    &.selected {
+        .checkbox .select+.input-helper:before {
+            border-color: @primary-color;
+            background-color: @primary-color;
+        }
+        
+        .checkbox .select+.input-helper:after {
+            opacity: 1;
+            filter: alpha(opacity=100);
+            -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+            -o-transform: scale(1);
+            transform: scale(1);
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/loader.less b/less/loader.less
new file mode 100644
index 0000000..9c651c1
--- /dev/null
+++ b/less/loader.less
@@ -0,0 +1,40 @@
+.loader {
+    height: 2px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: #ddd;
+}
+
+.loader:before {
+    display: block;
+    position: absolute;
+    content: "";
+    left: -200px;
+    width: 200px;
+    height: 2px;
+    background-color: #2980b9;
+    animation: loading 2s linear infinite;
+}
+
+@keyframes loading {
+    from {
+        left: -200px;
+        width: 30%;
+    }
+    50% {
+        width: 30%;
+    }
+    70% {
+        width: 70%;
+    }
+    80% {
+        left: 50%;
+    }
+    95% {
+        left: 120%;
+    }
+    to {
+        left: 100%;
+    }
+}
\ No newline at end of file
diff --git a/less/login-register.less b/less/login-register.less
new file mode 100644
index 0000000..9d8145a
--- /dev/null
+++ b/less/login-register.less
@@ -0,0 +1,73 @@
+.login {
+    .register-forgot-pwd {
+        margin-top: 15px;
+    }
+}
+
+.register {
+    .register-success {
+		.form-control {
+			border-color: #5cb85c;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.register-feedback {
+			color: #5cb85c;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
+	
+	.register-danger {
+		.form-control {
+			border-color: #d9534f;
+			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+			padding-right: 2.25rem;
+		    background-repeat: no-repeat;
+		    background-position: center right .625rem;
+		    -webkit-background-size: 1.25rem 1.25rem;
+		    background-size: 1.25rem 1.25rem;
+		}
+		
+		.register-feedback {
+			color: #d9534f;
+			display: block;
+			margin-top: .25rem;
+		}
+	}
+}
+
+.login-block, .register-block {
+    margin-top: 20px;
+}
+
+.login, .register {
+    .alt-logins {
+        width: 100%;
+        text-align: center;
+        
+        div {
+            display: inline-block;
+        }
+    }
+    
+    .fa-facebook-square {
+    	color:#3b5998;
+    	background:transparent;
+    }
+    
+    .fa-twitter-square {
+    	color:#2fc2ef;
+    	background:transparent;
+    }
+    
+    .fa-google-plus-square {
+    	color:#df5138;
+    	background:transparent;
+    }
+}
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
new file mode 100644
index 0000000..83f2ef2
--- /dev/null
+++ b/less/mixins.less
@@ -0,0 +1,18 @@
+.square-shape(@size) {
+    width: @size;
+    height: @size;
+    border-radius: 4px;
+}
+
+.user-avatar(@size) {
+    .square-shape(@size);
+}
+
+.user-icon(@size, @font-size) {
+    .square-shape(@size);
+    line-height: @size;
+    text-align: center;
+    color: #fff;
+    font-size: @font-size;
+    font-weight: 700;
+}
\ No newline at end of file
diff --git a/less/mobile.less b/less/mobile.less
new file mode 100644
index 0000000..5d384c4
--- /dev/null
+++ b/less/mobile.less
@@ -0,0 +1,250 @@
+.slideout-menu {
+	position: fixed;
+	left: auto;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 0;
+	width: 256px;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+	display: none;
+}
+
+/* iPhone 5 and other such devices */
+@media (max-width: @screen-sm-max) {
+	.chat-modal {
+		width: 100%;
+		height: 100%;
+		top: 0 !important;
+		left: 0 !important;
+
+		.modal-dialog {
+			margin: 0;
+			height: 100%;
+			width: 100%;
+
+			.modal-content {
+				height: 100%;
+			}
+		}
+	}
+}
+
+@media (max-width: @screen-md-max) {
+	body {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
+	#panel {
+		background-color: inherit;
+		min-height: 100%;
+		padding-top: 60px;
+	}
+
+	body, #panel, .slideout-menu {
+		-webkit-overflow-scrolling: touch;
+	}
+
+	#menu {
+
+		padding-top: 100px;
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
+
+		a {
+			color: #fff;
+			text-decoration: none;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		.chat-list {
+			max-height: 100%;
+
+			li {
+				width: auto;
+				padding: 0;
+
+				a {
+					color: white;
+
+					i {
+						left: 44px;
+						top: 9px;
+					}
+				}
+			}
+		}
+
+		.menu-section .chat-list, .menu-section .notification-list-mobile {
+			.user-link {
+				display: inline;
+			}
+			.unread {
+				background-color: inherit;
+
+				a:after {
+					content: "new";
+					text-transform: uppercase;
+					color: #FFF;
+					margin-left: 5px;
+					font-size: 10px;
+					background: #C91106;
+					border: 1px solid #890405;
+					padding: 2px 3px;
+					border-radius: 5px;
+				}
+			}
+		}
+
+		.counter {
+			font-style: normal;
+
+			&:after {
+				left: 5px;
+				top: -1px;
+				padding: 3px 7px;
+				background: #333;
+				border: 1px solid #222;
+			}
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
+	.menu-header-title {
+		font-weight: 400;
+		letter-spacing: 0.5px;
+		margin: 0;
+	}
+
+	.menu-section {
+		margin: 25px 0;
+	}
+
+	.menu-section-title {
+		text-transform: uppercase;
+		color: #85888d;
+		font-weight: 200;
+		font-size: 13px;
+		letter-spacing: 1px;
+		padding: 0 20px;
+		margin:0;
+	}
+
+	.menu-section-list {
+		padding:0;
+		margin: 10px 0;
+		list-style:none;
+
+		a {
+			display: block;
+			padding: 10px 20px;
+		}
+
+		a:hover {
+			background-color: rgba(255, 255, 255, 0.1);
+			text-decoration: none;
+		}
+	}
+
+	.slideout-panel {
+		position: relative;
+		z-index: 1;
+	}
+
+	.slideout-open,
+	.slideout-open body,
+	.slideout-open .slideout-panel {
+		overflow: hidden;
+		overflow-y: hidden !important;
+	}
+
+	.slideout-open .slideout-menu {
+		display: block;
+	}
+
+	.slideout-open {
+		overflow-y: hidden;
+		height: 100%;
+	}
+
+	.menu-profile {
+		text-align: center;
+		background: #101010;
+		position: absolute;
+		height: 75px;
+		width: 100%;
+		top: 0;
+		z-index: 1;
+		
+		.user-avatar {
+			.user-avatar(70px);
+		}
+		
+		.user-icon {
+			.user-icon(70px, 4rem);
+		}
+
+		.user-avatar, .user-icon {
+			position: absolute;
+			bottom: -22px;
+			left: 93px;
+		}
+
+		i {
+			position: absolute;
+			left: 148px;
+			font-size: 20px;
+			top: 19px;
+		}
+	}
+
+	[data-section="notifications"] {
+		.notification-image, .mark-read {
+			display: none;
+		}
+		
+		.notification-msg {
+			font-size: 13px;
+		}
+		
+		.relTime {
+			color: #fff;
+			float: right;
+			font-size: 12px;
+            font-weight: 500;
+            padding: 10px;
+		}
+	}
+	
+	[data-section="chats"] {
+		.chat-list {
+			a {
+				display: flex;
+				flex-direction: row;
+				
+				.chat-image {
+					display: flex;
+		            flex: none;
+		            align-items: center;
+		            margin-right: 10px;
+			
+					.user-avatar {
+						.user-avatar(30px);
+					}
+					
+					.user-icon {
+						.user-icon(30px, 1.3em);
+					}
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/less/modal.less b/less/modal.less
new file mode 100644
index 0000000..49a246b
--- /dev/null
+++ b/less/modal.less
@@ -0,0 +1,19 @@
+.modal {
+    &.picture-switcher {
+        .modal-body {
+            
+            .media-object {
+                .user-avatar(30px);
+            }
+            
+            .user-icon {
+                .user-icon(30px, 1.3em);
+            }
+            
+            .btn-group .btn {
+                font-size: 12px;
+                padding: 6px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/notifications.less b/less/notifications.less
new file mode 100644
index 0000000..650d586
--- /dev/null
+++ b/less/notifications.less
@@ -0,0 +1,165 @@
+.notifications {
+    .notifications-list {
+        [component="notifications/item"] {
+            padding: 10px 0;
+            
+            .notification-image {
+                display: table-cell;
+                padding-right: 15px;
+                
+                .user-avatar {
+                    .user-avatar(35px);
+                }
+                
+                .user-icon {
+                    .user-icon(35px, 1.5em);
+                }
+            }
+            
+            .notification-msg {
+                display: table-cell;
+                vertical-align: top;
+                
+                [component="notifications/item/link"] {
+                    font-weight: 600;
+                    font-size: 16px;
+                }
+                
+                .timeago {
+                    display: block;
+                    padding-top: 5px;
+                    font-size: 85%;
+                    color: #999;
+                }
+            }
+            
+            &:not(.unread) {
+                .notification-msg {
+                    a {
+                        color: #999;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+.notifications.dropdown {
+    .dropdown-menu {
+        min-width: 300px;
+        list-style: none;
+        
+        .notification-list {
+            max-height: 250px;
+            overflow: auto;
+            list-style: none;
+            padding-left: 0;
+            
+            li {
+                padding: 5px 10px;
+                margin-bottom: 2px;
+            
+                .notification-image {
+                    display: table-cell;
+                    padding-right: 15px;
+                    
+                    .user-avatar {
+                        .user-avatar(30px);
+                    }
+                    
+                    .user-icon {
+                        .user-icon(30px, 1.3em);
+                    }
+                }
+                
+                .notification-msg {
+                    display: table-cell;
+                    vertical-align: top;
+                    
+                    .relTime {
+                        color: #999;
+                    }
+                    
+                    a {
+                        color: #333;
+                    }
+                }
+                
+                .relTime{
+                    padding-left: 10px;
+                    font-size: 12px;
+                    font-weight: 500;
+                    float: right;
+                }
+                    
+                .mark-read {
+                    float: right;
+                    position: relative;
+                    top: -3px;
+                    padding-left: 5px;
+                    color: #333;
+                    font-size: 14px;
+                    
+                    &:hover {
+                        color: #333;
+                        cursor: pointer;
+                        
+                        &:after {
+                            content: "\f111";
+                        }
+                    }
+                    
+                    &:after {
+                        font-family: "FontAwesome";
+                        content: "\f10c";
+                    }
+                }
+                
+                 &.unread {
+                     background-color: @primary-color;
+                     
+                     .relTime {
+                         color: #fff;
+                     }
+                     
+                    .notification-msg {
+                        a {
+                            color: #fff;
+                        }
+                    }
+                    
+                    .mark-read {
+                        &:hover {
+                            &:after {
+                                content: "\f10c";
+                            }
+                        }
+                        
+                        &:after {
+                            content: "\f111";
+                        }
+                    }
+                }
+                
+                &.no-notifs {
+                    text-align: center;
+                }
+            }
+        }
+        
+        .notif-dropdown-link {
+            text-align: center;
+            
+            a {
+                padding: 5px 0;
+            }
+        }
+        
+        .mark-all-read {
+            border-top: 1px solid #eaeaea;
+            border-bottom: 1px solid #eaeaea;
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/search.less b/less/search.less
new file mode 100644
index 0000000..acf0bf3
--- /dev/null
+++ b/less/search.less
@@ -0,0 +1,28 @@
+.search {
+    .post-preview-footer {
+        .user-avatar {
+            .user-avatar(32px);
+        }
+        
+        .user-icon {
+            .user-icon(32px, 1.4em);
+        }
+        
+        .post-footer-link, .timeago {
+            font-weight: 600;
+        }
+        
+        .timeago {
+            margin-left: 10px;
+            color: #999;
+        }
+    }
+    
+    .panel-default {
+        border-color: #eaeaea;
+        
+        .panel-heading {
+            border-color: #eaeaea;
+        }    
+    }
+}
\ No newline at end of file
diff --git a/less/slick.less b/less/slick.less
new file mode 100644
index 0000000..01b208a
--- /dev/null
+++ b/less/slick.less
@@ -0,0 +1,24 @@
+@import "variables";
+@import "mixins";
+@import "style";
+
+@import "mobile";
+@import "input";
+@import "modal";
+@import "bottom-sheet";
+//@import "loader";
+
+@import "alerts";
+@import "header";
+@import "categories";
+@import "category";
+@import "topic";
+@import "users";
+@import "account";
+@import "tags";
+@import "groups";
+@import "notifications";
+@import "chat";
+@import "search";
+@import "login-register";
+@import "composer";
\ No newline at end of file
diff --git a/less/style.less b/less/style.less
new file mode 100644
index 0000000..6ec18e5
--- /dev/null
+++ b/less/style.less
@@ -0,0 +1,74 @@
+@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);
+
+body {
+	@media (min-width: 979px)
+	{
+		padding-top: 70px;
+	}
+
+	@media (max-width: 979px)
+	{
+		padding-top: 70px;
+		padding-bottom: 50px;
+	}
+}
+
+*, :active, :hover {
+	outline: 0 !important;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
+}
+
+a, a:hover, a:visited, a:active, a:focus {
+	text-decoration: none;
+}
+
+#panel.slideout-panel {
+	@media (max-width: @screen-sm-max) {
+		min-height: 100vh;
+	}
+}
+
+#content {
+	transition: opacity 150ms linear;
+	margin-bottom: 20px;
+
+	&.ajaxifying {
+		opacity: 0;
+	}
+}
+
+@media (max-width: @screen-sm-max) {
+	.form-control {
+		font-size: 16px;
+		height: auto;
+	}
+}
+
+.status {
+	font-size: 10px;
+	vertical-align: middle;
+
+	&.online {
+		color: #5cb85c;
+	}
+
+	&.away {
+		color: #f0ad4e;
+	}
+
+	&.dnd {
+		color: #d9534f;
+	}
+
+	&.offline {
+		color: @gray;
+	}
+}
+
+.taskbar {
+	display: none !important;
+}
+
+.bootbox {
+	z-index: 100001;
+}
\ No newline at end of file
diff --git a/less/tags.less b/less/tags.less
new file mode 100644
index 0000000..41a6e60
--- /dev/null
+++ b/less/tags.less
@@ -0,0 +1,22 @@
+.tag-list {
+    margin-top: 20px;
+    
+    .tag-container {
+        margin: 20px 20px 20px 0;
+        
+        a {
+            color: #999;
+            padding: 2px 5px;
+            border-radius: 4px;
+            border: 1px solid @primary-color;
+            
+            &:hover {
+                color: @primary-color;
+            }
+        }
+        
+        .tag-item {
+            padding-right: 10px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/topic.less b/less/topic.less
new file mode 100644
index 0000000..b4000a2
--- /dev/null
+++ b/less/topic.less
@@ -0,0 +1,212 @@
+.topic {
+    .post-header {
+        padding-top: 12px;
+        margin-bottom: 24px;
+        
+        .post-time {
+            font-size: 13px;
+            color: #bbb;
+        }
+        
+        .votes {
+            a {
+                padding: 0 10px;
+                color: #777;
+                
+                &.upvoted, &.downvoted, &:hover {
+                    color: @primary-color;
+                }
+            }
+        }
+    }
+    
+    [component="post"] {
+        padding-bottom: 20px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ddd;
+        
+        &.deleted {
+            .post-content {
+                opacity: .3;
+            }
+        }
+        
+        &.highlight {
+            border-bottom: 1px solid @primary-color;
+        }
+    }
+    
+    .post {
+        .post-author {
+            text-align: center;
+            padding-bottom: 20px;
+            
+            a {
+                display: inline-block;
+            }
+            
+            @media (max-width: @screen-xs-max) {
+                text-align: left;
+            }
+            
+            .user-icon {
+                .user-icon(80px, 4em);
+                
+                @media (max-width: @screen-xs-max) {
+                    margin-right: 10px;
+                    .user-icon(60px, 3em);
+                }
+            }
+            
+            .user-avatar {
+                .user-avatar(80px);
+                
+                @media (max-width: @screen-xs-max) {
+                    margin-right: 10px;
+                    .user-avatar(60px);
+                }
+            }
+        }
+        
+        .author {
+            margin-top: 10px;
+            vertical-align: top;
+            
+            @media (max-width: @screen-xs-max) {
+                display: inline-block;
+                margin-top: 0;
+            }
+            
+            .group-label {
+                padding: 0 4px;
+                border-radius: 2px;
+            }
+        }
+        
+        .post-content {
+            padding-bottom: 15px;
+            
+            h1 {
+                margin-top: 0;
+            }
+        }
+    }
+    
+    .post-footer {
+        .post-tools {
+            a {
+                padding: 0 10px;
+            }
+        }
+        
+        .moderator-tools {
+            padding-right: 10px;
+            padding-left: 10px;
+            
+            >a {
+                color: #333;
+            }
+            
+            .menu-icon {
+                display: inline-block;
+            }
+        }
+    }
+    
+    .quick-reply {
+        margin-top: 20px;
+        
+        .reply-user {
+            text-align: center;
+            
+            a {
+                display: inline-block;
+            
+                .user-avatar {
+                    .user-avatar(80px);
+                }
+                
+                .user-icon {
+                    .user-icon(80px, 4em);
+                }
+            }
+            
+            .author {
+                margin-top: 10px;
+            }
+        }
+        
+        button {
+            float: right;
+            display: block;
+            margin: 10px 15px 10px 0;
+        }
+    }
+    
+    .post-bar {
+        margin: 20px 0 40px;
+        
+        .stats {
+            display: inline-block;
+            text-align: center;
+            vertical-align: middle;
+            padding-right: 10px;
+            padding-left: 10px;
+        }
+        
+        .tags {
+            a {
+                color: #999;
+                padding: 0 5px;
+                border-radius: 4px;
+                border: 1px solid @primary-color;
+                
+                &:hover {
+                    color: @primary-color;
+                }
+                
+                .tag-item {
+                    padding-right: 5px;
+                }
+            }
+        }
+    }
+    
+    .pagination-block {
+		position: fixed;
+		width: 100%;
+		background-color: @gray-lighter;
+		bottom: 0px;
+		left: 0px;
+		z-index: 100;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+
+		&.ready {
+			opacity: 1;
+		}
+
+		.wrapper {
+			padding: 5px 0px 5px 0px;
+		}
+		.progress-bar {
+			background-color: @brand-info;
+			display:block;
+			z-index: -1;
+			position: absolute;
+		}
+	}
+}
+
+.fork-thread-card {
+    position: fixed;
+    bottom: 60px;
+    right: 10px;
+}
+
+
+.unread {
+    #category-no-topics {
+        margin-top: 15px;
+    }
+}
\ No newline at end of file
diff --git a/less/users.less b/less/users.less
new file mode 100644
index 0000000..f6296ea
--- /dev/null
+++ b/less/users.less
@@ -0,0 +1,42 @@
+.users-container {
+    list-style: none;
+    margin-top: 20px;
+    padding: 0;
+    
+    .users-box {
+        display: inline-block;
+        text-align: center;
+		vertical-align: top;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		width: 104px;
+		margin: 10px 0;
+		
+        .user-avatar {
+            .user-avatar(80px);
+        }
+        
+        .user-icon {
+            .user-icon(80px, 4em);
+        }
+        
+        &.anon-user {
+            .user-icon {
+                background: #bbb;
+                color: #fff;
+            }
+        }
+        
+        .user-info {
+            padding-top: 5px;
+            
+            .username {
+                max-width: 94px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                display: inline-block;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/less/variables.less b/less/variables.less
new file mode 100644
index 0000000..400ad49
--- /dev/null
+++ b/less/variables.less
@@ -0,0 +1,26 @@
+//Yellow 800
+@primary-color: #F9A825;
+
+//Yellow 900
+@primary-color: #F57F17;
+
+//Orange 700
+@primary-color: #F57C00;
+
+//Teal 700
+@primary-color: #00796B;
+
+//Cyan 700
+@primary-color: #0097A7;
+
+//Amber 900
+@primary-color: #FF6F00;
+
+//Deep Orange 700
+@primary-color: #E64A19;
+
+//Light Blue 600
+@primary-color: #039BE5;
+
+//Blue
+//@primary-color: #00aeef;
\ No newline at end of file
diff --git a/lib/admin.js b/lib/admin.js
new file mode 100644
index 0000000..f818bb2
--- /dev/null
+++ b/lib/admin.js
@@ -0,0 +1,24 @@
+'use strict';
+/* globals $, app */
+
+define('admin/plugins/slick', ['settings'], function(Settings) {
+
+	var ACP = {};
+
+	ACP.init = function() {
+		Settings.load('slick', $('.slick-settings'));
+
+		$('#save').on('click', function() {
+			Settings.save('slick', $('.slick-settings'), function() {
+				app.alert({
+					type: 'success',
+					alert_id: 'slick-saved',
+					title: 'Settings Saved',
+					message: 'Slick theme settings saved'
+				});
+			});
+		});
+	};
+
+	return ACP;
+});
\ No newline at end of file
diff --git a/lib/chats.js b/lib/chats.js
new file mode 100644
index 0000000..004cfbe
--- /dev/null
+++ b/lib/chats.js
@@ -0,0 +1,16 @@
+define('slick/chats', ['components', 'forum/chats'], function(components, coreChats) {
+	var Chats = {};
+
+	Chats.init = function() {
+		components.get('chat/recent').on('click', '[component="chat/recent/room"]', function(e) {
+			var env = utils.findBootstrapEnvironment();
+			if (env === 'xs' || env === 'sm') {
+				app.openChat($(this).attr('data-roomid'));
+			} else {
+				coreChats.switchChat($(this).attr('data-roomid'));
+			}
+		});
+	};
+
+	return Chats;
+});
\ No newline at end of file
diff --git a/lib/modules/slideout.min.js b/lib/modules/slideout.min.js
new file mode 100644
index 0000000..c94a27d
--- /dev/null
+++ b/lib/modules/slideout.min.js
@@ -0,0 +1,484 @@
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.Slideout=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+'use strict';
+
+/**
+ * Module dependencies
+ */
+var decouple = require('decouple');
+var Emitter = require('emitter');
+
+/**
+ * Privates
+ */
+var scrollTimeout;
+var scrolling = false;
+var doc = window.document;
+var html = doc.documentElement;
+var msPointerSupported = window.navigator.msPointerEnabled;
+var touch = {
+  'start': msPointerSupported ? 'MSPointerDown' : 'touchstart',
+  'move': msPointerSupported ? 'MSPointerMove' : 'touchmove',
+  'end': msPointerSupported ? 'MSPointerUp' : 'touchend'
+};
+var prefix = (function prefix() {
+  var regex = /^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/;
+  var styleDeclaration = doc.getElementsByTagName('script')[0].style;
+  for (var prop in styleDeclaration) {
+    if (regex.test(prop)) {
+      return '-' + prop.match(regex)[0].toLowerCase() + '-';
+    }
+  }
+  // Nothing found so far? Webkit does not enumerate over the CSS properties of the style object.
+  // However (prop in style) returns the correct value, so we'll have to test for
+  // the precence of a specific property
+  if ('WebkitOpacity' in styleDeclaration) { return '-webkit-'; }
+  if ('KhtmlOpacity' in styleDeclaration) { return '-khtml-'; }
+  return '';
+}());
+function extend(destination, from) {
+  for (var prop in from) {
+    if (from[prop]) {
+      destination[prop] = from[prop];
+    }
+  }
+  return destination;
+}
+function inherits(child, uber) {
+  child.prototype = extend(child.prototype || {}, uber.prototype);
+}
+
+/**
+ * Slideout constructor
+ */
+function Slideout(options) {
+  options = options || {};
+
+  // Sets default values
+  this._startOffsetX = 0;
+  this._currentOffsetX = 0;
+  this._opening = false;
+  this._moved = false;
+  this._opened = false;
+  this._preventOpen = false;
+  this._touch = options.touch === undefined ? true : options.touch && true;
+
+  // Sets panel
+  this.panel = options.panel;
+  this.menu = options.menu;
+
+  // Sets  classnames
+  if(this.panel.className.search('slideout-panel') === -1) { this.panel.className += ' slideout-panel'; }
+  if(this.menu.className.search('slideout-menu') === -1) { this.menu.className += ' slideout-menu'; }
+
+
+  // Sets options
+  this._fx = options.fx || 'ease';
+  this._duration = parseInt(options.duration, 10) || 300;
+  this._tolerance = parseInt(options.tolerance, 10) || 70;
+  this._padding = this._translateTo = parseInt(options.padding, 10) || 256;
+  this._orientation = options.side === 'right' ? -1 : 1;
+  this._translateTo *= this._orientation;
+
+  // Init touch events
+  if (this._touch) {
+    this._initTouchEvents();
+  }
+}
+
+/**
+ * Inherits from Emitter
+ */
+inherits(Slideout, Emitter);
+
+/**
+ * Opens the slideout menu.
+ */
+Slideout.prototype.open = function() {
+  var self = this;
+  this.emit('beforeopen');
+  if (html.className.search('slideout-open') === -1) { html.className += ' slideout-open'; }
+  this._setTransition();
+  this._translateXTo(this._translateTo);
+  this._opened = true;
+  setTimeout(function() {
+    self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
+    self.emit('open');
+  }, this._duration + 50);
+  return this;
+};
+
+/**
+ * Closes slideout menu.
+ */
+Slideout.prototype.close = function() {
+  var self = this;
+  if (!this.isOpen() && !this._opening) { return this; }
+  this.emit('beforeclose');
+  this._setTransition();
+  this._translateXTo(0);
+  this._opened = false;
+  setTimeout(function() {
+    html.className = html.className.replace(/ slideout-open/, '');
+    self.panel.style.transition = self.panel.style['-webkit-transition'] = self.panel.style[prefix + 'transform'] = self.panel.style.transform = '';
+    self.emit('close');
+  }, this._duration + 50);
+  return this;
+};
+
+/**
+ * Toggles (open/close) slideout menu.
+ */
+Slideout.prototype.toggle = function() {
+  return this.isOpen() ? this.close() : this.open();
+};
+
+/**
+ * Returns true if the slideout is currently open, and false if it is closed.
+ */
+Slideout.prototype.isOpen = function() {
+  return this._opened;
+};
+
+/**
+ * Translates panel and updates currentOffset with a given X point
+ */
+Slideout.prototype._translateXTo = function(translateX) {
+  this._currentOffsetX = translateX;
+  this.panel.style[prefix + 'transform'] = this.panel.style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
+};
+
+/**
+ * Set transition properties
+ */
+Slideout.prototype._setTransition = function() {
+  this.panel.style[prefix + 'transition'] = this.panel.style.transition = prefix + 'transform ' + this._duration + 'ms ' + this._fx;
+};
+
+/**
+ * Initializes touch event
+ */
+Slideout.prototype._initTouchEvents = function() {
+  var self = this;
+
+  /**
+   * Decouple scroll event
+   */
+  this._onScrollFn = decouple(doc, 'scroll', function() {
+    if (!self._moved) {
+      clearTimeout(scrollTimeout);
+      scrolling = true;
+      scrollTimeout = setTimeout(function() {
+        scrolling = false;
+      }, 250);
+    }
+  });
+
+  /**
+   * Prevents touchmove event if slideout is moving
+   */
+  this._preventMove = function(eve) {
+    if (self._moved) {
+      eve.preventDefault();
+    }
+  };
+  doc.addEventListener(touch.move, this._preventMove);
+
+  /**
+   * Resets values on touchstart
+   */
+  this._resetTouchFn = function(eve) {
+    if (typeof eve.touches === 'undefined') { return; }
+
+    self._moved = false;
+    self._opening = false;
+    self._startOffsetX = eve.touches[0].pageX;
+    self._preventOpen = (!self._touch || (!self.isOpen() && self.menu.clientWidth !== 0));
+  };
+  this.panel.addEventListener(touch.start, this._resetTouchFn);
+
+  /**
+   * Resets values on touchcancel
+   */
+  this._onTouchCancelFn = function() {
+    self._moved = false;
+    self._opening = false;
+  };
+  this.panel.addEventListener('touchcancel', this._onTouchCancelFn);
+
+  /**
+   * Toggles slideout on touchend
+   */
+  this._onTouchEndFn = function() {
+    if (self._moved) {
+      (self._opening && Math.abs(self._currentOffsetX) > self._tolerance) ? self.open() : self.close();
+    }
+    self._moved = false;
+  };
+  this.panel.addEventListener(touch.end, this._onTouchEndFn);
+
+  /**
+   * Translates panel on touchmove
+   */
+  this._onTouchMoveFn = function(eve) {
+  	self.emit('touchmove', eve.target);
+    if (scrolling || self._preventOpen || typeof eve.touches === 'undefined') { return; }
+
+    var dif_x = eve.touches[0].clientX - self._startOffsetX;
+    var translateX = self._currentOffsetX = dif_x;
+
+    if (Math.abs(translateX) > self._padding) { return; }
+
+    if (Math.abs(dif_x) > 20) {
+      self._opening = true;
+
+      var oriented_dif_x = dif_x * self._orientation;
+      if (self._opened && oriented_dif_x > 0 || !self._opened && oriented_dif_x < 0) { return; }
+      if (oriented_dif_x <= 0) {
+        translateX = dif_x + self._padding * self._orientation;
+        self._opening = false;
+      }
+
+      if (!self._moved && html.className.search('slideout-open') === -1) {
+        html.className += ' slideout-open';
+      }
+
+      self.panel.style[prefix + 'transform'] = self.panel.style.transform = 'translate3d(' + translateX + 'px, 0, 0)';
+      self.emit('translate', translateX, eve.target);
+      self._moved = true;
+    }
+
+  };
+  this.panel.addEventListener(touch.move, this._onTouchMoveFn);
+};
+
+Slideout.prototype.enableTouch = function() {
+  this._touch = true;
+  return this;
+};
+
+Slideout.prototype.disableTouch = function() {
+  this._touch = false;
+  return this;
+};
+
+Slideout.prototype.destroy = function() {
+  // Close before clean
+  this.close();
+
+  // Remove event listeners
+  doc.removeEventListener(touch.move, this._preventMove);
+  this.panel.removeEventListener(touch.start, this._resetTouchFn);
+  this.panel.removeEventListener('touchcancel', this._onTouchCancelFn);
+  this.panel.removeEventListener(touch.end, this._onTouchEndFn);
+  this.panel.removeEventListener(touch.move, this._onTouchMoveFn);
+  doc.removeEventListener('scroll', this._onScrollFn);
+
+  // Remove methods
+  this.open = this.close = function() {};
+
+  // Return the instance so it can be easily dereferenced
+  return this;
+};
+
+/**
+ * Expose Slideout
+ */
+module.exports = Slideout;
+
+},{"decouple":2,"emitter":3}],2:[function(require,module,exports){
+'use strict';
+
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    };
+}());
+
+function decouple(node, event, fn) {
+  var eve,
+      tracking = false;
+
+  function captureEvent(e) {
+    eve = e;
+    track();
+  }
+
+  function track() {
+    if (!tracking) {
+      requestAnimFrame(update);
+      tracking = true;
+    }
+  }
+
+  function update() {
+    fn.call(node, eve);
+    tracking = false;
+  }
+
+  node.addEventListener(event, captureEvent, false);
+  return captureEvent;
+}
+
+/**
+ * Expose decouple
+ */
+module.exports = decouple;
+
+},{}],3:[function(require,module,exports){
+"use strict";
+
+var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } };
+
+exports.__esModule = true;
+/**
+ * Creates a new instance of Emitter.
+ * @class
+ * @returns {Object} Returns a new instance of Emitter.
+ * @example
+ * // Creates a new instance of Emitter.
+ * var Emitter = require('emitter');
+ *
+ * var emitter = new Emitter();
+ */
+
+var Emitter = (function () {
+  function Emitter() {
+    _classCallCheck(this, Emitter);
+  }
+
+  /**
+   * Adds a listener to the collection for the specified event.
+   * @memberof! Emitter.prototype
+   * @function
+   * @param {String} event - The event name.
+   * @param {Function} listener - A listener function to add.
+   * @returns {Object} Returns an instance of Emitter.
+   * @example
+   * // Add an event listener to "foo" event.
+   * emitter.on('foo', listener);
+   */
+
+  Emitter.prototype.on = function on(event, listener) {
+    // Use the current collection or create it.
+    this._eventCollection = this._eventCollection || {};
+
+    // Use the current collection of an event or create it.
+    this._eventCollection[event] = this._eventCollection[event] || [];
+
+    // Appends the listener into the collection of the given event
+    this._eventCollection[event].push(listener);
+
+    return this;
+  };
+
+  /**
+   * Adds a listener to the collection for the specified event that will be called only once.
+   * @memberof! Emitter.prototype
+   * @function
+   * @param {String} event - The event name.
+   * @param {Function} listener - A listener function to add.
+   * @returns {Object} Returns an instance of Emitter.
+   * @example
+   * // Will add an event handler to "foo" event once.
+   * emitter.once('foo', listener);
+   */
+
+  Emitter.prototype.once = function once(event, listener) {
+    var self = this;
+
+    function fn() {
+      self.off(event, fn);
+      listener.apply(this, arguments);
+    }
+
+    fn.listener = listener;
+
+    this.on(event, fn);
+
+    return this;
+  };
+
+  /**
+   * Removes a listener from the collection for the specified event.
+   * @memberof! Emitter.prototype
+   * @function
+   * @param {String} event - The event name.
+   * @param {Function} listener - A listener function to remove.
+   * @returns {Object} Returns an instance of Emitter.
+   * @example
+   * // Remove a given listener.
+   * emitter.off('foo', listener);
+   */
+
+  Emitter.prototype.off = function off(event, listener) {
+
+    var listeners = undefined;
+
+    // Defines listeners value.
+    if (!this._eventCollection || !(listeners = this._eventCollection[event])) {
+      return this;
+    }
+
+    listeners.forEach(function (fn, i) {
+      if (fn === listener || fn.listener === listener) {
+        // Removes the given listener.
+        listeners.splice(i, 1);
+      }
+    });
+
+    // Removes an empty event collection.
+    if (listeners.length === 0) {
+      delete this._eventCollection[event];
+    }
+
+    return this;
+  };
+
+  /**
+   * Execute each item in the listener collection in order with the specified data.
+   * @memberof! Emitter.prototype
+   * @function
+   * @param {String} event - The name of the event you want to emit.
+   * @param {...Object} data - Data to pass to the listeners.
+   * @returns {Object} Returns an instance of Emitter.
+   * @example
+   * // Emits the "foo" event with 'param1' and 'param2' as arguments.
+   * emitter.emit('foo', 'param1', 'param2');
+   */
+
+  Emitter.prototype.emit = function emit(event) {
+    var _this = this;
+
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    var listeners = undefined;
+
+    // Defines listeners value.
+    if (!this._eventCollection || !(listeners = this._eventCollection[event])) {
+      return this;
+    }
+
+    // Clone listeners
+    listeners = listeners.slice(0);
+
+    listeners.forEach(function (fn) {
+      return fn.apply(_this, args);
+    });
+
+    return this;
+  };
+
+  return Emitter;
+})();
+
+/**
+ * Exports Emitter
+ */
+exports["default"] = Emitter;
+module.exports = exports["default"];
+},{}]},{},[1])(1)
+});
\ No newline at end of file
diff --git a/lib/quickreply.js b/lib/quickreply.js
new file mode 100644
index 0000000..131dd1b
--- /dev/null
+++ b/lib/quickreply.js
@@ -0,0 +1,47 @@
+"use strict";
+
+/*globals $, app, ajaxify, socket*/
+
+define('slick/quickreply', ['components'], function(components) {
+    var QuickReply = {};
+    
+    QuickReply.init = function() {
+    	
+    	var element = components.get('topic/quickreply/text');
+    	var data = {
+    		element: element,
+    		strategies: [],
+    		options: {
+    			zIndex: 100,
+    			listPosition: function(position) {
+    				this.$el.css(this._applyPlacement(position));
+					this.$el.css('position', 'absolute');
+					return this;
+    			}
+    		}
+    	};
+    	
+    	$(window).trigger('composer:autocomplete:init', data);
+		data.element.textcomplete(data.strategies, data.options);
+		$('.textcomplete-wrapper').css('height', '100%').find('textarea').css('height', '100%');
+    	
+        components.get('topic/quickreply/button').on('click', function(e) {
+            var replyMsg = components.get('topic/quickreply/text').val();
+            var replyData = {
+				tid: ajaxify.data.tid,
+				handle: undefined,
+				content: replyMsg
+			};
+			
+			socket.emit('posts.reply', replyData, function(err, data) {
+			     if (err) {
+			         app.alertError(err.message);
+			     }
+			     
+			     components.get('topic/quickreply/text').val('');
+			});
+        });
+    };
+    
+    return QuickReply;
+});
\ No newline at end of file
diff --git a/lib/slick.js b/lib/slick.js
new file mode 100644
index 0000000..c358a49
--- /dev/null
+++ b/lib/slick.js
@@ -0,0 +1,151 @@
+"use strict";
+
+/*globals $, app, ajaxify, utils, socket, Slideout*/
+
+$(document).ready(function() {
+   
+   var env = utils.findBootstrapEnvironment();
+   //setupProgressBar();
+   setupMobileMenu();
+   setupChatsOnMobile();
+   setupCheckBox();
+   setupQuickReply();
+   
+   $(window).on('action:ajaxify.end', function(ev, data) {
+   	   var header_container = $('#header-menu');
+   	   toggleScrolled(header_container);
+	   
+	   $(window).on('scroll', function() {
+			toggleScrolled(header_container);
+		});
+    });
+    
+    function setupProgressBar() {
+        $(window).on('action:ajaxify.start', function() {
+            $('.loader').css('height', '2px');
+        });
+
+        $(window).on('action:ajaxify.end', function(ev, data) {
+            setTimeout(function(){ $('.loader').css('height', '0px'); }, 1000);
+            
+        });
+    }
+    
+    function toggleScrolled(header_container) {
+    	if ( $(this).scrollTop() > ( header_container.outerHeight() ) ) {
+			header_container.addClass('scrolled');
+		} else {
+			header_container.removeClass('scrolled');
+		}
+    }
+    
+    function setupChatsOnMobile() {
+    	$(window).on('action:ajaxify.end', function(ev, data) {
+	    	if (data.url && data.url.match('^user/.+/chats')) {
+				require(['slick/chats'], function(chats) {
+					chats.init();
+				});
+			}
+    	});
+    }
+    
+    function setupQuickReply() {
+    	$(window).on('action:ajaxify.end', function(ev, data) {
+    		if (data.url && data.url.match('^topic/')) {
+    			require(['slick/quickreply'], function(quickreply) {
+    				quickreply.init();	
+    			});
+    		}
+    	});
+    }
+    
+    function setupMobileMenu() {
+		if (!window.addEventListener) {
+			return;
+		}
+
+		$('#menu').removeClass('hidden');
+
+		var slideout = new Slideout({
+			'panel': document.getElementById('panel'),
+			'menu': document.getElementById('menu'),
+			'padding': 256,
+			'tolerance': 70,
+			'side': 'right'
+		});
+
+		if (env !== 'xs') {
+			slideout.disableTouch();
+		}
+
+		$('#mobile-menu').on('click', function() {
+			slideout.toggle();
+		});
+
+		$('#menu a').on('click', function() {
+			slideout.close();
+		});
+
+		$(window).on('resize action:ajaxify.start', function() {
+			slideout.close();
+			$('.account .cover').css('top', $('[component="navbar"]').height());
+		});
+
+		function openingMenuAndLoad() {
+			openingMenu();
+			loadNotificationsAndChat();
+		}
+
+		function openingMenu() {
+			$('#header-menu').css({
+				'top': $(window).scrollTop() + 'px',
+				'position': 'absolute'
+			});
+
+			loadNotificationsAndChat();
+		}
+
+		function loadNotificationsAndChat() {
+			require(['chat', 'notifications'], function(chat, notifications) {
+				chat.loadChatsDropdown($('#menu [data-section="chats"] ul'));
+				notifications.loadNotifications($('#menu [data-section="notifications"] ul'));
+			});
+		}
+
+		slideout.on('open', openingMenuAndLoad);
+		slideout.on('touchmove', function(target) {
+			var $target = $(target);
+			if ($target.length && ($target.is('code') || $target.parents('code').length || $target.hasClass('preventSlideOut') || $target.parents('.preventSlideOut').length)) {
+				slideout._preventOpen = true;
+			}
+		});
+
+		slideout.on('close', function() {
+			$('#header-menu').css({
+				'top': '0px',
+				'position': 'fixed'
+			});
+			$('.slideout-open').removeClass('slideout-open');
+		});
+
+		$('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#search-menu').html() || '') + ($('#logged-out-menu').html() || ''));
+
+		$('#user-control-list').children().clone(true, true).appendTo($('#menu [data-section="profile"] ul'));
+		$('#menu [data-section="profile"] ul').find('[component="user/status"]').remove();
+
+		socket.on('event:user_status_change', function(data) {
+			if (parseInt(data.uid, 10) === app.user.uid) {
+				app.updateUserStatus($('#menu [component="user/status"]'), data.status);
+				slideout.close();
+			}
+		});
+	}
+	
+	function setupCheckBox() {
+        $(window).on('action:ajaxify.end', function() {
+            if (ajaxify.data.template.name == 'registerComplete') {
+                $('#agree-terms').after('<i class="input-helper"></i>');
+            }
+        });
+    }
+});
\ No newline at end of file
diff --git a/lib/theme.js b/lib/theme.js
new file mode 100644
index 0000000..3cb9965
--- /dev/null
+++ b/lib/theme.js
@@ -0,0 +1,54 @@
+"use strict";
+
+var	meta = module.parent.require('./meta');
+var user = module.parent.require('./user');
+var theme = {};
+
+theme.init = function(params, callback) {
+
+	params.router.get('/admin/plugins/slick', params.middleware.admin.buildHeader, renderAdmin);
+	params.router.get('/api/admin/plugins/slick', renderAdmin);
+
+	callback();
+};
+
+theme.addAdminNavigation = function(header, callback) {
+	header.plugins.push({
+		route: '/plugins/slick',
+		icon: 'fa-paint-brush',
+		name: 'Slick Theme'
+	});
+
+	callback(null, header);
+};
+
+theme.getThemeConfig = function(config, callback) {
+
+	meta.settings.get('slick', function(err, settings) {
+		config.hideSubCategories = settings.hideSubCategories === 'on';
+	});
+
+	callback(false, config);
+};
+
+theme.addUserToTopic = function(data, callback) {
+	
+	if (data.req.user) {
+		user.getUserData(data.req.user.uid, function(err, userdata) {
+			if (err) {
+				return callback(err);
+			}
+			
+			data.templateData.loggedInUser = userdata;
+			callback(null, data);
+		});
+	} else {
+		callback(null, data);
+	}
+}
+
+function renderAdmin(req, res, next) {
+	res.render('admin/plugins/slick', {});
+}
+
+module.exports = theme;
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..42a9fd5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "nodebb-theme-slick",
+  "version": "0.0.1",
+  "nbbpm": {
+    "compatibility": "^1.3.0"
+  },
+  "description": "Slick theme for NodeBB",
+  "main": "theme.less",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pichalite/nodebb-theme-slick.git"
+  },
+  "keywords": [
+    "nodebb",
+    "slick",
+    "theme",
+    "themes"
+  ],
+  "author": {
+    "name": "pichalite",
+    "email": "pichalite.com@gmail.com"
+  },
+  "bugs": {
+    "url": "https://github.com/pichalite/nodebb-theme-slick/issues"
+  },
+  "maintainers": [
+    {
+      "name": "pichalite",
+      "email": "pichalite.com@gmail.com"
+    }
+  ]
+}
diff --git a/plugin.json b/plugin.json
new file mode 100644
index 0000000..504325d
--- /dev/null
+++ b/plugin.json
@@ -0,0 +1,28 @@
+{
+	"id": "nodebb-theme-slick",
+	"library": "./lib/theme.js",
+	"hooks": [
+		{
+			"hook": "static:app.load", "method": "init"
+		},
+		{
+			"hook": "filter:admin.header.build", "method": "addAdminNavigation"
+		},
+		{
+			"hook": "filter:config.get", "method": "getThemeConfig"
+		},
+		{
+			"hook": "filter:topic.build", "method": "addUserToTopic"
+		}
+	],
+	"scripts": [
+		"lib/slick.js",
+		"lib/modules/slideout.min.js",
+		"lib/chats.js",
+		"lib/quickreply.js"
+	],
+	"acpScripts": [
+		"lib/admin.js"
+	],
+	"templates": "./templates"
+}
\ No newline at end of file
diff --git a/screenshot.png b/screenshot.png
new file mode 100644
index 0000000..fd4a972
Binary files /dev/null and b/screenshot.png differ
diff --git a/templates/account/best.tpl b/templates/account/best.tpl
new file mode 100644
index 0000000..21b7d5b
--- /dev/null
+++ b/templates/account/best.tpl
@@ -0,0 +1 @@
+<!-- IMPORT account/posts.tpl -->
\ No newline at end of file
diff --git a/templates/account/downvoted.tpl b/templates/account/downvoted.tpl
new file mode 100644
index 0000000..21b7d5b
--- /dev/null
+++ b/templates/account/downvoted.tpl
@@ -0,0 +1 @@
+<!-- IMPORT account/posts.tpl -->
\ No newline at end of file
diff --git a/templates/account/edit.tpl b/templates/account/edit.tpl
new file mode 100644
index 0000000..18e1c44
--- /dev/null
+++ b/templates/account/edit.tpl
@@ -0,0 +1,141 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+	
+	<div class="row">
+		<div class="col-md-2 col-sm-4">
+			<div class="account-picture-block text-center">
+				<div class="row">
+					<div class="col-xs-12">
+						<!-- IF picture -->
+						<img id="user-current-picture" class="user-avatar" src="{picture}" />
+						<!-- ELSE -->
+						<div class="user-icon" style="background-color: {icon:bgColor};">{icon:text}</div>
+						<!-- ENDIF picture -->
+					</div>
+				</div>
+				<ul class="list-group">
+					<a id="changePictureBtn" href="#" class="list-group-item">[[user:change_picture]]</a>
+					<!-- IF !username:disableEdit -->
+					<a href="{config.relative_path}/user/{userslug}/edit/username" class="list-group-item">[[user:change_username]]</a>
+					<!-- ENDIF !username:disableEdit -->
+					<!-- IF !email:disableEdit -->
+					<a href="{config.relative_path}/user/{userslug}/edit/email" class="list-group-item">[[user:change_email]]</a>
+					<!-- ENDIF !email:disableEdit -->
+					<!-- IF canChangePassword -->
+					<a href="{config.relative_path}/user/{userslug}/edit/password" class="list-group-item">[[user:change_password]]</a>
+					<!-- ENDIF canChangePassword -->
+					<!-- BEGIN editButtons -->
+					<a href="{config.relative_path}{editButtons.link}" class="list-group-item">{editButtons.text}</a>
+					<!-- END editButtons -->
+				</ul>
+
+				<!-- IF config.requireEmailConfirmation -->
+				<!-- IF email -->
+				<!-- IF isSelf -->
+				<a id="confirm-email" href="#" class="btn btn-warning <!-- IF email:confirmed -->hide<!-- ENDIF email:confirmed -->">[[user:confirm_email]]</a><br/><br/>
+				<!-- ENDIF isSelf -->
+				<!-- ENDIF email -->
+				<!-- ENDIF config.requireEmailConfirmation -->
+
+				<!-- IF allowAccountDelete -->
+				<!-- IF isSelf -->
+				<a id="deleteAccountBtn" href="#" class="btn btn-danger">[[user:delete_account]]</a><br/><br/>
+				<!-- ENDIF isSelf -->
+				<!-- ENDIF allowAccountDelete -->
+
+			</div>
+		</div>
+
+		<div class="col-md-10 col-sm-8">
+			<div class="row">
+				<div class="<!-- IF !sso.length -->col-md-12 col-sm-12<!-- ELSE -->col-md-7 col-sm-12<!-- ENDIF !sso.length -->">
+					<form>
+	
+						<div class="form-group">
+							<label class="control-label" for="inputFullname">[[user:fullname]]</label>
+							<div class="controls">
+								<input class="form-control" type="text" id="inputFullname" placeholder="[[user:fullname]]" value="{fullname}">
+							</div>
+						</div>
+	
+						<div class="form-group">
+							<label class="control-label" for="inputWebsite">[[user:website]]</label>
+							<div class="controls">
+								<input class="form-control" type="text" id="inputWebsite" placeholder="http://..." value="{website}">
+							</div>
+						</div>
+	
+						<div class="form-group">
+							<label class="control-label" for="inputLocation">[[user:location]]</label>
+							<div class="controls">
+								<input class="form-control" type="text" id="inputLocation" placeholder="[[user:location]]" value="{location}">
+							</div>
+						</div>
+	
+						<div class="form-group">
+							<label class="control-label" for="inputBirthday">[[user:birthday]]</label>
+							<div class="controls">
+								<input class="form-control" id="inputBirthday" value="{birthday}" placeholder="mm/dd/yyyy">
+							</div>
+						</div>
+	
+						<div class="form-group">
+							<label class="control-label" for="grouptitle">[[user:grouptitle]]</label>
+							<div class="controls">
+								<select class="form-control" id="groupTitle" data-property="groupTitle">
+									<option value="">[[user:no-group-title]]</option>
+									<!-- BEGIN groups -->
+									<!-- IF groups.userTitleEnabled -->
+									<option value="{groups.name}" <!-- IF groups.selected -->selected<!-- ENDIF groups.selected -->>{groups.userTitle}</option>
+									<!-- ENDIF groups.userTitleEnabled -->
+									<!-- END groups -->
+								</select>
+							</div>
+						</div>
+	
+						<div class="form-group">
+							<label class="control-label" for="inputAboutMe">[[user:aboutme]]</label> <small><label id="aboutMeCharCountLeft"></label></small>
+							<div class="controls">
+								<textarea class="form-control" id="inputAboutMe" rows="5">{aboutme}</textarea>
+							</div>
+						</div>
+						<!-- IF !disableSignatures -->
+						<div class="form-group">
+							<label class="control-label" for="inputSignature">[[user:signature]]</label> <small><label id="signatureCharCountLeft"></label></small>
+							<div class="controls">
+								<textarea class="form-control" id="inputSignature" rows="5">{signature}</textarea>
+							</div>
+						</div>
+						<!-- ENDIF !disableSignatures -->
+	
+						<input type="hidden" id="inputUID" value="{uid}"><br />
+	
+						<div class="form-actions">
+							<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
+						</div>
+	
+					</form>
+				</div>
+				
+				<!-- IF sso.length -->
+				<div class="col-md-5 col-sm-12">
+					<hr class="visible-xs visible-sm" />
+					<label class="control-label">[[user:sso.title]]</label>
+					<div class="list-group">
+						<!-- BEGIN sso -->
+						<a class="list-group-item" href="{../url}" target="<!-- IF ../associated -->_blank<!-- ELSE -->_top<!-- ENDIF ../associated -->">
+							<!-- IF ../icon --><i class="fa {../icon}"></i><!-- ENDIF ../icon -->
+							<!-- IF ../associated -->[[user:sso.associated]]<!-- ELSE -->[[user:sso.not-associated]]<!-- ENDIF ../associated -->
+							{../name}
+						</a>
+						<!-- END sso -->
+					</div>
+				</div>
+				<!-- ENDIF sso.length -->
+			</div>
+		</div>
+	</div>
+</div>
+
diff --git a/templates/account/edit/email.tpl b/templates/account/edit/email.tpl
new file mode 100644
index 0000000..d39dbcf
--- /dev/null
+++ b/templates/account/edit/email.tpl
@@ -0,0 +1,38 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-md-12">
+			<form class="form-horizontal edit-form">
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputNewEmail">[[user:email]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input class="form-control" type="text" id="inputNewEmail" placeholder="[[user:email]]" value="{email}">
+					</div>
+				</div>
+		
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+		
+				<!-- IF isSelf -->
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+					</div>
+				</div>
+				<!-- ENDIF isSelf -->
+		
+				<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+		
+				<br/>
+				<div class="form-group form-actions">
+					<div class="col-sm-offset-3 col-sm-9 col-lg-offset-2 col-lg-10">
+						<a id="submitBtn" href="#" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_email]]</a>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
diff --git a/templates/account/edit/password.tpl b/templates/account/edit/password.tpl
new file mode 100644
index 0000000..ca2828a
--- /dev/null
+++ b/templates/account/edit/password.tpl
@@ -0,0 +1,44 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-md-12">
+			<form class="form-horizontal edit-form">
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+		
+				<!-- IF isSelf -->
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+					</div>
+				</div>
+				<!-- ENDIF isSelf -->
+		
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputNewPassword">[[user:password]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+						<span class="form-feedback" id="password-notify">
+					</div>
+				</div>
+		
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+						<span class="form-feedback" id="password-confirm-notify">
+					</div>
+				</div>
+				
+				<div class="form-group form-actions">
+					<div class="col-sm-offset-3 col-sm-9 col-lg-offset-2 col-lg-10">
+						<a id="changePasswordBtn" href="#" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</a>
+					</div>	
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/edit/username.tpl b/templates/account/edit/username.tpl
new file mode 100644
index 0000000..0d66ecd
--- /dev/null
+++ b/templates/account/edit/username.tpl
@@ -0,0 +1,38 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+	
+	<div class="row">
+		<div class="col-md-12">
+			<form class="form-horizontal edit-form">
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputNewUsername">[[user:username]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+					</div>
+				</div>
+		
+				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+		
+				<!-- IF isSelf -->
+				<div class="form-group">
+					<label class="col-sm-3 col-lg-2 control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+					<div class="col-sm-9 col-lg-10">
+						<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+					</div>
+				</div>
+				<!-- ENDIF isSelf -->
+		
+				<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+		
+				<br/>
+				<div class="form-group form-actions">
+					<div class="col-sm-offset-3 col-sm-9 col-lg-offset-2 col-lg-10">
+						<a id="submitBtn" href="#" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</a>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/favourites.tpl b/templates/account/favourites.tpl
new file mode 100644
index 0000000..21b7d5b
--- /dev/null
+++ b/templates/account/favourites.tpl
@@ -0,0 +1 @@
+<!-- IMPORT account/posts.tpl -->
\ No newline at end of file
diff --git a/templates/account/followers.tpl b/templates/account/followers.tpl
new file mode 100644
index 0000000..0712694
--- /dev/null
+++ b/templates/account/followers.tpl
@@ -0,0 +1,19 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="users row">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
+			<!-- IMPORT partials/users_list.tpl -->
+		</ul>
+
+		<!-- IF !users.length -->
+		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
+		<!-- ENDIF !users.length -->
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/following.tpl b/templates/account/following.tpl
new file mode 100644
index 0000000..5cbddf0
--- /dev/null
+++ b/templates/account/following.tpl
@@ -0,0 +1,19 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="users row">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
+			<!-- IMPORT partials/users_list.tpl -->
+		</ul>
+
+		<!-- IF !users.length -->
+		<div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
+		<!-- ENDIF !users.length -->
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/groups.tpl b/templates/account/groups.tpl
new file mode 100644
index 0000000..fda5404
--- /dev/null
+++ b/templates/account/groups.tpl
@@ -0,0 +1,21 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-xs-12">
+			<h1>[[pages:{template.name}, {username}]]</h1>
+		
+			<div class="groups list">
+				<div component="groups/container" id="groups-list" class="row">
+					<!-- IF !groups.length -->
+					<div class="alert alert-warning text-center">[[groups:no_groups_found]]</div>
+					<!-- ELSE -->
+					<!-- IMPORT partials/groups/list.tpl -->
+					<!-- ENDIF !groups.length -->
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/info.tpl b/templates/account/info.tpl
new file mode 100644
index 0000000..3b346d0
--- /dev/null
+++ b/templates/account/info.tpl
@@ -0,0 +1,155 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<!-- IF sessions.length -->
+	<div class="row">
+		<div class="col-xs-12 col-md-12">
+			<h4>[[global:sessions]]</h4>
+			<ul class="list-group" component="user/sessions">
+				<!-- BEGIN sessions -->
+				<li class="list-group-item" data-uuid="{../uuid}">
+					<div class="pull-right">
+						<!-- IF !../current -->
+						<button class="btn btn-xs btn-default" type="button" data-action="revokeSession">Revoke Session</button>
+						<!-- ENDIF !../current -->
+						{function.userAgentIcons}
+						<i class="fa fa-circle text-<!-- IF ../current -->success<!-- ELSE -->muted<!-- ENDIF ../current -->"></i>
+					</div>
+					{../browser} {../version} on {../platform}<br />
+					<small class="timeago text-muted" title="{../datetimeISO}"></small>
+					<ul>
+						<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
+					</ul>
+				</li>
+				<!-- END sessions -->
+			</ul>
+		</div>
+	</div>
+	<!-- ENDIF sessions.length -->
+
+	<div class="row">
+		<div class="col-sm-6">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">[[global:recentips]]</h3>
+				</div>
+				<div class="panel-body">
+					<ul>
+						<!-- BEGIN ips -->
+						<li>@value</li>
+						<!-- END ips -->
+					</ul>
+				</div>
+			</div>
+
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">[[user:info.username-history]]</h3>
+				</div>
+				<div class="panel-body">
+					<ul class="list-group">
+						<!-- BEGIN usernames -->
+						<li class="list-group-item">
+							{../value}
+							<small class="pull-right"><span class="timeago" title="{../timestampISO}"></span></small>
+						</li>
+						<!-- END usernames -->
+					</ul>
+				</div>
+			</div>
+
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">[[user:info.email-history]]</h3>
+				</div>
+				<div class="panel-body">
+					<ul class="list-group">
+						<!-- BEGIN emails -->
+						<li class="list-group-item">
+							{../value}
+							<small class="pull-right"><span class="timeago" title="{../timestampISO}"></span></small>
+						</li>
+						<!-- END emails -->
+					</ul>
+				</div>
+			</div>
+		</div>
+		<div class="col-sm-6">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">[[user:info.latest-flags]]</h3>
+				</div>
+				<div class="panel-body">
+					<!-- IF history.flags.length -->
+					<ul class="recent-flags">
+						<!-- BEGIN history.flags -->
+						<li>
+							<p>
+								<a class="title" href="{config.relative_path}/post/{../pid}">{../title}</a><br />
+								<span class="timestamp">Flagged <span class="timeago" title="{../timestampISO}"></span> ({../timestampReadable})</span>
+							</p>
+						</li>
+						<!-- END history.flags -->
+					</ul>
+					<!-- ELSE -->
+					<div class="alert alert-success">[[user:info.no-flags]]</div>
+					<!-- ENDIF history.flags.length -->
+				</div>
+			</div>
+
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">
+
+						[[user:info.ban-history]]
+
+						<!-- IF !banned -->
+						<!-- IF !isSelf -->
+						<button class="btn btn-xs pull-right btn-danger" component="account/ban">[[user:ban_account]]</button>
+						<!-- ENDIF !isSelf -->
+						<!-- ELSE -->
+						<!-- IF !isSelf -->
+						<button class="btn btn-xs pull-right btn-success" component="account/unban">[[user:unban_account]]</button>
+						<!-- ENDIF !isSelf -->
+						<!-- ENDIF !banned -->
+					</h3>
+				</div>
+				<div class="panel-body">
+					<!-- IF history.bans.length -->
+					<ul class="ban-history">
+						<!-- BEGIN history.bans -->
+						<li>
+							<p>
+								<span class="timestamp timeago" title="{../timestampISO}"></span> &mdash; {../timestampReadable}<br />
+								<!-- IF ../until -->
+								<span class="expiry">[[user:info.banned-until, {../untilReadable}]]</span><br />
+								<!-- ELSE -->
+								<span class="expiry">[[user:info.banned-permanently]]</span><br />
+								<!-- ENDIF ../until -->
+								<span class="reason"><strong>[[user:info.banned-reason-label]]</strong>: {../reason}</span>
+							</p>
+						</li>
+						<!-- END history.bans -->
+					</ul>
+					<!-- ELSE -->
+					<div class="alert alert-success">[[user:info.no-ban-history]]</div>
+					<!-- ENDIF history.bans.length -->
+				</div>
+			</div>
+			<!-- IF isAdminOrGlobalModerator -->
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">[[user:info.moderation-note]]</h3>
+				</div>
+				<div class="panel-body">
+					<textarea component="account/moderation-note" class="form-control">{moderationNote}</textarea>
+					<br/>
+					<button class="btn btn-sm pull-right btn-success" component="account/save-moderation-note">[[global:save]]</button>
+				</div>
+			</div>
+			<!-- ENDIF isAdminOrGlobalModerator -->
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/posts.tpl b/templates/account/posts.tpl
new file mode 100644
index 0000000..de5ef63
--- /dev/null
+++ b/templates/account/posts.tpl
@@ -0,0 +1,21 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-xs-12">
+			<h1>{title}</h1>
+	
+			<!-- IF !posts.length -->
+				<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+			<!-- ENDIF !posts.length -->
+		
+			<!-- IMPORT partials/posts_list.tpl -->
+
+			<!-- IF config.usePagination -->
+				<!-- IMPORT partials/paginator.tpl -->
+			<!-- ENDIF config.usePagination -->
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/profile.tpl b/templates/account/profile.tpl
new file mode 100644
index 0000000..48d761b
--- /dev/null
+++ b/templates/account/profile.tpl
@@ -0,0 +1,123 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<div class="profile row">
+		<div class="user-info" data-uid="{uid}">
+			<!-- IF picture -->
+			<img id="user-current-picture" class="user-avatar" src="{picture}" />
+			<!-- ELSE -->
+			<div class="user-icon" style="background-color: {icon:bgColor};">{icon:text}</div>
+			<!-- ENDIF picture -->
+			<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+			<h1 class="fullname"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></h1>
+			<h4 class="username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></h4>
+			
+			<!-- IF loggedIn -->
+			<!-- IF !isSelf -->
+			<!-- IF !banned -->
+			<!-- IF !config.disableChat -->
+			<a component="account/chat" href="#" class="btn btn-primary btn-sm"><i class="fa fa-fw fa-comment-o"></i> Chat</a>
+			<!-- ENDIF !config.disableChat -->
+			<a id="follow-btn" component="account/follow" href="#" class="btn btn-success btn-sm <!-- IF isFollowing -->hide<!-- ENDIF isFollowing -->">[[user:follow]]</a>
+			<a id="unfollow-btn" component="account/unfollow" href="#" class="btn btn-warning btn-sm <!-- IF !isFollowing -->hide<!-- ENDIF !isFollowing -->">[[user:unfollow]]</a>
+			<!-- ENDIF !banned -->
+			<!-- ENDIF !isSelf -->
+			<!-- ENDIF loggedIn -->
+		</div>
+		
+		<!-- IF aboutme -->
+		<span component="aboutme" class="text-center aboutme">{aboutme}</span>
+		<!-- ENDIF aboutme -->
+
+		<div class="account-stats">
+			<!-- IF !reputation:disabled -->
+			<div class="stat">
+				<div class="human-readable-number" title="{reputation}">{reputation}</div>
+				<span class="stat-label">[[global:reputation]]</span>
+			</div>
+			<!-- ENDIF !reputation:disabled -->
+
+			<div class="stat">
+				<div class="human-readable-number" title="{postcount}">{postcount}</div>
+				<span class="stat-label">[[global:posts]]</span>
+			</div>
+
+			<div class="stat">
+				<div class="human-readable-number" title="{profileviews}">{profileviews}</div>
+				<span class="stat-label">[[user:profile_views]]</span>
+			</div>
+
+			<div class="stat">
+				<div class="human-readable-number" title="{followerCount}">{followerCount}</div>
+				<span class="stat-label">[[user:followers]]</span>
+			</div>
+
+			<div class="stat">
+				<div class="human-readable-number"  title="{followingCount}">{followingCount}</div>
+				<span class="stat-label">[[user:following]]</span>
+			</div>
+		</div>
+
+		<div class="text-center profile-meta">
+			<span>[[user:joined]]</span>
+			<strong class="timeago" title="{joindateISO}"></strong>
+
+			<span>[[user:lastonline]]</span>
+			<strong class="timeago" title="{lastonlineISO}"></strong><br />
+
+			<!-- IF email -->
+			<span>[[user:email]]</span>
+			<strong><i class="fa fa-eye-slash {emailClass}" title="[[user:email_hidden]]"></i> {email}</strong>
+			<!-- ENDIF email -->
+
+			<!-- IF websiteName -->
+			<span>[[user:website]]</span>
+			<strong><a href="{websiteLink}" rel="nofollow">{websiteName}</a></strong>
+			<!-- ENDIF websiteName -->
+
+			<!-- IF location -->
+			<span>[[user:location]]</span>
+			<strong>{location}</strong>
+			<!-- ENDIF location -->
+
+			<!-- IF age -->
+			<span>[[user:age]]</span>
+			<strong>{age}</strong>
+			<!-- ENDIF age -->
+		</div>
+	</div>
+	
+	<hr />
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-xs-12 account-block hidden">
+			<div class="account-picture-block text-center">
+				<span>
+					<span class="account-username"> {username}</span>
+				</span>
+
+				<!-- IF !isSelf -->
+				<!-- IF isFollowing -->
+				<a component="account/unfollow" href="#" class="btn btn-warning btn-sm">[[user:unfollow]]</a>
+				<!-- ELSE -->
+				<a component="account/follow" href="#" class="btn btn-success btn-sm">[[user:follow]]</a>
+				<!-- ENDIF isFollowing -->
+				<!-- ENDIF !isSelf -->
+			</div>
+		</div>
+	</div>
+
+	<div class="row">
+		<div class="col-xs-12">
+			<h1 class="section-title">[[pages:account/posts, {username}]]</h1>
+
+			<!-- IF !posts.length -->
+			<div class="alert alert-warning">[[user:has_no_posts]]</div>
+			<!-- ENDIF !posts.length -->
+			<!-- IMPORT partials/posts_list.tpl -->
+		</div>
+	</div>
+
+	<div id="user-action-alert" class="alert alert-success hide"></div>
+</div>
diff --git a/templates/account/settings.tpl b/templates/account/settings.tpl
new file mode 100644
index 0000000..b8a97ed
--- /dev/null
+++ b/templates/account/settings.tpl
@@ -0,0 +1,205 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-xs-12">
+			<!-- IF allowUserHomePage -->
+			<h4>[[user:select-homepage]]</h4>
+			<div class="user-setting">
+				<div class="form-group">
+					<label for="dailyDigestFreq">[[user:homepage]]</label>
+					<select class="form-control" data-property="homePageRoute">
+						<option value="none">None</option>
+						<!-- BEGIN homePageRoutes -->
+						<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
+						<!-- END homePageRoutes -->
+					</select>
+					<p class="help-block">[[user:homepage_description]]</p>
+				</div>
+				<div id="homePageCustom" class="form-group" style="display: none;">
+					<label for="homePageCustom">[[user:custom_route]]</label>
+					<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
+					<p class="help-block">[[user:custom_route_help]]</p>
+				</div>
+			</div>
+			<!-- ENDIF allowUserHomePage -->
+
+			<h4>[[user:browsing]]</h4>
+			<div class="user-setting">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/><i class="input-helper"></i> <strong>[[user:open_links_in_new_tab]]</strong>
+					</label>
+				</div>
+				<!-- IF inTopicSearchAvailable -->
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/><i class="input-helper"></i> <strong>[[user:enable_topic_searching]]</strong>
+					</label>
+				</div>
+				<p class="help-block">[[user:topic_search_help]]</p>
+				<!-- ENDIF inTopicSearchAvailable -->
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/><i class="input-helper"></i> <strong>[[user:scroll_to_my_post]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="delayImageLoading" <!-- IF settings.delayImageLoading -->checked<!-- ENDIF settings.delayImageLoading -->/><i class="input-helper"></i> <strong>[[user:delay_image_loading]]</strong>
+					</label>
+				</div>
+				<p class="help-block">[[user:image_load_delay_help]]</p>
+			</div>
+			
+			<h4>[[global:privacy]]</h4>
+			<div class="user-setting">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/><i class="input-helper"></i> <strong>[[user:show_email]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/><i class="input-helper"></i> <strong>[[user:show_fullname]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/><i class="input-helper"></i> <strong>[[user:restrict_chats]]</strong>
+					</label>
+				</div>
+			</div>
+
+			<!-- IF !disableEmailSubscriptions -->
+			<h4>[[global:email]]</h4>
+			<div class="user-setting">
+				<div class="form-group">
+					<label for="dailyDigestFreq">[[user:digest_label]]</label>
+					<select class="form-control" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+						<!-- BEGIN dailyDigestFreqOptions -->
+						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
+						<!-- END dailyDigestFreqOptions -->
+					</select>
+					<p class="help-block">[[user:digest_description]]</p>
+				</div>
+
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="sendChatNotifications" <!-- IF settings.sendChatNotifications -->checked<!-- ENDIF settings.sendChatNotifications -->/><i class="input-helper"></i> <strong>[[user:send_chat_notifications]]</strong>
+					</label>
+				</div>
+
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="sendPostNotifications" <!-- IF settings.sendPostNotifications -->checked<!-- ENDIF settings.sendPostNotifications -->/><i class="input-helper"></i> <strong>[[user:send_post_notifications]]</strong>
+					</label>
+				</div>
+			</div>
+			<!-- ENDIF !disableEmailSubscriptions -->
+			
+			<h4>[[topic:watch]]</h4>
+			<div class="user-setting">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/><i class="input-helper"></i> <strong>[[user:follow_topics_you_create]]</strong>
+					</label>
+				</div>
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/><i class="input-helper"></i> <strong>[[user:follow_topics_you_reply_to]]</strong>
+					</label>
+				</div>
+			</div>
+
+			<h4>[[global:pagination]]</h4>
+			<div class="user-setting">
+				<div class="checkbox">
+					<label>
+						<input type="checkbox" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->><i class="input-helper"></i> <strong>[[user:paginate_description]]</strong>
+					</label>
+				</div>
+
+				<div class="form-group">
+					<label for="topicsPerPage">[[user:topics_per_page]]</label>
+					<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
+				</div>
+				
+				<div class="form-group">
+					<label for="postsPerPage">[[user:posts_per_page]]</label>
+					<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
+				</div>
+			</div>
+			
+			<h4>[[global:language]]</h4>
+			<div class="user-setting">
+				<select data-property="userLang" class="form-control">
+					<!-- BEGIN languages -->
+					<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
+					<!-- END languages -->
+				</select>
+			</div>
+
+			<h4>[[user:notifications_and_sounds]]</h4>
+			<div class="user-setting">
+				<label for="notification">[[user:notification-sound]]</label>
+				<div class="row">
+					<div class="form-group col-xs-9">
+						<select class="form-control" id="notification" name="notification" data-property="notificationSound">
+							<option value="">[[user:no-sound]]</option>
+							<!-- BEGIN notificationSound -->
+							<option value="{notificationSound.name}" <!-- IF notificationSound.selected -->selected<!-- ENDIF notificationSound.selected -->>{notificationSound.name}</option>
+							<!-- END notificationSound -->
+						</select>
+					</div>
+					<div class="btn-group col-xs-3">
+						<button type="button" class="form-control btn btn-sm btn-default" data-action="play"><span class="hidden-xs">[[global:play]] </span><i class="fa fa-play"></i></button>
+					</div>
+				</div>
+
+				<label for="chat-incoming">[[user:incoming-message-sound]]</label>
+				<div class="row">
+					<div class="form-group col-xs-9">
+						<select class="form-control" id="chat-incoming" name="chat-incoming" data-property="incomingChatSound">
+							<option value="">[[user:no-sound]]</option>
+							<!-- BEGIN incomingChatSound -->
+							<option value="{incomingChatSound.name}" <!-- IF incomingChatSound.selected -->selected<!-- ENDIF incomingChatSound.selected -->>{incomingChatSound.name}</option>
+							<!-- END incomingChatSound -->
+						</select>
+					</div>
+					<div class="btn-group col-xs-3">
+						<button type="button" class="form-control btn btn-sm btn-default" data-action="play"><span class="hidden-xs">[[global:play]] </span><i class="fa fa-play"></i></button>
+					</div>
+				</div>
+
+				<label for="chat-outgoing">[[user:outgoing-message-sound]]</label>
+				<div class="row">
+					<div class="form-group col-xs-9">
+						<select class="form-control" id="chat-outgoing" name="chat-outgoing" data-property="outgoingChatSound">
+							<option value="">[[user:no-sound]]</option>
+							<!-- BEGIN outgoingChatSound -->
+							<option value="{outgoingChatSound.name}" <!-- IF outgoingChatSound.selected -->selected<!-- ENDIF outgoingChatSound.selected -->>{outgoingChatSound.name}</option>
+							<!-- END outgoingChatSound -->
+						</select>
+					</div>
+					<div class="btn-group col-xs-3">
+						<button type="button" class="form-control btn btn-sm btn-default" data-action="play"><span class="hidden-xs">[[global:play]] </span><i class="fa fa-play"></i></button>
+					</div>
+				</div>
+			</div>
+			
+			<!-- BEGIN customSettings -->
+			<h4>{customSettings.title}</h4>
+			<div class="user-setting">
+				{customSettings.content}
+			</div>
+			<!-- END customSettings -->
+			
+		</div>
+	</div>
+	<div class="form-actions">
+		<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/account/topics.tpl b/templates/account/topics.tpl
new file mode 100644
index 0000000..1eeb9ea
--- /dev/null
+++ b/templates/account/topics.tpl
@@ -0,0 +1,22 @@
+<div class="account">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IMPORT partials/account/menu.tpl -->
+
+	<div class="row">
+		<div class="col-xs-12">
+			<h1>{title}</h1>
+	
+			<!-- IF !topics.length -->
+				<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+			<!-- ENDIF !topics.length -->
+	
+			<div class="category">
+				<!-- IMPORT partials/topics_list.tpl -->
+				<!-- IF config.usePagination -->
+					<!-- IMPORT partials/paginator.tpl -->
+				<!-- ENDIF config.usePagination -->
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/templates/account/upvoted.tpl b/templates/account/upvoted.tpl
new file mode 100644
index 0000000..21b7d5b
--- /dev/null
+++ b/templates/account/upvoted.tpl
@@ -0,0 +1 @@
+<!-- IMPORT account/posts.tpl -->
\ No newline at end of file
diff --git a/templates/account/watched.tpl b/templates/account/watched.tpl
new file mode 100644
index 0000000..238b943
--- /dev/null
+++ b/templates/account/watched.tpl
@@ -0,0 +1 @@
+<!-- IMPORT account/topics.tpl -->
\ No newline at end of file
diff --git a/templates/admin/plugins/slick.tpl b/templates/admin/plugins/slick.tpl
new file mode 100644
index 0000000..12a702b
--- /dev/null
+++ b/templates/admin/plugins/slick.tpl
@@ -0,0 +1,17 @@
+<div class="row">
+	<div class="col-sm-2 col-xs-12 settings-header">Slick Theme Settings</div>
+	<div class="col-sm-10 col-xs-12">	
+		<form role="form" class="slick-settings">
+		    <div class="checkbox">
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" id="hideSubCategories" name="hideSubCategories">
+					<span class="mdl-switch__label"><strong>Hide subcategories on categories page</strong></span>
+				</label>
+			</div>
+		</form>
+	</div>
+</div>
+
+<button id="save" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+    <i class="material-icons">save</i>
+</button>
\ No newline at end of file
diff --git a/templates/categories.tpl b/templates/categories.tpl
new file mode 100644
index 0000000..2f90544
--- /dev/null
+++ b/templates/categories.tpl
@@ -0,0 +1,72 @@
+<div class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+    <div class="row categories-header hidden-xs hidden-sm">
+        <div class="col-md-8 col-xs-12"><div class="header-title">[[category:category]]</div></div>
+        <div class="col-md-1"><div class="header-title">[[global:topics]]</div></div>
+        <div class="col-md-1"><div class="header-title">[[global:posts]]</div></div>
+        <div class="col-md-2"><div class="header-title">Last Post</div></div>
+    </div>
+    <!-- BEGIN categories -->
+    <div class="row" component="categories/category" data-cid="{categories.cid}" data-numRecentReplies="1">
+        <div class="col-md-8 col-xs-12">
+            <div class="category-info">
+                <div class="category-info-content">
+                    <div class="category-icon">
+                        <i class="fa fa-fw {categories.icon}"></i>
+                    </div>
+                    <a class="category-title" href="{config.relative_path}/category/{categories.slug}" title="{categories.name}">{categories.name}</a>
+            
+                    <div class="category-description">
+                        {categories.descriptionParsed}
+                    </div>
+                </div>
+                
+                <!-- IF !config.hideSubCategories -->
+                <div class="subcategories">
+                    <!-- BEGIN categories.children -->
+                    <div class="subcategory">
+                        <i class="fa fa-fw {categories.children.icon} subcategory-icon"></i>
+                        <a class="subcategory-title" href="{config.relative_path}/category/{categories.children.slug}" title="{categories.children.name}">{categories.children.name}</a>
+                    </div>
+                    <!-- END categories.children -->
+                </div>
+                <!-- ENDIF !config.hideSubCategories -->
+            </div>
+        </div>
+        <div class="col-md-1 hidden-xs hidden-sm">
+            <div class="total-topic-count human-readable-number">
+                {categories.totalTopicCount}
+            </div>
+        </div>
+        <div class="col-md-1 hidden-xs hidden-sm">
+            <div class="total-post-count human-readable-number">
+                {categories.totalPostCount}
+            </div>
+        </div>
+        <div class="col-md-2 hidden-xs hidden-sm">
+            <div class="teaser" component="topic/teaser">
+                <!-- BEGIN posts -->
+        	    <!-- IF @first -->
+                <div component="category/posts">
+            		<!-- IF ../user.picture -->
+            		<img class="user-avatar" title="{../user.username}" alt="{../user.username}" src="{../user.picture}" title="{../user.username}"/>
+            		<!-- ELSE -->
+            		<div class="user-icon" title="{../user.username}" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
+            		<!-- ENDIF ../user.picture -->
+            		
+            		<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
+            		
+            		<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
+            			<small class="timeago" title="{../timestampISO}"></small>
+            		</a>
+        		</div>
+        		<!-- ENDIF @first -->
+        	    <!-- END posts -->
+        	    
+        	    <!-- IF !../posts.length -->
+    			[[category:no_new_posts]]
+    	        <!-- ENDIF !../posts.length -->
+            </div>
+        </div>
+    </div>
+    <!-- END categories -->
+</div>
\ No newline at end of file
diff --git a/templates/category.tpl b/templates/category.tpl
new file mode 100644
index 0000000..ef64eec
--- /dev/null
+++ b/templates/category.tpl
@@ -0,0 +1,48 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="row">
+	<div class="category col-lg-12 col-sm-12">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+
+		<!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
+
+		<div class="clearfix">
+			<!-- IF privileges.topics:create -->
+			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- ELSE -->
+				<!-- IF !loggedIn -->
+				<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+				<!-- ENDIF !loggedIn -->
+			<!-- ENDIF privileges.topics:create -->
+
+			<span class="pull-right" component="category/controls">
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				<!-- IMPORT partials/category/tools.tpl -->
+			</span>
+		</div>
+
+		<hr class="hidden-xs" />
+
+		<h4 class="hidden-xs">{name}</h4>
+
+		<!-- IF !topics.length -->
+		<div class="alert alert-warning" id="category-no-topics">
+			[[category:no_topics]]
+		</div>
+		<!-- ENDIF !topics.length -->
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+	</div>
+</div>
+
+<!-- IMPORT partials/move_thread_modal.tpl -->
+
+<!-- IF !config.usePagination -->
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+<!-- ENDIF !config.usePagination -->
diff --git a/templates/chat.tpl b/templates/chat.tpl
new file mode 100644
index 0000000..bc166af
--- /dev/null
+++ b/templates/chat.tpl
@@ -0,0 +1,35 @@
+<div id="chat-modal" class="chat-modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button id="chat-close-btn" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times"></i></span></button>
+				<button type="button" class="close hidden-xs hidden-sm" data-action="maximize"><span aria-hidden="true"><i class="fa fa-expand"></i></span><span class="sr-only">[[modules:chat.maximize]]</span></button>
+				<button class="close" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
+
+				<h4 class="chat-room-name"><!-- IF roomName -->{roomName}<!-- ELSE -->{usernames}<!-- ENDIF roomName --></h4>
+
+				<form component="chat/controls" style="display: none;">
+					<!-- IF showUserInput -->
+					<div class="users-tag-container">
+						<input class="users-tag-input" type="text" class="form-control" placeholder="enter users here" tabindex="4"/>
+					</div>
+					<!-- ENDIF showUserInput -->
+					<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+				</form>
+			</div>
+
+			<div class="modal-body">
+				<ul class="chat-content" component="chat/messages">
+					<!-- IMPORT partials/chats/messages.tpl -->
+				</ul>
+
+				<div class="input-group">
+					<textarea component="chat/input" id="chat-message-input" rows="1" placeholder="[[modules:chat.placeholder]]" name="chat-message" class="form-control"></textarea>
+					<span class="input-group-btn">
+						<button id="chat-message-send-btn" class="btn btn-primary" href="#" type="button">[[modules:chat.send]]</button>
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/chats.tpl b/templates/chats.tpl
new file mode 100644
index 0000000..e825004
--- /dev/null
+++ b/templates/chats.tpl
@@ -0,0 +1,50 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<div class="row">
+	<div class="col-md-4">
+		<div class="chat-search hidden-xs">
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:enter_username]]" />
+		</div>
+		<ul component="chat/search/list" class="chat-search-list">
+			
+		</ul>
+		<ul component="chat/recent" class="chats-list" data-nextstart="{nextStart}">
+			<!-- BEGIN rooms -->
+			<!-- IMPORT partials/chats/recent_room.tpl -->
+			<!-- END rooms -->
+		</ul>
+	</div>
+
+	<div class="col-md-8 hidden-sm hidden-xs">
+		<!-- IF roomId -->
+		<div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
+
+			<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
+
+			<!-- IF showUserInput -->
+			<div class="users-tag-container">
+				<input class="users-tag-input" type="text" class="form-control" placeholder="[[modules:chat.add-users-to-room]]" tabindex="4"/>
+			</div>
+			<!-- ENDIF showUserInput -->
+			
+			<!-- IF groupChat -->
+			<input class="form-control" component="chat/room/name" value="{roomName}" <!-- IF !isOwner -->disabled<!-- ENDIF !isOwner -->/>
+			<!-- ENDIF groupChat -->
+			
+			<ul class="chat-content">
+				<!-- IMPORT partials/chats/messages.tpl -->
+			</ul>
+			<div class="input-group">
+				<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="1"></textarea>
+				<span class="input-group-btn">
+					<button class="btn btn-primary" type="button" data-action="send">[[modules:chat.send]]</button>
+				</span>
+			</div>
+		</div>
+		<!-- ELSE -->
+		<div class="alert alert-info">
+			[[modules:chat.no-messages]]
+		</div>
+		<!-- ENDIF roomId -->
+	</div>
+</div>
diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl
new file mode 100644
index 0000000..91f27c0
--- /dev/null
+++ b/templates/groups/details.tpl
@@ -0,0 +1,225 @@
+<div component="groups/container" class="groups details">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="row">
+		<div class="col-lg-4 col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title">
+						<i class="fa fa-list-ul"></i> [[groups:details.title]]
+						<!-- IF group.private --><span class="label label-info">[[groups:details.private]]</span><!-- ENDIF group.private -->
+						<!-- IF group.hidden --><span class="label label-info">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
+					</h3>
+				</div>
+				<div class="panel-body">
+					<h1>{group.displayName}</h1>
+					<p>{group.descriptionParsed}</p>
+					<!-- IF isAdmin -->
+					<div class="pull-right">
+						<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-info"><i class="fa fa-gear"></i> [[user:edit]]</a>
+					</div>
+					<!-- ENDIF isAdmin -->
+					<!-- IF loggedIn -->
+					<div class="pull-right">
+						{function.membershipBtn, group}&nbsp;
+					</div>
+					<!-- ENDIF loggedIn -->
+				</div>
+			</div>
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title"><i class="fa fa-users"></i> [[groups:details.members]]</h3>
+				</div>
+				<div class="panel-body">
+					<!-- IMPORT partials/groups/memberlist.tpl -->
+				</div>
+			</div>
+			<!-- IF group.isOwner -->
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title clearfix">
+						<i class="fa fa-clock-o"></i> [[groups:details.pending]]
+						<!-- IF group.pending.length -->
+						<div class="btn-group pull-right">
+							<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+								[[global:more]] <span class="caret"></span>
+							</button>
+							<ul class="dropdown-menu" role="menu">
+								<li><a href="#" data-ajaxify="false" data-action="acceptAll">[[groups:pending.accept_all]]</a></li>
+								<li><a href="#" data-ajaxify="false" data-action="rejectAll">[[groups:pending.reject_all]]</a></li>
+							</ul>
+						</div>
+						<!-- ENDIF group.pending.length -->
+					</h3>
+				</div>
+				<div class="panel-body">
+					<table component="groups/pending" class="table table-striped table-hover">
+						<!-- IF !group.pending.length -->
+						<div class="alert alert-info">[[groups:pending.none]]</div>
+						<!-- ENDIF !group.pending.length -->
+						<!-- BEGIN pending -->
+						<tr data-uid="{group.pending.uid}">
+							<td>
+								<!-- IF group.pending.picture -->
+								<a href="{config.relative_path}/user/{group.pending.userslug}"><img class="user-avatar" src="{group.pending.picture}" /></a>
+								<!-- ELSE -->
+								<div class="user-icon" style="background-color: {group.pending.icon:bgColor};">{group.pending.icon:text}</div>
+								<!-- ENDIF group.pending.picture -->
+							</td>
+							<td class="member-name">
+								<a href="{config.relative_path}/user/{group.pending.userslug}">{group.pending.username}</a>
+							</td>
+							<td>
+								<div class="btn-group pull-right">
+									<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+										[[global:more]] <span class="caret"></span>
+									</button>
+									<ul class="dropdown-menu" role="menu">
+										<li><a href="#" data-ajaxify="false" data-action="accept">[[groups:pending.accept]]</a></li>
+										<li><a href="#" data-ajaxify="false" data-action="reject">[[groups:pending.reject]]</a></li>
+									</ul>
+								</div>
+							</td>
+						</tr>
+						<!-- END pending -->
+					</table>
+				</div>
+			</div>
+			<div class="panel panel-default">
+				<div class="panel-heading">
+					<h3 class="panel-title clearfix">
+						<i class="fa fa-gift"></i> [[groups:details.invited]]
+					</h3>
+				</div>
+				<div class="panel-body">
+					<div class="input-group">
+						<input class="form-control" type="text" component="groups/members/invite" placeholder="[[groups:invited.search]]"/>
+						<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+					</div><br />
+	
+					<table component="groups/invited" class="table table-striped table-hover">
+						<!-- IF !group.invited.length -->
+						<div class="alert alert-info">[[groups:invited.none]]</div>
+						<!-- ENDIF !group.invited.length -->
+						<!-- BEGIN invited -->
+						<tr data-uid="{group.invited.uid}">
+							<td>
+								<!-- IF group.invited.picture -->
+								<a href="{config.relative_path}/user/{group.invited.userslug}"><img class="user-avatar" src="{group.invited.picture}" /></a>
+								<!-- ELSE -->
+								<div class="user-icon" style="background-color: {group.invited.icon:bgColor};">{group.invited.icon:text}</div>
+								<!-- ENDIF group.invited.picture -->
+							</td>
+							<td class="member-name">
+								<a href="{config.relative_path}/user/{group.invited.userslug}">{group.invited.username}</a>
+							</td>
+							<td>
+								<div class="btn-group pull-right">
+									<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+										[[global:more]] <span class="caret"></span>
+									</button>
+									<ul class="dropdown-menu" role="menu">
+										<li><a href="#" data-ajaxify="false" data-action="rescindInvite">[[groups:invited.uninvite]]</a></li>
+									</ul>
+								</div>
+							</td>
+						</tr>
+						<!-- END invited -->
+					</table>
+				</div>
+			</div>
+	
+			<div class="panel panel-default">
+				<div class="panel-heading pointer" data-toggle="collapse" data-target=".options">
+					<h3 class="panel-title">
+						<i class="fa fa-caret-down pull-right"></i>
+						<i class="fa fa-cogs"></i> [[groups:details.owner_options]]
+					</h3>
+				</div>
+	
+				<div class="panel-body options collapse">
+					<form component="groups/settings" role="form">
+						<div class="form-group">
+							<label for="name">[[groups:details.group_name]]</label>
+							<input class="form-control" name="name" id="name" type="text" value="{group.displayName}" />
+						</div>
+						<div class="form-group">
+							<label for="name">[[groups:details.description]]</label>
+							<textarea class="form-control" name="description" id="description" type="text" maxlength="255">{group.description}</textarea>
+						</div>
+						<div class="form-group user-title-option">
+							<label for="userTitle">[[groups:details.badge_text]]</label>
+							<input component="groups/userTitleOption" class="form-control" name="userTitle" id="userTitle" type="text" maxlength="40" value="{group.userTitle}"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled --> />
+						</div>
+	
+						<div class="form-group user-title-option">
+							<label>[[groups:details.badge_preview]]</label><br />
+							<span class="label<!-- IF !group.userTitleEnabled --> hide<!-- ENDIF !group.userTitleEnabled -->" style="background-color: {group.labelColor}"><i class="fa<!-- IF group.icon --> {group.icon}<!-- ENDIF group.icon -->"></i> <!-- IF group.userTitle -->{group.userTitle}<!-- ELSE -->{group.displayName}<!-- ENDIF group.userTitle --></span>
+	
+							<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="icon-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_icon]]</button>
+							<button component="groups/userTitleOption" type="button" class="btn btn-default btn-sm" data-action="color-select"<!-- IF !group.userTitleEnabled --> disabled<!-- ENDIF !group.userTitleEnabled -->>[[groups:details.change_colour]]</button>
+							<input type="hidden" name="labelColor" value="<!-- IF group.labelColor -->{group.labelColor}<!-- ENDIF group.labelColor -->" />
+							<input type="hidden" name="icon" value="<!-- IF group.icon -->{group.icon}<!-- ENDIF group.icon -->" />
+							<div id="icons" class="hidden">
+								<div class="icon-container">
+									<div class="row fa-icons">
+										<i class="fa fa-doesnt-exist"></i>
+										<!-- IMPORT partials/fontawesome.tpl -->
+									</div>
+								</div>
+							</div>
+						</div>
+						<hr />
+						<div class="checkbox">
+							<label>
+								<input name="userTitleEnabled" type="checkbox"<!-- IF group.userTitleEnabled --> checked<!-- ENDIF group.userTitleEnabled -->><i class="input-helper"></i> <strong>[[groups:details.userTitleEnabled]]</strong>
+							</label>
+						</div>
+						<div class="checkbox">
+							<label>
+								<input name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private -->><i class="input-helper"></i> <strong>[[groups:details.private]]</strong>
+								<!-- IF !allowPrivateGroups -->
+								<p class="help-block">
+									[[groups:details.private_system_help]]
+								</p>
+								<!-- ENDIF !allowPrivateGroups -->
+								<p class="help-block">
+									[[groups:details.private_help]]
+								</p>
+							</label>
+						</div>
+						<div class="checkbox">
+							<label>
+								<input name="disableJoinRequests" type="checkbox"<!-- IF group.disableJoinRequests --> checked<!-- ENDIF group.disableJoinRequests -->><i class="input-helper"></i> <strong>[[groups:details.disableJoinRequests]]</strong>
+							</label>
+						</div>
+						<div class="checkbox">
+							<label>
+								<input name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden -->><i class="input-helper"></i> <strong>[[groups:details.hidden]]</strong>
+								<p class="help-block">
+									[[groups:details.hidden_help]]
+								</p>
+							</label>
+						</div>
+						
+						<!-- IF !group.system -->
+						<button class="btn btn-danger btn-xs pull-right" type="button" data-action="delete">[[groups:details.delete_group]]</button>
+						<!-- ENDIF !group.system -->
+						<button class="btn btn-primary" type="button" data-action="update">[[global:save_changes]]</button>
+					</form>
+				</div>
+			</div>
+			<!-- ENDIF group.isOwner -->
+			<div widget-area="left"></div>
+		</div>
+		<div class="col-lg-8 col-xs-12">
+			<div class="col-lg-11">
+				<!-- IF !posts.length -->
+				<div class="alert alert-info">[[groups:details.has_no_posts]]</div>
+				<!-- ENDIF !posts.length -->
+				<!-- IMPORT partials/posts_list.tpl -->
+			</div>
+			<div widget-area="right"></div>
+		</div>
+	</div>
+</div>
diff --git a/templates/groups/list.tpl b/templates/groups/list.tpl
new file mode 100644
index 0000000..f22263b
--- /dev/null
+++ b/templates/groups/list.tpl
@@ -0,0 +1,40 @@
+<div class="groups list">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="row">
+		<div class="col-lg-4">
+			<!-- IF allowGroupCreation -->
+			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
+			<!-- ENDIF allowGroupCreation -->
+		</div>
+		<div class="col-lg-8">
+			<div class="row">
+				<div class="col-xs-5 col-md-3 text-left pull-right">
+					<select class="form-control" id="search-sort">
+						<option value="alpha">[[groups:details.group_name]]</option>
+						<option value="count">[[groups:details.member_count]]</option>
+						<option value="date">[[groups:details.creation_date]]</option>
+					</select>
+				</div>
+				<div class="col-xs-7 col-md-5 text-left pull-right">
+					<div class="input-group">
+						<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
+						<span id="search-button" class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
+		<!-- IF groups.length -->
+		<!-- IMPORT partials/groups/list.tpl -->
+		<!-- ELSE -->
+		<div class="col-xs-12">
+			<div class="alert alert-warning">
+			[[groups:no_groups_found]]
+			</div>
+		</div>
+		<!-- ENDIF groups.length -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/groups/members.tpl b/templates/groups/members.tpl
new file mode 100644
index 0000000..d16676a
--- /dev/null
+++ b/templates/groups/members.tpl
@@ -0,0 +1,11 @@
+<div class="users">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<ul id="users-container" class="users-container">
+		<!-- IMPORT partials/users_list.tpl -->
+	</ul>
+
+	<div class="text-center {loadmore_display}">
+		<button id="load-more-users-btn" class="btn btn-primary">[[users:load_more]]</button>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/header.tpl b/templates/header.tpl
new file mode 100644
index 0000000..e156035
--- /dev/null
+++ b/templates/header.tpl
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="{function.localeToHTML, defaultLang}">
+<head>
+	<title>{browserTitle}</title>
+	<!-- BEGIN metaTags -->{function.buildMetaTag}<!-- END metaTags -->
+	<link rel="stylesheet" type="text/css" href="{relative_path}/stylesheet.css?{config.cache-buster}" />
+	<!-- BEGIN linkTags -->{function.buildLinkTag}<!-- END linkTags -->
+
+	<script>
+		var RELATIVE_PATH = "{relative_path}";
+		var config = JSON.parse('{{configJSON}}');
+		var app = {
+			template: "{template.name}",
+			user: JSON.parse('{{userJSON}}')
+		};
+	</script>
+
+	<script src="{relative_path}/nodebb.min.js?{config.cache-buster}"></script>
+
+	<!-- BEGIN scripts -->
+	<script type="text/javascript" src="{scripts.src}"></script>
+	<!-- END scripts -->
+
+	<!-- IF useCustomJS -->
+	{{customJS}}
+	<!-- ENDIF useCustomJS -->
+	<!-- IF useCustomCSS -->
+	<style type="text/css">{{customCSS}}</style>
+	<!-- ENDIF useCustomCSS -->
+</head>
+
+<body class="{bodyClass}">
+	<nav id="menu" class="hidden">
+		<section class="menu-profile">
+			<!-- IF user.uid -->
+			<!-- IF user.picture -->
+			<img class="user-avatar" src="{user.picture}"/>
+			<!-- ELSE -->
+			<div class="user-icon" style="background-color: {user.icon:bgColor};">{user.icon:text}</div>
+			<!-- ENDIF user.picture -->
+			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
+			<!-- ENDIF user.uid -->
+		</section>
+
+		<section class="menu-section" data-section="navigation">
+			<h3 class="menu-section-title">[[global:header.navigation]]</h3>
+			<ul class="menu-section-list"></ul>
+		</section>
+
+		<!-- IF config.loggedIn -->
+		<section class="menu-section" data-section="profile">
+			<h3 class="menu-section-title">[[global:header.profile]]</h3>
+			<ul class="menu-section-list" component="header/usercontrol"></ul>
+		</section>
+
+		<section class="menu-section" data-section="notifications">
+			<h3 class="menu-section-title">
+				[[global:header.notifications]]
+				<span class="counter" component="notifications/icon" data-content="0"></span>
+			</h3>
+			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
+			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
+		</section>
+
+		<section class="menu-section" data-section="chats">
+			<h3 class="menu-section-title">
+				[[global:header.chats]]
+				<i class="counter" component="chat/icon" data-content="0"></i>
+			</h3>
+			<ul class="menu-section-list chat-list" component="chat/list"></ul>
+		</section>
+		<!-- ENDIF config.loggedIn -->
+	</nav>
+
+	<main id="panel">
+		<nav class="navbar navbar-default navbar-fixed-top header" id="header-menu" component="navbar">
+			<div class="container">
+				<div class="loader"></div>
+				<!-- IMPORT partials/menu.tpl -->
+			</div>
+		</nav>
+		<div class="container" id="content">
+		<!-- IMPORT partials/noscript/warning.tpl -->
diff --git a/templates/login.tpl b/templates/login.tpl
new file mode 100644
index 0000000..b61f5d5
--- /dev/null
+++ b/templates/login.tpl
@@ -0,0 +1,65 @@
+<div class="login">
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="row">
+		<!-- IF allowLocalLogin -->
+		<div class="col-md-12">
+			<div class="login-block">
+				<div class="alert alert-danger" id="login-error-notify" <!-- IF error -->style="display:block"<!-- ELSE -->style="display: none;"<!-- ENDIF error -->>
+					<button type="button" class="close" data-dismiss="alert">&times;</button>
+					<strong>[[login:failed_login_attempt]]</strong>
+					<p>{error}</p>
+				</div>
+	
+				<form class="form-horizontal" role="form" method="post" target="login" id="login-form">
+					<div class="form-group">
+						<label for="username" class="col-lg-2 control-label">{allowLoginWith}</label>
+						<div class="col-lg-10">
+							<input class="form-control" type="text" placeholder="{allowLoginWith}" name="username" id="username" autocorrect="off" autocapitalize="off" value="{username}"/>
+						</div>
+					</div>
+					<div class="form-group">
+						<label for="password" class="col-lg-2 control-label">[[user:password]]</label>
+						<div class="col-lg-10">
+							<input class="form-control" type="password" placeholder="[[user:password]]" name="password" id="password" <!-- IF username -->autocomplete="off"<!-- ENDIF username -->/>
+						</div>
+					</div>
+					<div class="form-group">
+						<div class="col-lg-offset-2 col-lg-10">
+							<div class="checkbox">
+								<label>
+									<input type="checkbox" name="remember" id="remember" checked /> [[login:remember_me]]
+									<i class="input-helper"></i>
+								</label>
+							</div>
+						</div>
+					</div>
+					<div class="form-group">
+						<div class="col-lg-offset-2 col-lg-10">
+							<button class="btn btn-primary btn-lg btn-block" id="login" type="submit">[[global:login]]</button>
+							
+							<div class="register-forgot-pwd">
+							<!-- IF allowRegistration -->
+							<span>[[login:dont_have_account]] <a href="{config.relative_path}/register">[[register:register]]</a></span>
+							<!-- ENDIF allowRegistration -->
+							&nbsp; <a id="reset-link" href="{config.relative_path}/reset">[[login:forgot_password]]</a>
+							</div>
+						</div>
+					</div>
+				</form>
+	
+			</div>
+		</div>
+		<!-- ENDIF allowLocalLogin -->
+	
+		<!-- IF alternate_logins -->
+		<div class="col-lg-offset-2 col-lg-10">
+			<div class="alt-logins">
+				<!-- BEGIN authentication -->
+				<div class="{authentication.name}"><a rel="nofollow" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></a></div>
+				<!-- END authentication -->
+			</div>
+		</div>
+		<!-- ENDIF alternate_logins -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/notifications.tpl b/templates/notifications.tpl
new file mode 100644
index 0000000..66ca56c
--- /dev/null
+++ b/templates/notifications.tpl
@@ -0,0 +1,41 @@
+<div class="notifications">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="dropdown pull-right hidden">
+		<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
+			<i class="fa fa-eye"></i>
+			<span class="caret"></span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
+			<li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-ajaxify="false" component="notifications/mark_all">[[notifications:mark_all_read]]</a></li>
+		</ul>
+	</div>
+
+	<hr />
+
+	<div class="alert alert-info <!-- IF notifications.length -->hidden<!-- ENDIF notifications.length -->">
+		[[notifications:no_notifs]]
+	</div>
+
+	<div class="notifications-list" data-nextstart="{nextStart}">
+	<!-- BEGIN notifications -->
+		<div data-nid="{notifications.nid}" class="{notifications.readClass}" component="notifications/item">
+			<div class="notification-image">
+				<!-- IF notifications.image -->
+				<!-- IF notifications.from -->
+				<a class="pull-left" href="{config.relative_path}/user/{notifications.user.userslug}"><img class="user-avatar" src="{notifications.image}" /></a>
+				<!-- ENDIF notifications.from -->
+				<!-- ELSE -->
+				<a class="pull-left" href="{config.relative_path}/user/{notifications.user.userslug}"><div class="user-icon" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
+				<!-- ENDIF notifications.image -->
+			</div>
+			<div class="notification-msg">
+				<a component="notifications/item/link" href="{config.relative_path}{notifications.path}">{notifications.bodyShort}</a>
+				
+				<span class="timeago" title="{notifications.datetimeISO}"></span>
+			</div>
+		</div>
+	<!-- END notifications -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/outgoing.tpl b/templates/outgoing.tpl
new file mode 100644
index 0000000..5d1356e
--- /dev/null
+++ b/templates/outgoing.tpl
@@ -0,0 +1,21 @@
+<div class="outgoing">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div>
+		<h3>
+			[[notifications:outgoing_link_message, {title}]]
+		</h3>
+		
+		<a href="{outgoing}" rel="nofollow">[[notifications:continue_to, {outgoing}]]</a>
+		</br>
+		<a id="return-btn" href="#" class="btn btn-lg btn-warning">[[notifications:return_to, {title}]]</a>
+	</div>
+</div>
+
+<script>
+	$('#return-btn').on('click', function() {
+		history.back();
+		return false;
+	});
+</script>
diff --git a/templates/partials/account/menu.tpl b/templates/partials/account/menu.tpl
new file mode 100644
index 0000000..530e028
--- /dev/null
+++ b/templates/partials/account/menu.tpl
@@ -0,0 +1,140 @@
+<div class="row account-menu">
+	<div class="col-xs-12">
+		<ul class="nav nav-pills pull-right">
+			<li>
+				<a href="{config.relative_path}/user/{userslug}" class="inline-block" id="profile">[[user:profile]]</a>
+			</li>
+			<!-- IF showHidden -->
+			<li><a href="{config.relative_path}/user/{userslug}/edit">[[user:edit]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/settings">[[user:settings]]</a></li>
+			<!-- ENDIF showHidden -->
+			<li class="dropdown bottom-sheet">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+			      [[user:more]] <span class="caret"></span>
+			    </a>
+			    <ul class="dropdown-menu dropdown-menu-right">
+			    	<!-- IF !isSelf -->
+					<!-- IF !config.disableChat -->
+					<!-- IF !banned -->
+					<li>
+						<a component="account/chat" href="#">[[user:chat_with, {username}]]</a>
+					</li>
+					<li class="divider"></li>
+					<!-- ENDIF !banned -->
+					<!-- ENDIF !config.disableChat -->
+					<!-- ENDIF !isSelf -->
+					
+					<!-- IF !isSelf -->
+					<!-- IF canBan -->
+					<li class="<!-- IF banned -->hide<!-- ENDIF banned -->">
+						<a component="account/ban" href="#">[[user:ban_account]]</a>
+					</li>
+					<li class="<!-- IF !banned -->hide<!-- ENDIF !banned -->">
+						<a component="account/unban" href="#">[[user:unban_account]]</a>
+					</li>
+					<!-- ENDIF canBan -->
+					<!-- IF isAdmin -->
+					<li>
+						<a component="account/delete" href="#" class="">[[user:delete_account]]</a>
+					</li>
+					<!-- ENDIF isAdmin -->
+					<!-- ENDIF !isSelf -->
+					
+					<!-- IF showHidden -->
+					<li><a href="{config.relative_path}/user/{userslug}/info">[[user:account_info]] <i class="fa fa-lock"></i></a></li>
+					<!-- ENDIF showHidden -->
+			
+					<li class="divider"></li>
+					<li><a href="{config.relative_path}/user/{userslug}/following">[[user:following]]</a></li>
+					<li><a href="{config.relative_path}/user/{userslug}/followers">[[user:followers]]</a></li>
+					<li class="divider"></li>
+					<li><a href="{config.relative_path}/user/{userslug}/topics">[[global:topics]]</a></li>
+					<li><a href="{config.relative_path}/user/{userslug}/posts">[[global:posts]]</a></li>
+					<!-- IF !reputation:disabled -->
+					<li><a href="{config.relative_path}/user/{userslug}/best">[[global:best]]</a></li>
+					<!-- ENDIF !reputation:disabled -->
+					<li><a href="{config.relative_path}/user/{userslug}/groups">[[global:header.groups]]</a></li>
+			
+					<!-- IF showHidden -->
+					<li><a href="{config.relative_path}/user/{userslug}/bookmarks">[[user:bookmarks]]</a></li>
+					<li><a href="{config.relative_path}/user/{userslug}/watched">[[user:watched]]</a></li>
+					<!-- IF !reputation:disabled -->
+					<li><a href="{config.relative_path}/user/{userslug}/upvoted">[[global:upvoted]]</a></li>
+					<!-- IF !downvote:disabled -->
+					<li><a href="{config.relative_path}/user/{userslug}/downvoted">[[global:downvoted]]</a></li>
+					<!-- ENDIF !downvote:disabled -->
+					<!-- ENDIF !reputation:disabled -->
+					<!-- ENDIF showHidden -->
+			
+					<!-- BEGIN profile_links -->
+					<li class="divider"></li>
+					<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a href="{config.relative_path}/user/{userslug}/{profile_links.route}"><i class="fa fa-fw {profile_links.icon}"></i> {profile_links.name}</a></li>
+					<!-- END profile_links -->
+			    </ul>
+			</li>
+		</ul>
+		<ul class="dropdown-menu dropdown-menu-right">
+			<!-- IF !isSelf -->
+			<!-- IF !config.disableChat -->
+			<!-- IF !banned -->
+			<li>
+				<a component="account/chat" href="#">[[user:chat_with, {username}]]</a>
+			</li>
+			<li class="divider"></li>
+			<!-- ENDIF !banned -->
+			<!-- ENDIF !config.disableChat -->
+			<!-- ENDIF !isSelf -->
+			<li>
+				<a href="{config.relative_path}/user/{userslug}" class="inline-block" id="profile">[[user:profile]]</a>
+			</li>
+			<!-- IF showHidden -->
+			<li><a href="{config.relative_path}/user/{userslug}/settings">[[user:settings]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/edit">[[user:edit]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/info">[[user:account_info]] <i class="fa fa-lock"></i></a></li>
+			<!-- ENDIF showHidden -->
+	
+			<!-- IF !isSelf -->
+			<!-- IF canBan -->
+			<li class="<!-- IF banned -->hide<!-- ENDIF banned -->">
+				<a component="account/ban" href="#">[[user:ban_account]]</a>
+			</li>
+			<li class="<!-- IF !banned -->hide<!-- ENDIF !banned -->">
+				<a component="account/unban" href="#">[[user:unban_account]]</a>
+			</li>
+			<!-- ENDIF canBan -->
+			<!-- IF isAdmin -->
+			<li>
+				<a component="account/delete" href="#" class="">[[user:delete_account]]</a>
+			</li>
+			<!-- ENDIF isAdmin -->
+			<!-- ENDIF !isSelf -->
+	
+			<li class="divider"></li>
+			<li><a href="{config.relative_path}/user/{userslug}/following">[[user:following]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/followers">[[user:followers]]</a></li>
+			<li class="divider"></li>
+			<li><a href="{config.relative_path}/user/{userslug}/topics">[[global:topics]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/posts">[[global:posts]]</a></li>
+			<!-- IF !reputation:disabled -->
+			<li><a href="{config.relative_path}/user/{userslug}/best">[[global:best]]</a></li>
+			<!-- ENDIF !reputation:disabled -->
+			<li><a href="{config.relative_path}/user/{userslug}/groups">[[global:header.groups]]</a></li>
+	
+			<!-- IF showHidden -->
+			<li><a href="{config.relative_path}/user/{userslug}/favourites">[[user:favourites]]</a></li>
+			<li><a href="{config.relative_path}/user/{userslug}/watched">[[user:watched]]</a></li>
+			<!-- IF !reputation:disabled -->
+			<li><a href="{config.relative_path}/user/{userslug}/upvoted">[[global:upvoted]]</a></li>
+			<!-- IF !downvote:disabled -->
+			<li><a href="{config.relative_path}/user/{userslug}/downvoted">[[global:downvoted]]</a></li>
+			<!-- ENDIF !downvote:disabled -->
+			<!-- ENDIF !reputation:disabled -->
+			<!-- ENDIF showHidden -->
+	
+			<!-- BEGIN profile_links -->
+			<li class="divider"></li>
+			<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a href="{config.relative_path}/user/{userslug}/{profile_links.route}"><i class="fa fa-fw {profile_links.icon}"></i> {profile_links.name}</a></li>
+			<!-- END profile_links -->
+		</ul>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/partials/category/sort.tpl b/templates/partials/category/sort.tpl
new file mode 100644
index 0000000..8e42616
--- /dev/null
+++ b/templates/partials/category/sort.tpl
@@ -0,0 +1,15 @@
+<!-- IF loggedIn -->
+<div class="btn-group bottom-sheet" component="thread/sort">
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
+		<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>
+		<span class="caret"></span>
+	</button>
+
+	<ul class="dropdown-menu pull-right">
+		<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
+		<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
+		<li><a href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</a></li>
+	</ul>
+</div>
+<!-- ENDIF loggedIn -->
\ No newline at end of file
diff --git a/templates/partials/category/subcategory.tpl b/templates/partials/category/subcategory.tpl
new file mode 100644
index 0000000..5c9df49
--- /dev/null
+++ b/templates/partials/category/subcategory.tpl
@@ -0,0 +1,58 @@
+<div class="subcategory">
+	<!-- IF children.length --><p>[[category:subcategories]]</p><!-- ENDIF children.length -->
+
+	<div class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+		<!-- BEGIN children -->
+		<div class="row" component="categories/category" data-cid="{children.cid}" data-numRecentReplies="1">
+		    <div class="col-md-8 col-xs-12">
+		        <div class="category-info">
+		            <div class="category-info-content">
+		            	<div class="category-icon">
+		                	<i class="fa fa-fw {children.icon}"></i>
+		                </div>
+		                <a class="category-title" href="{config.relative_path}/category/{children.slug}" title="{children.name}">{children.name}</a>
+		        
+		                <div class="category-description">
+		                    {children.descriptionParsed}
+		                </div>
+		            </div>
+		        </div>
+		    </div>
+		    <div class="col-md-1 hidden-xs hidden-sm">
+		        <div class="total-topic-count human-readable-number">
+		            {children.totalTopicCount}
+		        </div>
+		    </div>
+		    <div class="col-md-1 hidden-xs hidden-sm">
+		        <div class="total-post-count human-readable-number">
+		            {children.totalPostCount}
+		        </div>
+		    </div>
+		    <div class="col-md-2 hidden-xs hidden-sm">
+		        <div class="teaser" component="topic/teaser">
+		            <!-- BEGIN posts -->
+		    	    <!-- IF @first -->
+		            
+		    		<!-- IF ../user.picture -->
+		    		<img class="user-avatar" title="{../user.username}" alt="{../user.username}" src="{../user.picture}" title="{../user.username}"/>
+		    		<!-- ELSE -->
+		    		<div class="user-icon" title="{../user.username}" style="background-color: {../user.icon:bgColor};">{../user.icon:text}</div>
+		    		<!-- ENDIF ../user.picture -->
+		    		
+		    		<a href="{config.relative_path}/user/{../user.userslug}">{../user.username}</a>
+		    		
+		    		<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
+		    			<small class="timeago" title="{../timestampISO}"></small>
+		    		</a>
+		    		<!-- ENDIF @first -->
+		    	    <!-- END posts -->
+		    	    
+		    	    <!-- IF !../posts.length -->
+					[[category:no_new_posts]]
+			        <!-- ENDIF !../posts.length -->
+			    </div>
+		    </div>
+		</div>
+		<!-- END children -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/partials/category/tags.tpl b/templates/partials/category/tags.tpl
new file mode 100644
index 0000000..ea9918f
--- /dev/null
+++ b/templates/partials/category/tags.tpl
@@ -0,0 +1,5 @@
+<!-- IF topics.tags.length -->
+	<!-- BEGIN tags -->
+		<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}" style="<!-- IF topics.tags.color -->color: {topics.tags.color};<!-- ENDIF topics.tags.color --><!-- IF topics.tags.bgColor -->background-color: {topics.tags.bgColor};<!-- ENDIF topics.tags.bgColor -->">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
+	<!-- END tags -->
+<!-- ENDIF topics.tags.length -->
\ No newline at end of file
diff --git a/templates/partials/category/tools.tpl b/templates/partials/category/tools.tpl
new file mode 100644
index 0000000..06e7290
--- /dev/null
+++ b/templates/partials/category/tools.tpl
@@ -0,0 +1,74 @@
+<!-- IF privileges.editable -->
+<div class="btn-group thread-tools bottom-sheet">
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+		<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
+		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
+		<span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu pull-right">
+		<li>
+			<a component="topic/mark-unread-for-all" href="#">
+				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/pin" href="#">
+				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/unpin" href="#" class="hidden">
+				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
+			</a>
+		</li>
+
+		<li>
+			<a component="topic/lock" href="#">
+				<i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/unlock" href="#" class="hidden">
+				<i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]
+			</a>
+		</li>
+
+		<li class="divider"></li>
+
+		<li>
+			<a component="topic/move" href="#">
+				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/move-all" href="#">
+				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
+			</a>
+		</li>
+
+		<li class="divider"></li>
+
+		<li>
+			<a component="topic/delete" href="#">
+				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/restore" href="#" class="hidden">
+				<i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]
+			</a>
+		</li>
+		<li>
+			<a component="topic/purge" href="#" class="hidden">
+				<i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]
+			</a>
+		</li>
+
+		<!-- BEGIN thread_tools -->
+		<li>
+			<a href="#" class="{thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
+		</li>
+		<!-- END thread_tools -->
+	</ul>
+</div>
+<!-- ENDIF privileges.editable -->
\ No newline at end of file
diff --git a/templates/partials/category/watch.tpl b/templates/partials/category/watch.tpl
new file mode 100644
index 0000000..865bc3b
--- /dev/null
+++ b/templates/partials/category/watch.tpl
@@ -0,0 +1,15 @@
+<!-- IF config.loggedIn -->
+<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+		<span component="category/watching/menu" <!-- IF isIgnored -->class="hidden"<!-- ENDIF isIgnored -->><i class="fa fa-fw fa-eye"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:watching]]</span></span>
+		<span component="category/ignoring/menu" <!-- IF !isIgnored -->class="hidden"<!-- ENDIF !isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:ignoring]]</span></span>
+		<span class="caret"></span>
+	</button>
+
+	<ul class="dropdown-menu dropdown-menu-right">
+		<li><a href="#" component="category/watching"><i component="category/watching/check" class="fa fa-fw <!-- IF !isIgnored -->fa-check<!-- ENDIF !isIgnored -->"></i><i class="fa fa-fw fa-eye"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+		<li><a href="#" component="category/ignoring"><i component="category/ignoring/check" class="fa fa-fw <!-- IF isIgnored -->fa-check<!-- ENDIF isIgnored -->"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+	</ul>
+</div>
+<!-- ENDIF config.loggedIn -->
\ No newline at end of file
diff --git a/templates/partials/chats/dropdown.tpl b/templates/partials/chats/dropdown.tpl
new file mode 100644
index 0000000..aa79035
--- /dev/null
+++ b/templates/partials/chats/dropdown.tpl
@@ -0,0 +1,26 @@
+<!-- IF rooms.length -->
+<!-- BEGIN rooms -->
+<a data-ajaxify="false" data-roomid="{rooms.roomId}" class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->">
+	<!-- IF lastUser -->
+	<div class="chat-image">
+		<!-- IF rooms.lastUser.picture -->
+		<img class="user-avatar" src="{rooms.lastUser.picture}" title="{rooms.lastUser.username}" />
+		<!-- ELSE -->
+		<div class="user-icon" style="background-color: {rooms.lastUser.icon:bgColor}">{rooms.lastUser.icon:text}</div>
+		<!-- ENDIF rooms.lastUser.picture -->
+	</div>
+	
+	<div class="chat-room-name">
+		<!-- IF rooms.groupChat -->
+		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+		<!-- ENDIF rooms.groupChat -->
+		<!-- IF !rooms.groupChat -->
+		{rooms.usernames}
+		<!-- ENDIF !rooms.groupChat -->
+	</div>
+	<!-- ENDIF lastUser -->
+</a>
+<!-- END rooms -->
+<!-- ELSE -->
+<a href="#" class="no_active">No active chats</a>
+<!-- ENDIF rooms.length -->
\ No newline at end of file
diff --git a/templates/partials/chats/message.tpl b/templates/partials/chats/message.tpl
new file mode 100644
index 0000000..e8dd9cf
--- /dev/null
+++ b/templates/partials/chats/message.tpl
@@ -0,0 +1,29 @@
+<li component="chat/message" class="chat-message clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}">
+	<div class="message-header">
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">
+			<!-- IF messages.fromUser.picture -->
+			<img class="user-avatar" src="{messages.fromUser.picture}">
+			<!-- ELSE -->
+			<div class="user-icon" style="background-color: {messages.fromUser.icon:bgColor};">{messages.fromUser.icon:text}</div>
+			<!-- ENDIF messages.fromUser.picture -->
+		</a>
+		<strong><span class="chat-user">{messages.fromUser.username}</span></strong>
+		<span class="chat-timestamp timeago" title="{messages.timestampISO}"></span>
+	</div>
+	<div component="chat/message/body" class="message-body">
+		<!-- IF messages.edited -->
+		<small class="text-muted pull-right" title="[[global:edited]] {messages.editedISO}"><i class="fa fa-edit"></i></span></small>
+		<!-- ENDIF messages.edited -->
+		
+		<!-- IF !config.disableChatMessageEditing -->
+		<!-- IF messages.self -->
+		<div class="pull-right btn-group controls">
+			<button class="btn btn-xs btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
+			<button class="btn btn-xs btn-link" data-action="delete"><i class="fa fa-times"></i></button>
+		</div>
+		<!-- ENDIF messages.self -->
+		<!-- ENDIF !config.disableChatMessageEditing -->
+		
+		{messages.content}
+	</div>
+</li>
\ No newline at end of file
diff --git a/templates/partials/chats/messages.tpl b/templates/partials/chats/messages.tpl
new file mode 100644
index 0000000..3e5ea94
--- /dev/null
+++ b/templates/partials/chats/messages.tpl
@@ -0,0 +1,3 @@
+<!-- BEGIN messages -->
+<!-- IMPORT partials/chats/message.tpl -->
+<!-- END messages -->
\ No newline at end of file
diff --git a/templates/partials/chats/recent_room.tpl b/templates/partials/chats/recent_room.tpl
new file mode 100644
index 0000000..1389da2
--- /dev/null
+++ b/templates/partials/chats/recent_room.tpl
@@ -0,0 +1,32 @@
+<li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
+	<!-- IF rooms.lastUser.uid -->
+	<div class="chat-image" data-username="{rooms.lastUser.username}" data-uid="{rooms.lastUser.uid}">
+		<!-- IF rooms.lastUser.picture -->
+		<img class="user-avatar" src="{rooms.lastUser.picture}" title="{rooms.lastUser.username}">
+		<!-- ELSE -->
+		<div class="user-icon" style="background-color: {rooms.lastUser.icon:bgColor};" title="{rooms.lastUser.username}">{rooms.lastUser.icon:text}</div>
+		<!-- ENDIF rooms.lastUser.picture -->
+	</div>
+	<!-- ELSE -->
+	[[modules:chat.no-users-in-room]]
+	<!-- ENDIF rooms.lastUser.uid -->
+	<div class="chat-body">
+		<div class="chat-main">
+			<div class="chat-room-name">
+				<!-- IF rooms.groupChat -->
+				<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+				<!-- ELSE -->
+				{rooms.usernames}
+				<!-- ENDIF rooms.groupChat -->
+			</div>
+			<div class="teaser-timestamp timeago pull-right" title="{rooms.teaser.timestampISO}"></div>
+		</div>
+		
+		<div class="chat-secondary">
+			<!-- IF rooms.teaser.content -->
+			<div class="teaser-content">{rooms.teaser.user.username}: {rooms.teaser.content}</div>
+			<!-- ENDIF rooms.teaser.content -->
+			<i class="fa fa-times pull-right leave" component="chat/leave"></i>
+		</div>
+	</div>
+</li>
\ No newline at end of file
diff --git a/templates/partials/groups/list.tpl b/templates/partials/groups/list.tpl
new file mode 100644
index 0000000..9f1fc5f
--- /dev/null
+++ b/templates/partials/groups/list.tpl
@@ -0,0 +1,27 @@
+	<!-- BEGIN groups -->
+	<div class="col-lg-4 col-md-6 col-sm-12" component="groups/summary" data-slug="{groups.slug}">
+		<div class="panel panel-default">
+			<a href="{config.relative_path}/groups/{groups.slug}" class="panel-heading list-cover" style="<!-- IF groups.cover:thumb:url -->background-image: url({groups.cover:thumb:url});<!-- ENDIF groups.cover:thumb:url -->">
+				<h3 class="panel-title">{groups.displayName} <small>{groups.memberCount}</small></h3>
+			</a>
+			<div class="panel-body">
+				<ul class="members">
+					<!-- BEGIN members -->
+					<li>
+						<a href="{config.relative_path}/user/{groups.members.userslug}">
+							<!-- IF groups.members.picture -->
+							<img class="user-avatar" src="{groups.members.picture}" title="{groups.members.username}" />
+							<!-- ELSE -->
+							<div class="user-icon" style="background-color: {groups.members.icon:bgColor};" title="{groups.members.username}">{groups.members.icon:text}</div>
+							<!-- ENDIF groups.members.picture -->
+						</a>
+					</li>
+					<!-- END members -->
+					<!-- IF groups.truncated -->
+					<li class="truncated"><i class="fa fa-ellipsis-h"></i></li>
+					<!-- ENDIF groups.truncated -->
+				</ul>
+			</div>
+		</div>
+	</div>
+	<!-- END groups -->
\ No newline at end of file
diff --git a/templates/partials/groups/memberlist.tpl b/templates/partials/groups/memberlist.tpl
new file mode 100644
index 0000000..9d797d1
--- /dev/null
+++ b/templates/partials/groups/memberlist.tpl
@@ -0,0 +1,37 @@
+<div class="input-group">
+	<input class="form-control" type="text" component="groups/members/search" placeholder="[[global:search]]"/>
+	<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+</div><br />
+
+<table component="groups/members" class="table table-striped table-hover" data-nextstart="{group.membersNextStart}">
+	<tbody>
+	<!-- BEGIN members -->
+	<tr data-uid="{group.members.uid}">
+		<td>
+			<a href="{config.relative_path}/user/{group.members.userslug}">
+				<!-- IF group.members.picture -->
+				<img class="user-avatar" src="{group.members.picture}" />
+				<!-- ELSE -->
+				<div class="user-icon" style="background-color: {group.members.icon:bgColor};">{group.members.icon:text}</div>
+				<!-- ENDIF group.members.picture -->
+			</a>
+		</td>
+		<td class="member-name">
+			<a href="{config.relative_path}/user/{group.members.userslug}">{group.members.username}</a> <i title="[[groups:owner]]" class="fa fa-star text-warning <!-- IF !group.members.isOwner -->invisible<!-- ENDIF !group.members.isOwner -->"></i>
+
+			<!-- IF group.isOwner -->
+			<div class="owner-controls btn-group pull-right">
+				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="toggleOwnership" title="[[groups:details.grant]]">
+					<i class="fa fa-star"></i>
+				</a>
+
+				<a class="btn btn-sm" href="#" data-ajaxify="false" data-action="kick" title="[[groups:details.kick]]">
+					<i class="fa fa-ban"></i>
+				</a>
+			</div>
+			<!-- ENDIF group.isOwner -->
+		</td>
+	</tr>
+	<!-- END members -->
+	</tbody>
+</table>
\ No newline at end of file
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
new file mode 100644
index 0000000..a7ec97d
--- /dev/null
+++ b/templates/partials/menu.tpl
@@ -0,0 +1,209 @@
+			<div class="navbar-header">
+				<button type="button" class="navbar-toggle" id="mobile-menu">
+					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+				</button>
+
+				<a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->">
+					<img alt="{brand:logo:alt}" class="{brand:logo:display} forum-logo" src="{brand:logo}" />
+				</a>
+				<!-- IF config.showSiteTitle -->
+				<a href="{relative_path}/">
+					<h1 class="navbar-brand forum-title">{title}</h1>
+				</a>
+				<!-- ENDIF config.showSiteTitle -->
+
+			</div>
+
+			<div id="nav-dropdown" class="hidden-xs">
+				<!-- IF !maintenanceHeader -->
+				<!-- IF config.loggedIn -->
+
+				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
+					<li class="notifications dropdown text-center hidden-xs" component="notifications">
+						<a href="#" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown">
+							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
+						</a>
+						<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
+							<li>
+								<ul component="notifications/list" class="notification-list">
+									<li><i class="fa fa-refresh fa-spin"></i> [[global:notifications.loading]]</li>
+								</ul>
+							</li>
+							<li class="notif-dropdown-link"><a href="#" class="mark-all-read">[[notifications:mark_all_read]]</a></li>
+							<li class="notif-dropdown-link"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></li>
+						</ul>
+					</li>
+
+					<!-- IF !config.disableChat -->
+					<li class="chats dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown">
+							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
+						</a>
+						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
+							<li>
+								<div component="chat/list" class="chat-list">
+									<span>
+										<i class="fa fa-refresh fa-spin"></i> [[global:chats.loading]]
+									</span>
+								</div>
+							</li>
+							<li class="chat-dropdown-link"><a href="#" class="mark-all-read" component="chats/mark-all-read">[[modules:chat.mark_all_read]]</a></li>
+							<li class="chat-dropdown-link"><a href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a></li>
+						</ul>
+					</li>
+					<!-- ENDIF !config.disableChat -->
+
+					<li id="user_label" class="dropdown">
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="user_dropdown" title="[[global:header.profile]]">
+							<img component="header/userpicture" class="user-avatar" src="{user.picture}" alt="{user.username}"<!-- IF !user.picture --> style="display: none;"<!-- ENDIF !user.picture --> />
+							<div component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor};<!-- IF user.picture --> display: none;"<!-- ENDIF user.picture -->">{user.icon:text}</div>
+							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
+						</a>
+						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
+							<li>
+								<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+									<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>
+								</a>
+							</li>
+							<li role="presentation" class="divider"></li>
+							<li>
+								<a href="#" class="user-status" data-status="online">
+									<i class="fa fa-fw fa-circle status online"></i><span> [[global:online]]</span>
+								</a>
+							</li>
+							<li>
+								<a href="#" class="user-status" data-status="away">
+									<i class="fa fa-fw fa-circle status away"></i><span> [[global:away]]</span>
+								</a>
+							</li>
+							<li>
+								<a href="#" class="user-status" data-status="dnd">
+									<i class="fa fa-fw fa-circle status dnd"></i><span> [[global:dnd]]</span>
+								</a>
+							</li>
+							<li>
+								<a href="#" class="user-status" data-status="offline">
+									<i class="fa fa-fw fa-circle status offline"></i><span> [[global:invisible]]</span>
+								</a>
+							</li>
+							<li role="presentation" class="divider"></li>
+							<li>
+								<a href="{relative_path}/user/{user.userslug}/edit">
+									<i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
+								</a>
+							</li>
+							<li>
+								<a href="{relative_path}/user/{user.userslug}/settings">
+									<i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
+								</a>
+							</li>
+							<li role="presentation" class="divider"></li>
+							<li component="user/logout">
+								<a href="#"><i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span></a>
+							</li>
+						</ul>
+					</li>
+
+				</ul>
+				<!-- ELSE -->
+				<ul id="logged-out-menu" class="nav navbar-nav navbar-right">
+					<!-- IF allowRegistration -->
+					<li>
+						<a href="{relative_path}/register">
+							<i class="fa fa-pencil visible-xs-inline"></i>
+							<span>[[global:register]]</span>
+						</a>
+					</li>
+					<!-- ENDIF allowRegistration -->
+					<li>
+						<a href="{relative_path}/login">
+							<i class="fa fa-sign-in visible-xs-inline"></i>
+							<span>[[global:login]]</span>
+						</a>
+					</li>
+				</ul>
+				<!-- ENDIF config.loggedIn -->
+				<!-- IF config.searchEnabled -->
+				<ul class="nav navbar-nav navbar-right search-menu">
+					<li>
+						<form id="search-form" class="navbar-form navbar-right hidden-xs" role="search" method="GET" action="">
+							<button id="search-button" type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
+							<div class="hidden" id="search-fields">
+								<div class="form-group">
+									<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+									<a href="#"><i class="fa fa-gears fa-fw advanced-search-link"></i></a>
+								</div>
+								<button type="submit" class="btn btn-default hide">[[global:search]]</button>
+							</div>
+						</form>
+					</li>
+					<li class="visible-xs" id="search-menu">
+						<a href="{relative_path}/search">
+							<i class="fa fa-search fa-fw"></i> [[global:search]]
+						</a>
+					</li>
+				</ul>
+				<!-- ENDIF config.searchEnabled -->
+
+				<ul class="nav navbar-nav navbar-right hidden-xs">
+					<li>
+						<a href="#" id="reconnect" class="hide" title="Connection to {title} has been lost, attempting to reconnect...">
+							<i class="fa fa-check"></i>
+						</a>
+					</li>
+				</ul>
+				
+				<ul class="nav navbar-nav navbar-right pagination-block visible-lg visible-md">
+					<li class="dropdown">
+						<i class="fa fa-angle-double-up pointer fa-fw pagetop"></i>
+						<i class="fa fa-angle-up pointer fa-fw pageup"></i>
+
+						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
+							<span class="pagination-text"></span>
+						</a>
+
+						<i class="fa fa-angle-down pointer fa-fw pagedown"></i>
+						<i class="fa fa-angle-double-down pointer fa-fw pagebottom"></i>
+
+						<div class="progress-container">
+							<div class="progress-bar"></div>
+						</div>
+
+						<ul class="dropdown-menu" role="menu">
+  							<input type="text" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
+  						</ul>
+					</li>
+				</ul>
+
+				<ul id="main-nav" class="nav navbar-nav">
+					<!-- BEGIN navigation -->
+					<!-- IF function.displayMenuItem, @index -->
+					<li class="{navigation.class}">
+						<a href="{navigation.route}" title="{navigation.title}" <!-- IF navigation.id -->id="{navigation.id}"<!-- ENDIF navigation.id --><!-- IF navigation.properties.targetBlank --> target="_blank"<!-- ENDIF navigation.properties.targetBlank -->>
+							<!-- IF navigation.iconClass -->
+							<i class="fa fa-fw {navigation.iconClass}"></i>
+							<!-- ENDIF navigation.iconClass -->
+
+							<!-- IF navigation.text -->
+							<span class="{navigation.textClass}">{navigation.text}</span>
+							<!-- ENDIF navigation.text -->
+						</a>
+					</li>
+					<!-- ENDIF function.displayMenuItem -->
+					<!-- END navigation -->
+				</ul>
+
+				<!-- ELSE -->
+				<ul class="nav navbar-nav navbar-right">
+					<li>
+						<a href="{relative_path}/login">
+							<i class="fa fa-sign-in visible-xs-inline"></i>
+							<span>[[global:login]]</span>
+						</a>
+					</li>
+				</ul>
+				<!-- ENDIF !maintenanceHeader -->
+			</div>
diff --git a/templates/partials/notifications_list.tpl b/templates/partials/notifications_list.tpl
new file mode 100644
index 0000000..033b3db
--- /dev/null
+++ b/templates/partials/notifications_list.tpl
@@ -0,0 +1,28 @@
+
+<!-- IF !notifications.length -->
+<li class="no-notifs">[[notifications:no_notifs]]</li>
+<!-- ENDIF !notifications.length -->
+
+<!-- BEGIN notifications -->
+<li class="{notifications.readClass}" data-nid="{notifications.nid}">
+	<div class="mark-read" aria-label="Mark Read"></div>
+	<span class="relTime">{notifications.timeago}</span>
+	
+	<div class="notification-image">
+		<!-- IF notifications.image -->
+		<!-- IF notifications.from -->
+		<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="pull-left user-avatar"src="{notifications.image}" /></a>
+		<!-- ENDIF notifications.from -->
+		<!-- ELSE -->
+		<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="pull-left user-icon" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
+		<!-- ENDIF notifications.image -->
+	</div>
+	
+	<div class="notification-msg">
+		<a href="{config.relative_path}{notifications.path}">
+			{notifications.bodyShort}
+		</a>
+	</div>
+	
+</li>
+<!-- END notifications -->
diff --git a/templates/partials/post_bar.tpl b/templates/partials/post_bar.tpl
new file mode 100644
index 0000000..141e0b9
--- /dev/null
+++ b/templates/partials/post_bar.tpl
@@ -0,0 +1,31 @@
+<div class="clearfix">
+	<div class="tags pull-left hidden-xs">
+		<!-- BEGIN tags -->
+		<a href="{config.relative_path}/tags/{tags.value}">
+		<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span>
+		<span class="tag-topic-count human-readable-number" title="{tags.score}">{tags.score}</span></a>
+		<!-- END tags -->
+	</div>
+
+	<div class="topic-main-buttons pull-right">
+		<span class="loading-indicator btn pull-left hidden" done="0">
+			<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
+		</span>
+
+		<!-- IMPORT partials/topic/stats.tpl -->
+
+		<!-- IMPORT partials/topic/reply-button.tpl -->
+
+		<!-- IF loggedIn -->
+		<button component="topic/mark-unread" class="btn btn-default">
+			<i class="fa fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[topic:mark_unread]]</span>
+		</button>
+		<!-- ENDIF loggedIn -->
+
+		<!-- IMPORT partials/topic/watch.tpl -->
+
+		<!-- IMPORT partials/topic/sort.tpl -->
+
+		<!-- IMPORT partials/thread_tools.tpl -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/partials/posts_list.tpl b/templates/partials/posts_list.tpl
new file mode 100644
index 0000000..b7e4595
--- /dev/null
+++ b/templates/partials/posts_list.tpl
@@ -0,0 +1,21 @@
+<div component="posts" class="posts-list" data-nextstart="{nextStart}">
+
+	<!-- BEGIN posts -->
+	<div component="post" class="posts-list-item<!-- IF posts.deleted --> deleted<!-- ELSE --><!-- IF posts.topic.deleted --> deleted<!-- ENDIF posts.topic.deleted --><!-- ENDIF posts.deleted -->" data-pid="{posts.pid}" data-uid="{posts.uid}">
+		<div class="post-body">
+			<a class="topic-title" href="{config.relative_path}/post/{posts.pid}">
+				<!-- IF !posts.isMainPost -->RE: <!-- ENDIF !posts.isMainPost -->{posts.topic.title}
+			</a>
+
+			<div component="post/content" class="content">
+				{posts.content}
+			</div>
+
+			<span class="topic-category"><a href="{config.relative_path}/category/{posts.category.slug}">[[global:posted_in, {posts.category.name}]]</a></span> &bull; <span class="timeago" title="{posts.timestampISO}"></span>
+		</div>
+	</div>
+	<!-- END posts -->
+</div>
+<div component="posts/loading" class="loading-indicator text-center hidden">
+	<i class="fa fa-refresh fa-spin"></i>
+</div>
\ No newline at end of file
diff --git a/templates/partials/tags_list.tpl b/templates/partials/tags_list.tpl
new file mode 100644
index 0000000..3fbc1f8
--- /dev/null
+++ b/templates/partials/tags_list.tpl
@@ -0,0 +1,5 @@
+<!-- BEGIN tags -->
+<h4 class="pull-left tag-container">
+	<a href="{config.relative_path}/tags/{tags.value}" data-value="{tags.value}"><span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span><span class="tag-topic-count human-readable-number" title="{tags.score}">{tags.score}</span></a>
+</h4>
+<!-- END tags -->
\ No newline at end of file
diff --git a/templates/partials/topic/post-menu-list.tpl b/templates/partials/topic/post-menu-list.tpl
new file mode 100644
index 0000000..aac1407
--- /dev/null
+++ b/templates/partials/topic/post-menu-list.tpl
@@ -0,0 +1,76 @@
+<!-- IF posts.display_moderator_tools -->
+<li role="presentation" class="dropdown-header">[[topic:tools]]</li>
+<li role="presentation">
+	<a component="post/edit" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa fa-pencil"></i></span> [[topic:edit]]
+	</a>
+</li>
+<li role="presentation">
+	<a component="post/delete" role="menuitem" tabindex="-1" href="#" class="<!-- IF posts.deleted -->hidden<!-- ENDIF posts.deleted -->">
+		<div class="menu-icon"><i class="fa fa-trash-o"></i></div> <span>[[topic:delete]]</span>
+	</a>
+</li>
+<li role="presentation">
+	<a component="post/restore" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
+		<div class="menu-icon"><i class="fa fa-history"></i></div> <span>[[topic:restore]]</span>
+	</a>
+</li>
+<li role="presentation">
+	<a component="post/purge" role="menuitem" tabindex="-1" href="#" class="<!-- IF !posts.deleted -->hidden<!-- ENDIF !posts.deleted -->">
+		<span class="menu-icon"><i class="fa fa-eraser"></i></span> [[topic:purge]]
+	</a>
+</li>
+
+<!-- BEGIN posts.tools -->
+<li role="presentation">
+	<a component="{posts.tools.action}" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa {posts.tools.icon}"></i></span> {{posts.tools.html}}
+	</a>
+</li>
+<!-- END posts.tools -->
+
+<!-- IF posts.display_move_tools -->
+<li role="presentation">
+	<a component="post/move" role="menuitem" tabindex="-1" href="#">
+		<span class="menu-icon"><i class="fa fa-arrows"></i></span> [[topic:move]]
+	</a>
+</li>
+<!-- ENDIF posts.display_move_tools -->
+<li role="presentation" class="divider"></li>
+<!-- ENDIF posts.display_moderator_tools -->
+
+<!-- IF !posts.deleted -->
+<!-- IF config.loggedIn -->
+<li role="presentation">
+	<a component="post/bookmark" role="menuitem" tabindex="-1" href="#" data-bookmarked="{posts.bookmarked}">
+
+		<span class="bookmark-text">[[topic:bookmark]]</span>
+		<span component="post/bookmark-count" class="bookmarkCount" data-bookmarks="{posts.bookmarks}">{posts.bookmarks}</span>&nbsp;
+
+		<i component="post/bookmark/on" class="fa fa-heart <!-- IF !posts.bookmarked -->hidden<!-- ENDIF !posts.bookmarked -->"></i>
+		<i component="post/bookmark/off" class="fa fa-heart-o <!-- IF posts.bookmarked -->hidden<!-- ENDIF posts.bookmarked -->"></i>
+	</a>
+</li>
+<!-- ENDIF config.loggedIn -->
+
+<!-- IF postSharing.length -->
+<li role="presentation" class="divider"></li>
+<li role="presentation" class="dropdown-header">[[topic:share_this_post]]</li>
+<!-- ENDIF postSharing.length -->
+<!-- BEGIN postSharing -->
+	<li role="presentation">
+		<a role="menuitem" component="share/{postSharing.id}" tabindex="-1" href="#"><span class="menu-icon"><i class="fa {postSharing.class}"></i></span> {postSharing.name}</a>
+	</li>
+<!-- END postSharing -->
+
+<!-- IF config.loggedIn -->
+<!-- IF !posts.selfPost -->
+<li role="presentation" class="divider"></li>
+<li role="presentation">
+	<a component="post/flag" role="menuitem" tabindex="-1" href="#">
+		[[topic:flag_title]]
+	</a>
+</li>
+<!-- ENDIF !posts.selfPost -->
+<!-- ENDIF config.loggedIn -->
+<!-- ENDIF !posts.deleted -->
\ No newline at end of file
diff --git a/templates/partials/topic/post.tpl b/templates/partials/topic/post.tpl
new file mode 100644
index 0000000..adbb8d2
--- /dev/null
+++ b/templates/partials/topic/post.tpl
@@ -0,0 +1,57 @@
+<div class="row post-header">
+	<div class="col-xs-12">
+		<div class="post-time pull-left">
+			<span class="timeago" title="{posts.timestampISO}"></span>
+		</div>
+		<!-- IF !reputation:disabled -->
+		<div class="votes pull-right">
+			<a component="post/upvote" href="#" class="<!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
+				<i class="fa fa-chevron-up"></i>
+			</a>
+
+			<span component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</span>
+
+			<!-- IF !downvote:disabled -->
+			<a component="post/downvote" href="#" class="<!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
+				<i class="fa fa-chevron-down"></i>
+			</a>
+			<!-- ENDIF !downvote:disabled -->
+		</div>
+		<!-- ENDIF !reputation:disabled -->
+	</div>
+</div>
+<div class="row post">
+	<div class="col-sm-2 col-md-2 col-lg-2 post-author">
+		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
+			<!-- IF posts.user.picture -->
+			<img component="user/picture" data-uid="{posts.user.uid}" class="user-avatar" src="{posts.user.picture}" align="left" itemprop="image" />
+			<!-- ELSE -->
+			<div component="user/picture" data-uid="{posts.user.uid}" class="user-icon" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
+			<!-- ENDIF posts.user.picture -->
+		</a>
+		<div class="author">
+		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
+			{posts.user.username}
+		</a>
+		</br>
+		<!-- IF posts.user.selectedGroup.slug -->
+		<a href="{config.relative_path}/groups/{posts.user.selectedGroup.slug}"><small class="label group-label" style="background-color: {posts.user.selectedGroup.labelColor};"><!-- IF posts.user.selectedGroup.icon --><i class="fa {posts.user.selectedGroup.icon}"></i> <!-- ENDIF posts.user.selectedGroup.icon -->{posts.user.selectedGroup.userTitle}</small></a>
+		<!-- ENDIF posts.user.selectedGroup.slug -->
+		</div>
+	</div>
+	<div class="col-sm-10 col-md-10 col-lg-10 post-content">
+		{posts.content}
+	</div>
+</div>
+<div class="row post-footer">
+	<div class="col-xs-12">
+		<div class="pull-right">
+			<span class="post-tools">
+				<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
+				<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
+			</span>
+			
+			<!-- IMPORT partials/topic/post-menu.tpl -->
+		</div>
+	</div>
+</div>
diff --git a/templates/partials/topic/quickreply.tpl b/templates/partials/topic/quickreply.tpl
new file mode 100644
index 0000000..b672269
--- /dev/null
+++ b/templates/partials/topic/quickreply.tpl
@@ -0,0 +1,22 @@
+<!-- IF loggedIn -->
+<div class="row quick-reply">
+    <div class="col-sm-2 hidden-xs reply-user">
+    	<a href="<!-- IF loggedInUser.userslug -->{config.relative_path}/user/{loggedInUser.userslug}<!-- ELSE -->#<!-- ENDIF loggedInUser.userslug -->">
+			<!-- IF loggedInUser.picture -->
+			<img component="user/picture" data-uid="{loggedInUser.uid}" class="user-avatar" src="{loggedInUser.picture}" align="left" itemprop="image" />
+			<!-- ELSE -->
+			<div component="user/picture" data-uid="{loggedInUser.uid}" class="user-icon" style="background-color: {loggedInUser.icon:bgColor};">{loggedInUser.icon:text}</div>
+			<!-- ENDIF loggedInUser.picture -->
+		</a>
+		<div class="author">
+			<a href="<!-- IF loggedInUser.userslug -->{config.relative_path}/user/{loggedInUser.userslug}<!-- ELSE -->#<!-- ENDIF loggedInUser.userslug -->">
+				{loggedInUser.username}
+			</a>
+		</div>
+	</div>
+	<div class="col-xs-12 col-sm-10 quickreply-message">
+		<textarea component="topic/quickreply/text" class="form-control" rows="5"></textarea>
+	</div>
+	<button component="topic/quickreply/button" class="btn btn-primary">Post quick reply</button>
+</div>
+<!-- ENDIF loggedIn -->
\ No newline at end of file
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
new file mode 100644
index 0000000..920f450
--- /dev/null
+++ b/templates/partials/topics_list.tpl
@@ -0,0 +1,85 @@
+<div component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+    <meta itemprop="itemListOrder" content="descending">
+    <!-- IF topics.length -->
+    <div class="row topics-header hidden-xs hidden-sm">
+        <div class="col-md-8 col-xs-12"><div class="header-title">[[global:topics]]</div></div>
+        <div class="col-md-1"><div class="header-title">[[global:posts]]</div></div>
+        <div class="col-md-1"><div class="header-title">[[global:views]]</div></div>
+        <div class="col-md-2"><div class="header-title">Last Reply</div></div>
+    </div>
+    <!-- ENDIF topics.length -->
+    <!-- BEGIN topics -->
+    <div component="category/topic" class="row {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<meta itemprop="name" content="{function.stripTags, title}">
+		<div class="col-md-8 col-xs-12">
+			<!-- IF showSelect -->
+	        <div class="checkbox pull-left" component="topic/select">
+                <label>
+                    <div class="select"></div>
+                    <i class="input-helper"></i>
+                </label>
+            </div>
+	        <!-- ENDIF showSelect -->
+		    <div class="topic-author">
+    		    <a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="pull-left">
+    				<!-- IF topics.thumb -->
+    				<img src="{topics.thumb}" class="user-img" />
+    				<!-- ELSE -->
+    				<!-- IF topics.user.picture -->
+    				<img class="user-avatar" component="user/picture" data-uid="{topics.user.uid}" src="{topics.user.picture}" />
+    				<!-- ELSE -->
+    				<div class="user-icon" style="background-color: {topics.user.icon:bgColor};">{topics.user.icon:text}</div>
+    				<!-- ENDIF topics.user.picture -->
+    				<!-- ENDIF topics.thumb -->
+    			</a>
+    		</div>
+    		<div component="topic/header" class="title">
+    			<i component="topic/pinned" class="fa fa-thumb-tack <!-- IF !topics.pinned -->hide<!-- ENDIF !topics.pinned -->" title="[[topic:pinned]]"></i>
+				<i component="topic/locked" class="fa fa-lock <!-- IF !topics.locked -->hide<!-- ENDIF !topics.locked -->" title="[[topic:locked]]"></i>
+				<i component="topic/moved" class="fa fa-arrow-circle-right <!-- IF !topics.oldCid -->hide<!-- ENDIF !topics.oldCid -->" title="[[topic:moved]]"></i>
+    		    <!-- IF !topics.noAnchor -->
+				<a href="{config.relative_path}/topic/{topics.slug}<!-- IF topics.bookmark -->/{topics.bookmark}<!-- ENDIF topics.bookmark -->" itemprop="url">{topics.title}</a>
+				<!-- ELSE -->
+				<span>{topics.title}</span>
+				<!-- ENDIF !topics.noAnchor -->
+				
+				<small>
+					<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->">{topics.user.username}</a> &bull; <span class="timeago" title="{topics.timestampISO}"></span>
+				</small>
+    		</div>
+		</div>
+		<div class="col-md-1 hidden-xs hidden-sm">
+		    <div class="total-post-count human-readable-number">
+		        {topics.postcount}
+		    </div>
+		</div>
+		<div class="col-md-1 hidden-xs hidden-sm">
+		    <div class="total-view-count human-readable-number">
+		        {topics.viewcount}
+		    </div>
+		</div>
+		<div class="col-md-2 hidden-xs hidden-sm">
+		    <div class="teaser" component="topic/teaser">
+		        <!-- IF topics.unreplied -->
+				<p>
+					[[category:no_replies]]
+				</p>
+				<!-- ELSE -->
+		        <!-- IF topics.teaser.pid -->
+				<!-- IF topics.teaser.user.picture -->
+				<img title="{topics.teaser.user.username}" class="user-avatar" src="{topics.teaser.user.picture}" />
+				<!-- ELSE -->
+				<div title="{topics.teaser.user.username}" class="user-icon" style="background-color: {topics.teaser.user.icon:bgColor};">{topics.teaser.user.icon:text}</div>
+				<!-- ENDIF topics.teaser.user.picture -->
+				
+				<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{topics.teaser.user.username}</a>
+				<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
+					<span class="timeago" title="{topics.teaser.timestampISO}"></span>
+				</a>
+		        <!-- ENDIF topics.teaser.pid -->
+		        <!-- ENDIF topics.unreplied -->
+		    </div>
+		</div>
+	</div>
+    <!-- END topics -->
+</div>
\ No newline at end of file
diff --git a/templates/partials/users_list.tpl b/templates/partials/users_list.tpl
new file mode 100644
index 0000000..ffc888d
--- /dev/null
+++ b/templates/partials/users_list.tpl
@@ -0,0 +1,45 @@
+<!-- BEGIN users -->
+<li class="users-box registered-user" data-uid="{users.uid}">
+	<a href="{config.relative_path}/user/{users.userslug}">
+		<!-- IF users.picture -->
+		<img class="user-avatar" src="{users.picture}" />
+		<!-- ELSE -->
+		<div class="user-icon" style="background-color: {users.icon:bgColor};">{users.icon:text}</div>
+		<!-- ENDIF users.picture -->
+	</a>
+	
+	<div class="user-info">
+		<span class="username">
+			<i component="user/status" class="fa fa-circle status {users.status}" title="[[global:{users.status}]]"></i>
+			<a href="{config.relative_path}/user/{users.userslug}">{users.username}</a>
+		</span>
+
+		<!-- IF section_joindate -->
+		<div title="joindate" class="joindate">
+			<span class="timeago" title="{users.joindateISO}"></span>
+		</div>
+		<!-- ENDIF section_joindate -->
+
+		<!-- IF section_sort-reputation -->
+		<div title="reputation" class="reputation">
+			<i class="fa fa-star"></i>
+			<span class="formatted-number">{users.reputation}</span>
+		</div>
+		<!-- ENDIF section_sort-reputation -->
+
+		<!-- IF section_sort-posts -->
+		<div title="post count" class="post-count">
+			<i class="fa fa-pencil"></i>
+			<span class="formatted-number">{users.postcount}</span>
+		</div>
+		<!-- ENDIF section_sort-posts -->
+
+		<!-- IF section_flagged -->
+		<div title="flag count" class="flag-count">
+			<i class="fa fa-flag"></i>
+			<span class="formatted-number"><a href="{config.relative_path}/posts/flags?byUsername={users.username}">{users.flags}</a></span>
+		</div>
+		<!-- ENDIF section_flagged -->
+	</div>
+</li>
+<!-- END users -->
\ No newline at end of file
diff --git a/templates/popular.tpl b/templates/popular.tpl
new file mode 100644
index 0000000..e139448
--- /dev/null
+++ b/templates/popular.tpl
@@ -0,0 +1,17 @@
+<div class="popular">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<ul class="nav nav-pills" component="popular/tab">
+		<li><a href='{config.relative_path}/popular/daily'>[[recent:day]]</a></li>
+		<li><a href='{config.relative_path}/popular/weekly'>[[recent:week]]</a></li>
+		<li><a href='{config.relative_path}/popular/monthly'>[[recent:month]]</a></li>
+	</ul>
+
+	<div class="category">
+		<!-- IF !topics.length -->
+		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>
+		<!-- ENDIF !topics.length -->
+
+		<!-- IMPORT partials/topics_list.tpl -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/recent.tpl b/templates/recent.tpl
new file mode 100644
index 0000000..1340ce6
--- /dev/null
+++ b/templates/recent.tpl
@@ -0,0 +1,60 @@
+<div class="recent">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<div class="btn-toolbar">
+		<div class="pull-left">
+			<!-- IF loggedIn -->
+			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- ELSE -->
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			<!-- ENDIF loggedIn -->
+		</div>
+
+		<div class="btn-group pull-right bottom-sheet">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><i class="fa fa-fw {selectedCategory.icon}"></i><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
+				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				<li role="presentation" class="category">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
+				</li>
+				<!-- BEGIN categories -->
+				<li role="presentation" class="category" data-cid="{categories.cid}">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><i class="fa fa-fw {categories.icon}"></i><!-- ENDIF categories.icon --> {categories.name}</a>
+				</li>
+				<!-- END categories -->
+			</ul>
+		</div>
+
+		<div class="btn-group pull-right bottom-sheet">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+			{selectedFilter.name} <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				<!-- BEGIN filters -->
+				<li role="presentation" class="category">
+					<a role="menu-item" href="{config.relative_path}/{filters.url}{querystring}"><i class="fa fa-fw <!-- IF filters.selected -->fa-check<!-- ENDIF filters.selected -->"></i>{filters.name}</a>
+				</li>
+				<!-- END filters -->
+			</ul>
+		</div>
+	</div>
+
+	<div class="category">
+		<!-- IF !topics.length -->
+		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>
+		<!-- ENDIF !topics.length -->
+
+		<a href="{config.relative_path}/{selectedFilter.url}{querystring}">
+			<div class="alert alert-warning hide" id="new-topics-alert"></div>
+		</a>
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/register.tpl b/templates/register.tpl
new file mode 100644
index 0000000..c378667
--- /dev/null
+++ b/templates/register.tpl
@@ -0,0 +1,74 @@
+<div class="register">
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="row">
+		<div class="col-md-12">
+			<div class="register-block">
+				<div class="alert alert-danger<!-- IF !error --> hidden<!-- ENDIF !error -->" id="register-error-notify" >
+					<strong>[[error:registration-error]]</strong>
+					<p>{error}</p>
+				</div>
+				<form component="register/local" class="form-horizontal" role="form" action="{config.relative_path}/register" method="post">
+					<div class="form-group">
+						<label for="email" class="col-lg-3 control-label">[[register:email_address]]</label>
+						<div class="col-lg-7">
+							<input class="form-control" type="email" placeholder="[[register:email_address_placeholder]]" name="email" id="email" autocorrect="off" autocapitalize="off" />
+							<span class="register-feedback" id="email-notify"></span>
+							<span class="help-block">[[register:help.email]]</span>
+						</div>
+					</div>
+					<div class="form-group">
+						<label for="username" class="col-lg-3 control-label">[[register:username]]</label>
+						<div class="col-lg-7">
+							<input class="form-control" type="text" placeholder="[[register:username_placeholder]]" name="username" id="username" autocorrect="off" autocapitalize="off" autocomplete="off" />
+							<span class="register-feedback" id="username-notify"></span>
+							<span class="help-block">[[register:help.username_restrictions, {minimumUsernameLength}, {maximumUsernameLength}]]</span>
+						</div>
+					</div>
+					<div class="form-group">
+						<label for="password" class="col-lg-3 control-label">[[register:password]]</label>
+						<div class="col-lg-7">
+							<input class="form-control" type="password" placeholder="[[register:password_placeholder]]" name="password" id="password" />
+							<span class="register-feedback" id="password-notify"></span>
+							<span class="help-block">[[register:help.minimum_password_length, {minimumPasswordLength}]]</span>
+						</div>
+					</div>
+					<div class="form-group">
+						<label for="password-confirm" class="col-lg-3 control-label">[[register:confirm_password]]</label>
+						<div class="col-lg-7">
+							<input class="form-control" type="password" placeholder="[[register:confirm_password_placeholder]]" name="password-confirm" id="password-confirm" />
+							<span class="register-feedback" id="password-confirm-notify"></span>
+						</div>
+					</div>
+	
+					<!-- BEGIN regFormEntry -->
+					<div class="form-group">
+						<label for="register-{regFormEntry.styleName}" class="col-lg-3 control-label">{regFormEntry.label}</label>
+						<div id="register-{regFormEntry.styleName}" class="col-lg-7">
+							{{regFormEntry.html}}
+						</div>
+					</div>
+					<!-- END regFormEntry -->
+	
+					<div class="form-group">
+						<div class="col-lg-offset-3 col-lg-7">
+							<button class="btn btn-primary btn-lg btn-block" id="register" type="submit">[[register:register_now_button]]</button>
+						</div>
+					</div>
+					<input id="referrer" type="hidden" name="referrer" value="" />
+					<input id="token" type="hidden" name="token" value="" />
+				</form>
+			</div>
+		</div>
+	
+		<!-- IF alternate_logins -->
+		<div class="col-lg-offset-3 col-lg-7">
+			<div class="alt-logins">
+				<!-- BEGIN authentication -->
+				<div class="{authentication.name}"><a rel="nofollow" target="_top" href="{config.relative_path}{authentication.url}"><i class="fa {authentication.icon} fa-3x"></i></i></a></div>
+				<!-- END authentication -->
+			</div>
+		</div>
+		<!-- ENDIF alternate_logins -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/reset.tpl b/templates/reset.tpl
new file mode 100644
index 0000000..39827d2
--- /dev/null
+++ b/templates/reset.tpl
@@ -0,0 +1,22 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<div class="alert alert-info">
+	[[reset_password:enter_email]]
+</div>
+
+<div class="reset">
+	<div class="alert alert-success hide" id="success">
+		<button type="button" class="close" data-dismiss="alert">&times;</button>
+		[[reset_password:password_reset_sent]]
+	</div>
+	<div class="alert alert-danger hide" id="error">
+		<button type="button" class="close" data-dismiss="alert">&times;</button>
+		[[reset_password:invalid_email]]
+	</div>
+	<form onsubmit="return false;">
+		<input type="text" class="form-control input-block input-lg" placeholder="[[reset_password:enter_email_address]]" id="email" />
+
+		<br />
+		<button class="btn btn-primary btn-block btn-lg" id="reset" type="submit">[[reset_password:reset_password]]</button>
+	</form>
+</div>
\ No newline at end of file
diff --git a/templates/reset_code.tpl b/templates/reset_code.tpl
new file mode 100644
index 0000000..d88df86
--- /dev/null
+++ b/templates/reset_code.tpl
@@ -0,0 +1,42 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<!-- IF valid -->
+<div>
+	<!-- IF displayExpiryNotice -->
+	<div class="alert alert-warning">
+		[[reset_password:password_expired]]
+	</div>
+	<!-- ENDIF displayExpiryNotice -->
+	<div class="alert alert-success hidden" id="success">
+		<button type="button" class="close" data-dismiss="alert">&times;</button>
+		<strong>[[reset_password:password_changed.title]]</strong>
+		<p>[[reset_password:password_changed.message]]</p>
+	</div>
+	<div class="alert alert-warning hidden" id="notice">
+		<strong></strong>
+		<p></p>
+	</div>
+	<form onsubmit="return false;" id="reset-form" class="row">
+		<div class="col-sm-6">
+			<label for="password">[[reset_password:new_password]]</label>
+			<input class="form-control" type="password" placeholder="[[reset_password:new_password]]" id="password" /><br />
+		</div>
+		<div class="col-sm-6">
+			<label for="repeat">[[reset_password:repeat_password]]</label>
+			<input class="form-control" type="password" placeholder="[[reset_password:repeat_password]]" id="repeat" /><br />
+		</div>
+		<div class="col-xs-12">
+			<button class="btn btn-primary btn-block" id="reset" type="submit">[[reset_password:reset_password]]</button>
+		</div>
+	</form>
+</div>
+<!-- ELSE -->
+<div class="panel panel-default panel-danger">
+	<div class="panel-heading">
+		<h3 class="panel-title">[[reset_password:wrong_reset_code.title]]</h3>
+	</div>
+	<div class="panel-body">
+		<p>[[reset_password:wrong_reset_code.message]]</p>
+	</div>
+</div>
+<!-- ENDIF valid -->
\ No newline at end of file
diff --git a/templates/search.tpl b/templates/search.tpl
new file mode 100644
index 0000000..ea65d30
--- /dev/null
+++ b/templates/search.tpl
@@ -0,0 +1,201 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+
+<div class="search">
+	<div class="row">
+		<div class="col-xs-12">
+			<form id="advanced-search">
+				<div class="form-group">
+					<div class="row">
+						<div class="col-md-5">
+							<label>[[global:search]]</label>
+							<input type="text" class="form-control" id="search-input" placeholder="[[global:search]]">
+						</div>
+						<div class="col-md-5">
+							<label>[[search:in]]</label>
+							<select id="search-in" class="form-control">
+								<option value="titlesposts">[[search:titles-posts]]</option>
+								<option value="titles">[[search:titles]]</option>
+								<option value="posts">[[global:posts]]</option>
+								<option value="users">[[global:users]]</option>
+								<option value="tags">[[tags:tags]]</option>
+							</select>
+						</div>
+						<div class="col-md-2">
+							<label>&nbsp;</label>
+							<button type="submit" class="btn btn-default form-control">[[global:search]]</button>
+						</div>
+					</div>
+				</div>
+
+				<div class="panel panel-default">
+					<div class="panel-heading" data-toggle="collapse" data-target=".search-options">
+						<h3 class="panel-title"><i class="fa fa-caret-down"></i> [[search:advanced-search]]</h3>
+					</div>
+					<div class="panel-body search-options collapse <!-- IF expandSearch -->in<!-- ENDIF expandSearch -->">
+
+						<div class="form-group post-search-item">
+							<label>[[search:posted-by]]</label>
+							<input type="text" class="form-control" id="posted-by-user" placeholder="[[search:posted-by]]">
+						</div>
+
+						<div class="form-group post-search-item">
+							<label>[[search:in-categories]]</label>
+							<select multiple class="form-control" id="posted-in-categories" size="{categoriesCount}">
+								<!-- BEGIN categories -->
+								<option value="{categories.value}">{categories.text}</option>
+								<!-- END categories -->
+							</select>
+							<div class="checkbox">
+								<label>
+									<input type="checkbox" id="search-children"><i class="input-helper"></i>[[search:search-child-categories]]
+								</label>
+							</div>
+						</div>
+
+						<div class="form-group post-search-item">
+							<label>[[search:reply-count]]</label>
+							<div class="row">
+								<div class="col-md-6">
+									<select id="reply-count-filter" class="form-control">
+										<option value="atleast">[[search:at-least]]</option>
+										<option value="atmost">[[search:at-most]]</option>
+									</select>
+								</div>
+								<div class="col-md-6">
+									<input type="text" class="form-control" id="reply-count">
+								</div>
+							</div>
+						</div>
+
+						<div class="form-group post-search-item">
+							<label>[[search:post-time]]</label>
+							<div class="row">
+								<div class="col-md-6">
+									<select id="post-time-filter" class="form-control">
+										<option value="newer">[[search:newer-than]]</option>
+										<option value="older">[[search:older-than]]</option>
+									</select>
+								</div>
+								<div class="col-md-6">
+									<select id="post-time-range" class="form-control">
+										<option value="">[[search:any-date]]</option>
+										<option value="86400">[[search:yesterday]]</option>
+										<option value="604800">[[search:one-week]]</option>
+										<option value="1209600">[[search:two-weeks]]</option>
+										<option value="2592000">[[search:one-month]]</option>
+										<option value="7776000">[[search:three-months]]</option>
+										<option value="15552000">[[search:six-months]]</option>
+										<option value="31104000">[[search:one-year]]</option>
+									</select>
+								</div>
+							</div>
+						</div>
+
+						<div class="form-group post-search-item">
+							<label>[[search:sort-by]]</label>
+							<div class="row">
+								<div class="col-md-6">
+									<select id="post-sort-by" class="form-control">
+										<option value=""></option>
+										<option value="timestamp">[[search:post-time]]</option>
+										<option value="teaser.timestamp">[[search:last-reply-time]]</option>
+										<option value="topic.title">[[search:topic-title]]</option>
+										<option value="topic.postcount">[[search:number-of-replies]]</option>
+										<option value="topic.viewcount">[[search:number-of-views]]</option>
+										<option value="topic.timestamp">[[search:topic-start-date]]</option>
+										<option value="user.username">[[search:username]]</option>
+										<option value="category.name">[[search:category]]</option>
+									</select>
+								</div>
+								<div class="col-md-6">
+									<select id="post-sort-direction" class="form-control">
+										<option value="desc">[[search:descending]]</option>
+										<option value="asc">[[search:ascending]]</option>
+									</select>
+								</div>
+							</div>
+						</div>
+
+						<div class="form-group post-search-item">
+							<label>[[search:show-results-as]]</label>
+							<div id="show-results-as">
+								<label class="radio radio-inline active">
+									<input type="radio" name="options" id="show-as-posts" autocomplete="off" checked>
+									<i class="input-helper"></i>
+									[[global:posts]]
+								</label>
+								<label class="radio radio-inline active">
+									<input type="radio" name="options" id="show-as-topics" autocomplete="off">
+									<i class="input-helper"></i>
+									[[global:topics]]
+								</label>
+							</div>
+						</div>
+						
+						<div class="btn-group">
+							<button type="submit" class="btn btn-primary">[[global:search]]</button>
+							<a class="btn btn-default" id="save-preferences" href="#">[[search:save-preferences]]</a>
+							<a class="btn btn-default" id="clear-preferences" href="#">[[search:clear-preferences]]</a>
+						</div>
+					</div>
+				</div>
+			</form>
+		</div>
+	</div>
+
+	<div class="row">
+		<div id="results" class="col-md-12" data-search-query="{search_query}">
+			<!-- IF matchCount -->
+			<div class="alert alert-info">[[search:results_matching, {matchCount}, {search_query}, {time}]] </div>
+			<!-- ELSE -->
+			<!-- IF search_query -->
+			<div class="alert alert-warning">[[search:no-matches]]</div>
+			<!-- ENDIF search_query -->
+			<!-- ENDIF matchCount -->
+
+			<!-- BEGIN posts -->
+			<div class="topic-row panel panel-default clearfix">
+				<div class="panel-body">
+
+					<a href="{config.relative_path}/post/{posts.pid}" class="search-result-text">
+						<h4>{posts.topic.title}</h4>
+					</a>
+					<!-- IF showAsPosts -->
+					<div class="search-result-text">
+						{posts.content}
+						<p class="fade-out"></p>
+					</div>
+					<!-- ENDIF showAsPosts -->
+
+					<small>
+						<span class="pull-right post-preview-footer">
+							<a href="{config.relative_path}/user/{posts.user.userslug}">
+								<!-- IF posts.user.picture -->
+								<img class="user-avatar" title="{posts.user.username}" src="{posts.user.picture}"/>
+								<!-- ELSE -->
+								<div class="user-icon" style="background-color: {posts.user.icon:bgColor};">{posts.user.icon:text}</div>
+								<!-- ENDIF posts.user.picture -->
+							</a>
+							<a class="post-footer-link" href="{config.relative_path}/category/{posts.category.slug}">[[global:posted_in, {posts.category.name}]] <i class="fa {posts.category.icon}"></i></a> <span class="timeago" title="{posts.timestampISO}"></span>
+						</span>
+					</small>
+				</div>
+			</div>
+			<!-- END posts -->
+
+			<!-- IF users.length -->
+			<ul id="users-container" class="users-container">
+			<!-- IMPORT partials/users_list.tpl -->
+			</ul>
+			<!-- ENDIF users.length -->
+
+			<!-- IF tags.length -->
+			<div class="tag-list">
+				<!-- IMPORT partials/tags_list.tpl -->
+			</div>
+			<!-- ENDIF tags.length -->
+
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/tag.tpl b/templates/tag.tpl
new file mode 100644
index 0000000..11e20f6
--- /dev/null
+++ b/templates/tag.tpl
@@ -0,0 +1,22 @@
+<div class="tag">
+	
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	
+	<!-- IF loggedIn -->
+	<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+	<!-- ELSE -->
+	<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+	<!-- ENDIF loggedIn -->
+	
+	<!-- IF !topics.length -->
+	<div class="alert alert-warning">[[tags:no_tag_topics]]</div>
+	<!-- ENDIF !topics.length -->
+
+	<div class="category">
+		<!-- IMPORT partials/topics_list.tpl -->
+		<button id="load-more-btn" class="btn btn-primary hide">[[unread:load_more]]</button>
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+	</div>
+</div>
\ No newline at end of file
diff --git a/templates/tags.tpl b/templates/tags.tpl
new file mode 100644
index 0000000..129eb4b
--- /dev/null
+++ b/templates/tags.tpl
@@ -0,0 +1,24 @@
+<div class="tags">
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<!-- IF tags.length -->
+	<div class="row">
+		<div class="col-lg-12">
+			<div class="input-group">
+				<input type="text" class="form-control" placeholder="[[global:search]]" id="tag-search">
+				<span class="input-group-addon search-button"><i class="fa fa-search"></i></span>
+			</div>
+		</div>
+	</div>
+	<!-- ENDIF tags.length -->
+
+	<!-- IF !tags.length -->
+	<div class="alert alert-warning">[[tags:no_tags]]</div>
+	<!-- ENDIF !tags.length -->
+
+	<div class="category row">
+		<div class="col-md-12 clearfix tag-list" data-nextstart="{nextStart}">
+			<!-- IMPORT partials/tags_list.tpl -->
+		</div>
+	</div>
+</div>
diff --git a/templates/topic.tpl b/templates/topic.tpl
new file mode 100644
index 0000000..0df1d58
--- /dev/null
+++ b/templates/topic.tpl
@@ -0,0 +1,59 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="row">
+	<div class="topic col-lg-12 col-sm-12" has-widget-class="topic col-lg-9 col-sm-12" has-widget-target="sidebar">
+
+		<h1 component="post/header" class="hidden-xs" itemprop="name">
+			<i class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
+			<i class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
+			<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
+			<!-- BEGIN icons -->@value<!-- END icons -->
+			<span class="topic-title" component="topic/title">{title}</span>
+		</h1>
+
+		<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted -->">[[topic:deleted_message]]</div>
+
+		<div component="topic" class="posts" data-tid="{tid}" data-cid="{cid}">
+			<!-- BEGIN posts -->
+				<div component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
+					<a component="post/anchor" data-index="{posts.index}" name="{posts.index}"></a>
+
+					<meta itemprop="datePublished" content="{posts.timestampISO}">
+					<meta itemprop="dateModified" content="{posts.editedISO}">
+
+					<!-- IMPORT partials/topic/post.tpl -->
+				</div>
+				<!-- IF !posts.index -->
+				<div class="post-bar-placeholder"></div>
+				<!-- ENDIF !posts.index -->
+			<!-- END posts -->
+		</div>
+		
+		<!-- IMPORT partials/topic/quickreply.tpl -->
+		
+		<div class="post-bar">
+			<!-- IMPORT partials/post_bar.tpl -->
+		</div>
+
+		<!-- IF config.usePagination -->
+		<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+
+		<div class="visible-xs visible-sm pagination-block text-center">
+			<div class="progress-bar"></div>
+			<div class="wrapper">
+				<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
+				<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
+				<span class="pagination-text"></span>
+				<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
+				<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
+			</div>
+		</div>
+		
+	</div>
+</div>
+
+<!-- IF !config.usePagination -->
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+<!-- ENDIF !config.usePagination -->
diff --git a/templates/unread.tpl b/templates/unread.tpl
new file mode 100644
index 0000000..035ffa3
--- /dev/null
+++ b/templates/unread.tpl
@@ -0,0 +1,79 @@
+<div class="unread">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="btn-toolbar">
+		<div class="pull-left">
+			<!-- IF loggedIn -->
+			<button component="category/post" id="new_topic" class="btn btn-primary">[[category:new_topic_button]]</button>
+			<!-- ELSE -->
+			<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+			<!-- ENDIF loggedIn -->
+		</div>
+		<div class="markread btn-group pull-right bottom-sheet<!-- IF !topics.length --> hidden<!-- ENDIF !topics.length -->">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+				[[unread:mark_as_read]] <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+
+				<li role="presentation">
+					<a id="markSelectedRead" role="menuitem" tabindex="-1" href="#">[[unread:selected]]</a>
+				</li>
+
+				<li role="presentation">
+					<a id="markAllRead" role="menuitem" tabindex="-1" href="#">[[unread:all]]</a>
+				</li>
+				<li class="divider"></li>
+				<!-- BEGIN categories -->
+				<li role="presentation" class="category" data-cid="{categories.cid}">
+					<a role="menu-item" href="#">{categories.level}<!-- IF categories.icon --><i class="fa fa-fw {categories.icon}"></i><!-- ENDIF categories.icon --> {categories.name}</a>
+				</li>
+				<!-- END categories -->
+			</ul>
+		</div>
+
+		<div class="btn-group pull-right bottom-sheet">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+				<!-- IF selectedCategory --><!-- IF selectedCategory.icon --><i class="fa fa-fw {selectedCategory.icon}"></i><!-- ENDIF selectedCategory.icon --> {selectedCategory.name}<!-- ELSE -->
+				[[unread:all_categories]]<!-- ENDIF selectedCategory --> <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				<li role="presentation" class="category">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}"><i class="fa fa-fw <!-- IF !selectedCategory -->fa-check<!-- ENDIF !selectedCategory -->"></i> [[unread:all_categories]]</a>
+				</li>
+				<!-- BEGIN categories -->
+				<li role="presentation" class="category" data-cid="{categories.cid}">
+					<a role="menu-item" href="{config.relative_path}/{selectedFilter.url}?cid={categories.cid}"><i class="fa fa-fw <!-- IF categories.selected -->fa-check<!-- ENDIF categories.selected -->"></i>{categories.level}<!-- IF categories.icon --><i class="fa fa-fw {categories.icon}"></i><!-- ENDIF categories.icon --> {categories.name}</a>
+				</li>
+				<!-- END categories -->
+			</ul>
+		</div>
+
+		<div class="btn-group pull-right bottom-sheet">
+			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+			{selectedFilter.name} <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu" role="menu">
+				<!-- BEGIN filters -->
+				<li role="presentation" class="category">
+					<a role="menu-item" href="{config.relative_path}/{filters.url}{querystring}"><i class="fa fa-fw <!-- IF filters.selected -->fa-check<!-- ENDIF filters.selected -->"></i>{filters.name}</a>
+				</li>
+				<!-- END filters -->
+			</ul>
+		</div>
+	</div>
+
+	<div class="category">
+		<div id="category-no-topics" class="alert alert-warning <!-- IF topics.length -->hidden<!-- ENDIF topics.length -->">[[unread:no_unread_topics]]</div>
+
+		<a href="{config.relative_path}/{selectedFilter.url}{querystring}">
+			<div class="alert alert-warning hide" id="new-topics-alert"></div>
+		</a>
+
+		<!-- IMPORT partials/topics_list.tpl -->
+		<button id="load-more-btn" class="btn btn-primary hide">[[unread:load_more]]</button>
+		<!-- IF config.usePagination -->
+			<!-- IMPORT partials/paginator.tpl -->
+		<!-- ENDIF config.usePagination -->
+	</div>
+</div>
diff --git a/templates/users.tpl b/templates/users.tpl
new file mode 100644
index 0000000..8c149de
--- /dev/null
+++ b/templates/users.tpl
@@ -0,0 +1,49 @@
+<div class="users">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+
+	<div class="row">
+		<div class="col-lg-6">
+		<!-- IMPORT partials/users_list_menu.tpl -->
+		</div>
+		<div class="col-xs-3 text-right">
+			<!-- IF inviteOnly -->
+			<!-- IF loggedIn -->
+			<button component="user/invite" class="btn btn-success"><i class="fa fa-users"></i> [[users:invite]]</button>
+			<!-- ENDIF loggedIn -->
+			<!-- ENDIF inviteOnly -->
+		</div>
+		<!-- IF function.displayUserSearch, {config.allowGuestUserSearching} -->
+		<div class="col-lg-3 col-xs-9">
+			<div class="search">
+				<div class="input-group">
+					<input class="form-control" id="search-user" type="text" placeholder="[[users:enter_username]]"/>
+					<span class="input-group-addon">
+						<i component="user/search/icon" class="fa fa-search"></i>
+					</span>
+				</div>
+			</div>
+		</div>
+		<!-- ENDIF function.displayUserSearch -->
+	</div>
+	
+	<div class="row">
+		<div class="col-xs-12">
+			<ul id="users-container" class="users-container">
+				<!-- IMPORT partials/users_list.tpl -->
+				<!-- IF anonymousUserCount -->
+				<li class="users-box anon-user">
+					<div class="user-icon">G</div>
+					<br/>
+					<div class="user-info">
+						<span id="online_anon_count">{anonymousUserCount}</span>
+						<span>[[global:guests]]</span>
+					</div>
+				</li>
+				<!-- ENDIF anonymousUserCount -->
+			</ul>
+		</div>
+	</div>
+
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
diff --git a/theme.json b/theme.json
new file mode 100644
index 0000000..abe8a78
--- /dev/null
+++ b/theme.json
@@ -0,0 +1,7 @@
+{
+    "id": "nodebb-theme-slick",
+    "name": "Slick theme",
+    "description": "Slick theme for NodeBB",
+    "url": "https://github.com/pichalite/nodebb-theme-slick",
+    "screenshot": "screenshot.png"
+}
\ No newline at end of file
diff --git a/theme.less b/theme.less
new file mode 100644
index 0000000..764b919
--- /dev/null
+++ b/theme.less
@@ -0,0 +1,2 @@
+@import "./less/bootstrap/bootstrap";
+@import "./less/slick";
\ No newline at end of file