diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
index 8d5055d8fb..f83f7f6fab 100644
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -51,7 +51,6 @@ RUN pip install --no-cache-dir --no-deps -r requirements.txt && \
 ENV PYTHONUNBUFFERED=1 \
     PYTHONDONTWRITEBYTECODE=1 \
     PYTHONPATH=/app \
-    LESS_BINARY=/webapp-frontend-deps/node_modules/.bin/lessc \
     UGLIFYJS_BINARY=/webapp-frontend-deps/node_modules/.bin/uglifyjs \
     CSSMIN_BINARY=/webapp-frontend-deps/node_modules/.bin/cssmin \
     NPM_ROOT_PATH=/webapp-frontend-deps/ \
diff --git a/GRAVEYARD.md b/GRAVEYARD.md
index 83f6cda662..220443c1da 100644
--- a/GRAVEYARD.md
+++ b/GRAVEYARD.md
@@ -11,6 +11,10 @@ This document records interesting code that we've deleted for the sake of discov
 `bin/load_processed_crashes_into_es.py` which was used to backfill elasticsearch from crash storage
 when migrating to Google Cloud Platform.
 
+* [Removal PR](https://github.com/mozilla-services/socorro/pull/6814)
+
+`webapp/less_to_css.sh` which converts LESS files to CSS, with associated NPM script `"convert:less": "sh less_to_css.sh"`
+
 ## S3 and SQS support
 
 * [Removal PR](https://github.com/mozilla-services/socorro/pull/6669)
diff --git a/docker/Dockerfile b/docker/Dockerfile
index 3d8175aaa9..184b995939 100644
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -46,7 +46,6 @@ RUN pip install --no-cache-dir --no-deps -r requirements.txt && \
 ENV PYTHONUNBUFFERED=1 \
     PYTHONDONTWRITEBYTECODE=1 \
     PYTHONPATH=/app \
-    LESS_BINARY=/webapp-frontend-deps/node_modules/.bin/lessc \
     UGLIFYJS_BINARY=/webapp-frontend-deps/node_modules/.bin/uglifyjs \
     CSSMIN_BINARY=/webapp-frontend-deps/node_modules/.bin/cssmin \
     NPM_ROOT_PATH=/webapp-frontend-deps/ \
diff --git a/webapp/crashstats/api/static/api/css/documentation.css b/webapp/crashstats/api/static/api/css/documentation.css
new file mode 100644
index 0000000000..76ca8c938c
--- /dev/null
+++ b/webapp/crashstats/api/static/api/css/documentation.css
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+p.url {
+  margin: 15px;
+  font-size: 1.6em;
+}
+p.url code {
+  padding-left: 25px;
+}
+div.run-test {
+  text-align: right;
+  margin: 10px;
+}
+a.collapse-list,
+a.expand-list {
+  text-decoration: none;
+  font-weight: bold;
+  padding: 3px;
+}
+input.error {
+  border: 2px solid var(--red);
+}
+/* things that are hidden by default */
+div.test-drive,
+button.close,
+.status-error,
+img.loading-ajax,
+.binary-response-warning {
+  display: none;
+}
+.status-error {
+  color: var(--red);
+  font-weight: bold;
+}
+p.helptext {
+  background-color: #ffffff;
+  padding: 6px;
+}
+.title h2 a {
+  text-decoration: none;
+}
+p.required-permission {
+  float: right;
+  margin: 0;
+}
+/* These are the little widgets for boolean choices */
+form.testdrive td ul li {
+  display: inline;
+  margin-right: 10px;
+}
+.deprecation-warning {
+  font-weight: bold;
+  color: var(--orange);
+}
+p.deprecation-warning {
+  text-transform: uppercase;
+}
diff --git a/webapp/crashstats/api/static/api/css/documentation.less b/webapp/crashstats/api/static/api/css/documentation.less
deleted file mode 100644
index cb4f72fb96..0000000000
--- a/webapp/crashstats/api/static/api/css/documentation.less
+++ /dev/null
@@ -1,60 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-p.url {
-    margin: 15px;
-    font-size: 1.6em;
-    code {
-        padding-left: 25px;
-    }
-}
-
-div.run-test {
-    text-align: right;
-    margin: 10px;
-}
-a.collapse-list,
-a.expand-list {
-    text-decoration: none;
-    font-weight: bold;
-    padding: 3px;
-}
-input.error {
-    border: 2px solid @red;
-}
-/* things that are hidden by default */
-div.test-drive,
-button.close,
-.status-error,
-img.loading-ajax,
-.binary-response-warning {
-    display: none;
-}
-.status-error {
-    color: @red;
-    font-weight: bold;
-}
-p.helptext {
-    background-color: @white;
-    padding: 6px;
-}
-.title h2 a {
-    text-decoration: none;
-}
-p.required-permission {
-    float: right;
-    margin: 0;
-}
-
-/* These are the little widgets for boolean choices */
-form.testdrive td ul li {
-    display: inline;
-    margin-right: 10px;
-}
-
-.deprecation-warning {
-    font-weight: bold;
-    color: @orange;
-}
-p.deprecation-warning {
-    text-transform: uppercase;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base.css b/webapp/crashstats/crashstats/static/crashstats/css/base.css
new file mode 100644
index 0000000000..c565ff6544
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base.css
@@ -0,0 +1,1691 @@
+/* 
+django-pipeline collectstatic is unable to process CSS @import rules. 
+This means that @import-ed files won't be copied to STATIC_ROOT automatically.
+The styles below are copy/pasted from imports defined in `base.less`, in lieu of using native @import.
+This is temporary – when we introduce a capable build tool, we should delete the styles below and revert to @import.
+Use `base.less` as a reference for @imports (relying on git history in case the file was deleted).
+*/
+
+/*************************** Begin imported styles ******************************/
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  background: #ffffff;
+  color: var(--black);
+}
+
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+figure {
+  margin: 0;
+  padding: 0;
+}
+
+/**
+* Improve readability when focused and also mouse hovered in all browsers.
+*/
+a:active,
+a:hover,
+a:focus {
+  outline: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+b,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+
+sup {
+  vertical-align: text-top;
+}
+
+sub {
+  vertical-align: text-bottom;
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-size: 100%;
+}
+
+legend {
+  color: var(--black);
+}
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Django forms in general */
+ul.errorlist li {
+  color: var(--red);
+}
+
+input[type="submit"],
+input[type="button"],
+button {
+  background-color: var(--primary);
+  padding: 0.8em;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+input[type="submit"],
+input[type="button"],
+button,
+input[type="submit"] a,
+input[type="button"] a,
+button a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+input[type="submit"]:hover,
+input[type="button"]:hover,
+button:hover,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+button:focus {
+  background: #003eaa;
+}
+
+input[type="submit"]:active,
+input[type="button"]:active,
+button:active {
+  background: var(--primary-dark);
+}
+
+table {
+  /* standard table styles for data tables */
+}
+
+table thead tr,
+table tbody tr {
+  z-index: 50;
+}
+
+table thead tr th,
+table tbody tr th {
+  border: 1px solid var(--black);
+}
+
+table thead tr td,
+table tbody tr td {
+  border: solid 1px var(--grey);
+}
+
+table th {
+  font-weight: bold;
+  padding: 0 0.25em;
+}
+
+table th a.expand {
+  display: inline;
+  font-size: smaller;
+}
+
+table.data-table,
+table.zebra {
+  width: 100%;
+}
+
+table.data-table tr:nth-child(even),
+table.zebra tr:nth-child(even) {
+  background-color: var(--alpha-grey1);
+}
+
+table.data-table tr:nth-child(odd),
+table.zebra tr:nth-child(odd) {
+  background-color: rgba(12, 12, 13, 0.025);
+}
+
+table.data-table tr:hover,
+table.zebra tr:hover {
+  background-color: var(--light-grey);
+}
+
+table th {
+  background-color: var(--alpha-grey2);
+}
+
+table th,
+table td {
+  padding: 0.5em;
+}
+
+table tbody {
+  background-color: #ffffff;
+}
+
+table tbody tr.truncated-frame {
+  background-color: var(--jsonview-prop);
+}
+
+table tbody tr.truncated-frame a {
+  color: var(--dark-grey);
+}
+
+table tbody tr.missingsymbols,
+table tbody tr.missingsymbols:hover,
+table tbody tr.missingsymbols td {
+  background-color: var(--red);
+  color: #ffffff;
+  border-top: 2px solid #ffffff;
+}
+
+table.hardwrapped td {
+  overflow-wrap: anywhere;
+}
+
+.tablesorter {
+  margin: 0 !important;
+}
+
+.tablesorter thead {
+  font-size: 0.9rem;
+}
+
+@font-face {
+  font-family: 'icons';
+  src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff?2013') format('woff'), url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+html,
+body {
+  font-weight: 300;
+  letter-spacing: 0.01em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 200;
+  letter-spacing: 0;
+  line-height: 1.25em;
+  margin-bottom: 0.5em;
+}
+
+h1 {
+  font-size: 33px;
+}
+
+h2 {
+  font-size: 33px;
+}
+
+h3 {
+  font-size: 24px;
+  margin: 1em 0;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 0.7em 0;
+}
+
+p {
+  margin: 1em 0 1em 0;
+  font-weight: normal;
+}
+
+em {
+  font-style: italic;
+}
+
+strong,
+b {
+  font-weight: bold;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.list-inside {
+  list-style-position: inside;
+}
+
+html {
+  background: var(--off-white);
+  color: var(--dark-grey);
+  font-family: var(--base-font);
+  font-size: var(--base-font-size);
+  line-height: var(--base-line-height);
+  margin: 0;
+  padding: 0;
+}
+
+html.production {
+  margin: 0;
+}
+
+html.production body>h1 {
+  display: none;
+}
+
+html.production .page-heading {
+  margin: 1em 1em 1em;
+  display: flex;
+  align-items: center;
+}
+
+html.production .page-heading h2 {
+  flex: auto;
+  font-size: 1.6em;
+  margin: 0;
+}
+
+html.production .page-heading nav {
+  flex: initial;
+  flex-shrink: 0;
+}
+
+html.production .panel {
+  margin: 1em;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.page-header {
+  position: relative;
+  min-height: 64px;
+  height: 64px;
+  background-color: var(--primary-dark);
+  display: flex;
+  align-items: center;
+}
+
+.page-header>* {
+  margin: 0 0.5em;
+}
+
+.page-header>*:first-child {
+  margin-left: 0;
+}
+
+.page-header>*:last-child {
+  margin-right: 0;
+}
+
+.page-header .title {
+  flex: 1;
+  border: none;
+  color: #ffffff;
+  display: block;
+  text-decoration: none;
+  font-size: 2em;
+  font-weight: 200;
+  height: 100%;
+  letter-spacing: 0.03em;
+  padding-left: 0.5em;
+  line-height: 64px;
+}
+
+.page-header #simple_search {
+  flex: 0 0 auto;
+}
+
+.page-header #simple_search label {
+  color: #ffffff;
+}
+
+.page-header #simple_search input {
+  background: #ffffff url("/static/img/2.0/search.png") no-repeat 5px center;
+  border: none;
+  width: 212px;
+  padding: 3px 4px 4px 28px;
+  font-size: var(--base-font-size);
+  color: var(--dark-grey);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.page-header #simple_search input:-moz-placeholder {
+  color: var(--light-grey);
+}
+
+.page-header .user-info {
+  flex: 0 0 auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.page-header .user-info .signup-link {
+  color: var(--off-white);
+  padding: 0 1em;
+}
+
+.page-header .user-info .login-link {
+  color: var(--off-white);
+  padding: 0 1em;
+}
+
+.page-header .user-info .user-info-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  height: 100%;
+  position: relative;
+  padding: 0 1em;
+}
+
+.page-header .user-info .user-info-button .user-email {
+  margin-right: 0.5em;
+}
+
+.page-header .user-info .user-info-button:hover {
+  background: var(--primary);
+}
+
+.page-header .user-info .user-info-button:active {
+  background: var(--primary-medium);
+}
+
+.page-header .user-info .user-info-menu {
+  -webkit-box-shadow: 0px 1px 4px 0 var(--grey);
+  -moz-box-shadow: 0px 1px 4px 0 var(--grey);
+  box-shadow: 0px 1px 4px 0 var(--grey);
+  display: none;
+  position: absolute;
+  right: 0.5em;
+  top: 100%;
+  background: #ffffff;
+  border: 1px solid var(--grey);
+  padding: 0.5em;
+  min-width: 100px;
+  z-index: 1;
+}
+
+.page-header .user-info .user-info-menu a {
+  font-size: var(--base-font-size);
+}
+
+.page-header .user-info .user-info-menu a:link,
+.page-header .user-info .user-info-menu a:hover,
+.page-header .user-info .user-info-menu a:active,
+.page-header .user-info .user-info-menu a:visited {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.page-header .user-info .user-info-menu a:hover {
+  text-decoration: underline;
+}
+
+.protected-info {
+  align-items: center;
+  margin: 1em 1em 1em;
+}
+
+.threecol {
+  overflow: auto;
+}
+
+.threecol .col {
+  float: left;
+  width: 33%;
+  border-left: 1px dotted var(--light-grey);
+}
+
+.threecol .col .col-inner {
+  padding: 0 20px;
+}
+
+.threecol .col h3 {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.threecol .col:first-child {
+  border-left: 0;
+}
+
+.threecol .col:first-child .col-inner {
+  padding-left: 10px;
+}
+
+.product-grid {
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.product-grid .product {
+  background: #fff;
+  border: 1px gray solid;
+  border-radius: 5px;
+  flex: 1 0 220px;
+  height: 170px;
+  margin: 20px;
+  text-align: center;
+}
+
+.product-grid .product .product-name {
+  margin-top: 55px;
+}
+
+.product-grid .product .product-name a {
+  color: var(--primary);
+  font-size: 22px;
+  text-decoration: none;
+}
+
+.product-grid .product .product-name a:hover {
+  text-decoration: underline;
+}
+
+.product-grid .product .product-description {
+  color: var(--dark-grey);
+}
+
+/* Layout elements */
+/* Nav */
+nav {
+  display: inline;
+}
+
+nav .options {
+  display: inline;
+  margin-left: 1em;
+  font-size: 1.1em;
+  vertical-align: 4px;
+}
+
+nav .options li {
+  display: inline;
+  list-style: none;
+}
+
+nav .options li a {
+  color: var(--primary-dark);
+  padding: 0.3em 0.7em;
+  text-decoration: none;
+  white-space: nowrap;
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
+  border-radius: 0.3em;
+}
+
+nav .options li a:hover {
+  background-color: var(--off-white);
+}
+
+nav .options li a.selected,
+nav .options li a.button {
+  background-color: var(--primary);
+  color: #ffffff;
+}
+
+.version-nav {
+  font-size: var(--base-font-size);
+  background: transparent repeat-x left top;
+  position: relative;
+  background-color: var(--primary);
+  color: var(--off-white);
+  padding: 0.5em 1rem;
+  line-height: 32px;
+}
+
+.version-nav a,
+.version-nav a:link,
+.version-nav a:hover,
+.version-nav a:active,
+.version-nav a:visited {
+  color: var(--off-white);
+}
+
+.version-nav .filter {
+  display: inline;
+}
+
+.version-nav .filter li {
+  display: inline;
+  padding: 0;
+}
+
+.version-nav .filter li:last-child {
+  border-left: 1px solid var(--primary-medium);
+  margin-left: 0.5em;
+  padding-left: 0.8em;
+}
+
+.version-nav .filter optgroup {
+  border-top: 1px solid var(--light-grey);
+  padding: 0.5em 0;
+}
+
+.version-nav .filter optgroup:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.version-nav .filter optgroup:last-child {
+  padding-bottom: 0;
+}
+
+.version-nav .filter option {
+  padding-left: 0;
+}
+
+.version-nav .quick-nav-title {
+  display: inline-block;
+  margin-right: 1em;
+}
+
+.version-nav .nav-links {
+  display: inline;
+  float: right;
+}
+
+.page-footer {
+  background: var(--light-grey);
+  color: var(--dark-grey);
+  border-top: 1px solid var(--grey);
+  margin: 40px 0 0 0;
+  padding: 10px 20px;
+}
+
+.page-footer a:link,
+.page-footer a:hover,
+.page-footer a:active,
+.page-footer a:visited {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.page-footer a:hover {
+  text-decoration: underline;
+}
+
+.page-footer .nav {
+  background: url("/static/img/3.0/mozilla.gif") no-repeat scroll 0% -1px transparent;
+  background-size: 102px auto;
+  float: left;
+  padding-left: 109px;
+}
+
+.page-footer ul,
+.page-footer .login {
+  display: inline;
+}
+
+.page-footer li {
+  display: inline;
+  padding: 0 0.5em;
+  border-left: 1px solid var(--grey);
+  list-style: none;
+}
+
+.page-footer li:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.page-footer .login {
+  float: right;
+  line-height: 18px;
+  padding-top: 2px;
+}
+
+/* Common components */
+.accordion {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.accordion h3 {
+  color: #ffffff;
+  margin: 0;
+}
+
+.accordion a {
+  display: block;
+  background-color: var(--light-grey);
+  color: var(--black);
+  padding: 0.5rem;
+  border: 1px solid var(--dark-grey);
+  text-decoration: none;
+}
+
+.accordion a:focus,
+.accordion a:active {
+  background-color: var(--light-grey);
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
+  outline: none;
+}
+
+.accordion p {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.accordion .content-pane {
+  background-color: #ffffff;
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
+  border-top: 0;
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.accordion .content-pane h3 {
+  color: var(--dark-grey);
+  padding: 0.5rem 1rem;
+}
+
+.accordion .content-pane h4 {
+  padding: 0.5rem 1rem 0 0.5rem;
+  font-size: 1.2rem;
+}
+
+.accordion .show {
+  height: auto;
+  opacity: 1;
+}
+
+.accordion [data-icon]:before {
+  float: right;
+  font-family: 'icons';
+  /* ensure inherited styles does not override the font style here. */
+  font-style: normal;
+  content: attr(data-icon);
+  -webkit-transform: rotate(0);
+  -moz-transform: rotate(0);
+  transform: rotate(0);
+  /* @see http://css-tricks.com/examples/IconFont/ */
+  speak: none;
+}
+
+.accordion [aria-expanded="true"] [data-icon]:before {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
+
+/* Admin */
+div.admin h3,
+div.admin h4 {
+  margin-top: 20px;
+}
+
+div.admin p,
+div.admin ul,
+div.admin li {
+  margin: 5px 0;
+}
+
+div.admin ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
+div.admin ul li:before {
+  content: "\00BB \0020";
+}
+
+div.admin div.add_item {
+  background-color: var(--light-grey);
+  margin-top: 10px;
+  padding: 5px;
+  border: 2px solid var(--dark-grey);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+
+div.admin form.span {
+  margin-right: 10px;
+}
+
+div.admin th {
+  background-color: var(--light-grey);
+  padding: 3px;
+  font-size: 105%;
+}
+
+div.admin td {
+  padding: 3px;
+}
+
+div.admin td.text,
+div.admin input.text {
+  width: 125px;
+}
+
+div.admin td.action {
+  width: 50px;
+}
+
+div.admin td.featured {
+  width: 50px;
+  text-align: center;
+}
+
+div.admin td.date {
+  width: 75px;
+}
+
+#add_version,
+#update_product_version,
+#delete_product_version {
+  display: none;
+  min-width: 550px;
+}
+
+#add_version table,
+#update_product_version table,
+#delete_product_version table {
+  width: 100%;
+}
+
+#delete_product_display,
+#delete_version_display,
+#update_product_display,
+#update_version_display {
+  font-style: italic;
+}
+
+#loading-bds {
+  position: absolute;
+  top: 9%;
+  left: 50%;
+}
+
+div.code {
+  background-color: #ffffff;
+  border: 1px solid var(--light-grey);
+  font-family: monospace;
+  width: 100%;
+  height: 480px;
+  white-space: pre;
+  overflow: auto;
+}
+
+/* Status Messages */
+div#message {
+  margin: 1em;
+}
+
+.message,
+.info {
+  margin: 1.5% 2% 0;
+  padding: 1em;
+  width: 96%;
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
+}
+
+.info {
+  background-color: var(--primary-light);
+  border: 1px solid var(--primary-dark);
+}
+
+.message.error {
+  background-color: var(--pink);
+  border: 1px solid var(--red);
+}
+
+.message.success {
+  background-color: var(--green);
+  border: 1px solid #ffffff;
+  color: #ffffff;
+}
+
+.message.warning {
+  background-color: var(--pink);
+  border: 1px solid var(--orange);
+}
+
+.message h2 {
+  margin: 0.5em 0;
+  font-size: 1.2em;
+}
+
+/* Pagination */
+.pagination {
+  padding: 0.3em 0.2em 0.2em 0.5em;
+  text-align: right;
+}
+
+.pagination ol {
+  float: right;
+  margin-left: 0.5em;
+}
+
+.pagination ol li {
+  float: left;
+  margin-right: 0.3em;
+}
+
+.panel {
+  color: var(--black);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+}
+
+.content .panel {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.panel header.title,
+.panel div.title {
+  background: var(--alpha-grey1) repeat-x left top;
+  display: flex;
+  font-size: var(--base-font-size);
+  padding: 1em;
+}
+
+.panel header.title h2,
+.panel div.title h2 {
+  display: block;
+  font-size: 16px;
+  font-weight: bold;
+  padding-right: 0.8em;
+  margin: 0;
+  flex-grow: 1;
+}
+
+.panel header.title .choices,
+.panel div.title .choices {
+  border-left-color: var(--grey);
+  vertical-align: 1px;
+}
+
+.panel header.title a,
+.panel div.title a {
+  color: var(--black);
+}
+
+.panel header.title a:hover,
+.panel div.title a:hover,
+.panel header.title a:focus,
+.panel div.title a:focus {
+  background: var(--light-grey);
+}
+
+.panel header.title a.selected,
+.panel div.title a.selected {
+  background-color: var(--primary-medium);
+  color: #ffffff;
+}
+
+.panel .body {
+  background: #ffffff;
+  padding: 1em;
+  min-height: 4em;
+}
+
+.panel .table {
+  font-size: 10px;
+  border-collapse: collapse;
+  border: 1px solid var(--grey);
+  border-top: 0;
+  width: 100%;
+}
+
+.panel .table td,
+.panel .table th {
+  padding: 0.5em 0.5em;
+  vertical-align: top;
+}
+
+.panel .table .numalign {
+  text-align: right;
+}
+
+.panel .table .spanalign {
+  text-align: center;
+}
+
+.panel .table .trend-up {
+  color: var(--red);
+}
+
+.panel .table .trend-down {
+  color: var(--green);
+}
+
+.panel .table thead tr {
+  background: var(--alpha-grey1);
+}
+
+.panel .table thead th {
+  border: 1px solid var(--grey);
+  border-top: 0;
+  font-weight: bold;
+}
+
+.panel .table thead th.sortable {
+  padding-right: 17px;
+}
+
+.panel .table thead th.sortable:hover {
+  cursor: pointer;
+}
+
+.panel .table tbody {
+  background-color: #ffffff;
+}
+
+.panel .table tbody tr td:first-child,
+.panel .table tbody tr th:first-child {
+  border-left: 0;
+}
+
+.panel .table tbody tr:nth-child(even) {
+  background: #ffffff;
+}
+
+.panel .table tbody tr:hover {
+  background: var(--off-white);
+}
+
+.panel .table tbody td,
+.panel .table tbody th {
+  border-left: 1px dotted var(--off-white);
+  border-top: 1px solid var(--off-white);
+}
+
+.panel .table tbody tr:first-child td,
+.panel .table tbody tr:first-child th {
+  border-top: 0;
+}
+
+.panel .table tbody td.separated,
+.panel .table tbody th.separated {
+  border-left: 1px solid var(--grey);
+}
+
+.panel .table tbody th {
+  font-weight: bold;
+}
+
+.panel .table td.count span {
+  display: block;
+  font-size: 8px;
+}
+
+.panel .table td.count-high {
+  color: var(--red);
+}
+
+.panel .table td.count-none {
+  color: var(--dark-grey);
+}
+
+.panel .table.expand-counts .counts-collapsed,
+.panel .table.expand-counts .counts-expanded {
+  display: none;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  border: none;
+  background: var(--light-grey);
+  color: var(--black);
+  padding: 0.2em 2em 0.2em 0.2em;
+  margin: 0;
+  border-radius: 2px;
+  background-image: url("/static/img/3.0/caret.svg");
+  background-position: calc(100% - 7px) calc(50% + 1px);
+  background-size: 8px;
+  background-repeat: no-repeat;
+}
+
+select:hover {
+  background-color: var(--grey);
+}
+
+select:active {
+  background-color: #737373;
+}
+
+select:focus {
+  background-color: #ffffff;
+}
+
+select optgroup,
+select option {
+  background-color: #ffffff;
+}
+
+/* simplebox css */
+#simplebox {
+  display: none;
+}
+
+#simplebox_wrapper {
+  background-color: var(--dark-grey);
+  background-color: rgba(51, 51, 51, 0.5);
+  background-color: hsla(0, 0%, 20%, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+#close_simplebox {
+  position: absolute;
+  background: transparent url("/static/img/icons/close_round.png") 0 0 no-repeat;
+  margin-top: -20px;
+  border: 0;
+  width: 30px;
+  height: 30px;
+  text-indent: -99999em;
+  cursor: pointer;
+  cursor: hand;
+}
+
+.status-icon {
+  font-size: 1.3em;
+  margin-right: 5px;
+  width: 16px;
+}
+
+#sumo-link {
+  float: right;
+}
+
+#sumo-link a {
+  background-color: var(--primary);
+  padding: 0.8em;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: right;
+  margin: 0px auto 10px;
+}
+
+#sumo-link a,
+#sumo-link a a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+#sumo-link a:hover,
+#sumo-link a:focus {
+  background: #003eaa;
+}
+
+#sumo-link a:active {
+  background: var(--primary-dark);
+}
+
+table.tablesorter th {
+  background-color: var(--alpha-grey2);
+  border: solid 1px var(--grey);
+}
+
+table.tablesorter tbody tr.odd {
+  background-color: var(--off-white);
+}
+
+table.tablesorter tbody td {
+  padding: 7px 0.5em 8px 0.5em;
+  background-color: transparent;
+}
+
+table.tablesorter tbody tr td.in1 {
+  padding-left: 15px;
+}
+
+table.tablesorter tbody tr td.in2 {
+  padding-left: 30px;
+}
+
+.note {
+  background-color: var(--off-white);
+  border: 1px solid var(--primary);
+  border-radius: 4px;
+  margin: 0 0 10px 10px;
+}
+
+.note.float-right {
+  float: right;
+  min-width: 300px;
+  width: 30%;
+}
+
+.note p {
+  padding: 10px 10px;
+  margin: 0;
+}
+
+.note::before {
+  content: url("/static/img/3rdparty/silk/information.png") ' Note';
+  display: block;
+  background-color: var(--primary);
+  color: #ffffff;
+  font-weight: bold;
+  padding: 4px 10px;
+}
+
+/* Tip text */
+.tip {
+  padding: 0.8em;
+  margin: 1em 0;
+  font-size: 1.1em;
+  background-color: #ededf0;
+  color: #0c0c0d;
+}
+
+.tip::before {
+  content: "Tip! ";
+  font-weight: bold;
+}
+
+.tip-note {
+  padding: 0.5em 0.8em;
+  margin: 0.5em 0;
+  font-size: 1.1em;
+  background-color: #ededf0;
+  color: #0c0c0d;
+}
+
+.tip-note::before {
+  content: "Note! ";
+  font-weight: bold;
+}
+
+/* From http://cssdeck.com/labs/pure-css-tree-menu-framework */
+.tree,
+.tree ul {
+  margin: 0 0 0 2em;
+  /* indentation */
+  padding: 0;
+  list-style: none;
+  position: relative;
+}
+
+.tree ul {
+  margin-left: 0.5em;
+}
+
+/* (indentation/2) */
+.tree:before,
+.tree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid;
+}
+
+.tree li {
+  margin: 0;
+  padding: 0 1.5em;
+  /* indentation + .5em */
+  line-height: 1.6em;
+  /* default list item's `line-height` */
+  font-weight: bold;
+  position: relative;
+}
+
+.tree li:before {
+  content: "";
+  display: block;
+  width: 10px;
+  /* same with indentation */
+  height: 0;
+  border-top: 1px solid;
+  margin-top: -1px;
+  /* border top width */
+  position: absolute;
+  top: 1em;
+  /* (line-height/2) */
+  left: 0;
+}
+
+.tree li:last-child:before {
+  background: #ffffff;
+  /* same with body background */
+  height: auto;
+  top: 1em;
+  /* (line-height/2) */
+  bottom: 0;
+}
+
+/*************************** End imported styles ******************************/
+
+/* Other shared styles */
+a {
+  text-decoration: none;
+}
+
+a,
+a:link,
+a:hover,
+a:active {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.ui-widget-content a:visited,
+a:visited {
+  color: var(--purple);
+}
+
+body>h1 {
+  font-size: 200%;
+}
+
+.clear {
+  clear: both;
+}
+
+.clear_left {
+  clear: left;
+}
+
+.clear_right {
+  clear: right;
+}
+
+.float_left {
+  float: left;
+}
+
+.float_right {
+  float: right;
+}
+
+.hidden {
+  display: none;
+}
+
+.visually-hidden {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
+time {
+  display: inline-block;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.w-1\/12 {
+  width: 8.3333%;
+}
+
+.w-2\/12 {
+  width: 16.6667%;
+}
+
+.w-3\/12 {
+  width: 25%;
+}
+
+.w-4\/12 {
+  width: 33.3333%;
+}
+
+.w-5\/12 {
+  width: 41.6667%;
+}
+
+.w-6\/12 {
+  width: 50%;
+}
+
+.w-7\/12 {
+  width: 58.3333%;
+}
+
+.w-8\/12 {
+  width: 66.6667%;
+}
+
+.w-9\/12 {
+  width: 75%;
+}
+
+.w-10\/12 {
+  width: 83.3333%;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+#mainbody {
+  position: relative;
+  margin: 1em 2em;
+  text-align: left;
+  flex: 1;
+}
+
+.loading {
+  position: absolute;
+  top: 45%;
+  left: 45%;
+}
+
+.inline-loader {
+  width: 18px;
+  height: 18px;
+  vertical-align: middle;
+}
+
+.logout-form {
+  display: inline;
+}
+
+button.logout-button {
+  background: none;
+  color: var(--primary);
+  font-size: var(--base-font-size);
+  padding: 0;
+}
+
+button.logout-button:hover {
+  background: none;
+  text-decoration: underline;
+}
+
+/* --- */
+/* --- */
+#data_sources {
+  border: 0;
+}
+
+#data_sources table {
+  width: 100%;
+}
+
+#data_sources th:last-child {
+  width: 80px;
+}
+
+#data_sources_nav {
+  background: none;
+  border: 0;
+}
+
+#data_sources_nav li {
+  background: none;
+  border: 0;
+}
+
+#data_sources_nav li:before {
+  content: "";
+}
+
+span.push_right {
+  margin-right: 10px;
+}
+
+.list tr:nth-child(2n+1) {
+  background-color: var(--off-white);
+}
+
+.list tr:nth-child(2n) {
+  background-color: #ffffff;
+}
+
+.list tr:hover {
+  background-color: #ffffff;
+}
+
+.list tr td {
+  padding: 0.5em;
+  text-align: left;
+}
+
+.list tr td label {
+  border-bottom: 1px dashed var(--grey);
+  font-weight: normal;
+}
+
+.list th {
+  background: var(--off-white);
+  padding: 2px;
+  border: 1px solid var(--black);
+  font-weight: bold;
+}
+
+.list th a {
+  display: block;
+  padding: 0.2em 1.2em 0.2em 0.2em;
+  text-align: left;
+}
+
+.list th a:hover {
+  background-color: #ffffff;
+}
+
+.oopp-hang {
+  clear: right;
+  float: right;
+}
+
+.oopp-hang .current {
+  float: right;
+  background-image: url("/static/img/3rdparty/fatcow/stop16x16.png");
+  background-repeat: no-repeat;
+  color: var(--red);
+  padding-left: 20px;
+  height: 16px;
+  font-weight: 900;
+}
+
+.oopp-hang .current .type {
+  color: var(--dark-grey);
+}
+
+.oopp-hang .pair {
+  clear: right;
+  padding: 0.5em 0 0.5em 0.5em;
+}
+
+.oopp-hang .pair a {
+  text-decoration: none;
+}
+
+td.in1 ul,
+td.in2 ul {
+  padding-left: 15px;
+}
+
+.trend {
+  font-weight: 900;
+  color: #ffffff;
+}
+
+.trend.up {
+  background: url("/static/img/up_arrow.png") no-repeat scroll right 10px var(--red);
+}
+
+.trend.down {
+  background: url("/static/img/down_arrow.png") no-repeat scroll right 10px var(--green);
+}
+
+.complete {
+  position: absolute;
+  right: 0px;
+  background-color: #ffffff;
+  border: solid 1px var(--grey);
+  margin: 1em;
+}
+
+.correlation-module {
+  position: relative;
+  float: left;
+  padding: 1em;
+  width: 320px;
+}
+
+.correlation-module h3 {
+  font-weight: bold;
+}
+
+#duration-nav {
+  float: right;
+}
+
+#duration-nav ul li {
+  float: left;
+  padding-right: 1em;
+  list-style-type: none;
+}
+
+div.expandable-menu,
+div.each-sparkline {
+  margin-left: 12px;
+  border: none;
+}
+
+.correlation-cell div div.complete {
+  display: none;
+}
+
+.correlation pre {
+  clear: left;
+}
+
+.correlation h3 {
+  margin-top: 0.1em;
+}
+
+.complete h3 {
+  margin: 0.75em 0 0 0;
+}
+
+/* jQueryUI theme overrides */
+.ui-tabs-panel {
+  border: 1px solid var(--off-white);
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base.less b/webapp/crashstats/crashstats/static/crashstats/css/base.less
deleted file mode 100644
index 1ccc3eb748..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base.less
+++ /dev/null
@@ -1,317 +0,0 @@
-@import "base/reset.less";
-@import "base/variables.less";
-@import "base/mixins.less";
-@import "base/forms.less";
-@import "base/tables.less";
-@import "base/typography.less";
-@import "base/layout.less";
-
-/* Layout elements */
-@import "components/nav.less";
-@import "components/footer.less";
-
-/* Common components */
-@import "components/accordion.less";
-@import "components/admin.less";
-@import "components/code.less";
-@import "components/message.less";
-@import "components/pagination.less";
-@import "components/panel.less";
-@import "components/select.less";
-@import "components/simplebox.less";
-@import "components/statusicon.less";
-@import "components/sumo_link.less";
-@import "components/table_sorter.less";
-@import "components/note.less";
-@import "components/tip.less";
-@import "components/tree.less";
-
-/* Other shared styles */
-a {
-    text-decoration: none;
-    &,
-    &:link,
-    &:hover,
-    &:active {
-        color: @blue;
-        text-decoration: underline;
-    }
-
-    .ui-widget-content &:visited, /* Override jQuery UI's behavior */
-    &:visited {
-        color: @purple;
-    }
-}
-
-body > h1 {
-    font-size: 200%;
-}
-
-.clear {
-    clear: both;
-}
-.clear_left {
-    clear: left;
-}
-.clear_right {
-    clear: right;
-}
-.float_left {
-    float: left;
-}
-.float_right {
-    float: right;
-}
-.hidden {
-    display: none;
-}
-.visually-hidden {
-    .accessibly-hidden()
-}
-time {
-    display: inline-block;
-}
-
-// tailwind-like utilities
-.mx-4 {
-    margin-left: 1.0rem;
-    margin-right: 1.0rem;
-}
-.my-2 {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-.w-1\/12 {
-    width: 8.3333%;
-}
-.w-2\/12 {
-    width: 16.6667%;
-}
-.w-3\/12 {
-    width: 25%;
-}
-.w-4\/12 {
-    width: 33.3333%;
-}
-.w-5\/12 {
-    width: 41.6667%;
-}
-.w-6\/12 {
-    width: 50%;
-}
-.w-7\/12 {
-    width: 58.3333%;
-}
-.w-8\/12 {
-    width: 66.6667%;
-}
-.w-9\/12 {
-    width: 75%;
-}
-.w-10\/12 {
-    width: 83.3333%;
-}
-.w-11\/12 {
-    width: 91.666667%;
-}
-.w-full {
-    width: 100%;
-}
-
-#mainbody {
-    position: relative;
-    margin: 1em 2em;
-    text-align: left;
-    flex: 1;
-}
-.loading {
-    position: absolute;
-    top: 45%;
-    left: 45%;
-}
-.inline-loader {
-    width: 18px;
-    height: 18px;
-    vertical-align: middle;
-}
-.logout-form {
-    display: inline;
-}
-button.logout-button {
-    background: none;
-    color: @blue-60;
-    font-size: @base-font-size;
-    padding: 0;
-
-    &:hover {
-        background: none;
-        text-decoration: underline;
-    }
-}
-
-/* --- */
-// #NOTE(amikulski): Below this line are the elements I could not verify exist on the site, and will
-// eventually be removed in a later PR after ensuring they really don't exist anywhere.
-/* --- */
-#data_sources {
-    border: 0;
-    table {
-        width: 100%;
-    }
-    th:last-child {
-        width: 80px;
-    }
-}
-
-#data_sources_nav {
-    background: none;
-    border: 0;
-    li {
-        background: none;
-        border: 0;
-    }
-    li:before {
-        content: "";
-    }
-}
-
-span.push_right {
-    margin-right: 10px;
-}
-
-.list {
-    tr:nth-child(2n+1) {
-        background-color: @off-white;
-    }
-    tr:nth-child(2n) {
-        background-color: @white;
-    }
-    tr:hover {
-        background-color: @white;
-    }
-    tr {
-        td {
-            padding:.5em;
-            text-align:left;
-            label {
-                border-bottom: 1px dashed @grey;
-                font-weight: normal;
-            }
-        }
-    }
-    th {
-        background: @off-white;
-        padding: 2px;
-        border: 1px solid @black;
-        font-weight: bold;
-        a {
-            display: block;
-            padding:.2em 1.2em .2em .2em;
-            text-align: left;
-        }
-        a:hover {
-            background-color: @white;
-        }
-    }
-}
-
-.oopp-hang {
-    clear: right;
-    float: right;
-    .current {
-        float: right;
-        background-image: url("@{image-path}/3rdparty/fatcow/stop16x16.png");
-        background-repeat: no-repeat;
-        color: @red;
-        padding-left: 20px;
-        height: 16px;
-        font-weight: 900;
-        .type {
-            color: @dark-grey;
-        }
-    }
-    .pair {
-        clear: right;
-        padding: 0.5em 0 0.5em 0.5em;
-        a {
-            text-decoration: none;
-        }
-    }
-}
-
-td.in1,
-td.in2 {
-    ul {
-        padding-left: 15px;
-    }
-}
-
-.trend {
-    font-weight: 900;
-    color: @white;
-}
-.trend.up {
-    background: url("@{image-path}/up_arrow.png") no-repeat scroll right 10px @red;
-}
-.trend.down {
-    background: url("@{image-path}/down_arrow.png") no-repeat scroll right 10px @green;
-}
-
-.complete {
-    position: absolute;
-    right: 0px;
-    background-color: @white;
-    border: solid 1px @grey;
-    margin: 1em;
-}
-
-.correlation-module {
-    position: relative;
-    float: left;
-    padding: 1em;
-    width: 320px;
-    h3 {
-        font-weight: bold;
-    }
-}
-#duration-nav {
-    float: right;
-    ul {
-        li {
-            float: left;
-            padding-right: 1em;
-            list-style-type: none;
-        }
-    }
-}
-
-div.expandable-menu,
-div.each-sparkline {
-    margin-left: 12px;
-    border: none;
-}
-.correlation-cell {
-    div {
-        div.complete {
-            display: none;
-        }
-    }
-}
-.correlation {
-    pre {
-        clear: left;
-    }
-    h3 {
-        margin-top: 0.1em;
-    }
-}
-.complete {
-    h3 {
-        margin: 0.75em 0 0 0;
-    }
-}
-
-/* jQueryUI theme overrides */
-.ui-tabs-panel {
-    border: 1px solid @off-white;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.css b/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.css
new file mode 100644
index 0000000000..8c41733896
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'icons';
+  src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff?2013') format('woff'), url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.less b/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.less
deleted file mode 100644
index fb8b28f73d..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/fonts.less
+++ /dev/null
@@ -1,8 +0,0 @@
-@font-face {
-    font-family: 'icons';
-    src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'),
-         url('/static/crashstats/fonts/icons.woff?2013') format('woff'),
-         url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css b/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css
new file mode 100644
index 0000000000..748231e520
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/forms.css
@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* Django forms in general */
+ul.errorlist li {
+  color: var(--red);
+}
+input[type="submit"],
+input[type="button"],
+button {
+  background-color: var(--primary);
+  padding: 0.8em;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+}
+input[type="submit"],
+input[type="button"],
+button,
+input[type="submit"] a,
+input[type="button"] a,
+button a {
+  color: #ffffff;
+  text-decoration: none;
+}
+input[type="submit"]:hover,
+input[type="button"]:hover,
+button:hover,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+button:focus {
+  background: #003eaa;
+}
+input[type="submit"]:active,
+input[type="button"]:active,
+button:active {
+  background: var(--primary-dark);
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/forms.less b/webapp/crashstats/crashstats/static/crashstats/css/base/forms.less
deleted file mode 100644
index 49c49ed109..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/forms.less
+++ /dev/null
@@ -1,12 +0,0 @@
-@import "@{root-path}/base/mixins.less";
-
-/* Django forms in general */
-ul.errorlist li {
-    color: @red;
-}
-
-input[type="submit"],
-input[type="button"],
-button {
-    .button();
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css b/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css
new file mode 100644
index 0000000000..9fbbf513a2
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/layout.css
@@ -0,0 +1,249 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html {
+  background: var(--off-white);
+  color: var(--dark-grey);
+  font-family: var(--base-font);
+  font-size: var(--base-font-size);
+  line-height: var(--base-line-height);
+  margin: 0;
+  padding: 0;
+}
+
+html.production {
+  margin: 0;
+}
+
+html.production body>h1 {
+  display: none;
+}
+
+html.production .page-heading {
+  margin: 1em 1em 1em;
+  display: flex;
+  align-items: center;
+}
+
+html.production .page-heading h2 {
+  flex: auto;
+  font-size: 1.6em;
+  margin: 0;
+}
+
+html.production .page-heading nav {
+  flex: initial;
+  flex-shrink: 0;
+}
+
+html.production .panel {
+  margin: 1em;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.page-header {
+  position: relative;
+  min-height: 64px;
+  height: 64px;
+  background-color: var(--primary-dark);
+  display: flex;
+  align-items: center;
+}
+
+.page-header>* {
+  margin: 0 0.5em;
+}
+
+.page-header>*:first-child {
+  margin-left: 0;
+}
+
+.page-header>*:last-child {
+  margin-right: 0;
+}
+
+.page-header .title {
+  flex: 1;
+  border: none;
+  color: #ffffff;
+  display: block;
+  text-decoration: none;
+  font-size: 2em;
+  font-weight: 200;
+  height: 100%;
+  letter-spacing: 0.03em;
+  padding-left: 0.5em;
+  line-height: 64px;
+}
+
+.page-header #simple_search {
+  flex: 0 0 auto;
+}
+
+.page-header #simple_search label {
+  color: #ffffff;
+}
+
+.page-header #simple_search input {
+  background: #ffffff url("/static/img/2.0/search.png") no-repeat 5px center;
+  border: none;
+  width: 212px;
+  padding: 3px 4px 4px 28px;
+  font-size: var(--base-font-size);
+  color: var(--dark-grey);
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.page-header #simple_search input:-moz-placeholder {
+  color: var(--light-grey);
+}
+
+.page-header .user-info {
+  flex: 0 0 auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.page-header .user-info .signup-link {
+  color: var(--off-white);
+  padding: 0 1em;
+}
+
+.page-header .user-info .login-link {
+  color: var(--off-white);
+  padding: 0 1em;
+}
+
+.page-header .user-info .user-info-button {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  height: 100%;
+  position: relative;
+  padding: 0 1em;
+}
+
+.page-header .user-info .user-info-button .user-email {
+  margin-right: 0.5em;
+}
+
+.page-header .user-info .user-info-button:hover {
+  background: var(--primary);
+}
+
+.page-header .user-info .user-info-button:active {
+  background: var(--primary-medium);
+}
+
+.page-header .user-info .user-info-menu {
+  -webkit-box-shadow: 0px 1px 4px 0 var(--grey);
+  -moz-box-shadow: 0px 1px 4px 0 var(--grey);
+  box-shadow: 0px 1px 4px 0 var(--grey);
+  display: none;
+  position: absolute;
+  right: 0.5em;
+  top: 100%;
+  background: #ffffff;
+  border: 1px solid var(--grey);
+  padding: 0.5em;
+  min-width: 100px;
+  z-index: 1;
+}
+
+.page-header .user-info .user-info-menu a {
+  font-size: var(--base-font-size);
+}
+
+.page-header .user-info .user-info-menu a:link,
+.page-header .user-info .user-info-menu a:hover,
+.page-header .user-info .user-info-menu a:active,
+.page-header .user-info .user-info-menu a:visited {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.page-header .user-info .user-info-menu a:hover {
+  text-decoration: underline;
+}
+
+.protected-info {
+  align-items: center;
+  margin: 1em 1em 1em;
+}
+
+.threecol {
+  overflow: auto;
+}
+
+.threecol .col {
+  float: left;
+  width: 33%;
+  border-left: 1px dotted var(--light-grey);
+}
+
+.threecol .col .col-inner {
+  padding: 0 20px;
+}
+
+.threecol .col h3 {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.threecol .col:first-child {
+  border-left: 0;
+}
+
+.threecol .col:first-child .col-inner {
+  padding-left: 10px;
+}
+
+.product-grid {
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.product-grid .product {
+  background: #fff;
+  border: 1px gray solid;
+  border-radius: 5px;
+  flex: 1 0 220px;
+  height: 170px;
+  margin: 20px;
+  text-align: center;
+}
+
+.product-grid .product .product-name {
+  margin-top: 55px;
+}
+
+.product-grid .product .product-name a {
+  color: var(--primary);
+  font-size: 22px;
+  text-decoration: none;
+}
+
+.product-grid .product .product-name a:hover {
+  text-decoration: underline;
+}
+
+.product-grid .product .product-description {
+  color: var(--dark-grey);
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/layout.less b/webapp/crashstats/crashstats/static/crashstats/css/base/layout.less
deleted file mode 100644
index 61f51e4118..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/layout.less
+++ /dev/null
@@ -1,228 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-html {
-    background: @off-white;
-    color: @dark-grey;
-    font-family: @base-font;
-    font-size: @base-font-size;
-    line-height: @base-line-height;
-    margin: 0;
-    padding: 0;
-
-    &.production {
-        margin: 0;
-        body > h1 {
-            display: none;
-        }
-        .page-heading {
-            margin: 1em 1em 1em;
-            display: flex;
-            align-items: center;
-
-            h2 {
-                flex: auto;
-                font-size: 1.6em;
-                margin: 0;
-            }
-            nav {
-                flex: initial;
-                flex-shrink: 0;
-            }
-        }
-        .panel {
-            margin: 1em;
-        }
-    }
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-}
-
-.page-header {
-    position: relative;
-    min-height: 64px;
-    height: 64px;
-    background-color: @primary-dark;
-    display: flex;
-    align-items: center;
-
-    & > * {
-        margin: 0 .5em;
-
-        &:first-child {
-            margin-left: 0;
-        }
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-
-    .title {
-        flex: 1;
-        border: none;
-        color: @white;
-        display: block;
-        text-decoration: none;
-        font-size: 2em;
-        font-weight: 200;
-        height: 100%;
-        letter-spacing: 0.03em;
-        padding-left: .5em;
-        line-height: 64px;
-    }
-
-    #simple_search {
-        flex: 0 0 auto;
-        label {
-            color: @white;
-        }
-        input {
-            background: @white url("@{image-path}/2.0/search.png") no-repeat 5px center;
-            border: none;
-            width: 212px;
-            padding: 3px 4px 4px 28px;
-            font-size: 12px;
-            color: @dark-grey;
-            .rounded-corners(2px);
-        }
-        input:-moz-placeholder {
-            color: @light-grey;
-        }
-    }
-
-    .user-info {
-        flex: 0 0 auto;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-
-        .signup-link {
-            color: @off-white;
-            padding: 0 1em;
-        }
-
-        .login-link {
-            color: @off-white;
-            padding: 0 1em;
-        }
-
-        .user-info-button {
-            background: transparent;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            height: 100%;
-            position: relative;
-            padding: 0 1em;
-
-            .user-email {
-                margin-right: .5em;
-            }
-
-            &:hover {
-                background: @primary;
-            }
-
-            &:active {
-                background: @primary-medium;
-            }
-        }
-
-        .user-info-menu {
-            .shadow(0px, 1px, 4px, 0, @grey);
-
-            display: none;
-            position: absolute;
-            right: .5em;
-            top: 100%;
-            background: @white;
-            border: 1px solid @grey;
-            padding: .5em;
-            min-width: 100px;
-            z-index: 1;
-
-            a {
-                font-size: 12px;
-
-                &:link,
-                &:hover,
-                &:active,
-                &:visited {
-                    color: @base-link-color;
-                    text-decoration: none;
-                }
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-}
-
-.protected-info {
-    align-items: center;
-    margin: 1em 1em 1em;
-}
-
-.threecol {
-    overflow: auto;
-    .col {
-        float: left;
-        width: 33%;
-        border-left: 1px dotted @light-grey;
-        .col-inner {
-            padding: 0 20px;
-        }
-        h3 {
-            font-size: 14px;
-            font-weight: bold;
-            margin-bottom: 8px;
-        }
-    }
-    .col:first-child {
-        border-left: 0;
-        .col-inner {
-            padding-left: 10px;
-        }
-    }
-}
-
-.product-grid {
-    .shadow(0px, 1px, 4px, 0, @grey-90-a10);
-
-    display: flex;
-    flex-wrap: wrap;
-
-    .product {
-        background: #fff;
-        border: 1px gray solid;
-        border-radius: 5px;
-        flex: 1 0 220px;
-        height: 170px;
-        margin: 20px;
-        text-align: center;
-
-        .product-name {
-            margin-top: 55px;
-            a {
-                color: @base-link-color;
-                font-size: 22px;
-                text-decoration: none;
-            }
-            a:hover {
-                text-decoration: underline;
-            }
-        }
-
-        .product-description {
-            color: @dark-grey;
-        }
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/mixins.less b/webapp/crashstats/crashstats/static/crashstats/css/base/mixins.less
deleted file mode 100644
index 9e2ed3581e..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/mixins.less
+++ /dev/null
@@ -1,68 +0,0 @@
-// apply a natural box layout model to all elements
-.box-sizing (@model: border-box) {
-    -moz-box-sizing: @model;
-    -webkit-box-sizing: @model;
-    box-sizing: @model;
-}
-.rounded-corners (@radius: 5px) {
-    -webkit-border-radius: @radius;
-    -moz-border-radius: @radius;
-    border-radius: @radius;
-}
-.rounded-corners (@top-left, @top-right, @bottom-right: 0, @bottom-left: 0) {
-    -webkit-border-radius: @arguments;
-    -moz-border-radius: @arguments;
-    border-radius: @arguments;
-}
-
-.shadow (@x, @y, @blur, @spread, @color) {
-    -webkit-box-shadow: @arguments;
-    -moz-box-shadow: @arguments;
-    box-shadow: @arguments;
-}
-.shadow-none() {
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
-}
-
-.rotate(@deg) {
-    -webkit-transform: rotate(@deg);
-    -moz-transform: rotate(@deg);
-    transform: rotate(@deg);
-}
-
-.button() {
-    background-color: @blue-60;
-    padding: 0.8em;
-    border: none;
-    border-radius: 2px;
-    cursor: pointer;
-
-    &,
-    a {
-        color: @white;
-        text-decoration: none;
-    }
-
-
-    &:hover,
-    &:focus {
-        background: @blue-70;
-    }
-    &:active {
-        background: @blue-80;
-    }
-}
-
-// http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/
-.accessibly-hidden() {
-    position: absolute;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-    clip: rect(1px, 1px, 1px, 1px);
-    padding:0;
-    border:0;
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/photon-colors.less b/webapp/crashstats/crashstats/static/crashstats/css/base/photon-colors.less
deleted file mode 100644
index d86685def8..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/photon-colors.less
+++ /dev/null
@@ -1,82 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* Photon Colors Less Variables v3.0.1 */
-
-@magenta-50: #ff1ad9;
-@magenta-60: #ed00b5;
-@magenta-70: #b5007f;
-@magenta-80: #7d004f;
-@magenta-90: #440027;
-
-@purple-50: #9400ff;
-@purple-60: #8000d7;
-@purple-70: #6200a4;
-@purple-80: #440071;
-@purple-90: #25003e;
-
-@blue-40: #45a1ff;
-@blue-50: #0a84ff;
-@blue-50-a30: rgba(10, 132, 255, 0.3);
-@blue-60: #0060df;
-@blue-70: #003eaa;
-@blue-80: #002275;
-@blue-90: #000f40;
-
-@teal-50: #00feff;
-@teal-60: #00c8d7;
-@teal-70: #008ea4;
-@teal-80: #005a71;
-@teal-90: #002d3e;
-
-@green-50: #30e60b;
-@green-60: #12bc00;
-@green-70: #058b00;
-@green-80: #006504;
-@green-90: #003706;
-
-@yellow-50: #ffe900;
-@yellow-60: #d7b600;
-@yellow-70: #a47f00;
-@yellow-80: #715100;
-@yellow-90: #3e2800;
-
-@red-50: #ff0039;
-@red-60: #d70022;
-@red-70: #a4000f;
-@red-80: #5a0002;
-@red-90: #3e0200;
-
-@orange-50: #ff9400;
-@orange-60: #d76e00;
-@orange-70: #a44900;
-@orange-80: #712b00;
-@orange-90: #3e1300;
-
-@grey-10: #f9f9fa;
-@grey-20: #ededf0;
-@grey-30: #d7d7db;
-@grey-40: #b1b1b3;
-@grey-50: #737373;
-@grey-60: #4a4a4f;
-@grey-70: #38383d;
-@grey-80: #2a2a2e;
-@grey-90: #0c0c0d;
-@grey-90-a025: rgba(12, 12, 13, 0.025);
-@grey-90-a05: rgba(12, 12, 13, 0.05);
-@grey-90-a10: rgba(12, 12, 13, 0.1);
-@grey-90-a20: rgba(12, 12, 13, 0.2);
-@grey-90-a30: rgba(12, 12, 13, 0.3);
-@grey-90-a40: rgba(12, 12, 13, 0.4);
-@grey-90-a50: rgba(12, 12, 13, 0.5);
-@grey-90-a60: rgba(12, 12, 13, 0.6);
-@grey-90-a70: rgba(12, 12, 13, 0.7);
-@grey-90-a80: rgba(12, 12, 13, 0.8);
-@grey-90-a90: rgba(12, 12, 13, 0.9);
-
-@ink-70: #363959;
-@ink-80: #202340;
-@ink-90: #0f1126;
-
-@white-100: #ffffff;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css b/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css
new file mode 100644
index 0000000000..b55d81a51b
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/reset.css
@@ -0,0 +1,114 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  background: #ffffff;
+  color: var(--black);
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+figure {
+  margin: 0;
+  padding: 0;
+}
+/**
+* Improve readability when focused and also mouse hovered in all browsers.
+*/
+a:active,
+a:hover,
+a:focus {
+  outline: 0;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+fieldset,
+img {
+  border: 0;
+}
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+b,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+ul,
+ol {
+  list-style: none;
+}
+caption,
+th {
+  text-align: left;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+q:before,
+q:after {
+  content: '';
+}
+abbr,
+acronym {
+  border: 0;
+  font-variant: normal;
+}
+sup {
+  vertical-align: text-top;
+}
+sub {
+  vertical-align: text-bottom;
+}
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  font-size: 100%;
+}
+legend {
+  color: var(--black);
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/reset.less b/webapp/crashstats/crashstats/static/crashstats/css/base/reset.less
deleted file mode 100644
index 0be8dd422e..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/reset.less
+++ /dev/null
@@ -1,109 +0,0 @@
-* {
-    .box-sizing();
-}
-html {
-    background: @white;
-    color: @black;
-}
-body,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-pre,
-code,
-form,
-fieldset,
-legend,
-input,
-textarea,
-p,
-blockquote,
-th,
-td,
-figure {
-    margin: 0;
-    padding: 0;
-}
-/**
-* Improve readability when focused and also mouse hovered in all browsers.
-*/
-
-a:active,
-a:hover,
-a:focus {
-    outline: 0;
-}
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-fieldset,
-img {
-    border: 0;
-}
-address,
-caption,
-cite,
-code,
-dfn,
-em,
-strong,
-b,
-th,
-var {
-    font-style: normal;
-    font-weight: normal;
-}
-ul, ol {
-    list-style: none;
-}
-caption,
-th {
-    text-align: left;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-size: 100%;
-    font-weight: normal;
-}
-q:before,
-q:after {
-    content:'';
-}
-abbr,
-acronym {
-    border: 0;
-    font-variant: normal;
-}
-sup {
-    vertical-align: text-top;
-}
-sub {
-    vertical-align: text-bottom;
-}
-input,
-textarea,
-select {
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    font-size: 100%;
-}
-legend {
-    color: @black;
-}
-
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css b/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css
new file mode 100644
index 0000000000..6437868dd6
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/tables.css
@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+table {
+  /* standard table styles for data tables */
+}
+table thead tr,
+table tbody tr {
+  z-index: 50;
+}
+table thead tr th,
+table tbody tr th {
+  border: 1px solid var(--black);
+}
+table thead tr td,
+table tbody tr td {
+  border: solid 1px var(--grey);
+}
+table th {
+  font-weight: bold;
+  padding: 0 0.25em;
+}
+table th a.expand {
+  display: inline;
+  font-size: smaller;
+}
+table.data-table,
+table.zebra {
+  width: 100%;
+}
+table.data-table tr:nth-child(even),
+table.zebra tr:nth-child(even) {
+  background-color: var(--alpha-grey1);
+}
+table.data-table tr:nth-child(odd),
+table.zebra tr:nth-child(odd) {
+  background-color: rgba(12, 12, 13, 0.025);
+}
+table.data-table tr:hover,
+table.zebra tr:hover {
+  background-color: var(--light-grey);
+}
+table th {
+  background-color: var(--alpha-grey2);
+}
+table th,
+table td {
+  padding: 0.5em;
+}
+table tbody {
+  background-color: #ffffff;
+}
+table tbody tr.truncated-frame {
+  background-color: var(--jsonview-prop);
+}
+table tbody tr.truncated-frame a {
+  color: var(--dark-grey);
+}
+table tbody tr.missingsymbols,
+table tbody tr.missingsymbols:hover,
+table tbody tr.missingsymbols td {
+  background-color: var(--red);
+  color: #ffffff;
+  border-top: 2px solid #ffffff;
+}
+table.hardwrapped td {
+  overflow-wrap: anywhere;
+}
+.tablesorter {
+  margin: 0 !important;
+}
+.tablesorter thead {
+  font-size: 0.9rem;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/tables.less b/webapp/crashstats/crashstats/static/crashstats/css/base/tables.less
deleted file mode 100644
index 59d460f9fd..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/tables.less
+++ /dev/null
@@ -1,79 +0,0 @@
-table {
-    thead,
-    tbody {
-        tr {
-            z-index: 50;
-            th {
-                border: 1px solid @black;
-            }
-            td {
-                border: solid 1px @grey;
-            }
-        }
-    }
-    th {
-        font-weight: bold;
-        padding: 0 .25em;
-        a.expand {
-            display: inline;
-            font-size: smaller;
-        }
-    }
-
-    /* standard table styles for data tables */
-    &.data-table,
-    &.zebra {
-        width: 100%;
-        tr {
-            &:nth-child(even) {
-                background-color: @grey-90-a10;
-            }
-            &:nth-child(odd) {
-                background-color: @grey-90-a025;
-            }
-            &:hover {
-                background-color: @light-grey;
-            }
-        }
-    }
-    th {
-        background-color: @dark-tan;
-    }
-    th,
-    td {
-        padding: .5em;
-    }
-    tbody {
-        background-color: @white;
-        tr {
-            &.truncated-frame {
-                background-color: @jsonview-prop;
-                a {
-                    color: @dark-grey;
-                }
-            }
-            &.missingsymbols {
-                &,
-                &:hover,
-                & td {
-                    background-color: @red;
-                    color: @white;
-                    border-top: 2px solid @white;
-                }
-            }
-        }
-    }
-
-    &.hardwrapped {
-        td {
-            overflow-wrap: anywhere;
-        }
-    }
-}
-
-.tablesorter {
-    margin: 0 !important;
-    thead {
-        font-size: .9rem;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/typography.css b/webapp/crashstats/crashstats/static/crashstats/css/base/typography.css
new file mode 100644
index 0000000000..47f7bbfb72
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/typography.css
@@ -0,0 +1,58 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+@font-face {
+  font-family: 'icons';
+  src: url('/static/crashstats/fonts/icons.eot?#iefix2013') format('embedded-opentype'), url('/static/crashstats/fonts/icons.woff?2013') format('woff'), url('/static/crashstats/fonts/icons.ttf?2013') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+html,
+body {
+  font-weight: 300;
+  letter-spacing: 0.01em;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 200;
+  letter-spacing: 0;
+  line-height: 1.25em;
+  margin-bottom: 0.5em;
+}
+h1 {
+  font-size: 33px;
+}
+h2 {
+  font-size: 33px;
+}
+h3 {
+  font-size: 24px;
+  margin: 1em 0;
+}
+h4 {
+  font-size: 18px;
+  font-weight: 500;
+  margin: 0 0 0.7em 0;
+}
+p {
+  margin: 1em 0 1em 0;
+  font-weight: normal;
+}
+em {
+  font-style: italic;
+}
+strong,
+b {
+  font-weight: bold;
+}
+.list-disc {
+  list-style-type: disc;
+}
+.list-inside {
+  list-style-position: inside;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/typography.less b/webapp/crashstats/crashstats/static/crashstats/css/base/typography.less
deleted file mode 100644
index 5970c2212a..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/typography.less
+++ /dev/null
@@ -1,56 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/fonts.less";
-
-html,
-body {
-  font-weight: 300;
-  letter-spacing: 0.01em;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 200;
-  letter-spacing: 0;
-  line-height: 1.25em;
-  margin-bottom: 0.5em;
-}
-
-h1 {
-    font-size: @heading-level1;
-}
-h2 {
-    font-size: @heading-level2;
-}
-h3 {
-    font-size: @heading-level3;
-    margin: 1em 0;
-}
-h4 {
-    font-size: @heading-level4;
-    font-weight: 500;
-    margin: 0 0 .7em 0;
-}
-p {
-    margin: 1em 0 1em 0;
-    font-weight: normal;
-}
-
-em {
-    font-style: italic;
-}
-strong, b {
-    font-weight: bold;
-}
-
-// tailwind-like classes
-.list-disc {
-    list-style-type: disc;
-}
-
-.list-inside {
-    list-style-position: inside;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css b/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css
new file mode 100644
index 0000000000..73957e75d9
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/base/variables.css
@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+:root {
+  /* colors */
+  --primary-light: #45a1ff;
+  --primary-medium: #0a84ff;
+  --primary: #0060df;
+  --primary-dark: #002275;
+
+  --off-white: #f2f6f9;
+  --black: #0f1126;
+
+  --blue: var(--primary);
+  --red: #d70022;
+  --orange: #ff9400;
+  --green: #12bc00;
+  --purple: #8000d7;
+  --pink: #ff9c9c;
+
+  --alpha-grey1: rgba(12, 12, 13, 0.1);
+  --alpha-grey2: rgba(12, 12, 13, 0.2);
+
+  --light-grey: #d7d7db;
+  --grey: #b1b1b3;
+  --dark-grey: #4a4a4f;
+
+  --jsonview-prop: #fcb35f;
+
+  /* fonts/headings */
+  --base-font: Helvetica, Arial, sans-serif;
+  --base-font-size: 12px;
+  --base-line-height: 1.7;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/base/variables.less b/webapp/crashstats/crashstats/static/crashstats/css/base/variables.less
deleted file mode 100644
index 4ef489c90f..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/base/variables.less
+++ /dev/null
@@ -1,45 +0,0 @@
-@import "photon-colors.less";
-
-@image-path: "/static/img";
-
-
-@base-font: Helvetica, Arial, sans-serif;
-@base-font-size: 12px;
-@base-line-height: 1.7;
-@base-link-color: @primary;
-
-@heading-level1: 33px;
-@heading-level2: 33px;
-@heading-level3: 24px;
-@heading-level4: 18px;
-
-// Colors
-
-@primary-light: @blue-40;
-@primary-medium: @blue-50;
-@primary: @blue-60;
-@primary-dark: @blue-80;
-
-@white: @white-100;
-@off-white: #f2f6f9;
-@black: @ink-90;
-
-@blue: @blue-60;
-@red: @red-60;
-@orange: @orange-50;
-@green: @green-60;
-@purple: @purple-60;
-@pink: #ff9c9c;
-
-@tan: @grey-90-a10;
-@dark-tan: @grey-90-a20;
-
-@light-grey: @grey-30;
-@grey: @grey-40;
-@dark-grey: @grey-60;
-
-@gray: @grey;
-@light-gray: @light-grey;
-@dark-gray: @dark-grey;
-
-@jsonview-prop: #fcb35f;
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css b/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css
new file mode 100644
index 0000000000..133954930d
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.css
@@ -0,0 +1,81 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.accordion {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.accordion h3 {
+  color: #ffffff;
+  margin: 0;
+}
+
+.accordion a {
+  display: block;
+  background-color: var(--light-grey);
+  color: var(--black);
+  padding: 0.5rem;
+  border: 1px solid var(--dark-grey);
+  text-decoration: none;
+}
+
+.accordion a:focus,
+.accordion a:active {
+  background-color: var(--light-grey);
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
+  outline: none;
+}
+
+.accordion p {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.accordion .content-pane {
+  background-color: #ffffff;
+  color: var(--black);
+  border: 1px solid var(--dark-grey);
+  border-top: 0;
+  overflow: hidden;
+  height: 0;
+  opacity: 0;
+  transition: opacity 0.5s;
+}
+
+.accordion .content-pane h3 {
+  color: var(--dark-grey);
+  padding: 0.5rem 1rem;
+}
+
+.accordion .content-pane h4 {
+  padding: 0.5rem 1rem 0 0.5rem;
+  font-size: 1.2rem;
+}
+
+.accordion .show {
+  height: auto;
+  opacity: 1;
+}
+
+.accordion [data-icon]:before {
+  float: right;
+  font-family: 'icons';
+  /* ensure inherited styles does not override the font style here. */
+  font-style: normal;
+  content: attr(data-icon);
+  -webkit-transform: rotate(0);
+  -moz-transform: rotate(0);
+  transform: rotate(0);
+  /* @see http://css-tricks.com/examples/IconFont/ */
+  speak: none;
+}
+
+.accordion [aria-expanded="true"] [data-icon]:before {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.less b/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.less
deleted file mode 100644
index 3c41ecd801..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/accordion.less
+++ /dev/null
@@ -1,68 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/mixins.less";
-
-.accordion {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    h3 {
-        color: @white;
-        margin: 0;
-    }
-    a {
-        display: block;
-        background-color: @light-grey;
-        color: @black;
-        padding: .5rem;
-        border: 1px solid @dark-grey;
-        text-decoration: none;
-        &:focus,
-        &:active {
-            background-color: @light-grey;
-            color: @black;
-            border: 1px solid @dark-grey;
-            outline: none;
-        }
-    }
-    p {
-        margin: 0;
-        padding: .5rem;
-    }
-    .content-pane {
-        background-color: @white;
-        color: @black;
-        border: 1px solid @dark-grey;
-        border-top: 0;
-        overflow: hidden;
-        height: 0;
-        opacity: 0;
-        transition: opacity .5s;
-        h3 {
-            color: @dark-grey;
-            padding: .5rem 1rem;
-        }
-        h4 {
-            padding: 0.5rem 1rem 0 .5rem;
-            font-size: 1.2rem;
-        }
-    }
-    .show {
-        height: auto;
-        opacity: 1;
-    }
-    [data-icon]:before {
-        float: right;
-        font-family: 'icons';
-        /* ensure inherited styles does not override the font style here. */
-        font-style: normal;
-        content: attr(data-icon);
-        .rotate(0);
-        /* @see http://css-tricks.com/examples/IconFont/ */
-        speak: none;
-    }
-    [aria-expanded="true"] {
-        [data-icon]:before {
-            .rotate(-90deg);
-        }
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css b/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css
new file mode 100644
index 0000000000..7739a53635
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/admin.css
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Admin */
+div.admin h3,
+div.admin h4 {
+  margin-top: 20px;
+}
+div.admin p,
+div.admin ul,
+div.admin li {
+  margin: 5px 0;
+}
+div.admin ul {
+  list-style-type: disc;
+  list-style-position: inside;
+}
+div.admin ul li:before {
+  content: "\00BB \0020";
+}
+div.admin div.add_item {
+  background-color: var(--light-grey);
+  margin-top: 10px;
+  padding: 5px;
+  border: 2px solid var(--dark-grey);
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+div.admin form.span {
+  margin-right: 10px;
+}
+div.admin th {
+  background-color: var(--light-grey);
+  padding: 3px;
+  font-size: 105%;
+}
+div.admin td {
+  padding: 3px;
+}
+div.admin td.text,
+div.admin input.text {
+  width: 125px;
+}
+div.admin td.action {
+  width: 50px;
+}
+div.admin td.featured {
+  width: 50px;
+  text-align: center;
+}
+div.admin td.date {
+  width: 75px;
+}
+#add_version,
+#update_product_version,
+#delete_product_version {
+  display: none;
+  min-width: 550px;
+}
+#add_version table,
+#update_product_version table,
+#delete_product_version table {
+  width: 100%;
+}
+#delete_product_display,
+#delete_version_display,
+#update_product_display,
+#update_version_display {
+  font-style: italic;
+}
+#loading-bds {
+  position: absolute;
+  top: 9%;
+  left: 50%;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/admin.less b/webapp/crashstats/crashstats/static/crashstats/css/components/admin.less
deleted file mode 100644
index 9b2f5c884b..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/admin.less
+++ /dev/null
@@ -1,73 +0,0 @@
-/* Admin */
-div.admin {
-    h3,
-    h4 {
-        margin-top: 20px;
-    }
-    p,
-    ul,
-    li {
-        margin: 5px 0;
-    }
-    ul {
-        list-style-type: disc;
-        list-style-position: inside;
-        li:before {
-            content: "\00BB \0020";
-        }
-    }
-    div.add_item {
-        background-color: @light-grey;
-        margin-top: 10px;
-        padding: 5px;
-        border: 2px solid @dark-grey;
-        .rounded-corners(5px);
-    }
-    form.span {
-        margin-right: 10px;
-    }
-    th {
-        background-color: @light-grey;
-        padding: 3px;
-        font-size: 105%;
-    }
-    td {
-        padding: 3px;
-    }
-    td.text,
-    input.text {
-        width: 125px;
-    }
-    td.action {
-        width: 50px;
-    }
-    td.featured {
-        width: 50px;
-        text-align: center;
-    }
-    td.date {
-        width: 75px;
-    }
-}
-
-#add_version,
-#update_product_version,
-#delete_product_version {
-    display: none;
-    min-width: 550px;
-    table {
-        width: 100%;
-    }
-}
-#delete_product_display,
-#delete_version_display,
-#update_product_display,
-#update_version_display {
-    font-style: italic;
-}
-
-#loading-bds {
-    position: absolute;
-    top: 9%;
-    left: 50%;
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css b/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css
new file mode 100644
index 0000000000..697014c681
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.css
@@ -0,0 +1,61 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Bugzilla entries found within query results */
+th.bugzilla_numbers {
+  width: 140px;
+}
+.bug_ids_expanded_list {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: #ffffff;
+  margin-top: 1em;
+  padding: 1em 1.5em;
+  border: solid 1px var(--light-grey);
+  min-width: 300px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.bug_ids_expanded_list h3 {
+  margin-bottom: 0.3em;
+  font-size: 100%;
+}
+.bug_ids_expanded_list h3 code {
+  word-wrap: break-word;
+}
+.bug_ids_expanded_list .bug-summary {
+  word-wrap: break-word;
+  margin-left: 3px;
+}
+.sorted_bug_ids dt {
+  clear: left;
+}
+.full_bug_ids.popup li {
+  word-break: break-all;
+}
+.sorted_bug_ids.full dd {
+  margin-left: 0px;
+}
+.strike {
+  text-decoration: line-through !important;
+}
+.full_bug_ids {
+  width: 100%;
+}
+.full_bug_ids li {
+  margin: auto 0.5em 0.5em auto;
+  list-style-type: none;
+}
+#bugzilla h2 {
+  margin-top: 1em;
+}
+#bugzilla .bug_ids_expanded_list {
+  position: inherit;
+  display: block;
+  margin-bottom: 0.7em;
+  max-width: 100%;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.less b/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.less
deleted file mode 100644
index 00ece5f2fc..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/bugzilla.less
+++ /dev/null
@@ -1,66 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/mixins.less";
-
-/* Bugzilla entries found within query results */
-th.bugzilla_numbers {
-  width: 140px
-}
-.bug_ids_expanded_list {
-  display: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background-color: @white;
-  margin-top: 1em;
-  padding: 1em 1.5em;
-  border: solid 1px @light-grey;
-  min-width: 300px;
-  .rounded-corners(3px);
-  h3 {
-      margin-bottom: 0.3em;
-      font-size: 100%;
-      code {
-          word-wrap: break-word;
-      }
-  }
-  .bug-summary {
-      word-wrap: break-word;
-      margin-left: 3px;
-  }
-}
-.sorted_bug_ids {
-  dt {
-      clear: left;
-  }
-}
-.full_bug_ids.popup {
-  li {
-      word-break: break-all;
-  }
-}
-.sorted_bug_ids.full {
-  dd {
-      margin-left: 0px;
-  }
-}
-.strike {
-  text-decoration: line-through !important;
-}
-.full_bug_ids {
-  width: 100%;
-  li {
-      margin: auto 0.5em 0.5em auto;
-      list-style-type: none;
-  }
-}
-#bugzilla {
-  h2 {
-      margin-top: 1em;
-  }
-  .bug_ids_expanded_list {
-      position: inherit;
-      display: block;
-      margin-bottom: .7em;
-      max-width: 100%;
-  }
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/code.css b/webapp/crashstats/crashstats/static/crashstats/css/components/code.css
new file mode 100644
index 0000000000..2e699b2676
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/code.css
@@ -0,0 +1,13 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+div.code {
+  background-color: #ffffff;
+  border: 1px solid var(--light-grey);
+  font-family: monospace;
+  width: 100%;
+  height: 480px;
+  white-space: pre;
+  overflow: auto;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/code.less b/webapp/crashstats/crashstats/static/crashstats/css/components/code.less
deleted file mode 100644
index d6dd03f430..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/code.less
+++ /dev/null
@@ -1,9 +0,0 @@
-div.code {
-    background-color: @white;
-    border: 1px solid @light-grey;
-    font-family: monospace;
-    width: 100%;
-    height: 480px;
-    white-space: pre;
-    overflow: auto;
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css b/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css
new file mode 100644
index 0000000000..0f4081339d
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/footer.css
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.page-footer {
+  background: var(--light-grey);
+  color: var(--dark-grey);
+  border-top: 1px solid var(--grey);
+  margin: 40px 0 0 0;
+  padding: 10px 20px;
+}
+
+.page-footer a:link,
+.page-footer a:hover,
+.page-footer a:active,
+.page-footer a:visited {
+  color: var(--primary);
+  text-decoration: none;
+}
+
+.page-footer a:hover {
+  text-decoration: underline;
+}
+
+.page-footer .nav {
+  background: url("/static/img/3.0/mozilla.gif") no-repeat scroll 0% -1px transparent;
+  background-size: 102px auto;
+  float: left;
+  padding-left: 109px;
+}
+
+.page-footer ul,
+.page-footer .login {
+  display: inline;
+}
+
+.page-footer li {
+  display: inline;
+  padding: 0 0.5em;
+  border-left: 1px solid var(--grey);
+  list-style: none;
+}
+
+.page-footer li:first-child {
+  border-left: 0;
+  padding-left: 0;
+}
+
+.page-footer .login {
+  float: right;
+  line-height: 18px;
+  padding-top: 2px;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/footer.less b/webapp/crashstats/crashstats/static/crashstats/css/components/footer.less
deleted file mode 100644
index 630d0314a6..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/footer.less
+++ /dev/null
@@ -1,46 +0,0 @@
-.page-footer {
-    background: @light-grey;
-    color: @dark-grey;
-    border-top: 1px solid @grey;
-    margin: 40px 0 0 0;
-    padding: 10px 20px;
-    a {
-        &:link,
-        &:hover,
-        &:active,
-        &:visited {
-            color: @base-link-color;
-            text-decoration: none;
-        }
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    .nav {
-        background: url("@{image-path}/3.0/mozilla.gif") no-repeat scroll 0% -1px transparent;
-        background-size: 102px auto;
-        float: left;
-        padding-left: 109px;
-    }
-    ul,
-    .login {
-        display: inline;
-    }
-    li {
-        display: inline;
-        padding: 0 .5em;
-        border-left: 1px solid @grey;
-        list-style: none;
-    }
-    li:first-child {
-        border-left: 0;
-        padding-left: 0;
-    }
-    .login {
-        float: right;
-        line-height: 18px;
-        padding-top: 2px;
-    }
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/message.css b/webapp/crashstats/crashstats/static/crashstats/css/components/message.css
new file mode 100644
index 0000000000..a6b0391ab7
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/message.css
@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Status Messages */
+div#message {
+  margin: 1em;
+}
+
+.message,
+.info {
+  margin: 1.5% 2% 0;
+  padding: 1em;
+  width: 96%;
+  -webkit-border-radius: 0.25em;
+  -moz-border-radius: 0.25em;
+  border-radius: 0.25em;
+}
+
+.info {
+  background-color: var(--primary-light);
+  border: 1px solid var(--primary-dark);
+}
+
+.message.error {
+  background-color: var(--pink);
+  border: 1px solid var(--red);
+}
+
+.message.success {
+  background-color: var(--green);
+  border: 1px solid #ffffff;
+  color: #ffffff;
+}
+
+.message.warning {
+  background-color: var(--pink);
+  border: 1px solid var(--orange);
+}
+
+.message h2 {
+  margin: 0.5em 0;
+  font-size: 1.2em;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/message.less b/webapp/crashstats/crashstats/static/crashstats/css/components/message.less
deleted file mode 100644
index aee164aac8..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/message.less
+++ /dev/null
@@ -1,32 +0,0 @@
-/* Status Messages */
-div#message {
-    margin: 1em;
-}
-.message,
-.info {
-    margin: 1.5% 2% 0;
-    padding: 1em;
-    width: 96%;
-    .rounded-corners(.25em);
-}
-.info {
-    background-color: @primary-light;
-    border: 1px solid @primary-dark;
-}
-.message.error {
-    background-color: @pink;
-    border: 1px solid @red;
-}
-.message.success {
-    background-color: @green;
-    border: 1px solid @white;
-    color: @white;
-}
-.message.warning {
-    background-color: @pink;
-    border: 1px solid @orange;
-}
-.message h2 {
-    margin: .5em 0;
-    font-size: 1.2em;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css b/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css
new file mode 100644
index 0000000000..413f1d8946
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/nav.css
@@ -0,0 +1,101 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Nav */
+nav {
+  display: inline;
+}
+
+nav .options {
+  display: inline;
+  margin-left: 1em;
+  font-size: 1.1em;
+  vertical-align: 4px;
+}
+
+nav .options li {
+  display: inline;
+  list-style: none;
+}
+
+nav .options li a {
+  color: var(--primary-dark);
+  padding: 0.3em 0.7em;
+  text-decoration: none;
+  white-space: nowrap;
+  -webkit-border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
+  border-radius: 0.3em;
+}
+
+nav .options li a:hover {
+  background-color: var(--off-white);
+}
+
+nav .options li a.selected,
+nav .options li a.button {
+  background-color: var(--primary);
+  color: #ffffff;
+}
+
+.version-nav {
+  font-size: var(--base-font-size);
+  background: transparent repeat-x left top;
+  position: relative;
+  background-color: var(--primary);
+  color: var(--off-white);
+  padding: 0.5em 1rem;
+  line-height: 32px;
+}
+
+.version-nav a,
+.version-nav a:link,
+.version-nav a:hover,
+.version-nav a:active,
+.version-nav a:visited {
+  color: var(--off-white);
+}
+
+.version-nav .filter {
+  display: inline;
+}
+
+.version-nav .filter li {
+  display: inline;
+  padding: 0;
+}
+
+.version-nav .filter li:last-child {
+  border-left: 1px solid var(--primary-medium);
+  margin-left: 0.5em;
+  padding-left: 0.8em;
+}
+
+.version-nav .filter optgroup {
+  border-top: 1px solid var(--light-grey);
+  padding: 0.5em 0;
+}
+
+.version-nav .filter optgroup:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.version-nav .filter optgroup:last-child {
+  padding-bottom: 0;
+}
+
+.version-nav .filter option {
+  padding-left: 0;
+}
+
+.version-nav .quick-nav-title {
+  display: inline-block;
+  margin-right: 1em;
+}
+
+.version-nav .nav-links {
+  display: inline;
+  float: right;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/nav.less b/webapp/crashstats/crashstats/static/crashstats/css/components/nav.less
deleted file mode 100644
index 0f9cad5e27..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/nav.less
+++ /dev/null
@@ -1,80 +0,0 @@
-@import "@{root-path}/base/mixins.less";
-
-/* Nav */
-nav {
-    display: inline;
-    .options {
-        display: inline;
-        margin-left: 1em;
-        font-size: 1.1em;
-        vertical-align: 4px;
-        li {
-            display: inline;
-            list-style: none;
-            a {
-                color: @primary-dark;
-                padding: 0.3em 0.7em;
-                text-decoration: none;
-                white-space: nowrap;
-                .rounded-corners(.3em);
-
-                &:hover {
-                    background-color: @off-white;
-                }
-                &.selected, &.button {
-                    background-color: @primary;
-                    color: @white;
-                }
-            }
-        }
-    }
-}
-
-.version-nav {
-    font-size: 12px;
-    background: transparent repeat-x left top;
-    position: relative;
-    background-color: @primary;
-    color: @off-white;
-    padding: 0.5em 1rem;
-    line-height: 32px;
-    a, a:link, a:hover, a:active, a:visited {
-        color: @off-white;
-    }
-    .filter {
-        display: inline;
-        li {
-            display: inline;
-            padding: 0;
-            &:last-child {
-                border-left: 1px solid @primary-medium;
-                margin-left: 0.5em;
-                padding-left: 0.8em;
-            }
-        }
-
-        optgroup {
-            border-top: 1px solid @light-grey;
-            padding: .5em 0;
-            &:first-child {
-                border-top: 0;
-                padding-top: 0;
-            }
-            &:last-child {
-                padding-bottom: 0;
-            }
-        }
-
-        option {
-            padding-left: 0;
-        }
-    }
-    .quick-nav-title {
-        display: inline-block;
-        margin-right: 1em;
-    }
-    .nav-links {
-        display: inline;
-        float: right;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/note.css b/webapp/crashstats/crashstats/static/crashstats/css/components/note.css
new file mode 100644
index 0000000000..d9cf1a7216
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/note.css
@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.note {
+  background-color: var(--off-white);
+  border: 1px solid var(--primary);
+  border-radius: 4px;
+  margin: 0 0 10px 10px;
+}
+
+.note.float-right {
+  float: right;
+  min-width: 300px;
+  width: 30%;
+}
+
+.note p {
+  padding: 10px 10px;
+  margin: 0;
+}
+
+.note::before {
+  content: url("/static/img/3rdparty/silk/information.png") ' Note';
+  display: block;
+  background-color: var(--primary);
+  color: #ffffff;
+  font-weight: bold;
+  padding: 4px 10px;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/note.less b/webapp/crashstats/crashstats/static/crashstats/css/components/note.less
deleted file mode 100644
index 7253e3ea32..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/note.less
+++ /dev/null
@@ -1,26 +0,0 @@
-.note {
-    &.float-right {
-        float: right;
-        min-width: 300px;
-        width: 30%;
-    }
-
-    background-color: @off-white;
-    border: 1px solid @primary;
-    border-radius: 4px;
-    margin: 0 0 10px 10px;
-
-    p {
-        padding: 10px 10px;
-        margin: 0;
-    }
-
-    &::before {
-        content: url('../../img/3rdparty/silk/information.png') ' Note';
-        display: block;
-        background-color: @primary;
-        color: @white;
-        font-weight: bold;
-        padding: 4px 10px;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.css b/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.css
new file mode 100644
index 0000000000..74ab354705
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.css
@@ -0,0 +1,13 @@
+/* Pagination */
+.pagination {
+  padding: 0.3em 0.2em 0.2em 0.5em;
+  text-align: right;
+}
+.pagination ol {
+  float: right;
+  margin-left: 0.5em;
+}
+.pagination ol li {
+  float: left;
+  margin-right: 0.3em;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.less b/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.less
deleted file mode 100644
index dc6d511a24..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/pagination.less
+++ /dev/null
@@ -1,13 +0,0 @@
-/* Pagination */
-.pagination {
-    padding: .3em .2em .2em .5em;
-    text-align: right;
-    ol {
-        float: right;
-        margin-left: 0.5em;
-        li {
-            float: left;
-            margin-right: 0.3em;
-        }
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css b/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css
new file mode 100644
index 0000000000..dbf3d0a70e
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/panel.css
@@ -0,0 +1,167 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.panel {
+  color: var(--black);
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+}
+
+.content .panel {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+.panel header.title,
+.panel div.title {
+  background: var(--alpha-grey1) repeat-x left top;
+  display: flex;
+  font-size: var(--base-font-size);
+  padding: 1em;
+}
+
+.panel header.title h2,
+.panel div.title h2 {
+  display: block;
+  font-size: 16px;
+  font-weight: bold;
+  padding-right: 0.8em;
+  margin: 0;
+  flex-grow: 1;
+}
+
+.panel header.title .choices,
+.panel div.title .choices {
+  border-left-color: var(--grey);
+  vertical-align: 1px;
+}
+
+.panel header.title a,
+.panel div.title a {
+  color: var(--black);
+}
+
+.panel header.title a:hover,
+.panel div.title a:hover,
+.panel header.title a:focus,
+.panel div.title a:focus {
+  background: var(--light-grey);
+}
+
+.panel header.title a.selected,
+.panel div.title a.selected {
+  background-color: var(--primary-medium);
+  color: #ffffff;
+}
+
+.panel .body {
+  background: #ffffff;
+  padding: 1em;
+  min-height: 4em;
+}
+
+.panel .table {
+  font-size: 10px;
+  border-collapse: collapse;
+  border: 1px solid var(--grey);
+  border-top: 0;
+  width: 100%;
+}
+
+.panel .table td,
+.panel .table th {
+  padding: 0.5em 0.5em;
+  vertical-align: top;
+}
+
+.panel .table .numalign {
+  text-align: right;
+}
+
+.panel .table .spanalign {
+  text-align: center;
+}
+
+.panel .table .trend-up {
+  color: var(--red);
+}
+
+.panel .table .trend-down {
+  color: var(--green);
+}
+
+.panel .table thead tr {
+  background: var(--alpha-grey1);
+}
+
+.panel .table thead th {
+  border: 1px solid var(--grey);
+  border-top: 0;
+  font-weight: bold;
+}
+
+.panel .table thead th.sortable {
+  padding-right: 17px;
+}
+
+.panel .table thead th.sortable:hover {
+  cursor: pointer;
+}
+
+.panel .table tbody {
+  background-color: #ffffff;
+}
+
+.panel .table tbody tr td:first-child,
+.panel .table tbody tr th:first-child {
+  border-left: 0;
+}
+
+.panel .table tbody tr:nth-child(even) {
+  background: #ffffff;
+}
+
+.panel .table tbody tr:hover {
+  background: var(--off-white);
+}
+
+.panel .table tbody td,
+.panel .table tbody th {
+  border-left: 1px dotted var(--off-white);
+  border-top: 1px solid var(--off-white);
+}
+
+.panel .table tbody tr:first-child td,
+.panel .table tbody tr:first-child th {
+  border-top: 0;
+}
+
+.panel .table tbody td.separated,
+.panel .table tbody th.separated {
+  border-left: 1px solid var(--grey);
+}
+
+.panel .table tbody th {
+  font-weight: bold;
+}
+
+.panel .table td.count span {
+  display: block;
+  font-size: 8px;
+}
+
+.panel .table td.count-high {
+  color: var(--red);
+}
+
+.panel .table td.count-none {
+  color: var(--dark-grey);
+}
+
+.panel .table.expand-counts .counts-collapsed,
+.panel .table.expand-counts .counts-expanded {
+  display: none;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/panel.less b/webapp/crashstats/crashstats/static/crashstats/css/components/panel.less
deleted file mode 100644
index b210cce96e..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/panel.less
+++ /dev/null
@@ -1,140 +0,0 @@
-@import "@{root-path}/base/mixins.less";
-@import "@{root-path}/base/variables.less";
-
-.panel {
-    color: @black;
-    .shadow(0px, 1px, 4px, 0, @grey-90-a10);
-
-    .content & {
-        .shadow-none();
-    }
-
-    header.title, div.title {
-        background: @tan repeat-x left top;
-        display: flex;
-        font-size: 12px;
-        padding: 1em;
-
-        h2 {
-            display: block;
-            font-size: 16px;
-            font-weight: bold;
-            padding-right: 0.8em;
-            margin: 0;
-            flex-grow: 1;
-        }
-
-        .choices {
-            border-left-color: @grey;
-            vertical-align: 1px;
-        }
-        a {
-            color: @black;
-            &:hover,
-            &:focus {
-                background: @light-grey;
-            }
-
-            &.selected {
-                background-color: @primary-medium;
-                color: @white;
-            }
-        }
-    }
-    .body {
-        background: @white;
-        padding: 1em;
-        min-height: 4em;
-    }
-    .table {
-        font-size: 10px;
-        border-collapse: collapse;
-        border: 1px solid @grey;
-        border-top: 0;
-        width: 100%;
-        td,
-        th {
-            padding: .5em .5em;
-            vertical-align: top;
-        }
-        .numalign {
-            text-align: right;
-        }
-        .spanalign {
-            text-align: center;
-        }
-        .trend-up {
-            color: @red;
-        }
-        .trend-down {
-            color: @green;
-        }
-        thead {
-            tr {
-                background: @tan;
-            }
-            th {
-                border: 1px solid @grey;
-                border-top: 0;
-                font-weight: bold;
-            }
-            th.sortable {
-                padding-right: 17px;
-            }
-            th.sortable:hover {
-                cursor: pointer;
-            }
-        }
-        tbody {
-            background-color: @white;
-            tr {
-                td:first-child,
-                th:first-child {
-                    border-left: 0;
-                }
-            }
-            tr:nth-child(even) {
-                background: @white;
-            }
-            tr:hover {
-                background: @off-white;
-            }
-            td,
-            th {
-                border-left: 1px dotted @off-white;
-                border-top: 1px solid @off-white;
-            }
-            tr:first-child {
-                td,
-                th {
-                    border-top: 0;
-                }
-            }
-            td.separated,
-            th.separated {
-                border-left: 1px solid @grey;
-            }
-            th {
-                font-weight: bold;
-            }
-        }
-        td.count {
-            span {
-                display: block;
-                font-size: 8px;
-            }
-        }
-        td.count-high {
-            color: @red;
-        }
-        td.count-none {
-            color: @dark-grey;
-        }
-    }
-    .table.expand-counts {
-        .counts-collapsed,
-        .counts-expanded {
-            display: none;
-        }
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/select.css b/webapp/crashstats/crashstats/static/crashstats/css/components/select.css
new file mode 100644
index 0000000000..9b0a33274d
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/select.css
@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+  border: none;
+  background: var(--light-grey);
+  color: var(--black);
+  padding: 0.2em 2em 0.2em 0.2em;
+  margin: 0;
+  border-radius: 2px;
+  background-image: url("/static/img/3.0/caret.svg");
+  background-position: calc(100% - 7px) calc(50% + 1px);
+  background-size: 8px;
+  background-repeat: no-repeat;
+}
+
+select:hover {
+  background-color: var(--grey);
+}
+
+select:active {
+  background-color: #737373;
+}
+
+select:focus {
+  background-color: #ffffff;
+}
+
+select optgroup,
+select option {
+  background-color: #ffffff;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/select.less b/webapp/crashstats/crashstats/static/crashstats/css/components/select.less
deleted file mode 100644
index 4da1f112f9..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/select.less
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/mixins.less";
-
-select {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  cursor: pointer;
-
-  border: none;
-  background: @grey-30;
-  color: @ink-90;
-
-  padding: 0.2em 2em 0.2em 0.2em;
-  margin: 0;
-  border-radius: 2px;
-
-  background-image: url("@{image-path}/3.0/caret.svg");
-  background-position: calc(100% - 7px) calc(50% + 1px);
-  background-size: 8px;
-  background-repeat: no-repeat;
-
-  &:hover {
-      background-color: @grey-40;
-  }
-
-  &:active {
-      background-color: @grey-50;
-  }
-
-  &:focus {
-      background-color: @white;
-  }
-
-  optgroup,
-  option {
-      background-color: @white;
-  }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css b/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css
new file mode 100644
index 0000000000..99561e9603
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.css
@@ -0,0 +1,28 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* simplebox css */
+#simplebox {
+  display: none;
+}
+#simplebox_wrapper {
+  background-color: var(--dark-grey);
+  background-color: rgba(51, 51, 51, 0.5);
+  background-color: hsla(0, 0%, 20%, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+#close_simplebox {
+  position: absolute;
+  background: transparent url("/static/img/icons/close_round.png") 0 0 no-repeat;
+  margin-top: -20px;
+  border: 0;
+  width: 30px;
+  height: 30px;
+  text-indent: -99999em;
+  cursor: pointer;
+  cursor: hand;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.less b/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.less
deleted file mode 100644
index 0789a65f54..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/simplebox.less
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-/* simplebox css */
-#simplebox {
-    display:none;
-}
-#simplebox_wrapper {
-    background-color:@dark-grey;
-    background-color:rgba(51, 51, 51, 0.5);
-    background-color:hsla(0, 0%, 20%, 0.5);
-    position:absolute;
-    top:0;
-    left:0;
-    z-index:9999;
-}
-#close_simplebox {
-    position:absolute;
-    background:transparent url("@{image-path}/icons/close_round.png") 0 0 no-repeat;
-    margin-top:-20px;
-    border:0;
-    width:30px;
-    height:30px;
-    text-indent:-99999em;
-    cursor:pointer;
-    cursor:hand;
-}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/statusicon.less b/webapp/crashstats/crashstats/static/crashstats/css/components/statusicon.css
similarity index 100%
rename from webapp/crashstats/crashstats/static/crashstats/css/components/statusicon.less
rename to webapp/crashstats/crashstats/static/crashstats/css/components/statusicon.css
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css b/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css
new file mode 100644
index 0000000000..c7aa226a53
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.css
@@ -0,0 +1,29 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+#sumo-link {
+  float: right;
+}
+#sumo-link a {
+  background-color: var(--primary);
+  padding: 0.8em;
+  border: none;
+  border-radius: 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  text-align: right;
+  margin: 0px auto 10px;
+}
+#sumo-link a,
+#sumo-link a a {
+  color: #ffffff;
+  text-decoration: none;
+}
+#sumo-link a:hover,
+#sumo-link a:focus {
+  background: #003eaa;
+}
+#sumo-link a:active {
+  background: var(--primary-dark);
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.less b/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.less
deleted file mode 100644
index ddeadbe6f7..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/sumo_link.less
+++ /dev/null
@@ -1,10 +0,0 @@
-#sumo-link {
-    float: right;
-
-    a {
-        .button();
-        border-radius: 4px;
-        text-align: right;
-        margin: 0px auto 10px;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css b/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css
new file mode 100644
index 0000000000..18a4bbeb43
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.css
@@ -0,0 +1,25 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+table.tablesorter th {
+  background-color: var(--alpha-grey2);
+  border: solid 1px var(--grey);
+}
+
+table.tablesorter tbody tr.odd {
+  background-color: var(--off-white);
+}
+
+table.tablesorter tbody td {
+  padding: 7px 0.5em 8px 0.5em;
+  background-color: transparent;
+}
+
+table.tablesorter tbody tr td.in1 {
+  padding-left: 15px;
+}
+
+table.tablesorter tbody tr td.in2 {
+  padding-left: 30px;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.less b/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.less
deleted file mode 100644
index 0a855378ee..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/table_sorter.less
+++ /dev/null
@@ -1,26 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-table.tablesorter {
-    th {
-        background-color: @dark-tan;
-        border: solid 1px @grey;
-    }
-    tbody {
-        tr.odd {
-            background-color: @off-white;
-        }
-        td {
-            padding: 7px .5em 8px .5em;
-            background-color: transparent;
-        }
-
-        tr {
-            td.in1 {
-                padding-left: 15px;
-            }
-            td.in2 {
-                padding-left: 30px;
-            }
-        }
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/tip.css b/webapp/crashstats/crashstats/static/crashstats/css/components/tip.css
new file mode 100644
index 0000000000..491f21a978
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/tip.css
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Tip text */
+.tip {
+  padding: 0.8em;
+  margin: 1em 0;
+  font-size: 1.1em;
+  background-color: #ededf0;
+  color: #0c0c0d;
+}
+.tip::before {
+  content: "Tip! ";
+  font-weight: bold;
+}
+.tip-note {
+  padding: 0.5em 0.8em;
+  margin: 0.5em 0;
+  font-size: 1.1em;
+  background-color: #ededf0;
+  color: #0c0c0d;
+}
+.tip-note::before {
+  content: "Note! ";
+  font-weight: bold;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/tip.less b/webapp/crashstats/crashstats/static/crashstats/css/components/tip.less
deleted file mode 100644
index b275d0c528..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/tip.less
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Tip text */
-.tip {
-    padding: 0.8em;
-    margin: 1em 0;
-    font-size: 1.1em;
-    background-color: @grey-20;
-    color: @grey-90;
-
-    &::before {
-        content: "Tip! ";
-        font-weight: bold;
-    }
-}
-
-.tip-note {
-    padding: 0.5em 0.8em;
-    margin: 0.5em 0;
-    font-size: 1.1em;
-    background-color: @grey-20;
-    color: @grey-90;
-
-    &::before {
-        content: "Note! ";
-        font-weight: bold;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/tree.css b/webapp/crashstats/crashstats/static/crashstats/css/components/tree.css
new file mode 100644
index 0000000000..6abaf4c398
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/components/tree.css
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* From http://cssdeck.com/labs/pure-css-tree-menu-framework */
+.tree,
+.tree ul {
+  margin: 0 0 0 2em;
+  /* indentation */
+  padding: 0;
+  list-style: none;
+  position: relative;
+}
+.tree ul {
+  margin-left: 0.5em;
+}
+/* (indentation/2) */
+.tree:before,
+.tree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid;
+}
+.tree li {
+  margin: 0;
+  padding: 0 1.5em;
+  /* indentation + .5em */
+  line-height: 1.6em;
+  /* default list item's `line-height` */
+  font-weight: bold;
+  position: relative;
+}
+.tree li:before {
+  content: "";
+  display: block;
+  width: 10px;
+  /* same with indentation */
+  height: 0;
+  border-top: 1px solid;
+  margin-top: -1px;
+  /* border top width */
+  position: absolute;
+  top: 1em;
+  /* (line-height/2) */
+  left: 0;
+}
+.tree li:last-child:before {
+  background: #ffffff;
+  /* same with body background */
+  height: auto;
+  top: 1em;
+  /* (line-height/2) */
+  bottom: 0;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/components/tree.less b/webapp/crashstats/crashstats/static/crashstats/css/components/tree.less
deleted file mode 100644
index 6f2ec118fd..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/components/tree.less
+++ /dev/null
@@ -1,63 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-/* From http://cssdeck.com/labs/pure-css-tree-menu-framework */
-
-.tree, .tree ul {
-    margin: 0 0 0 2em;
-    /* indentation */
-    padding: 0;
-    list-style: none;
-    position: relative;
-}
-
-.tree ul {
-    margin-left: .5em
-}
-
-
-/* (indentation/2) */
-
-.tree:before, .tree ul:before {
-    content: "";
-    display: block;
-    width: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    border-left: 1px solid;
-}
-
-.tree li {
-    margin: 0;
-    padding: 0 1.5em;
-    /* indentation + .5em */
-    line-height: 1.6em;
-    /* default list item's `line-height` */
-    font-weight: bold;
-    position: relative;
-}
-
-.tree li:before {
-    content: "";
-    display: block;
-    width: 10px;
-    /* same with indentation */
-    height: 0;
-    border-top: 1px solid;
-    margin-top: -1px;
-    /* border top width */
-    position: absolute;
-    top: 1em;
-    /* (line-height/2) */
-    left: 0;
-}
-
-.tree li:last-child:before {
-    background: @white;
-    /* same with body background */
-    height: auto;
-    top: 1em;
-    /* (line-height/2) */
-    bottom: 0;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css
new file mode 100644
index 0000000000..e0bb499894
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.css
@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+/* Product / Version dashboards */
+div.release_channel {
+  float: left;
+  margin: 1em 0;
+  width: 24%;
+  min-width: 160px;
+}
+div.release_channel li {
+  padding: 0 0 12px 0;
+  font-size: 14px;
+  /* 14px or 1.1(r)em */
+}
+div.release_channel li a {
+  color: var(--primary-dark);
+  text-decoration: none;
+}
+div.release_channel li a:hover,
+div.release_channel li a:active {
+  color: var(--primary);
+}
+div.release_channel li.focused a,
+div.release_channel li.focused a:link,
+div.release_channel li.focused a:hover,
+div.release_channel li.focused a:active {
+  color: var(--primary);
+}
+.border_right {
+  border-right: 1px dashed var(--alpha-grey2);
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.less b/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.less
deleted file mode 100644
index 759c2b043e..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/product_home.less
+++ /dev/null
@@ -1,32 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-/* Product / Version dashboards */
-div.release_channel {
-    float: left;
-    margin: 1em 0;
-    width: 24%;
-    min-width: 160px;
-    li {
-        padding: 0 0 12px 0;
-        font-size: (@base-font-size + 2); /* 14px or 1.1(r)em */
-        a {
-            color: @primary-dark;
-            text-decoration: none;
-            &:hover,
-            &:active {
-                color: @primary;
-            }
-        }
-    }
-    li.focused {
-        a,
-        a:link,
-        a:hover,
-        a:active {
-            color: @primary;
-        }
-    }
-}
-.border_right {
-    border-right: 1px dashed @dark-tan;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css
new file mode 100644
index 0000000000..f58048e7a8
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.css
@@ -0,0 +1,97 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+#details th,
+#metadata th {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#breadcrumbs th,
+#breadcrumbs td {
+  vertical-align: top;
+}
+.humanized {
+  padding-left: 3px;
+  color: #6f6f6f;
+  font-size: 11px;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+#sumo-link a {
+  margin-left: 0.5em;
+}
+.bugreporter {
+  background-color: var(--off-white);
+  margin-top: 1em;
+  padding: 0 0.4em;
+  border: 1px solid var(--light-grey);
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+#report-index {
+  clear: right;
+}
+#report-index h2,
+#report-index h3 {
+  margin: 10px 0;
+}
+#allthreads.hidden {
+  display: none;
+}
+#frames {
+  margin-top: 1em;
+}
+#report-header {
+  font-size: 150%;
+  position: relative;
+  width: 39em;
+  z-index: 1;
+}
+.record {
+  line-height: 1.5em;
+}
+.record th {
+  text-align: right;
+}
+.record pre {
+  white-space: pre-wrap;
+}
+.sig-overview,
+.sig-search {
+  background: transparent url("/static/img/icons/external.png") left top no-repeat;
+  display: inline-block;
+  color: var(--dark-grey);
+  margin-left: 0.5em;
+  padding-left: 17px;
+  font-size: var(--base-font-size);
+  font-weight: bold;
+}
+.sig-overview:link,
+.sig-overview:visited,
+.sig-search:link,
+.sig-search:visited {
+  color: var(--black);
+  text-decoration: none;
+}
+/**
+ * Adds a little flyout to the left of a row in
+ * order to draw attention or display a notice.
+ */
+.row-notice {
+  display: inline-block;
+  position: absolute;
+  left: -6px;
+  background-color: var(--red);
+  color: #ffffff;
+  margin-top: -6px;
+  padding: 0.5rem 0.5rem 0.2rem;
+  border-radius: 6px 0 0 6px;
+  width: 26px;
+  font-size: 1.6rem;
+  line-height: 125%;
+  font-weight: bold;
+  text-align: center;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.less b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.less
deleted file mode 100644
index 9676476c86..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_index.less
+++ /dev/null
@@ -1,107 +0,0 @@
-@import "@{root-path}/base/mixins.less";
-@import "@{root-path}/base/variables.less";
-
-#details th,
-#metadata th {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-#breadcrumbs {
-    th, td {
-        vertical-align: top;
-    }
-}
-
-.humanized {
-    padding-left: 3px;
-    color: rgb(111, 111, 111);
-    font-size: 11px;
-    text-decoration: underline;
-    text-decoration-style: dotted;
-}
-
-#sumo-link a {
-    margin-left: 0.5em;
-}
-
-.bugreporter {
-    background-color: @off-white;
-    margin-top: 1em;
-    padding: 0 0.4em;
-    border: 1px solid @light-grey;
-    .rounded-corners(6px);
-}
-
-#report-index {
-    clear: right;
-
-    h2,
-    h3 {
-        margin: 10px 0;
-    }
-}
-
-#allthreads.hidden {
-    display: none;
-}
-
-#frames {
-    margin-top: 1em;
-}
-
-#report-header {
-    font-size: 150%;
-    position: relative;
-    width: 39em;
-    z-index: 1;
-}
-
-.record {
-    line-height: 1.5em;
-    th {
-        text-align: right;
-    }
-    pre {
-        white-space: pre-wrap;
-    }
-}
-
-.sig-overview,
-.sig-search {
-    background: transparent url("@{image-path}/icons/external.png") left top no-repeat;
-    display: inline-block;
-    color: @dark-grey;
-    margin-left: .5em;
-    padding-left: 17px;
-    font-size: 12px;
-    font-weight: bold;
-}
-.sig-overview:link,
-.sig-overview:visited,
-.sig-search:link,
-.sig-search:visited {
-    color: @black;
-    text-decoration: none;
-}
-
-/**
- * Adds a little flyout to the left of a row in
- * order to draw attention or display a notice.
- */
-.row-notice {
-    display: inline-block;
-    position: absolute;
-    left: -6px;
-    background-color: @red;
-    color: @white;
-    margin-top: -6px;
-    padding: .5rem .5rem .2rem;
-    border-radius: 6px 0 0 6px;
-    width: 26px;
-    font-size: 1.6rem;
-    line-height: 125%;
-    font-weight: bold;
-    text-align: center;
-}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css
new file mode 100644
index 0000000000..d1d39039cb
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.css
@@ -0,0 +1,22 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+div.pending {
+  background-color: #ffffff;
+  color: var(--dark-grey);
+  margin: 20px auto;
+  padding: 10px;
+  border: 4px solid #999;
+  width: 400px;
+  text-align: center;
+  -webkit-border-radius: 25px;
+  -moz-border-radius: 25px;
+  border-radius: 25px;
+}
+div.pending p {
+  font-size: var(--base-font-size);
+}
+div.pending img {
+  margin: 10px 0;
+}
diff --git a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.less b/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.less
deleted file mode 100644
index a7ee0c2cc7..0000000000
--- a/webapp/crashstats/crashstats/static/crashstats/css/pages/report_pending.less
+++ /dev/null
@@ -1,19 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/mixins.less";
-
-div.pending {
-    background-color: @white;
-    color: @dark-grey;
-    margin: 20px auto;
-    padding: 10px;
-    border: 4px solid #999;
-    width: 400px;
-    text-align: center;
-    .rounded-corners(25px);
-    p {
-        font-size: 12px;
-    }
-    img {
-        margin: 10px 0;
-    }
-}
diff --git a/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css b/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css
new file mode 100644
index 0000000000..69bc1a5c70
--- /dev/null
+++ b/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.css
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.json-document {
+  background-color: var(--black);
+  color: var(--jsonview-prop);
+  font-family: monospace;
+  font-size: 1.1em;
+  white-space: pre-wrap;
+}
+
+.json-document a,
+.json-document a:hover,
+.json-document a:visited,
+.json-document .json-toggle,
+.json-document .json-dict {
+  color: var(--jsonview-prop);
+}
+
+.json-document .json-literal {
+  color: var(--primary-light);
+}
+
+.json-document .json-string {
+  color: var(--green);
+  white-space: pre-wrap;
+}
+
+.json-document ol,
+.json-document ul {
+  list-style: none;
+  margin: 0 0 0 2em;
+  padding: 0;
+}
+
+.json-document ol li,
+.json-document ul li {
+  list-style: none;
+  position: relative;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.less b/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.less
deleted file mode 100644
index df190a0203..0000000000
--- a/webapp/crashstats/crashstats/static/jsonview/jsonview.custom.less
+++ /dev/null
@@ -1,34 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-.json-document {
-    background-color: @black;
-    color: @jsonview-prop;
-    font-family: monospace;
-    font-size: 1.1em;
-    white-space: pre-wrap;
-
-    a,
-    a:hover,
-    a:visited,
-    .json-toggle,
-    .json-dict {
-        color: @jsonview-prop;
-    }
-    .json-literal {
-        color: @primary-light;
-    }
-    .json-string {
-        color: @green;
-        white-space: pre-wrap;
-    }
-    ol, ul {
-        list-style: none;
-        margin: 0 0 0 2em;
-        padding: 0;
-
-        li {
-            list-style: none;
-            position: relative;
-        }
-    }
-}
diff --git a/webapp/crashstats/documentation/static/documentation/css/documentation.css b/webapp/crashstats/documentation/static/documentation/css/documentation.css
new file mode 100644
index 0000000000..4c9f046425
--- /dev/null
+++ b/webapp/crashstats/documentation/static/documentation/css/documentation.css
@@ -0,0 +1,316 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.panel {
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: var(--dark-grey);
+}
+
+.panel nav ul {
+  display: block;
+  margin: 10px;
+}
+
+.panel nav ul li {
+  display: inline-block;
+  margin: 0 3px;
+  padding: 0;
+}
+
+.panel p {
+  margin: 0 0 10px;
+}
+
+.panel h1,
+.panel h2,
+.panel h3 {
+  margin-top: 30px;
+  margin-bottom: 10px;
+}
+
+.panel table {
+  background-color: transparent;
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 20px;
+  table-layout: fixed;
+}
+
+.panel table caption {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: var(--dark-grey);
+}
+
+.panel table thead>tr>th {
+  vertical-align: bottom;
+}
+
+.panel table td,
+.panel table th {
+  padding: 8px;
+  vertical-align: top;
+}
+
+.panel ol {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.panel ol li {
+  list-style: decimal inside;
+  padding-left: 1em;
+}
+
+.panel ol li ol {
+  margin-bottom: 0;
+}
+
+.panel div.field-example {
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
+  border-radius: 3px;
+  margin: 0.5em;
+  word-break: break-all;
+}
+
+.panel div.field-example code {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.panel ul {
+  margin-top: 0;
+  margin-bottom: 10px;
+  list-style: disc inside;
+}
+
+.panel ul li {
+  list-style: disc inside;
+  padding-left: 10px;
+}
+
+.panel ul li ul {
+  list-style: circle inside;
+  margin-left: 15px;
+  margin-bottom: 0;
+}
+
+.panel code {
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
+  border-radius: 3px;
+  margin: 0 2px;
+  padding: 1px 5px;
+  white-space: nowrap;
+}
+
+.panel pre {
+  display: block;
+  padding: 9.5px;
+  margin: 0 0 10px;
+  font-size: 13px;
+  color: var(--dark-grey);
+  word-break: break-all;
+  word-wrap: break-word;
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
+  border-radius: 4px;
+}
+
+.panel pre code {
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  white-space: pre-wrap;
+  background-color: transparent;
+  border-radius: 0;
+  border: none;
+}
+
+.panel pre code .http-verb {
+  color: var(--primary-dark);
+  font-weight: bold;
+}
+
+.panel pre code .url-domain {
+  color: var(--primary);
+}
+
+.panel pre code .query-string {
+  color: var(--primary-dark);
+  font-weight: bold;
+}
+
+.panel .example {
+  border: 1px solid var(--light-grey);
+  border-radius: 4px;
+  background-color: var(--off-white);
+  margin-bottom: 10px;
+}
+
+.panel .example::before {
+  content: url('../../img/3rdparty/silk/bricks.png') ' Example';
+  display: block;
+  background-color: var(--dark-grey);
+  color: #ffffff;
+  font-weight: bold;
+  padding: 4px 10px;
+}
+
+.panel .example pre {
+  border: none;
+  margin: 0;
+}
+
+.panel .example button.try {
+  background-color: var(--green);
+  background-image: none;
+  border: none;
+  box-shadow: none;
+  float: right;
+  font-size: 0.9em;
+  font-weight: bold;
+  padding: 0 2px;
+  margin: 0;
+  min-width: 0;
+}
+
+.panel .example .results {
+  background-color: var(--black);
+  border-top: 1px solid #999;
+}
+
+.panel .example .results .loader {
+  background-image: url('../../img/ajax-loader16x16.gif');
+  height: 16px;
+  margin: auto;
+  width: 16px;
+}
+
+.panel .example .results .jsonview {
+  padding: 5px 10px;
+  overflow: auto;
+  max-height: 400px;
+}
+
+.panel .example .results h2 {
+  background-color: var(--dark-grey);
+  color: #ffffff;
+  font-size: 1em;
+  font-weight: bold;
+  padding: 4px 10px;
+  margin: 0;
+}
+
+.panel .example .results h2 .hide {
+  background-image: url('../../img/3rdparty/silk/cross.png');
+  cursor: pointer;
+  display: inline-block;
+  float: right;
+  height: 16px;
+  margin-top: 2px;
+  padding: 4px;
+  text-indent: -9999px;
+  width: 16px;
+}
+
+.panel .examples p {
+  border-left: 2px solid var(--light-grey);
+  padding-left: 10px;
+}
+
+.parameter header h1 {
+  font-size: 1.4em;
+}
+
+.parameter header .default,
+.parameter header .type {
+  font-style: italic;
+}
+
+.parameter header .default:before {
+  color: grey;
+  font-style: normal;
+  content: ' - default: ';
+}
+
+.parameter .operators,
+.parameter .permissions {
+  font-style: italic;
+}
+
+.parameter .operators:before,
+.parameter .permissions:before {
+  color: grey;
+  font-style: normal;
+}
+
+.parameter .permissions:before {
+  content: 'Requires permissions: ';
+}
+
+.parameter .operators:before {
+  content: 'Operators: ';
+}
+
+.parameter+.parameter {
+  border-top: 1px solid var(--light-grey);
+  padding-top: 10px;
+}
+
+.list-of-fields li {
+  display: inline-block;
+  padding-right: 10px;
+}
+
+ul.main-links {
+  text-align: center;
+}
+
+ul.main-links li {
+  background-color: #ffffff;
+  border: 1px solid var(--light-grey);
+  display: inline-block;
+  margin: 10px;
+  padding: 0;
+}
+
+ul.main-links li:hover {
+  background-color: var(--off-white);
+}
+
+ul.main-links li a {
+  display: inline-block;
+  font-size: 1.2em;
+  height: 140px;
+  line-height: 140px;
+  padding: 0 40px;
+}
+
+#table-of-content {
+  background-color: #ffffff;
+  border: 1px solid var(--light-grey);
+  border-radius: 4px;
+  float: right;
+  margin: 8px 8px 20px 30px;
+  padding: 10px;
+  max-width: 300px;
+  min-width: 20%;
+}
+
+#table-of-content h2 {
+  margin-top: 0px;
+}
+
+.rst {
+  max-width: 70em;
+}
+
+.rst .section {
+  border-left: 5px solid var(--light-grey);
+  padding-left: 1em;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/documentation/static/documentation/css/documentation.less b/webapp/crashstats/documentation/static/documentation/css/documentation.less
deleted file mode 100644
index b2c231687a..0000000000
--- a/webapp/crashstats/documentation/static/documentation/css/documentation.less
+++ /dev/null
@@ -1,313 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-.panel {
-    font-size: 14px;
-    line-height: 1.42857143;
-    color: @dark-grey;
-
-    nav {
-        ul {
-            display: block;
-            margin: 10px;
-
-            li {
-                display: inline-block;
-                margin: 0 3px;
-                padding: 0;
-            }
-        }
-    }
-
-    p {
-        margin: 0 0 10px;
-    }
-    h1, h2, h3 {
-        margin-top: 30px;
-        margin-bottom: 10px;
-    }
-
-    table {
-        background-color: transparent;
-        width: 100%;
-        max-width: 100%;
-        margin-bottom: 20px;
-        table-layout: fixed;
-
-        caption {
-            padding-top: 8px;
-            padding-bottom: 8px;
-            color: @dark-grey;
-        }
-        thead > tr > th {
-            vertical-align: bottom;
-        }
-        td, th {
-            padding: 8px;
-            vertical-align: top;
-        }
-    }
-
-    ol {
-        margin-top: 0;
-        margin-bottom: 10px;
-
-        li {
-            list-style: decimal inside;
-            padding-left: 1em;
-            ol {
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    div.field-example {
-        background-color: @off-white;
-        border: 1px solid @light-grey;
-        border-radius: 3px;
-        margin: 0.5em;
-        word-break: break-all;
-
-        code {
-            // Undo the css values for general <code>
-            margin: 0;
-            padding: 0;
-            border: 0;
-        }
-    }
-
-    ul {
-        margin-top: 0;
-        margin-bottom: 10px;
-        list-style: disc inside;
-
-        li {
-            list-style: disc inside;
-            padding-left: 10px;
-
-            ul {
-                list-style: circle inside;
-                margin-left: 15px;
-                margin-bottom: 0;
-            }
-
-        }
-    }
-
-    code {
-        background-color: @off-white;
-        border: 1px solid @light-grey;
-        border-radius: 3px;
-        margin: 0 2px;
-        padding: 1px 5px;
-        white-space: nowrap;
-    }
-
-    pre {
-        display: block;
-        padding: 9.5px;
-        margin: 0 0 10px;
-        font-size: 13px;
-        color: @dark-grey;
-        word-break: break-all;
-        word-wrap: break-word;
-        background-color: @off-white;
-        border: 1px solid @light-grey;
-        border-radius: 4px;
-
-        code {
-            padding: 0;
-            font-size: inherit;
-            color: inherit;
-            white-space: pre-wrap;
-            background-color: transparent;
-            border-radius: 0;
-            border: none;
-
-            .http-verb {
-                color: @primary-dark;
-                font-weight: bold;
-            }
-            .url-domain {
-                color: @primary;
-            }
-            .query-string {
-                color: @primary-dark;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .example {
-        border: 1px solid @light-grey;
-        border-radius: 4px;
-        background-color: @off-white;
-        margin-bottom: 10px;
-
-        &::before {
-            content: url('../../img/3rdparty/silk/bricks.png') ' Example';
-            display: block;
-            background-color: @dark-grey;
-            color: @white;
-            font-weight: bold;
-            padding: 4px 10px;
-        }
-
-        pre {
-            border: none;
-            margin: 0;
-        }
-
-        button.try {
-            background-color: @green;
-            background-image: none;
-            border: none;
-            box-shadow: none;
-            float: right;
-            font-size: 0.9em;
-            font-weight: bold;
-            padding: 0 2px;
-            margin: 0;
-            min-width: 0;
-        }
-
-        .results {
-            background-color: @black;
-            border-top: 1px solid #999;
-
-            .loader {
-                background-image: url('../../img/ajax-loader16x16.gif');
-                height: 16px;
-                margin: auto;
-                width: 16px;
-            }
-
-            .jsonview {
-                padding: 5px 10px;
-                overflow: auto;
-                max-height: 400px;
-            }
-
-            h2 {
-                background-color: @dark-grey;
-                color: @white;
-                font-size: 1.0em;
-                font-weight: bold;
-                padding: 4px 10px;
-                margin: 0;
-
-                .hide {
-                    background-image: url('../../img/3rdparty/silk/cross.png');
-                    cursor: pointer;
-                    display: inline-block;
-                    float: right;
-                    height: 16px;
-                    margin-top: 2px;
-                    padding: 4px;
-                    text-indent: -9999px;
-                    width: 16px;
-                }
-            }
-        }
-    }
-
-    .examples {
-        p {
-            border-left: 2px solid @light-grey;
-            padding-left: 10px;
-        }
-    }
-}
-
-.parameter {
-    header {
-        h1 {
-            font-size: 1.4em;
-        }
-        .default,
-        .type {
-            font-style: italic;
-        }
-        .default:before {
-            color: grey;
-            font-style: normal;
-            content: ' - default: ';
-        }
-    }
-
-    .operators,
-    .permissions {
-        font-style: italic;
-    }
-    .operators:before,
-    .permissions:before {
-        color: grey;
-        font-style: normal;
-    }
-
-    .permissions:before {
-        content: 'Requires permissions: ';
-    }
-    .operators:before {
-        content: 'Operators: ';
-    }
-
-    & + .parameter {
-        border-top: 1px solid @light-grey;
-        padding-top: 10px;
-    }
-}
-
-.list-of-fields {
-    li {
-        display: inline-block;
-        padding-right: 10px;
-    }
-}
-
-ul.main-links {
-    text-align: center;
-
-    li {
-        background-color: @white;
-        border: 1px solid @light-grey;
-        display: inline-block;
-        margin: 10px;
-        padding: 0;
-
-        &:hover {
-            background-color: @off-white;
-        }
-
-        a {
-            display: inline-block;
-            font-size: 1.2em;
-            height: 140px;
-            line-height: 140px;
-            padding: 0 40px;
-        }
-    }
-}
-
-#table-of-content {
-    background-color: @white;
-    border: 1px solid @light-grey;
-    border-radius: 4px;
-    float: right;
-    margin: 8px 8px 20px 30px;
-    padding: 10px;
-    max-width: 300px;
-    min-width: 20%;
-
-    h2 {
-        margin-top: 0px;
-    }
-}
-
-.rst {
-    max-width: 70em;
-
-    .section {
-        border-left: 5px solid @light-grey;
-        padding-left: 1em;
-    }
-}
diff --git a/webapp/crashstats/profile/static/profile/css/profile.css b/webapp/crashstats/profile/static/profile/css/profile.css
new file mode 100644
index 0000000000..bf3743a0e3
--- /dev/null
+++ b/webapp/crashstats/profile/static/profile/css/profile.css
@@ -0,0 +1,24 @@
+div.page-section {
+  display: inline-block;
+  vertical-align: top;
+  width: 46%;
+}
+.page-section + .page-section {
+  float: right;
+}
+.panel .body:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+.panel .body .links.left {
+  float: left;
+}
+.panel .body .links.right {
+  float: right;
+}
+.panel .body .links li {
+  display: inline-block;
+  font-size: 1.1em;
+  margin: 10px;
+}
diff --git a/webapp/crashstats/profile/static/profile/css/profile.less b/webapp/crashstats/profile/static/profile/css/profile.less
deleted file mode 100644
index fbaa8a7933..0000000000
--- a/webapp/crashstats/profile/static/profile/css/profile.less
+++ /dev/null
@@ -1,32 +0,0 @@
-div.page-section {
-    display: inline-block;
-    vertical-align: top;
-    width: 46%;
-}
-.page-section + .page-section {
-    float: right;
-}
-
-.panel .body {
-    &:after {
-        clear: both;
-        content: "";
-        display: table;
-    }
-
-    .links {
-        &.left {
-            float: left;
-        }
-
-        &.right {
-            float: right;
-        }
-
-        li {
-            display: inline-block;
-            font-size: 1.1em;
-            margin: 10px;
-        }
-    }
-}
diff --git a/webapp/crashstats/settings/base.py b/webapp/crashstats/settings/base.py
index 8968e34e9e..538f801a42 100644
--- a/webapp/crashstats/settings/base.py
+++ b/webapp/crashstats/settings/base.py
@@ -461,10 +461,6 @@ def filter(self, record):
 PIPELINE = {
     "STYLESHEETS": PIPELINE_CSS,
     "JAVASCRIPT": PIPELINE_JS,
-    "LESS_BINARY": _config("LESS_BINARY", default=path("node_modules/.bin/lessc")),
-    "LESS_ARGUMENTS": (
-        "--global-var=\"root-path='" + STATIC_ROOT + "/crashstats/css/'\""
-    ),
     "JS_COMPRESSOR": "pipeline.compressors.uglifyjs.UglifyJSCompressor",
     "UGLIFYJS_BINARY": _config(
         "UGLIFYJS_BINARY", default=path("node_modules/.bin/uglifyjs")
@@ -476,7 +472,6 @@ def filter(self, record):
     # because possibly much code has been built with the assumption that
     # things will be made available globally.
     "DISABLE_WRAPPER": True,
-    "COMPILERS": ("pipeline.compilers.less.LessCompiler",),
     # The pipeline.jinja2.PipelineExtension extension doesn't support
     # automatically rendering any potentional compilation errors into
     # the rendered HTML, so just let it raise plain python exceptions.
diff --git a/webapp/crashstats/settings/bundles.py b/webapp/crashstats/settings/bundles.py
index 9efd905b4d..4fa19c2a44 100644
--- a/webapp/crashstats/settings/bundles.py
+++ b/webapp/crashstats/settings/bundles.py
@@ -57,7 +57,7 @@
         "output_filename": "css/fontawesome.min.css",
     },
     "search": {
-        "source_filenames": ("supersearch/css/search.less",),
+        "source_filenames": ("supersearch/css/search.css",),
         "output_filename": "css/search.min.css",
     },
     "select2": {
@@ -77,11 +77,11 @@
         "output_filename": "css/jquery-ui.min.css",
     },
     "accordion": {
-        "source_filenames": ("crashstats/css/components/accordion.less",),
+        "source_filenames": ("crashstats/css/components/accordion.css",),
         "output_filename": "css/accordion.min.css",
     },
     "bugzilla": {
-        "source_filenames": ("crashstats/css/components/bugzilla.less",),
+        "source_filenames": ("crashstats/css/components/bugzilla.css",),
         "output_filename": "css/bugzilla.min.css",
     },
     "metricsgraphics": {
@@ -92,50 +92,54 @@
         "output_filename": "css/metricsgraphics.min.css",
     },
     "crashstats_base": {
-        "source_filenames": ("crashstats/css/base.less", "status/css/status.less"),
+        "source_filenames": (
+            "crashstats/css/base/variables.css",
+            "crashstats/css/base.css",
+            "status/css/status.css",
+        ),
         "output_filename": "css/crashstats-base.min.css",
     },
     "api_documentation": {
-        "source_filenames": ("api/css/documentation.less",),
+        "source_filenames": ("api/css/documentation.css",),
         "output_filename": "css/api-documentation.min.css",
     },
     "documentation": {
-        "source_filenames": ("documentation/css/documentation.less",),
+        "source_filenames": ("documentation/css/documentation.css",),
         "output_filename": "css/documentation.min.css",
     },
     "jsonview": {
-        "source_filenames": ("jsonview/jsonview.custom.less",),
+        "source_filenames": ("jsonview/jsonview.custom.css",),
         "output_filename": "css/jsonview.min.css",
     },
     "report_index": {
         "source_filenames": (
-            "crashstats/css/pages/report_index.less",
-            "crashstats/css/components/tree.less",
+            "crashstats/css/pages/report_index.css",
+            "crashstats/css/components/tree.css",
         ),
         "output_filename": "css/report-index.min.css",
     },
     "report_pending": {
-        "source_filenames": ("crashstats/css/pages/report_pending.less",),
+        "source_filenames": ("crashstats/css/pages/report_pending.css",),
         "output_filename": "css/report-pending.min.css",
     },
     "product_home": {
-        "source_filenames": ("crashstats/css/pages/product_home.less",),
+        "source_filenames": ("crashstats/css/pages/product_home.css",),
         "output_filename": "css/product-home.min.css",
     },
     "profile": {
-        "source_filenames": ("profile/css/profile.less",),
+        "source_filenames": ("profile/css/profile.css",),
         "output_filename": "css/profile.min.css",
     },
     "signature_report": {
-        "source_filenames": ("signature/css/signature_report.less",),
+        "source_filenames": ("signature/css/signature_report.css",),
         "output_filename": "css/signature-report.min.css",
     },
     "tokens": {
-        "source_filenames": ("tokens/css/home.less",),
+        "source_filenames": ("tokens/css/home.css",),
         "output_filename": "css/tokens.min.css",
     },
     "topcrashers": {
-        "source_filenames": ("topcrashers/css/topcrashers.less",),
+        "source_filenames": ("topcrashers/css/topcrashers.css",),
         "output_filename": "css/topcrashers.min.css",
     },
     "tablesorter": {
diff --git a/webapp/crashstats/signature/static/signature/css/signature_report.css b/webapp/crashstats/signature/static/signature/css/signature_report.css
new file mode 100644
index 0000000000..90387eb219
--- /dev/null
+++ b/webapp/crashstats/signature/static/signature/css/signature_report.css
@@ -0,0 +1,231 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.page-heading p time {
+  font-weight: bold;
+}
+
+#panels-nav {
+  display: block;
+  margin: 20px 0 0 20px;
+}
+
+#panels-nav .tabs li {
+  display: inline-block;
+}
+
+#panels-nav .tabs li a:link,
+#panels-nav .tabs li a:visited {
+  display: inline-block;
+  background-color: var(--alpha-grey2);
+  border: none;
+  color: var(--dark-grey);
+  font-size: 1.1em;
+  padding: 0.3em 0.8em;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 8px 8px 0 0;
+}
+
+#panels-nav .tabs li a:hover {
+  background-color: var(--grey);
+}
+
+#panels-nav .tabs li a.selected {
+  background-color: var(--primary);
+  color: #ffffff;
+}
+
+/* By default, hide all panels except the loading one and panels inside a panel. */
+.panel {
+  display: none;
+}
+
+.panel .panel,
+#loading-panel {
+  display: block;
+}
+
+#mainbody .tab-panel {
+  margin-top: 0;
+  position: relative;
+}
+
+#mainbody .tab-panel>header {
+  display: none;
+}
+
+.display-toggle-filters {
+  float: right;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.display-toggle-filters:before {
+  content: url('../../img/3rdparty/silk/arrow_bottom.png');
+  display: inline-block;
+  height: 16px;
+  padding: 5px;
+  vertical-align: middle;
+  width: 16px;
+}
+
+.display-toggle-filters.show:before {
+  content: url('../../img/3rdparty/silk/resultset_next.png');
+}
+
+#search-params-fieldset {
+  width: 100%;
+}
+
+th.crash-id {
+  min-width: 235px;
+}
+
+a.crash-id {
+  font-family: monospace;
+}
+
+.controls {
+  text-align: center;
+  position: relative;
+}
+
+.controls button {
+  cursor: pointer;
+  margin-left: 1em;
+  padding: 0.7em 1em;
+  vertical-align: middle;
+}
+
+.controls hr {
+  background-color: var(--light-grey);
+  border-color: var(--light-grey);
+  color: var(--light-grey);
+  margin-top: 15px;
+  width: 60%;
+}
+
+.reports-panel .controls input {
+  width: 800px;
+}
+
+section.aggregations-panel>.body>.content.loaded,
+section.summary-panel>.body>.content.loaded {
+  column-count: 2;
+}
+
+section.aggregations-panel .panel,
+section.summary-panel .panel {
+  display: inline-block;
+  vertical-align: top;
+  width: 95%;
+  margin-left: 2.4%;
+  margin-right: 2.4%;
+}
+
+section.aggregations-panel .controls .loader,
+section.summary-panel .controls .loader {
+  background-image: url('../../img/ajax-loader16x16.gif');
+  display: inline-block;
+  height: 16px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 16px;
+}
+
+section.aggregations-panel .controls .fields-list,
+section.summary-panel .controls .fields-list {
+  width: 30%;
+}
+
+section.aggregations-panel .crash-type-indicators-panel,
+section.summary-panel .crash-type-indicators-panel {
+  background-color: var(--alpha-grey1);
+  padding: 15px;
+}
+
+section.aggregations-panel .crash-type-indicators-panel.startup-crash-warning,
+section.summary-panel .crash-type-indicators-panel.startup-crash-warning {
+  background-color: #ffe900;
+}
+
+section.aggregations-panel .crash-type-indicators-panel .crash-type-indicator-container,
+section.summary-panel .crash-type-indicators-panel .crash-type-indicator-container {
+  align-items: center;
+  display: flex;
+}
+
+section.aggregations-panel .crash-type-indicators-panel .crash-type-indicator-container img,
+section.summary-panel .crash-type-indicators-panel .crash-type-indicator-container img {
+  margin-right: 5px;
+}
+
+section.summary-panel .panel header {
+  cursor: pointer;
+}
+
+section.summary-panel .panel .content {
+  display: none;
+}
+
+section.graphs-panel .controls .fields-list {
+  width: 30%;
+}
+
+section.graphs-panel .legend {
+  width: 100%;
+  text-align: center;
+}
+
+section.correlations-panel .controls .products-list,
+section.correlations-panel .controls .channels-list {
+  width: 15%;
+}
+
+section.correlations-panel .controls .products-list {
+  margin-right: 5em;
+}
+
+section.correlations-panel .controls label {
+  margin-right: 0.2em;
+}
+
+.tab-inner-panel .options {
+  display: block;
+  height: 16px;
+  text-indent: -9999px;
+  width: 16px;
+}
+
+.tab-inner-panel .options.delete {
+  background-image: url('/static/img/3rdparty/silk/cross.png');
+  position: relative;
+  top: 1px;
+}
+
+.tab-inner-panel .options.show {
+  background-image: url('/static/img/3rdparty/silk/resultset_previous.png');
+}
+
+.tab-inner-panel .options.hide {
+  background-image: url('/static/img/3rdparty/silk/arrow_bottom.png');
+}
+
+.tab-inner-panel .options:hover {
+  cursor: pointer;
+}
+
+.tab-inner-panel .body {
+  margin: 1em 0 0;
+  padding: 0;
+}
+
+.bugzilla-panel .bug_ids_expanded_list {
+  border: none;
+  display: block;
+  position: inherit;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/signature/static/signature/css/signature_report.less b/webapp/crashstats/signature/static/signature/css/signature_report.less
deleted file mode 100644
index f54f848453..0000000000
--- a/webapp/crashstats/signature/static/signature/css/signature_report.less
+++ /dev/null
@@ -1,237 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-.page-heading {
-    p {
-        time {
-            font-weight: bold;
-        }
-    }
-}
-
-#panels-nav {
-    display: block;
-    margin: 20px 0 0 20px;
-
-    .tabs {
-        li {
-            display: inline-block;
-
-            a:link,
-            a:visited {
-                display: inline-block;
-                background-color: @dark-tan;
-                border: none;
-                color: @dark-grey;
-                font-size: 1.1em;
-                padding: .3em .8em;
-                text-decoration: none;
-                text-align: center;
-                border-radius: 8px 8px 0 0;
-            }
-            a:hover {
-                background-color: @grey;
-            }
-            a.selected {
-                background-color: @primary;
-                color: @white;
-            }
-        }
-    }
-}
-
-/* By default, hide all panels except the loading one and panels inside a panel. */
-.panel {
-    display: none;
-}
-.panel .panel,
-#loading-panel {
-    display: block;
-}
-#mainbody .tab-panel {
-    margin-top: 0;
-    position: relative;
-
-    > header {
-        display: none;
-    }
-}
-
-.display-toggle-filters {
-    float: right;
-    font-style: normal;
-    font-weight: bold;
-
-    &:before {
-        content: url('../../img/3rdparty/silk/arrow_bottom.png');
-        display: inline-block;
-        height: 16px;
-        padding: 5px;
-        vertical-align: middle;
-        width: 16px;
-    }
-    &.show:before {
-        content: url('../../img/3rdparty/silk/resultset_next.png');
-    }
-}
-
-#search-params-fieldset {
-    width: 100%;
-}
-
-th.crash-id {
-    min-width: 235px;
-}
-a.crash-id {
-    font-family: monospace;
-}
-
-.controls {
-    text-align: center;
-    position: relative;
-
-    button {
-        cursor: pointer;
-        margin-left: 1em;
-        padding: 0.7em 1em;
-        vertical-align: middle;
-    }
-
-    hr {
-        background-color: @light-grey;
-        border-color: @light-grey;
-        color: @light-grey;
-        margin-top: 15px;
-        width: 60%;
-    }
-}
-
-.reports-panel {
-    .controls {
-        input {
-            width: 800px;
-        }
-    }
-}
-
-section.aggregations-panel,
-section.summary-panel {
-    > .body > .content.loaded {
-        column-count: 2;
-    }
-    .panel {
-        display: inline-block;
-        vertical-align: top;
-        width: 95%;
-        margin-left: 2.4%;
-        margin-right: 2.4%;
-    }
-
-    .controls {
-        .loader {
-            background-image: url('../../img/ajax-loader16x16.gif');
-            display: inline-block;
-            height: 16px;
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 16px;
-        }
-
-        .fields-list {
-            width: 30%;
-        }
-    }
-
-    .crash-type-indicators-panel {
-        background-color: @grey-90-a10;
-        padding: 15px;
-
-        &.startup-crash-warning {
-            background-color: @yellow-50;
-        }
-
-        .crash-type-indicator-container {
-            align-items: center;
-            display: flex;
-
-            img {
-                margin-right: 5px;
-            }
-        }
-    }
-}
-section.summary-panel .panel {
-    header {
-        cursor: pointer;
-    }
-    .content {
-        display: none;
-    }
-}
-
-section.graphs-panel {
-    .controls {
-        .fields-list {
-            width: 30%;
-        }
-    }
-
-    .legend {
-        width: 100%;
-        text-align: center;
-    }
-}
-
-section.correlations-panel {
-    .controls {
-        .products-list,
-        .channels-list {
-            width: 15%;
-        }
-        .products-list {
-            margin-right: 5em;
-        }
-
-        label {
-            margin-right: 0.2em;
-        }
-    }
-}
-
-.tab-inner-panel {
-    .options {
-        display: block;
-        height: 16px;
-        text-indent: -9999px;
-        width: 16px;
-
-        &.delete {
-            background-image: url('@{image-path}/3rdparty/silk/cross.png');
-            position: relative;
-            top: 1px;
-        }
-        &.show {
-            background-image: url('@{image-path}/3rdparty/silk/resultset_previous.png');
-        }
-        &.hide {
-            background-image: url('@{image-path}/3rdparty/silk/arrow_bottom.png');
-        }
-
-        &:hover {
-            cursor: pointer;
-        }
-    }
-    .body {
-        margin: 1em 0 0;
-        padding: 0;
-    }
-}
-
-.bugzilla-panel {
-    .bug_ids_expanded_list {
-        border: none;
-        display: block;
-        position: inherit;
-        width: 100%;
-    }
-}
diff --git a/webapp/crashstats/status/static/status/css/status.css b/webapp/crashstats/status/static/status/css/status.css
new file mode 100644
index 0000000000..e707e34a10
--- /dev/null
+++ b/webapp/crashstats/status/static/status/css/status.css
@@ -0,0 +1,53 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ 
+.status-message {
+  position: relative;
+  background-color: var(--light-grey);
+  border: none;
+  color: #ffffff;
+  font-size: 1.1em;
+  padding: 1em 3.5rem;
+  line-height: 1.5em;
+}
+.status-message span {
+  font-style: italic;
+}
+.status-message:before {
+  padding: 4px 4px 0 0;
+  vertical-align: middle;
+  position: absolute;
+  left: 1rem;
+}
+.status-message.severity-info {
+  background-color: #ededf0;
+  color: #0c0c0d;
+}
+.status-message.severity-info a {
+  color: var(--primary-medium);
+}
+.status-message.severity-info:before {
+  content: url("/static/img/3rdparty/silk/information.png");
+}
+.status-message.severity-warning {
+  background-color: #ffe900;
+  color: #3e2800;
+}
+.status-message.severity-warning a {
+  color: var(--primary-medium);
+}
+.status-message.severity-warning:before {
+  content: url("/static/img/3rdparty/silk/error.png");
+}
+.status-message.severity-critical {
+  background-color: var(--red);
+}
+.status-message.severity-critical,
+.status-message.severity-critical a {
+  color: #ffffff;
+}
+.status-message.severity-critical:before {
+  content: url("/static/img/3rdparty/silk/exclamation.png");
+}
diff --git a/webapp/crashstats/status/static/status/css/status.less b/webapp/crashstats/status/static/status/css/status.less
deleted file mode 100644
index c6e1e369cc..0000000000
--- a/webapp/crashstats/status/static/status/css/status.less
+++ /dev/null
@@ -1,59 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-.status-message {
-    position: relative;
-    background-color: @light-grey;
-    border: none;
-    color: @white;
-    font-size: 1.1em;
-    padding: 1em 3.5rem;
-    line-height: 1.5em;
-
-    span {
-        font-style: italic;
-    }
-
-    &:before {
-        padding: 4px 4px 0 0;
-        vertical-align: middle;
-        position: absolute;
-        left: 1rem;
-    }
-
-    &.severity-info {
-        background-color: @grey-20;
-        color: @grey-90;
-
-        a {
-            color: @primary-medium;
-        }
-
-        &:before {
-            content: url("@{image-path}/3rdparty/silk/information.png");
-        }
-    }
-    &.severity-warning {
-        background-color: @yellow-50;
-        color: @yellow-90;
-
-        a {
-            color: @primary-medium;
-        }
-
-        &:before {
-            content: url("@{image-path}/3rdparty/silk/error.png");
-        }
-    }
-    &.severity-critical {
-        background-color: @red-60;
-
-        &,
-        a {
-            color: @white;
-        }
-
-        &:before {
-            content: url("@{image-path}/3rdparty/silk/exclamation.png");
-        }
-    }
-}
diff --git a/webapp/crashstats/supersearch/static/supersearch/css/search.css b/webapp/crashstats/supersearch/static/supersearch/css/search.css
new file mode 100644
index 0000000000..e0d442a495
--- /dev/null
+++ b/webapp/crashstats/supersearch/static/supersearch/css/search.css
@@ -0,0 +1,249 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+#search-form {
+  background: var(--light-grey);
+  margin-top: 1em;
+  padding: 2em;
+  /* By default hide all elements of the search form until it is fully loaded. */
+}
+
+#search-form form {
+  display: none;
+}
+
+#search-form .form-controls {
+  float: right;
+}
+
+#search-form .form-controls button {
+  cursor: pointer;
+  padding: 6px 15px;
+  font-size: 1.2em;
+}
+
+#search-form .form-controls button:before {
+  padding-right: 8px;
+  vertical-align: middle;
+}
+
+#search-form .form-controls #search-button:before {
+  content: url("/static/img/3rdparty/silk/magnifier.png");
+}
+
+#search-form .form-controls .new-line:before {
+  content: url("/static/img/3rdparty/silk/application_form_add.png");
+}
+
+#search-form .form-controls .customize:before {
+  content: url("/static/img/3rdparty/silk/wrench.png");
+}
+
+#search-form #simple-search,
+#search-form .date-filters {
+  text-align: center;
+  justify-content: space-between;
+}
+
+#search-form #simple-search>div,
+#search-form .date-filters>div {
+  width: 24%;
+  display: inline-block;
+}
+
+#search-form #simple-search>div label,
+#search-form .date-filters>div label {
+  display: block;
+  font-weight: bold;
+}
+
+#search-form .date-filters {
+  float: left;
+  margin: 0;
+  padding-bottom: 0px;
+  width: 49.33%;
+}
+
+#search-form .date-filters>div {
+  width: 48.66%;
+}
+
+#search-form .date-shortcuts {
+  clear: left;
+  font-style: italic;
+  margin: 0 0 inherit 0;
+  text-align: center;
+  width: 49.33%;
+}
+
+#search-form .date-shortcuts a {
+  color: var(--dark-grey);
+}
+
+#search-form .date-shortcuts a.selected {
+  text-decoration: none;
+}
+
+#search-form fieldset {
+  padding: 10px 0;
+  width: 100%;
+}
+
+#search-form fieldset .select2-container {
+  margin-right: 10px;
+}
+
+#search-form select {
+  margin: 20px;
+  width: 20em;
+}
+
+#search-form .value {
+  width: 30em;
+}
+
+#search-form .dynamic-line-delete {
+  float: left;
+  display: inline-block;
+  margin: 5px 10px 0 0;
+  vertical-align: middle;
+  background-image: url("/static/img/3rdparty/silk/delete.png");
+  height: 16px;
+  width: 16px;
+  text-indent: -9999px;
+}
+
+#search-form #advanced-search fieldset fieldset {
+  border-top: 1px solid var(--light-grey);
+}
+
+#search-form fieldset.options h4 {
+  cursor: pointer;
+}
+
+#search-form fieldset.options h4 span {
+  color: var(--dark-grey);
+  text-transform: uppercase;
+  font-size: 0.7em;
+  font-weight: bold;
+}
+
+#search-form fieldset.options h4 .hide {
+  display: none;
+}
+
+#search-form fieldset.options h4+div {
+  display: none;
+}
+
+#search-form fieldset.options label {
+  display: inline-block;
+  min-width: 100px;
+}
+
+#search-form fieldset.options input[name=_facets],
+#search-form fieldset.options input[name=_sort],
+#search-form fieldset.options input[name=_columns_fake] {
+  display: inline;
+  width: 500px;
+}
+
+#search-form fieldset.options input[name=search_indices] {
+  display: inline;
+  width: 80%;
+}
+
+#search-form fieldset.options div.public-api-url {
+  margin: 10px 0;
+}
+
+#search-form fieldset.options input[name=_public_api_url] {
+  padding: 5px 8px;
+  width: 100%;
+}
+
+#search-form textarea {
+  height: 300px;
+  width: 600px;
+}
+
+#search_results table caption {
+  font-size: 1.7rem;
+  margin: 0 0 1em 0;
+}
+
+#search_results .external-link {
+  background: transparent url("/static/img/icons/external.png") left top no-repeat;
+  display: inline-block;
+  padding-left: 17px;
+}
+
+#search_results .term {
+  background: transparent url("/static/img/icons/add.png") left top no-repeat;
+  display: inline-block;
+  padding-left: 13px;
+}
+
+#search_results th.crash-id {
+  width: 235px;
+}
+
+#search_results a.crash-id {
+  font-family: monospace;
+}
+
+#search_results .error li {
+  color: var(--black);
+  font-weight: bold;
+  list-style: inside none disc;
+}
+
+#search_results .error li li {
+  font-weight: normal;
+  list-style: inside none circle;
+  margin-left: 20px;
+}
+
+.facet .column-narrow {
+  width: 10%;
+}
+
+.facet .facet-term {
+  width: 50%;
+}
+
+.loader {
+  background-image: url("/static/img/ajax-loader.gif");
+  height: 19px;
+  margin: auto;
+  width: 220px;
+}
+
+/* Custom Query styles */
+.custom-search #editor {
+  border: 1px solid lightgray;
+  height: 400px;
+  margin: 0;
+  width: 100%;
+}
+
+.custom-search fieldset.options input#search_indices {
+  width: 100%;
+}
+
+.custom-search .json-results {
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
+  font-size: var(--base-font-size);
+  height: 500px;
+  width: 100%;
+}
+
+.custom-search code {
+  background-color: var(--off-white);
+  border: 1px solid var(--light-grey);
+  border-radius: 3px;
+  margin: 0 2px;
+  padding: 1px 5px;
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/supersearch/static/supersearch/css/search.less b/webapp/crashstats/supersearch/static/supersearch/css/search.less
deleted file mode 100644
index 19b0629a9a..0000000000
--- a/webapp/crashstats/supersearch/static/supersearch/css/search.less
+++ /dev/null
@@ -1,248 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-#search-form {
-    background: @light-grey;
-    margin-top: 1em;
-    padding: 2em;
-
-    /* By default hide all elements of the search form until it is fully loaded. */
-    form {
-        display: none;
-    }
-
-    .form-controls {
-        float: right;
-
-        button {
-            cursor: pointer;
-            padding: 6px 15px;
-            font-size: 1.2em;
-        }
-        button:before {
-            padding-right: 8px;
-            vertical-align: middle;
-        }
-        #search-button:before {
-            content: url("@{image-path}/3rdparty/silk/magnifier.png");
-        }
-        .new-line:before {
-            content: url("@{image-path}/3rdparty/silk/application_form_add.png");
-        }
-        .customize:before {
-            content: url("@{image-path}/3rdparty/silk/wrench.png");
-        }
-    }
-
-    #simple-search,
-    .date-filters {
-        text-align: center;
-        justify-content: space-between;
-
-        > div {
-            width: 24%;
-            display: inline-block;
-
-            label {
-                display: block;
-                font-weight: bold;
-            }
-        }
-    }
-
-    .date-filters {
-        float: left;
-        margin: 0;
-        padding-bottom: 0px;
-        width: 49.33%;
-
-        > div {
-            width: 48.66%;
-        }
-    }
-
-    .date-shortcuts {
-        clear: left;
-        font-style: italic;
-        margin: 0 0 inherit 0;
-        text-align: center;
-        width: 49.33%;
-
-        a {
-            color: @dark-grey;
-
-            &.selected {
-                text-decoration: none;
-            }
-        }
-    }
-
-    fieldset {
-        padding: 10px 0;
-        width: 100%;
-
-        .select2-container {
-            margin-right: 10px;
-        }
-    }
-    select {
-        margin: 20px;
-        width: 20em;
-    }
-
-    .value {
-        width: 30em;
-    }
-
-    .dynamic-line-delete {
-        float: left;
-        display: inline-block;
-        margin: 5px 10px 0 0;
-        vertical-align: middle;
-        background-image: url("@{image-path}/3rdparty/silk/delete.png");
-        height: 16px;
-        width: 16px;
-        text-indent: -9999px;
-    }
-
-    #advanced-search {
-        fieldset fieldset {
-            border-top: 1px solid @light-grey;
-        }
-    }
-
-    fieldset.options {
-        h4 {
-            cursor: pointer;
-
-            span {
-                color: @dark-grey;
-                text-transform: uppercase;
-                font-size: 0.7em;
-                font-weight: bold;
-            }
-            .hide {
-                display: none;
-            }
-        }
-
-        h4 + div {
-            display: none;
-        }
-
-        label {
-            display: inline-block;
-            min-width: 100px;
-        }
-
-        input[name=_facets],
-        input[name=_sort],
-        input[name=_columns_fake] {
-            display: inline;
-            width: 500px;
-        }
-
-        input[name=search_indices] {
-            display: inline;
-            width: 80%;
-        }
-
-        div.public-api-url {
-            margin: 10px 0;
-        }
-        input[name=_public_api_url] {
-            padding: 5px 8px;
-            width: 100%;
-        }
-    }
-
-    textarea {
-        height: 300px;
-        width: 600px;
-    }
-}
-
-#search_results {
-    table {
-        caption {
-            font-size: 1.7rem;
-            margin: 0 0 1em 0;
-        }
-    }
-
-    .external-link {
-        background: transparent url("@{image-path}/icons/external.png") left top no-repeat;
-        display: inline-block;
-        padding-left: 17px;
-    }
-
-    .term {
-        background: transparent url("@{image-path}/icons/add.png") left top no-repeat;
-        display: inline-block;
-        padding-left: 13px;
-    }
-
-    th.crash-id {
-        width: 235px;
-    }
-
-    a.crash-id {
-        font-family: monospace;
-    }
-
-    .error {
-        li {
-            color: @black;
-            font-weight: bold;
-            list-style: inside none disc;
-
-            li {
-                font-weight: normal;
-                list-style: inside none circle;
-                margin-left: 20px;
-            }
-        }
-    }
-}
-.facet {
-    .column-narrow {
-        width: 10%;
-    }
-    .facet-term {
-        width: 50%;
-    }
-}
-
-.loader {
-    background-image: url("@{image-path}/ajax-loader.gif");
-    height: 19px;
-    margin: auto;
-    width: 220px;
-}
-
-/* Custom Query styles */
-.custom-search {
-    #editor {
-        border: 1px solid lightgray;
-        height: 400px;
-        margin: 0;
-        width: 100%;
-    }
-    fieldset.options input#search_indices {
-        width: 100%;
-    }
-    .json-results {
-        font-family: "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
-        font-size: 12px;
-        height: 500px;
-        width: 100%;
-    }
-
-    code {
-        background-color: @off-white;
-        border: 1px solid @light-grey;
-        border-radius: 3px;
-        margin: 0 2px;
-        padding: 1px 5px;
-        white-space: nowrap;
-    }
-}
diff --git a/webapp/crashstats/tokens/static/tokens/css/home.css b/webapp/crashstats/tokens/static/tokens/css/home.css
new file mode 100644
index 0000000000..8c232382c6
--- /dev/null
+++ b/webapp/crashstats/tokens/static/tokens/css/home.css
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+.errorlist {
+  color: var(--red);
+}
+
+textarea {
+  height: 60px;
+  width: 400px;
+}
+
+code,
+pre {
+  background-color: var(--light-grey);
+  border: 1px solid var(--grey);
+}
+
+p.code code {
+  font-size: 1.5em;
+  padding: 6px;
+}
+
+p.example code,
+pre.example {
+  font-size: 1.2em;
+  padding: 4px;
+}
+
+pre {
+  line-height: 1.3em;
+}
+
+p.code .rest-hidden {
+  display: none;
+}
+
+div.token {
+  border-bottom: 1px solid var(--grey);
+  padding: 25px 5px;
+}
+
+table.meta-data th {
+  vertical-align: top;
+}
+
+table.meta-data th,
+table.meta-data td {
+  padding: 2px 6px;
+  border: 0;
+}
+
+.is-expired {
+  color: var(--red);
+  font-weight: bold;
+  font-size: 110%;
+  margin: 5px;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/tokens/static/tokens/css/home.less b/webapp/crashstats/tokens/static/tokens/css/home.less
deleted file mode 100644
index 5898ca4412..0000000000
--- a/webapp/crashstats/tokens/static/tokens/css/home.less
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "@{root-path}/base/variables.less";
-
-.errorlist {
-    color: @red;
-}
-
-textarea {
-    height: 60px;
-    width: 400px;
-}
-
-code, pre {
-    background-color: @light-grey;
-    border: 1px solid @grey;
-}
-p.code code {
-    font-size: 1.5em;
-    padding: 6px;
-}
-p.example code,
-pre.example {
-    font-size: 1.2em;
-    padding: 4px;
-}
-pre {
-    line-height: 1.3em;
-}
-p.code .rest-hidden {
-    display: none;
-}
-
-div.token {
-    border-bottom: 1px solid @grey;
-    padding: 25px 5px;
-}
-
-table.meta-data th {
-    vertical-align: top;
-}
-table.meta-data th,
-table.meta-data td {
-    padding: 2px 6px;
-    border: 0;
-}
-.is-expired {
-    color: @red;
-    font-weight: bold;
-    font-size: 110%;
-    margin: 5px;
-}
diff --git a/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css b/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css
new file mode 100644
index 0000000000..d94f96fe9a
--- /dev/null
+++ b/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.css
@@ -0,0 +1,176 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ 
+#topcrashers h1 {
+  font-size: 2em;
+  font-weight: normal;
+  clear: both;
+}
+
+#topcrashers table {
+  margin: 0.3em 0 0.5em;
+  border: 1px solid var(--light-grey);
+  width: 95%;
+}
+
+#topcrashers th {
+  background: url("/static/img/slate/white-grad.png") repeat-x scroll bottom left #ffffff;
+  padding: 0.1em 0.5em;
+}
+
+#topcrashers td {
+  padding: 0.5em;
+}
+
+#topcrashers .sig {
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#topcrashers .count {
+  text-align: center;
+}
+
+.signature-icons {
+  float: right;
+}
+
+/* duration and os selectors on top crashers */
+.tc-selector-heading {
+  margin-right: 0.7em;
+  font-weight: bold;
+}
+
+.tc-filters-block+ul {
+  clear: both;
+}
+
+.tc-filter {
+  float: left;
+  margin: 0.3em 1em 1em 0;
+  padding: 0;
+}
+
+.tc-filter a:link,
+.tc-filter a:visited {
+  display: inline-block;
+  background-color: var(--light-grey);
+  color: var(--dark-grey);
+  margin-right: 0.2em;
+  padding: 0.3em;
+  min-width: 65px;
+  text-decoration: none;
+  text-align: center;
+  border-radius: 6px;
+}
+
+.tc-filter a:hover {
+  background-color: var(--primary);
+  color: #ffffff;
+}
+
+.tc-filter a.selected {
+  background-color: var(--primary);
+  color: #ffffff;
+}
+
+.tc-filter li {
+  display: inline;
+}
+
+.tc-duration-days a:link,
+.tc-result-count a:link,
+.tc-duration-days a:visited,
+.tc-result-count a:visited {
+  min-width: 30px;
+}
+
+#buildid-graph {
+  width: 600px;
+  height: 200px;
+}
+
+/* top crashers no results */
+.no-results {
+  clear: both;
+  padding: 1em;
+  display: block;
+  margin: 0 auto 1em;
+  text-align: center;
+  width: 50%;
+  -webkit-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  -moz-box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+  box-shadow: 0px 1px 4px 0 var(--alpha-grey1);
+}
+
+.no-results time {
+  font-weight: 900;
+}
+
+.hide {
+  display: none;
+}
+
+.startup {
+  margin-right: 1px;
+}
+
+#signature-list {
+  clear: both;
+}
+
+#signature-list button {
+  float: right;
+}
+
+#signature-list td {
+  width: 4%;
+}
+
+#signature-list td.signature-column {
+  width: 32%;
+}
+
+.signature-popup {
+  background-color: #ffffff;
+  border: solid 1px #AAA;
+  width: auto;
+}
+
+.signature-preview {
+  float: left;
+  display: block;
+  width: 420px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.moving-up,
+.moving-down {
+  position: absolute;
+  left: 6px;
+  display: inline-block;
+  color: #ffffff;
+  margin-top: -8px;
+  padding: 1.4em 0.5em 0.5em;
+  width: 26px;
+  text-align: center;
+  -webkit-border-radius: 6px 0 0 6px;
+  -moz-border-radius: 6px 0 0 6px;
+  border-radius: 6px 0 0 6px;
+}
+
+.moving-up {
+  background: var(--red) url("../../img/up_arrow.png") 9px 4px no-repeat;
+}
+
+.moving-down {
+  background: var(--green) url("../../img/down_arrow.png") 9px 4px no-repeat;
+}
+
+.label {
+  background-color: var(--pink);
+  border-radius: 4px;
+  padding: 2px 4px;
+}
\ No newline at end of file
diff --git a/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.less b/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.less
deleted file mode 100644
index 8e64c8c1a0..0000000000
--- a/webapp/crashstats/topcrashers/static/topcrashers/css/topcrashers.less
+++ /dev/null
@@ -1,156 +0,0 @@
-@import "@{root-path}/base/variables.less";
-@import "@{root-path}/base/mixins.less";
-
-#topcrashers {
-    h1 {
-        font-size: 2em;
-        font-weight: normal;
-        clear: both;
-    }
-    table {
-        margin: .3em 0 .5em;
-        border: 1px solid @light-grey;
-        width: 95%;
-    }
-    th {
-        background: url("@{image-path}/slate/white-grad.png") repeat-x scroll bottom left @white;
-        padding: .1em .5em;
-    }
-    td {
-        padding: .5em;
-    }
-    .sig {
-        overflow: hidden;
-        white-space: nowrap;
-    }
-    .count {
-        text-align: center;
-    }
-}
-.signature-icons {
-    float: right;
-}
-
-/* duration and os selectors on top crashers */
-.tc-selector-heading {
-    margin-right: .7em;
-    font-weight: bold;
-}
-.tc-filters-block + ul {
-    clear: both;
-}
-.tc-filter {
-    float: left;
-    margin: 0.3em 1em 1em 0;
-    padding: 0;
-    a:link,
-    a:visited {
-        display: inline-block;
-        background-color: @light-grey;
-        color: @dark-grey;
-        margin-right: .2em;
-        padding: .3em;
-        min-width: 65px;
-        text-decoration: none;
-        text-align: center;
-        border-radius: 6px;
-    }
-    a:hover {
-        background-color: @primary;
-        color: @white;
-    }
-    a.selected {
-        background-color: @primary;
-        color: @white;
-    }
-    li {
-        display: inline;
-    }
-}
-.tc-duration-days,
-.tc-result-count {
-    a {
-        &:link,
-        &:visited {
-            min-width: 30px;
-        }
-    }
-}
-
-
-#buildid-graph {
-    width: 600px;
-    height: 200px;
-}
-
-/* top crashers no results */
-.no-results {
-    clear: both;
-    padding: 1em;
-    display: block;
-    margin: 0 auto 1em;
-    text-align: center;
-    width: 50%;
-    .shadow(0px, 1px, 4px, 0, @grey-90-a10);
-
-    time {
-        font-weight: 900;
-    }
-}
-
-.hide {
-    display: none;
-}
-.startup {
-    margin-right: 1px;
-}
-
-#signature-list {
-    clear: both;
-    button {
-        float: right;
-    }
-    td {
-        width: 4%;
-    }
-    td.signature-column {
-        width: 32%;
-    }
-}
-.signature-popup {
-    background-color: @white;
-    border: solid 1px #AAA;
-    width: auto;
-}
-.signature-preview {
-    float: left;
-    display: block;
-    width: 420px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.moving-up,
-.moving-down {
-    position: absolute;
-    left: 6px;
-    display: inline-block;
-    color: @white;
-    margin-top: -8px;
-    padding: 1.4em 0.5em 0.5em;
-    width: 26px;
-    text-align: center;
-    .rounded-corners(6px, 0, 0, 6px);
-}
-.moving-up {
-    background: @red url("../../img/up_arrow.png") 9px 4px no-repeat;
-}
-.moving-down {
-    background: @green url("../../img/down_arrow.png") 9px 4px no-repeat;
-}
-
-.label {
-    background-color: @pink;
-    border-radius: 4px;
-    padding: 2px 4px;
-}
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 96170cdda7..827a3fdd4e 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -31,7 +31,6 @@
         "eslint-config-prettier": "6.15.0",
         "eslint-plugin-prettier": "3.1.4",
         "graceful-fs": "4.2.4",
-        "less": "3.12.2",
         "prettier": "2.1.2",
         "uglify-js": "3.11.5"
       }
@@ -693,19 +692,6 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -1109,19 +1095,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "image-size": "bin/image-size.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1255,30 +1228,6 @@
         "node": "*"
       }
     },
-    "node_modules/less": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
-      "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.10.0"
-      },
-      "bin": {
-        "lessc": "bin/lessc"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "native-request": "^1.0.5",
-        "source-map": "~0.6.0"
-      }
-    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -1321,30 +1270,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/metrics-graphics": {
       "version": "2.15.6",
       "resolved": "https://registry.npmjs.org/metrics-graphics/-/metrics-graphics-2.15.6.tgz",
@@ -1609,19 +1534,6 @@
         "d3-transition": "1"
       }
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1669,13 +1581,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "node_modules/native-request": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
-      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -1751,16 +1656,6 @@
       "resolved": "https://registry.npmjs.org/photon-colors/-/photon-colors-3.3.2.tgz",
       "integrity": "sha512-xCeL7J2F8cjM00zQZEZawHAGnrSOM509RbanL4c8hvrV8n19V/wwdzydX6rSUEtLYj4nx4OvhmKC4/vujo9f/Q=="
     },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -1813,13 +1708,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/punycode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.2.0.tgz",
@@ -1969,16 +1857,6 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -2085,12 +1963,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2758,16 +2630,6 @@
         "ansi-colors": "^4.1.1"
       }
     },
-    "errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "prr": "~1.0.1"
-      }
-    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -3072,13 +2934,6 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
       "dev": true
     },
-    "image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
-      "dev": true,
-      "optional": true
-    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3188,22 +3043,6 @@
       "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.1.2.tgz",
       "integrity": "sha512-6fEObA9he4vcCpz+dt9b5DjqhqvSsz9XMfNPU6/IyKHDQpCHsYayPRkWmAZG61lZC9XVJcjsQNAiUUd0NpskeQ=="
     },
-    "less": {
-      "version": "3.12.2",
-      "resolved": "https://registry.npmjs.org/less/-/less-3.12.2.tgz",
-      "integrity": "sha512-+1V2PCMFkL+OIj2/HrtrvZw0BC0sYLMICJfbQjuj/K8CEnlrFX6R5cKKgzzttsZDHyxQNL1jqMREjKN3ja/E3Q==",
-      "dev": true,
-      "requires": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "native-request": "^1.0.5",
-        "source-map": "~0.6.0",
-        "tslib": "^1.10.0"
-      }
-    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -3237,26 +3076,6 @@
         "yallist": "^4.0.0"
       }
     },
-    "make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
     "metrics-graphics": {
       "version": "2.15.6",
       "resolved": "https://registry.npmjs.org/metrics-graphics/-/metrics-graphics-2.15.6.tgz",
@@ -3506,13 +3325,6 @@
         }
       }
     },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "optional": true
-    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3548,13 +3360,6 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
-    "native-request": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.0.tgz",
-      "integrity": "sha512-uZ5rQaeRn15XmpgE0xoPL8YWqcX90VtCFglYwAgkvKM5e8fog+vePLAhHxuuv/gRkrQxIeh5U3q9sMNUrENqWw==",
-      "dev": true,
-      "optional": true
-    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -3615,13 +3420,6 @@
       "resolved": "https://registry.npmjs.org/photon-colors/-/photon-colors-3.3.2.tgz",
       "integrity": "sha512-xCeL7J2F8cjM00zQZEZawHAGnrSOM509RbanL4c8hvrV8n19V/wwdzydX6rSUEtLYj4nx4OvhmKC4/vujo9f/Q=="
     },
-    "pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "optional": true
-    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3659,13 +3457,6 @@
         "react-is": "^16.13.1"
       }
     },
-    "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "optional": true
-    },
     "punycode": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.2.0.tgz",
@@ -3778,13 +3569,6 @@
         }
       }
     },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "optional": true
-    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -3869,12 +3653,6 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
-    "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index f399cebee7..caa2ec0a3e 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,7 +14,6 @@
     "eslint-config-prettier": "6.15.0",
     "eslint-plugin-prettier": "3.1.4",
     "graceful-fs": "4.2.4",
-    "less": "3.12.2",
     "prettier": "2.1.2",
     "uglify-js": "3.11.5"
   },