Major CSS revamp

- Get rid of Bootstrap (except we still rely on some JS)
- Use BEM class names
- Rework variables/theme config
- Fix various bugs, including some on mobile

The CSS is still not ideal – it needs to be cleaned up some more. But
that can be a focus for after beta.

less/lib/scaffolding.less

@@ -0,0 +1,172 @@
+* {
+  &,
+  &:before,
+  &:after {
+    .box-sizing(border-box);
+  }
+}
+
+body {
+  background: @body-bg;
+  color: @text-color;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  line-height: 1.5;
+  overflow-y: scroll;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.3;
+}
+
+input,
+button,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+a {
+  cursor: pointer;
+  color: @link-color;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+hr {
+  margin-top: 15px;
+  margin-bottom: 15px;
+  border: 0;
+  border-top: 2px solid @control-bg;
+}
+
+p {
+  margin: 0 0 10px;
+}
+
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  .clearfix();
+
+  @media @tablet {
+    width: @screen-tablet;
+  }
+  @media @desktop {
+    width: @screen-desktop;
+  }
+  @media @desktop-hd {
+    width: @screen-desktop-hd;
+  }
+}
+
+.containerNarrow {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.global-page {
+  overflow-x: hidden;
+  min-height: 100vh;
+}
+
+mark {
+  background: #FFE300;
+  padding: 1px;
+  border-radius: @border-radius;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+fieldset {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+legend {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+input[type="search"] {
+  -webkit-appearance: none;
+}
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+// .radio,
+// .checkbox {
+//   position: relative;
+//   display: block;
+//   margin-top: 10px;
+//   margin-bottom: 10px;
+
+//   label {
+//     min-height: @line-height-computed; // Ensure the input doesn't jump when there is no text
+//     padding-left: 20px;
+//     margin-bottom: 0;
+//     font-weight: normal;
+//     cursor: pointer;
+//   }
+// }
+// .radio input[type="radio"],
+// .radio-inline input[type="radio"],
+// .checkbox input[type="checkbox"],
+// .checkbox-inline input[type="checkbox"] {
+//   position: absolute;
+//   margin-left: -20px;
+//   margin-top: 4px \9;
+// }
+
+// .radio + .radio,
+// .checkbox + .checkbox {
+//   margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+// }
+
+// // Radios and checkboxes on same line
+// .radio-inline,
+// .checkbox-inline {
+//   position: relative;
+//   display: inline-block;
+//   padding-left: 20px;
+//   margin-bottom: 0;
+//   vertical-align: middle;
+//   font-weight: normal;
+//   cursor: pointer;
+// }
+// .radio-inline + .radio-inline,
+// .checkbox-inline + .checkbox-inline {
+//   margin-top: 0;
+//   margin-left: 10px; // space out consecutive inline controls
+// }
+
+.fade {
+  opacity: 0;
+  .transition(opacity .15s linear);
+  &.in {
+    opacity: 1;
+  }
+}
+.darkenBackground {
+  background: @shadow-color;
+}
+
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
+  margin-bottom: 0;
+}
+
+@media @tablet-up {
+  .affix {
+    position: fixed;
+  }
+}