Merge afb-client

24 files changed, 4823 insertions, 0 deletions

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_accordion.scss b/afb-client/bower_components/foundation-apps/scss/components/_accordion.scss
new file mode 100644
index 0000000..d330f47
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_accordion.scss
@@ -0,0 +1,72 @@
+/*
+  ACCORDION
+  ---------
+
+  The trusy accordion allows you to create a series of vertical tabs.
+*/
+
+/// @Foundation.settings
+// Accordion
+$accordion-border: 1px solid $gray-dark !default;
+
+$accordion-title-background: $gray-light !default;
+$accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;
+$accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;
+$accordion-title-color: isitlight($accordion-title-background) !default;
+$accordion-title-color-active: isitlight($accordion-title-background) !default;
+
+$accordion-title-padding: $global-padding !default;
+$accordion-content-padding: $global-padding !default;
+///
+
+@mixin accordion-title(
+  $background: $accordion-title-background,
+  $background-hover: $accordion-title-background-hover,
+  $background-active: $accordion-title-background-active,
+  $color: $accordion-title-color,
+  $color-active: $accordion-title-color-active,
+  $padding: $accordion-title-padding
+) {
+  padding: $padding;
+  background: $background;
+  color: $color;
+  line-height: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: $background-hover;
+  }
+
+  .is-active > & {
+    background: $background-active;
+    color: $color-active;
+  }
+}
+
+@mixin accordion-content(
+  $padding: $accordion-content-padding
+) {
+  padding: $padding;
+
+  display: none;
+  .is-active > & {
+    display: block;
+  }
+}
+
+@include exports(accordion) {
+  .accordion {
+    @if hasvalue($accordion-border) {
+      border: $accordion-border;
+    }
+  }
+    .accordion-item {
+
+    }
+    .accordion-title {
+      @include accordion-title;
+    }
+    .accordion-content {
+      @include accordion-content;
+    }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss b/afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss
new file mode 100644
index 0000000..28b945c
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_action-sheet.scss
@@ -0,0 +1,265 @@
+/*
+  ACTION SHEET
+  ------------
+
+  A dropdown menu that sticks to the bottom of the screen on small devices, and becomes a dropdown menu on larger devices.
+*/
+
+/// @Foundation.settings
+// Action Sheet
+$actionsheet-background: white !default;
+$actionsheet-border-color: #ccc !default;
+$actionsheet-animate: transform opacity !default;
+$actionsheet-animation-speed: 0.25s !default;
+$actionsheet-width: 300px !default;
+$actionsheet-radius: 4px !default;
+$actionsheet-shadow: 0 -3px 10px rgba(black, 0.25) !default;
+$actionsheet-padding: $global-padding !default;
+$actionsheet-tail-size: 10px !default;
+
+$actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25) !default;
+
+$actionsheet-link-color: #000 !default;
+$actionsheet-link-background-hover: smartscale($actionsheet-background) !default;
+///
+
+/*
+  Styles for the list inside an action sheet.
+  Don't include this mixin if you want to build custom controls inside the sheet.
+*/
+@mixin action-sheet-menu(
+  $padding: $actionsheet-padding,
+  $color: $actionsheet-link-color,
+  $border-color: $actionsheet-border-color,
+  $background-hover: $actionsheet-link-background-hover
+) {
+  // Menu container
+  ul {
+    margin: -($padding);
+    margin-top: 0;
+    list-style-type: none;
+    user-select: none;
+
+    // If the menu has no content above it
+    &:first-child {
+      margin-top: -$padding;
+
+      li:first-child {
+        border-top: 0;
+      }
+    }
+
+    // Menu links
+    a {
+      display: block;
+      padding: $padding * 0.8;
+      line-height: 1;
+      color: $color;
+      border-top: 1px solid $border-color;
+
+      &:hover {
+        color: $color;
+        background: $background-hover;
+      }
+    }
+
+    .alert > a {
+      color: $alert-color;
+    }
+    .disabled > a {
+      pointer-events: none;
+      color: #999;
+    }
+  }
+}
+
+/*
+  Styles for the action sheet container. Action sheets pin to the top or bottom of the screen.
+*/
+@mixin action-sheet(
+  $position: bottom,
+  $shadow: $actionsheet-shadow,
+  $animate: $actionsheet-animate,
+  $animation-speed: $actionsheet-animation-speed,
+  $padding: $actionsheet-padding,
+  $background: $actionsheet-background
+) {
+  position: fixed;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  padding: $padding;
+  background: $background;
+  text-align: center;
+  transition-property: $animate;
+  transition-duration: $animation-speed;
+  transition-timing-function: ease-out;
+
+  @if hasvalue($shadow) {
+    box-shadow: $shadow;
+  }
+
+  // Positions
+  @if $position == bottom {
+    bottom: 0;
+    transform: translateY(100%);
+
+    &.is-active {
+      transform: translateY(0%);
+    }
+  }
+  // These two don't quite work as planned yet
+  @else if $position == top {
+    top: 0;
+    transform: translateY(-100%);
+
+    &.is-active {
+      transform: translateY(0%);
+    }
+  }
+}
+
+@mixin popup-menu(
+  $position: bottom,
+  $background: $actionsheet-background,
+  $width: $actionsheet-width,
+  $radius: $actionsheet-radius,
+  $shadow: $actionsheet-popup-shadow,
+  $tail-size: $actionsheet-tail-size
+) {
+  /*
+    Core styles
+  */
+  position: absolute;
+  left: 50%;
+  width: $width;
+  border-radius: $radius;
+  opacity: 0;
+  pointer-events: none;
+
+  /*
+    Menu shadow
+  */
+  @if hasvalue($shadow) {
+    box-shadow: $shadow;
+  }
+
+  /*
+    Active state
+  */
+  &.is-active {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /*
+    Menu tail
+  */
+  &::before, &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    display: block;
+    width: 0px;
+    height: 0px;
+    border-left: $tail-size solid transparent;
+    border-right: $tail-size solid transparent;
+    margin-left: -($tail-size);
+  }
+
+  /*
+    Positioning
+  */
+  @if $position == bottom {
+    top: auto;
+    bottom: 0;
+    transform: translateX(-50%) translateY(110%);
+    &.is-active {
+      transform: translateX(-50%) translateY(100%);
+    }
+
+    &::before, &::after {
+      top: -($tail-size);
+      bottom: auto;
+      border-top: 0;
+      border-bottom: $tail-size solid $background;
+    }
+    &::before {
+      top: -($tail-size + 2);
+      border-bottom-color: rgba(black, 0.15);
+    }
+
+  }
+  @else if $position == top {
+    top: 0;
+    bottom: auto;
+    transform: translateX(-50%) translateY(-120%);
+    &.is-active {
+      transform: translateX(-50%) translateY(-110%);
+    }
+
+    &::before, &::after {
+      top: auto;
+      bottom: -($tail-size);
+      border-top: $tail-size solid $background;
+      border-bottom: 0;
+    }
+    &::before {
+      bottom: -($tail-size + 2);
+      border-top-color: rgba(black, 0.15);
+    }
+  }
+}
+
+@include exports(action-sheet) {
+  .action-sheet-container {
+    position: relative;
+    display: inline-block;
+
+    .button {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+  .action-sheet {
+    @include action-sheet;
+    @include action-sheet-menu;
+
+    @include breakpoint(medium) {
+      @include popup-menu;
+
+      &.top {
+        @include popup-menu(top);
+      }
+    }
+
+    &.primary {
+      background: $primary-color;
+      color: isitlight($primary-color);
+      border: 0;
+      &::before { display: none; }
+      &::before, &::after { border-top-color: $primary-color; }
+      &.top::before, &.top::after { border-bottom-color: $primary-color; }
+
+      @include action-sheet-menu(
+        $color: isitlight($primary-color),
+        $border-color: smartscale($primary-color, 10%),
+        $background-hover: smartscale($primary-color)
+      );
+    }
+    &.dark {
+      background: $dark-color;
+      color: isitlight($dark-color);
+      border: 0;
+      &::before { display: none; }
+      &::before, &::after { border-top-color: $dark-color; }
+      &.top::before, &.top::after { border-bottom-color: $dark-color; }
+
+      @include action-sheet-menu(
+        $color: isitlight($dark-color),
+        $border-color: smartscale($dark-color, 10%),
+        $background-hover: smartscale($dark-color)
+      );
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss b/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss
new file mode 100644
index 0000000..5b1cbe4
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_block-list.scss
@@ -0,0 +1,350 @@
+/*
+  BLOCK LIST
+  ----------
+
+  A generic list component that can accomodate a variety of styles and controls.
+
+  Features:
+   - Icons
+   - Labels
+   - Chevrons
+   - Text fields
+   - Dropdown menus
+   - Checkbox/radio inputs
+*/
+
+/// @Foundation.settings
+// Block List
+$blocklist-background: #fff !default;
+$blocklist-fullbleed: true !default;
+$blocklist-fontsize: 1rem !default;
+
+$blocklist-item-padding: 0.8rem 1rem !default;
+$blocklist-item-color: isitlight($blocklist-background, #000, #fff) !default;
+$blocklist-item-background-hover: smartscale($blocklist-background, 4.5%) !default;
+$blocklist-item-color-disabled: #999 !default;
+$blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%) !default;
+
+$blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%) !default;
+$blocklist-item-icon-size: 0.8 !default;
+
+$blocklist-header-fontsize: 0.8em !default;
+$blocklist-header-color: smartscale($blocklist-item-color, 40%) !default;
+$blocklist-header-uppercase: true;
+
+$blocklist-check-icons: true !default;
+///
+
+/*
+  Adds styles for a block list container.
+
+  $font-size: global font size for the list.
+  $full-bleed: when "true", the margins of the list invert to line it up with the edge of a padded element.
+*/
+%block-list-container {
+  margin-bottom: 1rem;
+  line-height: 1;
+  user-select: none;
+
+  &, ul {
+    list-style-type: none;
+  }
+  ul {
+    margin-left: 0;
+  }
+}
+@mixin block-list-container(
+  $font-size: $blocklist-fontsize,
+  $full-bleed: $blocklist-fullbleed
+) {
+  @extend %block-list-container;
+  font-size: $font-size;
+
+  @if $full-bleed {
+    margin-left: -$global-padding;
+    margin-right: -$global-padding;
+  }
+}
+
+/*
+  Styles block list headers on the selector you include this mixin in (normally a <header>).
+
+  $color - color of the header.
+  $font-size - font size of the header.
+  $offset - left margin to add to the header, to line it up with the list items.
+*/
+@mixin block-list-header(
+  $color: $blocklist-header-color,
+  $font-size: $blocklist-header-fontsize,
+  $uppercase: $blocklist-header-uppercase,
+  $offset: get-side($blocklist-item-padding, left)
+) {
+  margin-top: 1em;
+  color: $color;
+  font-weight: bold;
+  margin-bottom: 0.5em;
+  margin-left: $offset;
+  font-size: $font-size;
+  cursor: default;
+  @if $uppercase { text-transform: uppercase; }
+}
+
+/*
+  Styles block list items on the selector you include this mixin in (normally an <li>).
+
+  $color - color of items.
+  $color-hover - color of items on hover.
+  $background - background of items.
+  $background-hover - background of items on hover.
+  $border - border between items.
+  $padding - padding on items.
+*/
+@mixin block-list-item(
+  $color: $blocklist-item-color,
+  $color-hover: $blocklist-item-color,
+  $color-disabled: $blocklist-item-color-disabled,
+  $background: transparent,
+  $background-hover: $blocklist-item-background-hover,
+  $border: $blocklist-item-border,
+  $padding: $blocklist-item-padding
+) {
+  position: relative;
+
+  @if hasvalue($border) {
+    border-bottom: $border;
+    &:first-child {
+      border-top: $border;
+    }
+  }
+
+  // Inner elements share the same basic styles
+  > a, > span, > label {
+    display: block;
+    padding: $padding;
+    padding-left: get-side($padding, left);
+    color: $color;
+    line-height: 1;
+  }
+  > span {
+    cursor: default;
+  }
+  > a, > label {
+    cursor: pointer;
+
+    &:hover {
+      color: $color-hover;
+    }
+  }
+  > a, > label, select {
+    &:hover {
+      background: $background-hover;
+    }
+  }
+
+  // Coloring classes
+  &.caution > a {
+    &, &:hover { color: $alert-color; }
+  }
+  &.disabled > a {
+    cursor: default;
+    &, &:hover { color: $color-disabled; }
+    &:hover { background: transparent; }
+  }
+}
+
+/*
+  Adds label styles to the class you include this mixin in.
+
+  $color - color of the label.
+  $left-class - extra class to flip the orientation of the label.
+  $left-padding - left padding to use for left-hand labels.
+*/
+@mixin block-list-label(
+  $color: $blocklist-item-label-color,
+  $left-class: 'left',
+  $left-padding: get-side($blocklist-item-padding, top)
+) {
+  display: inline-block;
+  float: right;
+  padding: 0;
+  color: $color;
+  pointer-events: none;
+
+  &.#{$left-class} {
+    margin-left: $left-padding;
+    float: none;
+  }
+}
+
+/*
+  Adds support for chevrons, which appear on the right-hand side of the item.
+
+  $color - color of the chevron.
+  $padding - include the global padding of block list items here.
+*/
+@mixin block-list-chevron(
+  $color: $blocklist-header-color,
+  $padding: $blocklist-item-padding,
+  $label-class: 'block-list-label'
+) {
+  // Chevrons are a pseudo-element
+  &::after {
+    content: '\203A';
+    display: block;
+    position: absolute;
+    right: get-side($padding, right);
+    top: 50%;
+    transform: translateY(-50%);
+    font-weight: bold;
+    color: $color;
+    font-size: 2em;
+  }
+
+  // Labels next to links move over to make room for the chevron
+  // TODO: this selector needs to be customiable, but adding a setting just for it might be weird
+  .#{$label-class} {
+    padding-right: get-side($padding, right) * 1.5;
+  }
+}
+
+/*
+  Adds icon styles. Call this mixin on a block list container.
+
+  $size - size of the icon as a percentage (decimal) of the list item's height.
+  $item-selector - overrides the 'li' selector used for list items.
+*/
+@mixin block-list-icons(
+  $size: $blocklist-item-icon-size,
+  $item-selector: 'li'
+) {
+  // PH - need a better solution
+  $item-height:
+    $blocklist-fontsize
+    + get-side($blocklist-item-padding, top)
+    + get-side($blocklist-item-padding, top);
+
+  $icon-height: $item-height * $blocklist-item-icon-size;
+  $icon-offset: ($item-height - $icon-height) / 2;
+
+  #{$item-selector} {
+    > a, > span, > label {
+      padding-left: (get-side($blocklist-item-padding, left) * 2) + $blocklist-item-icon-size;
+    }
+    img, .iconic {
+      position: absolute;
+      top: $icon-offset;
+      left: $icon-offset;
+      width: $icon-height;
+      height: $icon-height;
+      border-radius: 8px;
+      pointer-events: none;
+    }
+  }
+}
+
+/*
+  Adds support for text fields, select menus, and checkbox/radio groups in block lists.
+
+  $color - color of select menu arrow.
+  $background-hover - color of select menu when hovered over.
+  $padding - include the global padding of block list items here.
+  $dropdown-class - class to use for list items that contain a dropdown.
+  $switch-class - class to use for switches inside list items.
+*/
+@mixin block-list-inputs(
+  $color: $blocklist-item-color,
+  $background: $blocklist-background,
+  $background-hover: $blocklist-item-background-hover,
+  $padding: $blocklist-item-padding,
+  $icons: $blocklist-check-icons,
+  $dropdown-class: 'with-dropdown',
+  $switch-class: 'switch'
+) {
+  // Text fields
+  #{$text-input-selectors} {
+    margin: 0;
+    border: 0;
+    line-height: 1;
+    height: auto;
+    padding: $padding;
+    color: inherit;
+
+    &:hover, &:focus {
+      border: 0;
+    }
+  }
+
+  // Multiple select
+  li > input[type="checkbox"], li > input[type="radio"] {
+    position: absolute;
+    left: -9999px;
+
+    & + label {
+      display: block;
+      font-size: $blocklist-fontsize;
+      margin: 0;
+    }
+
+    @if $icons == true {
+      &:checked + label {
+        &::before {
+          @include image-checkmark($color);
+          content: '';
+          background-size: 100% 100%;
+          width: 1.5em;
+          height: 1.5em;
+          color: $primary-color;
+          float: right;
+          pointer-events: none;
+          margin-top: -0.25em;
+        }
+      }
+    }
+  }
+
+  // Dropdowns
+  .#{$dropdown-class} {
+    color: inherit;
+
+    select {
+      // Reset pesky <select> styles
+      -webkit-appearance: none;
+         -moz-appearance: none;
+      outline: 0;
+      background: 0;
+      border: 0;
+      height: auto;
+      padding: $padding;
+      margin: 0;
+      font-size: 1em; // Same size as its parent
+      line-height: 1;
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
+  // Switches
+  .#{$switch-class} {
+    position: absolute;
+    top: 50%;
+    right: get-side($padding, right);
+    transform: translateY(-50%);
+  }
+}
+
+@include exports(block-list) {
+  .block-list {
+    @include block-list-container;
+    @include block-list-inputs;
+
+    &.with-icons { @include block-list-icons; }
+    header       { @include block-list-header; }
+
+    li {
+      @include block-list-item;
+
+      &.with-chevron    { @include block-list-chevron; }
+      .block-list-label { @include block-list-label; }
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_button-group.scss b/afb-client/bower_components/foundation-apps/scss/components/_button-group.scss
new file mode 100644
index 0000000..8505c84
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_button-group.scss
@@ -0,0 +1,197 @@
+/// @Foundation.settings
+// Button Group
+$btngroup-background: $primary-color !default;
+$btngroup-color: #fff !default;
+$btngroup-radius: $button-radius !default;
+///
+
+$child-selectors: '> a, > label, > button';
+
+%button-group {
+  margin: 0;
+  margin-bottom: 1rem;
+  list-style-type: none;
+  display: inline-flex;
+  border-radius: $btngroup-radius;
+  overflow: hidden;
+  font-size: $button-font-size;
+
+  > li {
+    flex: 0 0 auto;
+
+    // Links become buttons
+    #{$child-selectors} {
+      @extend %button;
+      border-radius: 0;
+      font-size: inherit;
+      display: block;
+      margin: 0;
+    }
+    > input + label {
+      margin-left: 0;
+    }
+    // Add borders between items
+    &:not(:last-child) {
+      #{$child-selectors} {
+        border-right: 1px solid scale-color($btngroup-background, $lightness: -25%);
+      }
+    }
+  }
+
+  @if using(iconic) {
+    .iconic {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.25em;
+      margin-top: -2px; // The icons are oddly misaligned
+    }
+  }
+}
+
+%button-group-segmented {
+  border: 1px solid $primary-color;
+  transition-property: background color;
+
+  > li {
+    // Hide the radio button
+    > input[type="radio"] {
+      position: absolute;
+      left: -9999px;
+    }
+    // This is the button
+    #{$child-selectors} {
+      margin-right: 0;
+      background: transparent;
+    }
+  }
+}
+
+@mixin button-group-size($size: medium, $expand: false) {
+  $size: $button-font-size * map-get($button-sizes, $size);
+  font-size: $size;
+
+  @if $expand {
+    @include button-group-expand;
+  }
+}
+@mixin button-group-expand($stretch: true) {
+  display: if($stretch, flex, inline-flex);
+
+  > li {
+    flex: if($stretch, 1, 0 0 auto);
+
+    #{$child-selectors} {
+      @if $stretch { @include button-expand; }
+    }
+  }
+}
+@mixin button-group-style(
+  $segmented: false,
+  $background: $primary-color,
+  $color: auto
+) {
+
+  @if not($segmented) {
+    > li {
+      #{$child-selectors} {
+        @include button-style($background, auto, $color);
+        border-color: scale-color($background, $lightness: -15%);
+      }
+      &.is-active {
+        #{$child-selectors} {
+          background: scale-color($background, $lightness: -15%);
+        }
+      }
+    }
+  }
+  @else {
+    @extend %button-group-segmented;
+    $hover-color: rgba($background, 0.25);
+    border-color: $background;
+
+    > li {
+      // This is the button
+      #{$child-selectors} {
+        border-color: $background;
+        color: $background;
+
+        // This is the button being hovered on
+        &:hover {
+          background: $hover-color;
+          color: $background;
+        }
+
+        @if using(iconic) {
+          .iconic { @include color-icon($background); }
+        }
+      }
+
+      // This is the button when it's active
+      &.is-active > a,
+      > input:checked + label {
+        &, &:hover {
+          background: $background;
+          color: isitlight($background);
+        }
+
+        @if using(iconic) {
+          .iconic { @include color-icon(isitlight($background)); }
+        }
+      }
+    }
+  }
+}
+
+@mixin button-group(
+  $segmented: false,
+  $expand: false,
+  $background: $primary-color,
+  $color: #fff
+) {
+  @extend %button-group;
+  @include button-group-expand($expand);
+  @include button-group-style($segmented, $background, $color);
+  border-radius: $btngroup-radius;
+}
+
+@include exports(button-group) {
+  .button-group {
+    @include button-group;
+
+    // Colors
+    &.secondary { @include button-group-style(false, $secondary-color); }
+    &.success   { @include button-group-style(false, $success-color); }
+    &.warning   { @include button-group-style(false, $warning-color); }
+    &.alert     { @include button-group-style(false, $alert-color); }
+
+    // Individual colors
+    > li {
+      &.secondary { #{$child-selectors} { @include button-style($secondary-color, auto, $btngroup: true); } }
+      &.success   { #{$child-selectors} { @include button-style($success-color, auto, $btngroup: true); } }
+      &.warning   { #{$child-selectors} { @include button-style($warning-color, auto, $btngroup: true); } }
+      &.alert     { #{$child-selectors} { @include button-style($alert-color, auto, $btngroup: true); } }
+    }
+
+    // Segmented
+    &.segmented { @include button-group-style(true);
+      &.secondary { @include button-group-style(true, $secondary-color); }
+      &.success   { @include button-group-style(true, $success-color); }
+      &.warning   { @include button-group-style(true, $warning-color); }
+      &.alert     { @include button-group-style(true, $alert-color); }
+    }
+
+    // Sizing
+    &.tiny      { @include button-group-size(tiny); }
+    &.small     { @include button-group-size(small); }
+    &.large     { @include button-group-size(large); }
+    &.expand    { @include button-group-expand; }
+
+    // Disabled
+    li.disabled {
+      #{$child-selectors} {
+        @include button-disabled;
+      }
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_button.scss b/afb-client/bower_components/foundation-apps/scss/components/_button.scss
new file mode 100644
index 0000000..6e22b19
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_button.scss
@@ -0,0 +1,205 @@
+/// @Foundation.settings
+// Button
+$button-padding: 0.85em 1em !default;
+$button-margin: 0 $global-padding $global-padding 0 !default;
+$button-style: solid !default;
+$button-background: $primary-color !default;
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+$button-color: auto !default;
+$button-radius: 0 !default;
+$button-sizes: (
+  tiny: 0.7,
+  small: 0.8,
+  medium: 1,
+  large: 1.3,
+) !default;
+$button-font-size: 0.9rem !default;
+$button-opacity-disabled: 0.5 !default;
+$button-tag-selector: false !default;
+///
+
+%button {
+  display: inline-block;
+  border: 0;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s ease-out;
+  vertical-align: middle;
+
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: $button-font-size;
+  border-radius: $button-radius;
+
+  // Dropdown arrow
+  // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic
+  // &[data-popup-toggle] {
+  //   position: relative;
+  //   padding-right: 2em; // Placeholder
+
+  //   &::after {
+  //     @include css-triangle(6px, black, top);
+  //     position: absolute;
+  //     right: 0.7em;
+  //     top: 50%;
+  //     margin-top: -3px;
+  //   }
+  // }
+}
+
+@mixin button-size($size: medium, $expand: false) {
+  $size: $button-font-size * map-get($button-sizes, $size);
+  font-size: $size;
+
+  @if $expand {
+    @include button-expand;
+  }
+
+  @if using(iconic) {
+    .iconic {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.25em;
+      margin-top: -2px; // The icons are oddly misaligned
+    }
+  }
+}
+
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius,
+  $btngroup: false
+){
+  @if $style == hollow {
+    border: 1px solid $background;
+    background: transparent;
+    color: $background;
+
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: 25%);
+      background: transparent;
+      color: scale-color($background, $lightness: 25%);
+    }
+  }
+  // Solid is the default
+  @else {
+    @if $color == auto {
+      $color: isitlight($background);
+    }
+
+    background: $background;
+    color: $color;
+
+    &:hover, &:focus {
+      @if $background-hover == auto {
+        background: scale-color($background, $lightness: -15%);
+      }
+      @else {
+        background: $background-hover;
+      }
+      color: $color;
+    }
+  }
+
+  @if $btngroup {
+    border-color: $background;
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: -25%);
+    }
+  }
+
+  @if using(iconic) {
+    @if $style == hollow {
+      .iconic {
+        @include color-icon($background);
+      }
+      &:hover .iconic {
+        @include color-icon(scale-color($background, $lightness: 25%));
+      }
+    }
+    @else {
+      .iconic {
+        @include color-icon($color);
+      }
+    }
+  }
+}
+
+@mixin button-disabled() {
+  opacity: $button-opacity-disabled;
+  cursor: default;
+  pointer-events: none;
+}
+
+@mixin button(
+  $size: medium,
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius
+) {
+  @extend %button;
+  @include button-size($size);
+  @include button-expand($expand);
+  @include button-style($background, $background-hover, $color, $style);
+}
+
+@include exports(button) {
+  .button {
+    @include button;
+
+    &.tiny   { @include button-size(tiny); }
+    &.small  { @include button-size(small); }
+    &.large  { @include button-size(large); }
+    &.expand { @include button-expand; }
+
+    &.secondary { @include button-style($secondary-color, auto) }
+    &.success   { @include button-style($success-color, auto) }
+    &.warning   { @include button-style($warning-color, auto) }
+    &.alert     { @include button-style($alert-color, auto) }
+    &.info      { @include button-style($info-color, auto) }
+    &.dark      { @include button-style($dark-color, auto) }
+
+    @if $button-style != hollow {
+      &.hollow { @include button-style($style: hollow);
+        &.secondary { @include button-style($secondary-color, $style: hollow); }
+        &.success   { @include button-style($success-color, $style: hollow); }
+        &.warning   { @include button-style($warning-color, $style: hollow); }
+        &.alert     { @include button-style($alert-color, $style: hollow); }
+        &.info      { @include button-style($info-color, $style: hollow); }
+        &.dark      { @include button-style($dark-color, $style: hollow); }
+      }
+    }
+
+    &.disabled { @include button-disabled; }
+  }
+
+  @if $button-tag-selector {
+    button {
+      @extend .button;
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_card.scss b/afb-client/bower_components/foundation-apps/scss/components/_card.scss
new file mode 100644
index 0000000..680a755
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_card.scss
@@ -0,0 +1,93 @@
+/*
+  Cards
+
+  Structure:
+
+  titles
+  lists
+*/
+
+/// @Foundation.settings
+// Card
+$card-background: #fff !default;
+$card-color: isitlight($card-background) !default;
+$card-border: 1px solid smartscale($card-background, 7%) !default;
+$card-radius: $global-radius !default;
+$card-shadow: 0 1px 2px rgba(#000, 0.2) !default;
+$card-padding: $global-padding !default;
+$card-margin: 0.5rem !default;
+
+$card-divider-background: smartscale($card-background, 7%) !default;
+///
+
+@mixin card-container(
+  $background: $card-background,
+  $color: $card-color,
+  $border: $card-border,
+  $radius: $card-radius,
+  $shadow: $card-shadow,
+  $padding: $card-padding,
+  $margin: $card-margin
+) {
+  border: $border;
+  margin-bottom: $margin;
+  background: $background;
+  color: $color;
+  border-radius: $radius;
+  box-shadow: $shadow;
+  overflow: hidden;
+
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
+@mixin card-divider(
+  $background: $card-divider-background,
+  $padding: $card-padding
+) {
+  background: $background;
+  padding: $padding;
+}
+
+@mixin card-section(
+  $padding: $card-padding
+) {
+  padding: $padding;
+}
+
+@include exports(card) {
+  .card {
+    @include card-container;
+
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include card-container(
+          $background: $color-value,
+          $color: isitlight($color-value),
+          $border: 0
+        );
+        .card-divider {
+          @include card-divider(
+            $background: smartscale($color-value, 7%)
+          );
+        }
+      }
+    }
+  }
+    .card-divider {
+      @include card-divider;
+    }
+    .card-section {
+      @include card-section;
+    }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_extras.scss b/afb-client/bower_components/foundation-apps/scss/components/_extras.scss
new file mode 100644
index 0000000..1e2443a
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_extras.scss
@@ -0,0 +1,54 @@
+/*
+  Odds and ends.
+*/
+
+/// @Foundation.settings
+// Extras
+$closebutton-position: (top right) !default;
+$closebutton-size: 2em !default;
+$closebutton-lineheight: 0.5 !default;
+$closebutton-color: #999 !default;
+$closebutton-color-hover: #333 !default;
+
+$thumbnail-padding: 0.5rem !default;
+$thumbnail-shadow: 0 3px 15px rgba(black, 0.25) !default;
+///
+
+// A basic close button. They pin to the corner of the thing they're inside.
+%close-button {
+  $x: nth($closebutton-position, 1);
+  $y: nth($closebutton-position, 2);
+
+  position: absolute;
+  color: $closebutton-color;
+  #{$x}: $global-padding;
+  #{$y}: $global-padding;
+  font-size: $closebutton-size;
+  line-height: $closebutton-lineheight;
+  cursor: pointer;
+
+  &:hover {
+    color: $closebutton-color-hover;
+  }
+}
+
+// Make your images fancy-like.
+%thumbnail {
+  padding: $thumbnail-padding;
+  box-shadow: $thumbnail-shadow;
+}
+
+@include exports(extras) {
+  .close-button {
+    @extend %close-button;
+  }
+  .thumbnail {
+    @extend %thumbnail;
+  }
+  ul.thumbnails > li {
+    margin-bottom: 1rem;
+    
+    a { display: block; }
+    img { @extend %thumbnail; }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_forms.scss b/afb-client/bower_components/foundation-apps/scss/components/_forms.scss
new file mode 100755
index 0000000..7d0376b
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_forms.scss
@@ -0,0 +1,458 @@
+/*
+  FORMS
+  -----
+
+  Our form styles include basic resets for text fields, select menus, and so on, along with some of our own custom components.
+
+  Includes:
+   - Text fields
+   - Text areas
+   - Select menus
+   - Checkboxes and radio buttons
+   - Range slider
+   - Progress bars and meters
+*/
+
+/// @Foundation.settings
+// Forms
+// Basic form variables
+$form-fontsize: 1rem !default;
+$form-padding: 0.5rem !default;
+
+// Text fields
+$input-color: #000 !default;
+$input-color-hover: $input-color !default;
+$input-color-focus: $input-color !default;
+$input-background: #fff !default;
+$input-background-hover: $input-background !default;
+$input-background-focus: $input-background !default;
+$input-background-disabled: smartscale($input-background) !default;
+$input-border: 1px solid #ccc !default;
+$input-border-hover: 1px solid #bbb !default;
+$input-border-focus: 1px solid #999 !default;
+$input-cursor-disabled: not-allowed !default;
+
+// Select menus
+$select-color: #000 !default;
+$select-background: #fafafa !default;
+$select-background-hover: smartscale($select-background, 4%) !default;
+$select-arrow: true !default;
+$select-arrow-color: $select-color !default;
+
+// Labels
+$form-label-fontsize: 0.9rem !default;
+$form-label-margin: 0.5rem !default;
+$form-label-color: #333 !default;
+
+// Inline labels
+$inlinelabel-color: #333 !default;
+$inlinelabel-background: #eee !default;
+$inlinelabel-border: $input-border !default;
+
+// Range slider
+$slider-background: #ddd !default;
+$slider-height: 1rem !default;
+$slider-radius: 0px !default;
+$slider-thumb-height: 1.5rem !default;
+$slider-thumb-color: $primary-color !default;
+$slider-thumb-radius: 0px !default;
+
+// Progress and meter
+$meter-height: 1.5rem !default;
+$meter-background: #ccc !default;
+$meter-fill: $primary-color !default;
+$meter-fill-high: $success-color !default;
+$meter-fill-medium: #e7cf00 !default;
+$meter-fill-low: $alert-color !default;
+$meter-radius: 0 !default;
+///
+
+// Disable OS-level styles
+@mixin no-appearance {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+}
+
+// Text fields
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+#{$text-input-selectors} {
+  $top-padding: get-side($form-padding, top);
+  $bottom-padding: get-side($form-padding, bottom);
+  $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
+
+  @include no-appearance;
+  display: block;
+  width: 100%;
+  height: $height;
+  padding: $form-padding;
+  margin: 0 0 $global-padding 0;
+  border: $input-border;
+  border-radius: 0;
+  background: $input-background;
+  color: $input-color;
+  font-size: $form-fontsize;
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+
+  &:hover {
+    border: $input-border-hover;
+    background: $input-background-hover;
+    color: $input-color-hover;
+  }
+  &:focus {
+    outline: 0;
+    border: $input-border-focus;
+    background: $input-background-focus;
+    color: $input-color-focus;
+  }
+
+  label > & {
+    margin-top: $form-label-margin;
+  }
+}
+
+// Override the content-box declaration set by Normalize
+input[type="search"] {
+  box-sizing: border-box;
+}
+
+// Disabled state
+input {
+  &.disabled,
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: $input-cursor-disabled;
+
+    &, &:hover {
+      background-color: $input-background-disabled;
+    }
+  }
+}
+
+// Labels
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+label {
+  display: block;
+  font-size: $form-label-fontsize;
+  margin-bottom: $form-label-margin;
+  color: $form-label-color;
+
+  > input, > textarea {
+    margin-top: $form-label-margin;
+  }
+}
+
+// Checkbox/radio buttons
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="checkbox"], input[type="radio"] {
+  width: 1rem;
+  height: 1rem;
+
+  // Input inside of a label
+  label > & {
+    margin-right: $form-padding * 0.5;
+  }
+
+  // Input next to a label
+  & + label {
+    display: inline-block;
+    margin-left: $form-padding;
+    margin-right: $form-padding * 2;
+    margin-bottom: 0;
+    vertical-align: baseline;
+  }
+}
+
+// Inline labels
+// Inline labels allow you to prefix or postfix special labels to inputs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+.inline-label {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  margin-bottom: $global-padding;
+
+  // Imitates the top margin on normal inputs
+  label > & {
+    margin-top: $form-label-margin;
+  }
+
+  // Inputs stretch all the way out
+  > input, > select {
+    flex: 1;
+    margin: 0;
+  }
+
+  // Inline labels and buttons shrink
+  > .form-label {
+    flex: 0 0 auto;
+    background: $inlinelabel-background;
+    color: $inlinelabel-color;
+    border: $inlinelabel-border;
+    padding: 0 $form-padding;
+    display: flex;
+    align-items: center;
+
+    &:first-child { border-right: 0; }
+    &:last-child  { border-left: 0; }
+  }
+  // Buttons also shrink
+  > a,
+  > button,
+  > input[type="button"],
+  > input[type="submit"] {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin: 0;
+    border-radius: 0;
+  }
+}
+
+// Text areas
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+textarea {
+  height: auto;
+  width: 100%;
+  min-height: 50px;
+}
+
+// Select menus
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+select {
+  $top-padding: get-side($form-padding, top);
+  $bottom-padding: get-side($form-padding, bottom);
+  $height: ($form-fontsize * 1.4) + $top-padding + $bottom-padding;
+  $color: isitlight($select-background);
+
+  @include no-appearance;
+  display: block;
+  width: 100%;
+  height: $height;
+  padding: $form-padding;
+  margin: 0 0 $global-padding 0;
+  font-size: $form-fontsize;
+  color: $select-color;
+  border-radius: 0;
+  border: $input-border;
+
+  @if $select-arrow {
+    background: $select-background url(image-triangle($select-arrow-color)) right 10px center no-repeat;
+    background-size: 8px 8px;
+    padding-right: rem-calc(18px) + $form-padding;
+  }
+  @else {
+    background-color: $select-background
+  }
+
+  &:hover {
+    background-color: $select-background-hover;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Remove the dropdown arrow added in IE10/11
+  &::-ms-expand {
+    display: none;
+  }
+}
+
+// Range slider
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="range"] {
+  $margin: ($slider-thumb-height - $slider-height) / 2;
+
+  @include no-appearance;
+  display: block;
+  width: 100%;
+  height: auto;
+  cursor: pointer;
+  margin-top: $margin;
+  margin-bottom: $margin;
+  border: 0;
+  line-height: 1;
+
+  @if hasvalue($slider-radius) {
+    border-radius: $slider-radius;
+  }
+
+  &:focus {
+    outline: 0;
+  }
+
+  // Chrome/Safari
+  &::-webkit-slider-runnable-track {
+    height: $slider-height;
+    background: $slider-background;
+  }
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $slider-thumb-color;
+    width: $slider-thumb-height;
+    height: $slider-thumb-height;
+    margin-top: -$margin;
+    @if hasvalue($slider-thumb-radius) {
+      border-radius: $slider-thumb-radius;
+    }
+  }
+  // Firefox
+  &::-moz-range-track {
+    -moz-appearance: none;
+    height: $slider-height;
+    background: #ccc;
+  }
+  &::-moz-range-thumb {
+    -moz-appearance: none;
+    background: $slider-thumb-color;
+    width: $slider-thumb-height;
+    height: $slider-thumb-height;
+    margin-top: -$margin;
+    @if hasvalue($slider-thumb-radius) {
+      border-radius: $slider-thumb-radius;
+    }
+  }
+  // Internet Explorer
+  &::-ms-track {
+    height: $slider-height;
+    background: $slider-background;
+    color: transparent;
+    border: 0;
+    overflow: visible;
+    border-top: $margin solid $body-background;
+    border-bottom: $margin solid $body-background;
+  }
+  &::-ms-thumb {
+    background: $slider-thumb-color;
+    width: $slider-thumb-height;
+    height: $slider-thumb-height;
+    border: 0;
+    @if hasvalue($slider-thumb-radius) {
+      border-radius: $slider-thumb-radius;
+    }
+  }
+  &::-ms-fill-lower, &::-ms-fill-upper {
+    background: $slider-background;
+  }
+}
+output {
+  line-height: $slider-thumb-height;
+  vertical-align: middle;
+  margin-left: 0.5em;
+}
+
+// Number inputs
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+input[type="number"] {
+  &::-webkit-inner-spin-button {
+
+  }
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    background: $primary-color;
+  }
+}
+
+// Progress and meter
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+progress, meter {
+  @include no-appearance;
+  display: block;
+  width: 100%;
+  height: $meter-height;
+  margin-bottom: 1rem;
+
+  @if hasvalue($meter-radius) {
+    border-radius: $meter-radius;
+  }
+
+  // For Firefox
+  background: $meter-background;
+  border: 0;
+}
+
+progress {
+  &::-webkit-progress-bar {
+    background: $meter-background;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-webkit-progress-value {
+    background: $meter-fill;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-moz-progress-bar {
+    background: $meter-fill;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+
+  @each $name, $color in (high: $meter-fill-high, medium: $meter-fill-medium, low: $meter-fill-low) {
+    &.#{$name} {
+      &::-webkit-progress-value {
+        background: $color;
+      }
+      &::-moz-progress-bar {
+        background: $color;
+      }
+    }
+  }
+}
+meter {
+  // Chrome/Safari
+  &::-webkit-meter-bar {
+    background: $meter-background;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-webkit-meter-inner-element {
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-webkit-meter-optimum-value {
+    background: $meter-fill-high;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-webkit-meter-suboptimum-value {
+    background: $meter-fill-medium;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &::-webkit-meter-even-less-good-value {
+    background: $meter-fill-low;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+
+  // Firefox
+  background: $meter-background;
+  &::-moz-meter-bar {
+    background: $primary-color;
+    @if hasvalue($meter-radius) {
+      border-radius: $meter-radius;
+    }
+  }
+  &:-moz-meter-optimum::-moz-meter-bar {
+    background: $meter-fill-high;
+  }
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: $meter-fill-medium;
+  }
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: $meter-fill-low;
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_grid.scss b/afb-client/bower_components/foundation-apps/scss/components/_grid.scss
new file mode 100644
index 0000000..4a00fd6
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_grid.scss
@@ -0,0 +1,420 @@
+@import "panel";
+
+/*
+  THE GRID
+  --------
+
+  Foundation's magical, flexbox-powered grid.
+
+  Features:
+   - Horizontal or vertical grids
+   - Auto-sizing or percentage width grid blocks
+   - Independently-scrollable blocks
+   - Column alignment
+   - Source ordering
+   - Offsets
+*/
+
+/// @Foundation.settings
+// Grid
+$container-width: rem-calc(900) !default;
+$block-padding: $global-padding !default;
+$total-columns: 12 !default;
+$block-grid-max-size: 6 !default;
+///
+
+/*
+  Define the size of a grid block. Blocks are flex items. By default, they stretch to fill all available space, based on the size of sibling blocks. This is the "expand" behavior.
+
+  If set to "shrink", the block will contract and only fill as much space as it needs for its content.
+
+  If set to a number, the block will be given a percentage width, based on the total number of columns (12 by default). Percentage widths don't work if a block is inside a vertical grid.
+
+  @group grid
+
+  @param {number|string} $size - Sizing behavior of the block. Should be expand, shrink, or a number.
+
+  @output The flex-basis, flex-grow, and flex-shrink properties.
+*/
+@mixin grid-size($size: expand) {
+  @if (type-of($size) == 'number') {
+    $pct: percentage($size / $total-columns);
+    flex: 0 0 $pct;
+    // max-width prevents columns from wrapping early in IE10/11
+    max-width: $pct;
+  }
+  @else if ($size == shrink) {
+    flex: 0 0 auto;
+  }
+  @else if ($size == expand) {
+    flex: 1 1 auto;
+  }
+}
+/*
+  Set the orientation of blocks within this block. The grid is re-oriented by changing the flex direction of the block.
+
+  @group grid
+
+  @param {string} $orientation - Direction of the grid, either horizontal or vertical.
+
+  @output A flex-flow property to match the direction given.
+*/
+@mixin grid-orient($orientation: horizontal) {
+  @if ($orientation == vertical) {
+    flex-flow: column nowrap;
+    align-items: stretch;
+  }
+  @else {
+    flex-flow: row wrap;
+  }
+}
+/*
+  Stretch a grid's child blocks across its cross-axis, making every column appear to have the same height.
+
+  @group grid
+
+  @param {bool} $stretch - Stretch blocks if true, or align blocks to top if false.
+
+  @output Sets align-items to "stretch" if $stretch is true, or "flex-start" (the default value) if false.
+*/
+@mixin grid-wrap($wrap: true) {
+  @if $wrap {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+  @else {
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+}
+/*
+  Set the alignment of blocks within a grid.
+
+  left: Items align to the left.
+  right: Items align to the right.
+  center: Items align to the center.
+  justify: Items are spaced equally apart so they occupy the space of the entire grid.
+  spaced: Items are given equal space to their left and right.
+
+  @group grid
+
+  @param {string} $align - Alignment to use.
+
+  @output An appropriate justify-content value.
+*/
+@mixin grid-align($align: left) {
+  $options: (
+    left: flex-start,
+    right: flex-end,
+    center: center,
+    justify: space-between,
+    spaced: space-around,
+  );
+  justify-content: map-get($options, $align);
+}
+/*
+  Set the source order of a block. Items with lower numbers appear first. If multiple items have the same number, the one in the HTML first will appear first.
+
+  @group grid
+
+  @param {number} $order - Position in source order.
+
+  @output An order property.
+*/
+@mixin grid-order($order: 0) {
+  order: $order;
+}
+/*
+  Collapse a content block by removing the padding.
+
+  @group grid
+
+  @param {bool} $collapse - Collapses the block if true.
+
+  @output A padding value.
+
+  @todo No way to reverse collapse using this mixin. Solution:
+    - If true, add padding: 0;
+    - If false, add padding: 1rem;
+    - If null, add nothing, to cut down on CSS output
+    - Make null the default value
+*/
+@mixin grid-collapse($collapse: true) {
+  @if ($collapse) {
+    padding: 0;
+  }
+}
+/*
+  Constrain the size of a block to the size of the average grid row, and center-align it. This imitates the behavior of ordinary Foundation rows.
+
+  @group grid
+
+  @param {bool} $container - Adds container styles if true.
+
+  @output A maximum width and the good old margin: 0 auto for center alignment.
+*/
+@mixin grid-container($width: $container-width, $align: center) {
+  $margins: (
+    left:  0 auto 0 0,
+    right: 0 0 0 auto,
+    center: 0 auto,
+  );
+  max-width: $width;
+  margin: map-get($margins, $align);
+}
+/*
+  Add negative margins to a block, equal to the padding of a content block. This aligns the edges of a block nested inside a content block.
+
+  @group grid
+
+  @param {bool} $nest - Adds negative margins if true.
+
+  @output Negative margin values.
+*/
+@mixin grid-nest($nest: true) {
+  @if ($nest) {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+/*
+  Offset a block by adding a left margin.
+
+  @group grid
+
+  @param {number | bool} $offset - If false, nothing is output. If a number, offsets the column by the specified number of columns.
+
+  @output A left margin based on the number of columns specified, and the global number of columns.
+*/
+@mixin grid-offset($offset: false) {
+  @if ($offset != false) {
+    margin-left: percentage($offset / $total-columns);
+  }
+}
+
+/*
+  Resets styles set by panels. Use this when a panel transforms into a block on larger screens.
+
+  @group grid
+
+  @output Resets to transform, position, and a few visual styles.
+*/
+@mixin grid-panel-reset() {
+  transform: none;
+  position: relative;
+  width: auto;
+  height: auto;
+  z-index: auto;
+  box-shadow: none;
+  background: transparent;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+}
+
+/*
+  Frames are containers that stretch to the full dimmensions of the browser window.
+*/
+@mixin grid-frame($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
+  display: flex;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  backface-visibility: hidden;
+
+  @include grid-size($size);
+  @include grid-orient($orientation);
+  @include grid-wrap($wrap);
+  @include grid-align($align);
+  @include grid-order($order);
+}
+
+/*
+  Groups are collections of content items. They're the "rows" of Foundation for Apps.
+*/
+@mixin grid-block($size: expand, $orientation: horizontal, $wrap: false, $align: left, $order: 0) {
+  @include grid-frame($size, $orientation, $wrap, $align, $order);
+
+  // Reset the height used by frames
+  height: auto;
+
+  // Blocks will scroll by default if their content overflows
+  @if ($orientation == vertical) {
+    overflow-x: auto;
+  }
+  @else {
+    overflow-y: auto;
+  }
+
+  // Add scrolling with inertia
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+/*
+  Blocks are containers for actual content. They're the "columns" of Foundation for Apps.
+*/
+@mixin grid-content($size: expand, $offset: null, $order: null) {
+  // Content blocks are not flex items and have padding
+  display: block;
+  padding: 0 $block-padding;
+
+  // Add scrolling with inertia
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @include grid-size($size);
+  @if $offset != null { @include grid-offset($offset); }
+  @if $order != null  { @include grid-order($order); }
+}
+
+@mixin grid-layout($up) {
+  flex-flow: row wrap;
+  overflow: visible;
+  list-style-type: none;
+
+  > li, > div, > section {
+    padding: 0 1rem 1rem;
+    flex: 0 0 percentage(1 / $up);
+  }
+}
+
+// CSS Output
+// - - - - - - - - - - - - - - - - - - - -
+
+// Shared styles for frames and blocks (parent elements)
+%block-core {
+  // Change the direction children flow
+  &.vertical { @include grid-orient(vertical); }
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      &.#{$size}-vertical   { @include grid-orient(vertical); }
+      &.#{$size}-horizontal { @include grid-orient(horizontal); }
+    }
+  }
+
+  // Align the children of a grid block
+  &.align-right   { @include grid-align(right); }
+  &.align-center  { @include grid-align(center); }
+  &.align-justify { @include grid-align(justify); }
+  &.align-spaced  { @include grid-align(spaced); }
+
+  // Allow child elements to wrap
+  &.wrap { @include grid-wrap(true); }
+}
+
+// Shared styles for blocks and content blocks (child elements)
+%child-core {
+  // Shrink a flex item so it only takes up the space it needs
+  &.shrink { @include grid-size(shrink); }
+
+  // Prevent an element from scrolling
+  &.noscroll { overflow: hidden; }
+}
+
+@include exports(grid) {
+  // The core grid elements:
+  //  - Frame
+  //  - Block
+  //  - Content block
+  //  - Container
+  .grid-frame {
+    @extend %block-core;
+    @include grid-frame;
+  }
+  .grid-block {
+    @extend %block-core;
+    @extend %child-core;
+    @include grid-block;
+  }
+  .grid-content {
+    @extend %child-core;
+    @include grid-content;
+
+    &.collapse {
+      padding: 0;
+    }
+
+    // Grids inside content blocks should wrap by default, so they mimic traditional float grids
+    .grid-block {
+      margin-left: -($block-padding);
+      margin-right: -($block-padding);
+      flex-wrap: wrap;
+      overflow: visible;
+
+      // Reverse the above wrapping behavior
+      &.nowrap {
+        @include grid-wrap(false);
+      }
+
+      .grid-content {
+        overflow: visible;
+      }
+    }
+  }
+  .grid-container {
+    @include grid-container;
+
+    &.contain-left  { @include grid-container($align: left); }
+    &.contain-right { @include grid-container($align: right); }
+  }
+
+  // Breakpoint classes for blocks
+  @each $size in $breakpoint-classes {
+    .#{$size}-grid-block {
+      @extend %block-core;
+      @extend %child-core;
+
+      @include breakpoint($size) {
+        @include grid-block;
+
+        // Override panel styles
+        &.panel { @include grid-panel-reset; }
+      }
+    }
+    .#{$size}-grid-content {
+      @extend %child-core;
+
+      @include breakpoint($size) {
+        @include grid-content;
+
+        // Override panel styles
+        &.panel { @include grid-panel-reset; }
+      }
+    }
+  }
+
+  // Sizing and ordering classes
+  @for $i from 1 through $total-columns {
+    // Source ordering
+    .order-#{$i} { @include grid-order($i); }
+  }
+  @each $size in $breakpoint-classes {
+    @for $i from 1 through $total-columns {
+      @include breakpoint($size) {
+        // Block sizing
+        .#{$size}-#{$i} {
+          @include grid-size($i);
+        }
+        // Source ordering
+        .#{$size}-order-#{$i} {
+          @include grid-order($i);
+        }
+        // Offsets
+        .#{$size}-offset-#{$i} {
+          @include grid-offset($i);
+        }
+        // Parent sizing (block grids)
+        .#{$size}-up-#{$i} {
+          @include grid-layout($i);
+        }
+      }
+    }
+  }
+
+  .grid-content .modal .grid-block {
+    flex-wrap: nowrap;
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
new file mode 100644
index 0000000..77d0bd3
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
@@ -0,0 +1,95 @@
+// ICONIC
+// ------
+//
+// A sample of 24 flexible, easily schemable icons from the folks at Iconic.
+// 
+// Features:
+//  - 24 icons
+//  - Built-in coloring and sizing classes
+//  - Coloring mixin
+//  - Angular support
+
+/// @Foundation.settings
+// Iconic
+$iconic-primary-fill: $primary-color !default;
+$iconic-primary-stroke: $primary-color !default;
+$iconic-accent-fill: $iconic-primary-fill !default;
+$iconic-accent-stroke: $iconic-accent-fill !default;
+///
+
+// Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.
+@mixin color-icon(
+  $fill,
+  $stroke: null,
+  $fillAccent: null,
+  $strokeAccent: null
+) {
+  * {
+    fill: $fill;
+
+    // Use the fill color if no stroke is provided
+    @if hasvalue($stroke) {
+      stroke: $stroke;
+    }
+    @else {
+      stroke: $fill;
+    }
+
+    &.iconic-property-accent {
+      // Use the fill color if no accent is provided
+      @if hasvalue($fillAccent) {
+        fill: $fillAccent;
+      }
+      @else {
+        fill: $fill;
+      }
+
+      // Use the normal stroke color if no accent is provided
+      @if hasvalue($strokeAccent) {
+        stroke: $strokeAccent;
+      }
+      @else {
+        // ...or use the fill if no normal stroke is provided
+        @if hasvalue($stroke) {
+          stroke: $stroke;
+        }
+        @else {
+          stroke: $fill;
+        }
+      }
+    }
+  }
+}
+
+@include exports(iconic) {
+  .iconic {
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+
+    a > & {
+      @include color-icon($primary-color);
+      margin-top: -2px;
+      margin-right: 0.25rem;
+    }
+  }
+
+  .iconic * {
+    fill: $iconic-primary-fill;
+    stroke: $iconic-primary-stroke;
+
+    &.iconic-property-accent {
+      fill: $iconic-accent-fill;
+      stroke: $iconic-accent-stroke;
+    }
+  }
+
+  @each $color in map-keys($foundation-colors) {
+    .iconic-color-#{$color} {
+      @include color-icon(map-get($foundation-colors, $color));
+    }
+  }
+  .iconic-color-secondary {
+    @include color-icon($secondary-color);
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_label.scss b/afb-client/bower_components/foundation-apps/scss/components/_label.scss
new file mode 100644
index 0000000..129757e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_label.scss
@@ -0,0 +1,134 @@
+/*
+  Label
+*/
+
+/// @Foundation.settings
+// Label
+$label-fontsize: 0.8rem !default;
+$label-padding: ($global-padding / 3) ($global-padding / 2) !default;
+$label-radius: 0 !default;
+$label-background: $primary-color !default;
+$label-color: isitlight($primary-color) !default;
+
+$badge-fontsize: 0.8em !default;
+$badge-diameter: 1.5rem !default;
+$badge-background: $primary-color !default;
+$badge-color: #fff !default;
+///
+
+%label {
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-block;
+  cursor: default;
+}
+
+@mixin label-layout(
+  $fontsize: $label-fontsize,
+  $padding: $label-padding
+) {
+  font-size: $fontsize;
+  padding: $padding;
+}
+
+@mixin label-style(
+  $background: $label-background,
+  $color: $label-color,
+  $radius: $label-radius
+) {
+  background: $background;
+  border-radius: $radius;
+
+  @if $color == auto {
+    color: isitlight($background);
+  }
+  @else {
+    color: $color;
+  }
+}
+
+@mixin label(
+  $background: $label-background,
+  $color: $label-color,
+  $radius: $label-radius,
+  $fontsize: $label-fontsize,
+  $padding: $label-padding
+) {
+  @extend %label;
+  @include label-layout($fontsize, $padding);
+  @include label-style($background, $color, $radius);
+}
+
+@include exports(label) {
+  .label {
+    @include label;
+
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include label-style($color-value, auto);
+      }
+    }
+  }
+}
+
+/*
+  Badge
+*/
+
+%badge {
+  align-items: center;
+  justify-content: center;
+  display: inline-flex;
+  border-radius: 1000px;
+}
+
+@mixin badge-layout(
+  $fontsize: $badge-fontsize,
+  $diameter: $badge-diameter
+) {
+  font-size: $fontsize;
+  width: $diameter;
+  height: $diameter;
+}
+
+@mixin badge-style(
+  $background: $badge-background,
+  $color: $badge-font-color
+) {
+  background: $background;
+
+  @if $color == auto {
+    color: isitlight($background);
+  }
+  @else {
+    color: $color;
+  }
+}
+
+@mixin badge(
+  $background: $badge-background,
+  $color: $badge-color,
+  $diameter: $badge-diameter,
+  $fontsize: $badge-fontsize
+) {
+  @extend %badge;
+  @include badge-layout($fontsize, $diameter);
+  @include badge-style($background, $color);
+}
+
+@include exports(badge) {
+  .badge {
+    @include badge;
+
+    &.secondary {
+      @include badge-style($secondary-color, auto);
+    }
+    @each $color in map-keys($foundation-colors) {
+      &.#{$color} {
+        $color-value: map-get($foundation-colors, $color);
+        @include badge-style($color-value, auto);
+      }
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_list.scss b/afb-client/bower_components/foundation-apps/scss/components/_list.scss
new file mode 100755
index 0000000..a303dcb
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_list.scss
@@ -0,0 +1,19 @@
+@mixin inline-list($alignment){
+	list-style-type: none;
+	text-align: $alignment;
+	li, dt, dd {
+		display: inline-block;
+		margin-left: -2px;
+		margin-right: -2px;
+	}
+}
+
+@include exports(list) {
+  .inline-list {
+    @include inline-list(left);
+    li {
+      margin-right: 1rem;
+      margin-left: 0;
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss b/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss
new file mode 100644
index 0000000..7e2f99d
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_menu-bar.scss
@@ -0,0 +1,363 @@
+/*
+  MENU BAR
+  --------
+
+  A generic, flexible menu component.
+
+  Features:
+   - Orient horizontally and vertically
+     - Change orientation at certain breakpoints
+   - Items with icons above, below, or to the left or right
+   - Text labels for vertical menus and badges for horizontal menus
+*/
+
+/// @Foundation.settings
+// Menu Bar
+$menubar-fontsize: 1rem !default;
+$menubar-background: #fff !default;
+$menubar-background-hover: smartscale($menubar-background, 7%) !default;
+$menubar-background-active: $menubar-background-hover;
+$menubar-color: isitlight($menubar-background) !default;
+$menubar-color-hover: $menubar-color !default;
+$menubar-color-active: $menubar-color-hover;
+
+$menubar-item-padding: $global-padding !default;
+$menubar-icon-size: 25px !default;
+$menubar-icon-spacing: $menubar-item-padding !default;
+///
+
+// Menu bar container
+%menu-bar {
+  display: flex;
+  align-items: stretch;
+  margin: 0;
+  list-style-type: none;
+
+  // Menu item
+  > li {
+    // This flex setting makes each item an equal width
+    flex: 1 0 auto;
+    align-items: center;
+
+    // Link inside menu item
+    > a {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      padding: $menubar-item-padding;
+      font-size: $menubar-fontsize;
+      line-height: 1;
+    }
+  }
+}
+
+@mixin menu-bar-layout (
+  $orientation: horizontal,
+  $stretch: true
+) {
+  /*
+    Orientation
+  */
+  @if $orientation == horizontal {
+    overflow-x: hidden;
+    flex-flow: row nowrap;
+    > li > a {
+      flex-flow: column nowrap;
+    }
+  }
+  @else {
+    flex-flow: column nowrap;
+    > li > a {
+      flex-flow: row nowrap;
+    }
+  }
+
+  /*
+    Stretch
+  */
+  > li {
+    @if $stretch == false {
+      flex: 0 0 auto;
+    }
+  }
+}
+
+@mixin menu-bar-style(
+  $background: $menubar-background,
+  $background-hover: $menubar-background-hover,
+  $background-active: $menubar-background-active,
+  $color: $menubar-color,
+  $color-hover: $menubar-color-hover,
+  $color-active: $menubar-color-active,
+  $autocolor: false
+) {
+  // Autocoloring
+  @if ($autocolor) {
+    $background-hover: smartscale($background, 7%);
+    $background-active: $background-hover;
+
+    $color: isitlight($background);
+    $color-hover: $color;
+    $color-active: $color;
+  }
+
+  // Container
+  background: $background;
+
+  // Items
+  > li > a {
+    color: $color;
+
+    &:hover {
+      background: $background-hover;
+      color: $color-hover;
+    }
+  }
+  .is-active > a {
+    background: $background-active;
+    color: $color-active
+  }
+
+  // Iconic
+  @if using(iconic) {
+    .iconic { @include color-icon($color); }
+  }
+}
+
+@mixin menu-bar-icons(
+  $position: left,
+  $size: $menubar-icon-size
+) {
+  > li {
+    // Sizing
+    > img, > .iconic {
+      margin: 0;
+      @if $menubar-icon-size != false {
+        width: $menubar-icon-size;
+        height: $menubar-icon-size;
+      }
+    }
+
+    // Position
+    @if $position == left {
+      > a {
+        flex-flow: row nowrap;
+        align-items: center;
+        > img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
+      }
+    }
+    @if $position == top {
+      > a {
+        flex-flow: column nowrap;
+        > img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
+      }
+    }
+    @if $position == right {
+      > a {
+        flex-flow: row-reverse nowrap;
+        > img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
+      }
+    }
+    @if $position == bottom {
+      > a {
+        flex-flow: column-reverse nowrap;
+        > img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
+      }
+    }
+  }
+}
+
+@mixin menu-bar-labels(
+  $x: right,
+  $y: center,
+  $offset: $menubar-item-padding,
+  $size: 1.2rem,
+  $background: red,
+  $color: auto,
+  $selector: '.menu-bar-label'
+) {
+  > li {
+    position: relative;
+
+    > a {
+      @if $x == left or $x == right {
+        padding-#{$x}: $size + $offset * 2;
+      }
+    }
+  }
+
+  #{$selector} {
+    display: block;
+    font-size: $size * 0.75;
+    width: $size;
+    height: $size;
+    line-height: $size;
+    text-align: center;
+    border-radius: 1000px;
+    background: $background;
+    color: if($color == auto, isitlight($background), $color);
+    position: absolute;
+    pointer-events: none;
+
+    @if $x == left or $x == right {
+      #{$x}: $offset;
+    }
+
+    @if $y == top or $y == bottom {
+      #{$y}: $offset;
+    }
+    @else {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+/*
+  Set the alignment of menu items (li) within a menu-bar
+
+  left: Items align to the left.
+  right: Items align to the right.
+  center: Items align to the center.
+  justify: Items are spaced equally apart so they occupy the space of the entire grid.
+  spaced: Items are given equal space to their left and right.
+
+  @group menu-bar
+
+  @param {string} $align - Alignment to use.
+
+  @output An appropriate justify-content value.
+*/
+@mixin menu-bar-align($align: left) {
+  $options: (
+    left: flex-start,
+    right: flex-end,
+    center: center,
+    justify: space-between,
+    spaced: space-around,
+  );
+  justify-content: map-get($options, $align);
+}
+
+/*
+  CSS output
+*/
+@include exports(menu-bar) {
+  .menu-bar {
+    @extend %menu-bar;
+    @include menu-bar-style;
+
+    // Positioning
+    &, &.horizontal  { @include menu-bar-layout(horizontal); }
+    &.vertical       { @include menu-bar-layout(vertical); }
+
+    // Condensed bar
+    &.condense {
+      > li { flex: 0 0 auto; }
+    }
+
+    // Align Menu Items
+    &.align-right   { @include menu-bar-align(right); }
+    &.align-center  { @include menu-bar-align(center); }
+    &.align-justify { @include menu-bar-align(justify); }
+    &.align-spaced  { @include menu-bar-align(spaced); }
+
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        &.#{$size}-condense { li { flex: 0 0 auto; } }
+        &.#{$size}-expand   { li { flex: 1 0 auto; } }
+
+        // Responsive Alignment
+        &.#{$size}-align-left   { @include menu-bar-align(left); }
+        &.#{$size}-align-right   { @include menu-bar-align(right); }
+        &.#{$size}-align-center  { @include menu-bar-align(center); }
+        &.#{$size}-align-justify { @include menu-bar-align(justify); }
+        &.#{$size}-align-spaced  { @include menu-bar-align(spaced); }
+      }
+    }
+
+    // Responsive positioning
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        &.#{$size}-horizontal {
+          @include menu-bar-layout(horizontal);
+        }
+        &.#{$size}-vertical {
+          @include menu-bar-layout(vertical);
+        }
+      }
+    }
+
+    // Icon positioning
+    &, &.icon-top { @include menu-bar-icons(top); }
+    &.icon-right  { @include menu-bar-icons(right); }
+    &.icon-bottom { @include menu-bar-icons(bottom); }
+    &.icon-left   { @include menu-bar-icons(left); }
+    @each $size in $breakpoint-classes {
+      @each $pos in (top, right, bottom, left) {
+        @include breakpoint($size) {
+          &.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
+        }
+      }
+    }
+
+    // Labels
+    &.label-side   { @include menu-bar-labels(right, center); }
+    &.label-corner { @include menu-bar-labels(right, top); }
+
+    // Coloring
+    &.primary {
+      @include menu-bar-style($primary-color, $autocolor: true);
+    }
+    &.dark {
+      @include menu-bar-style($dark-color, $autocolor: true);
+    }
+
+    // Title
+    > li.title {
+      padding: $menubar-item-padding;
+      cursor: default;
+      font-weight: bold;
+    }
+  }
+
+  // Menu groups
+  .menu-group {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    @include breakpoint(medium) {
+      flex-wrap: nowrap;
+    }
+
+    > .menu-group-left, > .menu-group-right {
+      flex: 1 1 100%;
+
+      @include breakpoint(medium) {
+        flex: 0 0 auto;
+      }
+    }
+
+    // Menu bar is condensed
+    .menu-bar {
+      > li { flex: 0 0 auto; }
+      margin: 0;
+    }
+
+    // Coloring class cascades down to the menu bar
+    &.primary {
+      background-color: $primary-color;
+      .menu-bar {
+        @include menu-bar-style($primary-color, $autocolor: true);
+      }
+    }
+    &.dark {
+      background-color: $dark-color;
+      .menu-bar {
+        @include menu-bar-style($dark-color, $autocolor: true);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_modal.scss b/afb-client/bower_components/foundation-apps/scss/components/_modal.scss
new file mode 100644
index 0000000..0899a71
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_modal.scss
@@ -0,0 +1,126 @@
+/*
+  MODAL
+  -----
+
+  The humble modal hides off-canvas until summoned with an fa-open directive. Modals appear over an overlay that darkens the rest of the page, and have a maxmimum width. You can construct a grid inside a modal, or attach panels to it.
+
+  Note that the modal overlay is hardcoded into the CSS, because whether or not you build your modal semantically, the overlay is always required and will always look the same.
+*/
+
+/// @Foundation.settings
+// Modal
+$modal-background: #fff !default;
+$modal-border: 0 !default;
+$modal-radius: 0px !default;
+$modal-shadow: none !default;
+$modal-zindex: 1000 !default;
+$modal-sizes: (
+  tiny: 300px,
+  small: 500px,
+  medium: 600px,
+  large: 800px,
+) !default;
+
+$modal-overlay-class: 'modal-overlay' !default;
+$modal-overlay-background: rgba(#333, 0.7) !default;
+///
+
+%modal {
+  position: relative;
+  z-index: $modal-zindex + 1;
+  background: $modal-background;
+  flex: 0 0 auto;
+  width: 100%;
+  height: 100vh;
+  max-height: 100%;
+  overflow: hidden;
+  padding: $global-padding;
+
+  @include breakpoint(medium) {
+    height: auto;
+    max-width: map-get($modal-sizes, medium);
+  }
+
+  .grid-content, .grid-block {
+    margin: 0;
+  }
+
+  .close-button, [fa-close] {
+    z-index: $modal-zindex + 1;
+  }
+}
+
+@mixin modal-dialog() {
+  height: auto;
+}
+@mixin modal-layout(
+  $width: map-get($modal-sizes, medium),
+  $dialog: false
+) {
+  max-width: $width;
+}
+@mixin modal-style(
+  $border: $modal-border,
+  $radius: $modal-radius,
+  $shadow: $modal-shadow
+) {
+  @if $border != 0 {
+    border: $border;
+  }
+  @if $radius != 0 {
+    border-radius: $radius;
+  }
+  @if $shadow != none {
+    box-shadow: $shadow;
+  }
+}
+
+@mixin modal(
+  $width: map-get($modal-sizes, medium),
+  $border: $modal-border,
+  $radius: $modal-radius,
+  $shadow: $modal-shadow
+) {
+  @extend %modal;
+  @include modal-layout($width);
+  @include modal-style($border, $radius, $shadow);
+}
+
+@include exports(modal) {
+  .modal {
+    @include modal;
+
+    @each $size in map-keys($modal-sizes) {
+      $width: map-get($modal-sizes, $size);
+      @if $size != medium {
+        .#{$size} > & { @include modal-layout($width); }
+      }
+    }
+
+    .dialog > & {
+      @include modal-dialog;
+    }
+    .collapse > & {
+      padding: 0;
+    }
+  }
+
+  .#{$modal-overlay-class} {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: $modal-zindex;
+    display: none;
+    background-color: $modal-overlay-background;
+
+    // Horizontally and vertically center the modal
+    align-items: center;
+    justify-content: center;
+
+    &.is-active {
+      display: flex;
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_motion.scss b/afb-client/bower_components/foundation-apps/scss/components/_motion.scss
new file mode 100644
index 0000000..88bd3a0
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_motion.scss
@@ -0,0 +1,524 @@
+// FOUNDATION MOTION UI
+// Table of Contents
+//
+// 0. Variables
+// 1. Base Transitions
+//      a. Slide
+//      b. Fade
+//      c. Hinge
+//      d. Scale
+//      e. Spin
+// 2. Base Animations
+//      a. Shake
+//      b. Spinners
+//      c. Wiggle
+// 3. HTML Attributes
+
+// 0. Variables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+/// @Foundation.settings
+// Motion UI
+// Classes to use when triggering in/out animations
+$motion-class: (
+  in: "ng-enter",
+  out: "ng-leave",
+) !default;
+$motion-class-active: (
+  in: "ng-enter-active",
+  out: "ng-leave-active",
+) !default;
+$motion-class-stagger: (
+  in: "ng-enter-stagger",
+  out: "ng-leave-stagger",
+) !default;
+$motion-class-showhide: (
+  in: "ng-hide-remove",
+  out: "ng-hide-add",
+);
+$motion-class-showhide-active: (
+  in: "ng-hide-remove-active",
+  out: "ng-hide-add-active",
+);
+
+// Set if movement-based transitions should also fade the element in and out
+$motion-slide-and-fade: false !default;
+$motion-hinge-and-fade: true !default;
+$motion-scale-and-fade: true !default;
+$motion-spin-and-fade: true !default;
+
+// Default speed for transitions and animations
+$motion-duration-default: 500ms !default;
+
+// Slow and fast modifiders
+$motion-duration-slow: 750ms !default;
+$motion-duration-fast: 250ms !default;
+$motion-stagger-duration-default: 150ms !default;
+$motion-stagger-duration-short: 50ms !default;
+$motion-stagger-duration-long: 300ms !default;
+
+// Default timing function for transitions and animations
+$motion-timing-default: ease !default;
+
+// Built-in and custom easing functions
+// Every item in this map becomes a CSS class
+$motion-timings: (
+  linear: linear,
+  ease: ease,
+  easeIn: ease-in,
+  easeOut: ease-out,
+  easeInOut: ease-in-out,
+  bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
+  bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
+  bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
+) !default;
+
+// Default delay for all transitions and animations
+$motion-delay-default: 0 !default;
+// Short and long delay modifiers
+$motion-delay-short: 300ms !default;
+$motion-delay-long: 700ms !default;
+///
+
+// Looks for a timing function in the list of presets
+// If none are found, returns the value as-is.
+@function get-timing($timing) {
+  @if map-has-key($motion-timings, $timing) {
+    @return map-get($motion-timings, $timing);
+  }
+  @else {
+    @return $timing;
+  }
+}
+
+// Applies transition settings common to all mixins
+@mixin transition-basics(
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+  transition-duration: $duration;
+  transition-timing-function: get-timing($timing);
+  transition-delay: $delay;
+}
+
+// Wraps content in an enter/leave class, chained to the parent selector
+// Define the initial state of a transition here
+@mixin transition-start($dir) {
+  $sel1: map-get($motion-class, $dir);
+  $sel2: map-get($motion-class-showhide, $dir);
+
+  &.#{$sel1},
+  &.#{$sel2} {
+    @content;
+  }
+}
+
+// Wraps content in an enter/leave active class, chained to the matching
+// enter/leave class, chained to the parent selector
+// Define the end state of a transition here
+@mixin transition-end($dir) {
+  $sel1:  map-get($motion-class, $dir);
+  $sel1A: map-get($motion-class-active, $dir);
+
+  $sel2:  map-get($motion-class-showhide, $dir);
+  $sel2A: map-get($motion-class-showhide-active, $dir);
+
+  &.#{$sel1}.#{$sel1A},
+  &.#{$sel2}.#{$sel2A} {
+    @content;
+  }
+}
+
+@mixin stagger($delay-amount) {
+  transition-delay: $delay-amount;
+  // this is to avoid accidental CSS inheritance
+  transition-duration:0;
+}
+
+
+// 1. Base Transitions
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// SLIDE
+@mixin slide (
+  $dir: in,
+  $from: left,
+  $fade: $motion-slide-and-fade,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+  $slideDirections: (
+    top:    translateY(-100%),
+    right:  translateX(100%),
+    bottom: translateY(100%),
+    left:   translateX(-100%),
+  );
+  $start: '';
+  $end: '';
+
+  @if $dir == in {
+    $start: map-get($slideDirections, $from);
+    $end: translateX(0) translateY(0);
+  }
+  @else {
+    $start: translateX(0) translateY(0);
+    $end: map-get($slideDirections, $from);
+  }
+
+  // CSS Output
+  @include transition-start($dir) {
+    @include transition-basics($duration, $timing, $delay);
+    transition-property: transform, opacity;
+    backface-visibility: hidden;
+    transform: $start;
+
+    @if $fade { opacity: if($dir == in, 0, 1); }
+  }
+  @include transition-end($dir) {
+    transform: $end;
+
+    @if $fade { opacity: if($dir == in, 1, 0); }
+  }
+}
+
+// FADE
+@mixin fade(
+  $dir: in,
+  $from: 0,
+  $to: 1,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+  @include transition-start($dir) {
+    @include transition-basics($duration, $timing, $delay);
+    transition-property: opacity;
+    opacity: $from;
+  }
+  @include transition-end($dir) {
+    opacity: $to;
+  }
+}
+
+// HINGE
+@mixin hinge (
+  $dir: in,
+  $from: left,
+  $axis: edge,
+  $perspective: 2000px,
+  $turn-origin: from-back,
+  $fade: $motion-hinge-and-fade,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+
+  // Rotation directions when hinging from back vs. front
+  $rotationAmount: 90deg;
+  $rotationsBack: (
+    top: rotateX($rotationAmount * -1),
+    right: rotateY($rotationAmount * -1),
+    bottom: rotateX($rotationAmount),
+    left: rotateY($rotationAmount),
+  );
+  $rotationsFrom: (
+    top: rotateX($rotationAmount),
+    right: rotateY($rotationAmount),
+    bottom: rotateX($rotationAmount * -1),
+    left: rotateY($rotationAmount * -1),
+  );
+
+  // Rotation origin
+  $rotation: '';
+  @if $turn-origin == from-front {
+    $rotation: map-get($rotationsFrom, $from);
+  }
+  @else if $turn-origin == from-back {
+    $rotation: map-get($rotationsBack, $from);
+  }
+  @else {
+    @warn "`$turn-origin` must be either `from-back` or `from-front`";
+  }
+
+  // Start and end state
+  $start: '';
+  $end: '';
+  @if $dir == in {
+    $start: perspective($perspective) $rotation;
+    $end: rotate(0deg);
+  }
+  @else {
+    $start: rotate(0deg);
+    $end: perspective($perspective) $rotation;
+  }
+
+  // Turn axis
+  $origin: '';
+  @if $axis == edge {
+    $origin: $from;
+  }
+  @else {
+    $origin: center;
+  }
+
+  @include transition-start($dir) {
+    @include transition-basics($duration, $timing, $delay);
+    transition-property: transform, opacity;
+    transform: $start;
+    transform-origin: $origin;
+    @if $fade { opacity: if($dir == in, 0, 1); }
+  }
+  @include transition-end($dir) {
+    transform: $end;
+    @if $fade { opacity: if($dir == in, 1, 0); }
+  }
+}
+
+// SCALE
+@mixin scale(
+  $dir: in,
+  $from: 1.5,
+  $to: 1,
+  $fade: $motion-scale-and-fade,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+  @include transition-start($dir) {
+    @include transition-basics($duration, $timing, $delay);
+    transition-property: transform, property;
+    transform: scale($from);
+    @if $fade { opacity: if($dir == in, 0, 1) }
+  }
+  @include transition-end($dir) {
+    transform: scale($to);
+    @if $fade { opacity: if($dir == in, 1, 0) }
+  }
+}
+
+// SPIN
+@mixin spin(
+  $dir: in,
+  $amount: 0.75turn,
+  $ccw: false,
+  $fade: $motion-spin-and-fade,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default
+) {
+  $amount: turn-to-deg($amount);
+  $start: 0;
+  $end: 0;
+
+  @if $dir == in {
+    $start: if($ccw, $amount, $amount * -1);
+    $end: 0;
+  }
+  @else {
+    $start: 0;
+    $end: if($ccw, $amount * -1, $amount);
+  }
+
+  @include transition-start($dir) {
+    transition-property: transform, opacity;
+    transform: rotate($start);
+    @if $fade { opacity: if($dir == in, 0, 1); }
+  }
+  @include transition-end($dir) {
+    transform: rotate($end);
+    @if $fade { opacity: if($dir == in, 1, 0); }
+  }
+}
+
+
+// 2. Base Animations
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// SHAKE
+@keyframes shake {
+  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
+    transform: translateX(7%);
+  }
+  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
+    transform: translateX(-7%);
+  }
+  100% { transform: translateX(0); }
+}
+
+// SPINNERS
+@keyframes spin-cw {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-ccw {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(-360deg); }
+}
+
+// WIGGLE
+@keyframes wiggle {
+  40%, 50%, 60% {
+    transform: rotate(7deg);
+  }
+  35%, 45%, 55%, 65% {
+    transform: rotate(-7deg);
+  }
+  0%, 30%, 70%, 100% { transform: rotate(0); }
+}
+
+@mixin animation(
+  $animation,
+  $duration: $motion-duration-default,
+  $timing: $motion-timing-default,
+  $delay: $motion-delay-default,
+  $iterations: null
+) {
+  
+  animation-name: $animation;
+  animation-duration: $duration;
+  animation-timing-function: $timing;
+
+  backface-visibility: hidden;
+  transform: translate3d(0,0,0);
+
+  @if $delay != null {
+    animation-delay: $delay;
+  }
+  @if $iterations != null {
+    animation-iteration-count: $iterations;
+  }
+
+  @if $animation == null {
+    @warn "Please include an animation name";
+  }
+}
+
+// 3. HTML Exports
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@include exports(motion) {
+  /*
+    Transitions
+  */
+
+  // Slide
+  .slideInDown    { @include slide($from: top); }
+  .slideInLeft    { @include slide($from: right); }
+  .slideInUp      { @include slide($from: bottom); }
+  .slideInRight   { @include slide($from: left); }
+  .slideOutBottom { @include slide($dir: out, $from: bottom); }
+  .slideOutRight  { @include slide($dir: out, $from: right); }
+  .slideOutUp     { @include slide($dir: out, $from: top); }
+  .slideOutLeft   { @include slide($dir: out, $from: left); }
+
+  // Fade
+  .fadeIn  { @include fade(in, 0, 1); }
+  .fadeOut { @include fade(out, 1, 0); }
+
+  // Hinge
+  .hingeInFromTop      { @include hinge($dir: in, $from: top); }
+  .hingeInFromRight    { @include hinge($dir: in, $from: right); }
+  .hingeInFromBottom   { @include hinge($dir: in, $from: bottom); }
+  .hingeInFromLeft     { @include hinge($dir: in, $from: left); }
+  .hingeInFromMiddleX  { @include hinge($dir: in, $from: top,   $axis: center); }
+  .hingeInFromMiddleY  { @include hinge($dir: in, $from: right, $axis: center); }
+  .hingeOutFromTop     { @include hinge($dir: out, $from: top); }
+  .hingeOutFromRight   { @include hinge($dir: out, $from: right); }
+  .hingeOutFromBottom  { @include hinge($dir: out, $from: bottom); }
+  .hingeOutFromLeft    { @include hinge($dir: out, $from: left); }
+  .hingeOutFromMiddleX { @include hinge($dir: out, $from: top,   $axis: center); }
+  .hingeOutFromMiddleY { @include hinge($dir: out, $from: right, $axis: center); }
+
+  // Scale
+  .zoomIn  { @include scale(in,  1.5, 1); }
+  .zoomOut { @include scale(out, 0.5, 1); }
+
+  // Spin
+  .spinIn     { @include spin(in, 0.75turn); }
+  .spinOut    { @include spin(out, 0.75turn); }
+  .spinInCCW  { @include spin(in, 0.75turn, true); }
+  .spinOutCCW { @include spin(out, 0.75turn, true); }
+
+  /*
+    Transition modifiers
+  */
+
+  // Duration
+  .slow { transition-duration: $motion-duration-slow !important; }
+  .fast { transition-duration: $motion-duration-fast !important; }
+
+  // Easing
+  @each $easing in map-keys($motion-timings) {
+    .#{$easing} {
+      transition-timing-function: map-get($motion-timings, $easing) !important;
+    }
+  }
+
+  // Delay
+  .delay       { transition-delay: $motion-delay-short !important; }
+  .long-delay  { transition-delay: $motion-delay-long !important; }
+
+  /*
+    Animations
+  */
+
+  .shake    { @include animation(shake); }
+  .spin-cw  { @include animation(spin-cw); }
+  .spin-ccw { @include animation(spin-ccw); }
+  .wiggle   { @include animation(wiggle); }
+
+  /*
+    Animation modifiers
+  */
+
+  .shake,
+  .spin-cw,
+  .spin-ccw,
+  .wiggle {
+    // Repeat
+    &.infinite { animation-iteration-count: infinite; }
+
+    // Easing
+    @each $timing in map-keys($motion-timings) {
+      &.#{$timing} {
+        animation-timing-function: map-get($motion-timings, $timing) !important;
+      }
+    }
+
+    // Duration
+    &.slow { animation-duration: $motion-duration-slow !important; }
+    &.fast { animation-duration: $motion-duration-fast !important; }
+
+    // Delay
+    &.delay       { animation-delay: $motion-delay-short !important; }
+    &.long-delay  { animation-delay: $motion-delay-long !important; }
+  }
+  .stagger { @include stagger($motion-stagger-duration-default); }
+  .stort-stagger { @include stagger($motion-stagger-duration-default); }
+  .long-stagger { @include stagger($motion-stagger-duration-default); }
+}
+
+// View animation classes
+// - - - - - - - - - - - - - - - - - - - -
+
+// Applied to the immediate parent of the animating views
+.position-absolute {
+  overflow: hidden;
+  position: relative;
+}
+
+// Applied to the animating views
+.ui-animation {
+  &.ng-enter-active, &.ng-leave-active {
+    position: absolute !important;
+    backface-visibility: hidden;
+    -webkit-transform-style: preserve-3d;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_notification.scss b/afb-client/bower_components/foundation-apps/scss/components/_notification.scss
new file mode 100644
index 0000000..0386510
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_notification.scss
@@ -0,0 +1,207 @@
+/*
+  NOTIFICATION
+  ------------
+
+  An alert that pins to the corner of the screen when triggered by JavaScript. It can be set to disappear after a certain period of time, or to stay put until the user clicks on it. A custom action can be asigned to a notification as well.
+
+  Optionally, the notifications directive can also tap into the browser's native notification support, if it exists.
+*/
+
+/// @Foundation.settings
+// Notification
+$notification-default-position: right top !default;
+$notification-width: rem-calc(400) !default;
+$notification-offset: $global-padding !default;
+
+$notification-background: $primary-color !default;
+$notification-color: white !default;
+$notification-padding: $global-padding !default;
+$notification-radius: 4px !default;
+
+$notification-icon-size: 60px !default;
+$notification-icon-margin: $global-padding !default;
+$notification-icon-align: top !default;
+
+///
+
+%notification {
+  z-index: 1000;
+  display: flex;
+  position: relative;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+  display: none;
+
+  h1 {
+    font-size: 1.25em;
+    margin: 0;
+  }
+  p {
+    margin: 0;
+  }
+
+  // Placeholder animation
+  // transition: opacity 1s ease-out;
+
+  &.is-active {
+    display: flex;
+  }
+
+  .close-button {
+    color: white;
+  }
+}
+
+%notification-container {
+  z-index: 3000;
+  position: fixed;
+
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin notification-layout(
+  $x: nth($notification-default-position, 1),
+  $y: nth($notification-default-position, 2),
+  $size: $notification-width,
+  $offset: $notification-offset
+) {
+  width: $size;
+
+  @if $x == right {
+    right: $offset;
+  }
+  @else if $x == left {
+    left: $offset;
+  }
+  @else if $x == middle {
+    left: 50%;
+    margin-left: -($size / 2);
+  }
+
+  @if $y == top {
+    top: $offset;
+  }
+  @else if $y == bottom {
+    top: auto;
+    bottom: $offset;
+  }
+
+  // On small screens, notifications are full width but maintain their vertical orientation
+  @include breakpoint(small only) {
+    width: auto;
+    left: $offset;
+    right: $offset;
+    margin-left: 0;
+  }
+}
+@mixin notification-style(
+  $background: $notification-background,
+  $color: $notification-color,
+  $padding: $notification-padding,
+  $radius: $notification-radius
+) {
+  background: $background;
+  padding: $padding;
+  border-radius: $radius;
+
+  &, h1, h2, h3, h4, h5, h6 {
+    color: $color;
+  }
+}
+
+@mixin notification(
+  $background: $notification-background,
+  $color: $notification-color,
+  $padding: $notification-padding,
+  $radius: $notification-radius
+) {
+  @extend %notification;
+  @include notification-style($background, $color, $padding, $radius);
+}
+
+@mixin notification-container(
+  $x: nth($notification-default-position, 1),
+  $y: nth($notification-default-position, 2),
+  $size: $notification-width,
+  $offset: $notification-offset
+) {
+  @extend %notification-container;
+  @include notification-layout($x, $y, $size, $offset);
+}
+
+@mixin notification-icon(
+  $size: $notification-icon-size,
+  $margin: $notification-icon-margin,
+  $align: $notification-icon-align
+) {
+  $alignments: (
+    top: flex-start,
+    middle: middle,
+    bottom: flex-end,
+  );
+  flex: 0 0 $size;
+  margin-right: $global-padding;
+  align-self: map-get($alignments, $align);
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+/*
+  CSS Output
+*/
+
+@include exports(notification) {
+  .notification {
+    @include notification;
+
+    &.success   { @include notification-style($success-color) }
+    &.warning   { @include notification-style($warning-color) }
+    &.alert     { @include notification-style($alert-color) }
+    &.dark      { @include notification-style($dark-color, #fff) }
+
+
+  }
+
+  .static-notification {
+    @include notification;
+
+    position: fixed !important;
+    
+    &.top-right     { @include notification-layout(right, top); }
+    &.top-left      { @include notification-layout(left, top); }
+    &.top-middle    { @include notification-layout(middle, top); }
+
+    &.bottom-right  { @include notification-layout(right, bottom); }
+    &.bottom-left   { @include notification-layout(left, bottom); }
+    &.bottom-middle { @include notification-layout(middle, bottom); }
+
+    &.success   { @include notification-style($success-color) }
+    &.warning   { @include notification-style($warning-color) }
+    &.alert     { @include notification-style($alert-color) }
+    &.dark      { @include notification-style($dark-color, #fff) }
+  }
+
+  .notification-container {
+    @include notification-container;
+
+    &.top-right     { @include notification-layout(right, top); }
+    &.top-left      { @include notification-layout(left, top); }
+    &.top-middle    { @include notification-layout(middle, top); }
+
+    &.bottom-right  { @include notification-layout(right, bottom); }
+    &.bottom-left   { @include notification-layout(left, bottom); }
+    &.bottom-middle { @include notification-layout(middle, bottom); }
+  }
+
+  .notification-icon {
+    @include notification-icon;
+  }
+  .notification-content {
+    flex: 1;
+  }
+
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss b/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
new file mode 100644
index 0000000..d93e74c
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
@@ -0,0 +1,169 @@
+/*
+	Off-canvas menu
+  ---------------
+
+  A generic container that stays fixed to the left, top, right, or bottom of the screen, and is summoned when needed. When an off-canvas panel is open, the app frame shifts over to reveal the menu.
+*/
+
+/// @Foundation.settings
+// Off-canvas
+$offcanvas-size-horizontal: 250px !default;
+$offcanvas-size-vertical: 250px !default;
+
+$offcanvas-background: #fff !default;
+$offcanvas-color: isitlight($offcanvas-background) !default;
+$offcanvas-padding: 0 !default;
+$offcanvas-shadow: 3px 0 10px rgba(black, 0.25) !default;
+$offcanvas-animation-speed: 0.25s !default;
+
+$offcanvas-frame-selector: '.grid-frame' !default;
+///
+
+%off-canvas {
+  position: fixed;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  transition: transform $offcanvas-animation-speed ease-out;
+  z-index: 2;
+
+  // Active state
+  &.is-active {
+    transform: translate(0,0) !important;
+  }
+
+  // Frame styles
+  & ~ #{$offcanvas-frame-selector} {
+    transform: translate(0,0,0);
+    transition: transform 0.25s ease-out;
+    backface-visibility: hidden;
+    background: white;
+  }
+}
+@mixin off-canvas-detached {
+  z-index: 0;
+  box-shadow: none;
+
+  &, &.is-active {
+    transform: none;
+  }
+
+  & ~ #{$offcanvas-frame-selector} {
+    z-index: 1;
+    box-shadow: 0 0 15px rgba(0,0,0,0.5);
+  }
+}
+
+@mixin off-canvas-layout(
+  $position: left,
+  $size: default,
+  $shadow: $offcanvas-shadow
+) {
+  /*
+    Get shadow values for later use
+  */
+  $shadow-length: '';
+  $shadow-size: '';
+  $shadow-color: '';
+  @if hasvalue($shadow) {
+    $shadow-length: get-shadow-value($shadow, x);
+    $shadow-size: get-shadow-value($shadow, size);
+    $shadow-color: get-shadow-value($shadow, color);
+  }
+
+  /*
+    Sizing
+  */
+  @if $position == left or $position == right {
+    @if $size == default {
+      $size: $offcanvas-size-horizontal;
+    }
+    width: $size;
+    height: 100%;
+  }
+  @else {
+    @if $size == default {
+      $size: $offcanvas-size-vertical;
+    }
+    height: $size;
+    width: 100%;
+  }
+
+  /*
+    Positioning
+  */
+  @if $position == left {
+    top: 0;
+    left: 0;
+    @if hasvalue($shadow) { box-shadow: inset (-$shadow-length) 0 $shadow-size $shadow-color; }
+    transform: translateX(-100%);
+    &.is-active {
+      & ~ #{$offcanvas-frame-selector} { transform: translateX($size) !important; }
+    }
+  }
+  @else if $position == right {
+    left: auto;
+    top: 0;
+    right: 0;
+    @if hasvalue($shadow) { box-shadow: inset $shadow-length 0 $shadow-size $shadow-color; }
+    transform: translateX(100%);
+    &.is-active {
+      & ~ #{$offcanvas-frame-selector} { transform: translateX(-$size) !important; }
+    }
+  }
+  @else if $position == top {
+    top: 0;
+    left: 0;
+    transform: translateY(-100%);
+    @if hasvalue($shadow) { box-shadow: inset 0 (-$shadow-length) $shadow-size $shadow-color; }
+    &.is-active {
+      & ~ #{$offcanvas-frame-selector} { transform: translateY($size) !important; }
+    }
+  }
+  @else if $position == bottom {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100%);
+    @if hasvalue($shadow) { box-shadow: inset 0 $shadow-length $shadow-size $shadow-color; }
+    &.is-active {
+      & ~ #{$offcanvas-frame-selector} { transform: translateY(-$size) !important; }
+    }
+  }
+}
+
+@mixin off-canvas-style(
+  $background: $offcanvas-background,
+  $color: $offcanvas-color,
+  $padding: $offcanvas-padding
+) {
+  background: $background;
+
+  @if $color == auto {
+    color: isitlight($background, #000, #fff);
+  }
+  @else {
+    color: $color;
+  }
+
+  @if hasvalue($padding) {
+    padding: $padding;
+  }
+}
+
+@include exports(off-canvas) {
+  .off-canvas {
+    @extend %off-canvas;
+    @include off-canvas-layout;
+    @include off-canvas-style;
+
+    &.top    { @include off-canvas-layout(top); }
+    &.right  { @include off-canvas-layout(right); }
+    &.bottom { @include off-canvas-layout(bottom); }
+    &.left   { @include off-canvas-layout(left); }
+
+    &.detached { @include off-canvas-detached; }
+
+    &.primary { @include off-canvas-style($primary-color, auto); }
+    &.dark    { @include off-canvas-style($dark-color, auto); }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_panel.scss b/afb-client/bower_components/foundation-apps/scss/components/_panel.scss
new file mode 100644
index 0000000..5855419
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_panel.scss
@@ -0,0 +1,134 @@
+/*
+  PANEL
+  -----
+
+  The friendly panel is an all-purpose container for hiding content off-screen.
+
+  Features:
+   - Position at top, right, bottom, or left
+   - Anchor to grid block or window
+   - Define max width or height
+   - Transform into grid block depending on screen size
+*/
+
+/// @Foundation.settings
+// Panel
+$panel-size-horizontal: 300px !default;
+$panel-size-vertical: 300px !default;
+$panel-padding: 0 !default;
+
+$panel-background: #fff !default;
+$panel-shadow: 3px 0 10px rgba(black, 0.25) !default;
+
+// DEPRECATED: these variables will be removed in a future version.
+$panel-animation-speed: 0.25s !default;
+///
+
+%panel-base {
+  display: block;
+  position: absolute;
+  z-index: 100;
+  overflow-y: auto;
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+}
+
+@mixin panel-layout(
+  $position: left,
+  $size: default,
+  $shadow: $panel-shadow
+) {
+  @if $size == default {
+    @if $position == left or $position == right {
+      $size: $panel-size-horizontal;
+    }
+    @if $position == top or $position == bottom {
+      $size: $panel-size-vertical;
+    }
+  }
+
+  /*
+    Direction
+  */
+  @if $position == top {
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+  @else if $position == right {
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+  @else if $position == bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+  @else if $position == left {
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+
+  /*
+    Sizing
+  */
+  // Horizontal panels are always all the way tall and have a set width
+  @if $position == left or $position == right {
+    @if unit($size) == '%' {
+      width: $size;
+    }
+    @else {
+      width: 100%;
+      @include breakpoint($size) {
+        width: $size;
+      }
+    }
+  }
+  // (For now) vertical panels don't change size
+  @if $position == top or $position == bottom {
+    height: $size;
+  }
+
+  /*
+    Shadows
+  */
+  $shadow-distance: get-shadow-value($shadow, x);
+  $shadow-size: get-shadow-value($shadow, size);
+  $shadow-color: get-shadow-value($shadow, color);
+  &.is-active {
+    @if $position == left        { box-shadow: $shadow-distance 0 $shadow-size $shadow-color; }
+    @else if $position == right  { box-shadow: (-$shadow-distance) 0 $shadow-size $shadow-color; }
+    @else if $position == top    { box-shadow: 0 $shadow-distance $shadow-size $shadow-color; }
+    @else if $position == bottom { box-shadow: 2px (-$shadow-distance) $shadow-size $shadow-color; }
+  }
+}
+
+@mixin panel-style(
+  $padding: $panel-padding,
+  $background: $panel-background
+) {
+  /*
+    Basic styles
+  */
+  padding: $padding;
+  background: $background;
+}
+
+@include exports(panel) {
+  .panel {
+    @extend %panel-base;
+    @include panel-style;
+  }
+
+  .panel-top    { @include panel-layout(top); }
+  .panel-right  { @include panel-layout(right); }
+  .panel-bottom { @include panel-layout(bottom); }
+  .panel-left   { @include panel-layout(left); }
+
+  .panel-fixed  { position: fixed; }
+}
\ No newline at end of file
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_popup.scss b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
new file mode 100644
index 0000000..03403d6
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_popup.scss
@@ -0,0 +1,68 @@
+/*
+  POPUP
+  -----
+
+  A floating container that can anchor to any other on-screen element, and contain any content, including grid blocks or panels.
+*/
+
+/// @Foundation.settings
+// Popup
+$popup-width: rem-calc(300) !default;
+$popup-background: #fff !default;
+$popup-border: 0 !default;
+$popup-radius: 0 !default;
+$popup-shadow: 0 0 10px rgba(#000, 0.25) !default;
+///
+
+%popup {
+  position: absolute;
+  z-index: 1000;
+  opacity: 0;
+  overflow: hidden;
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
+
+  &.tether-enabled {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@mixin popup-layout(
+  $width: $popup-width
+) {
+  width: $popup-width;
+}
+@mixin popup-style(
+  $background: $popup-background,
+  $color: #000,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  background: $background;
+  border-radius: $radius;
+  box-shadow: $shadow;
+  border: $border;
+}
+
+@mixin popup(
+  $width: $popup-width,
+  $background: $popup-background,
+  $radius: $popup-radius,
+  $shadow: $popup-shadow,
+  $border: $popup-border
+) {
+  @extend %popup;
+  @include popup-layout($width);
+  @include popup-style($background, isitlight($background), $radius, $shadow, $border);
+}
+
+@include exports(popup) {
+  .popup {
+    @include popup;
+
+    &.dark    { @include popup-style($dark-color, #fff); }
+    &.primary { @include popup-style($primary-color, isitlight($primary-color)); }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_switch.scss b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
new file mode 100644
index 0000000..7710ad4
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_switch.scss
@@ -0,0 +1,130 @@
+/*
+  SWITCH
+  ------
+*/
+
+/// @Foundation.settings
+// Switch
+$switch-width: rem-calc(50) !default;
+$switch-height: rem-calc(32) !default;
+$switch-background: #ccc !default;
+$switch-background-active: $primary-color !default;
+$switch-border: 0 !default;
+$switch-radius: 9999px !default;
+$switch-animation-speed: 0.15s !default;
+
+$switch-paddle-color: white !default;
+$switch-paddle-offset: 4px !default;
+///
+
+%switch {
+  position: relative;
+  overflow: hidden;
+  display: inline-block;
+
+  > input {
+    position: absolute;
+    left: -9999px;
+    outline: none;
+  }
+
+  > label {
+    -ms-touch-action: manipulation;
+        touch-action: manipulation;
+    display: block;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    margin: 0;
+
+    // Paddle
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+}
+
+/*
+  Defines the dimmensions of the switch.
+
+  $width - width of the switch.
+  $height - height of the switch.
+*/
+@mixin switch-layout(
+  $width: $switch-width,
+  $height: $switch-height
+) {
+  width: $width;
+  height: $height;
+
+  > label {
+    &::after {
+      width: $height;
+      height: $height;
+    }
+  }
+  input:checked + label {
+    &::after {
+      left: $width - $height;
+    }
+  }
+}
+
+@mixin switch-style(
+  $background: $switch-background,
+  $background-active: $switch-background-active,
+  $border: $switch-border,
+  $radius: $switch-radius,
+  $paddle-color: $switch-paddle-color,
+  $paddle-offset: $switch-paddle-offset,
+  $animation-speed: $switch-animation-speed
+) {
+  @if hasvalue($border) {
+    border: $border;
+  }
+  border-radius: $radius;
+
+  > label {
+    background: $background;
+
+    &::after {
+      background: $paddle-color;
+      border-radius: $radius;
+      transition: left $animation-speed ease-out;
+
+      @if hasvalue($paddle-offset) {
+        border: $paddle-offset solid $background
+      }
+    }
+  }
+
+  input:checked + label {
+    background: $background-active;
+    margin: 0;
+
+    &::after {
+      @if hasvalue($paddle-offset) {
+        border-color: $background-active;
+      }
+    }
+  }
+}
+
+@mixin switch() {
+  @extend %switch;
+  @include switch-layout;
+  @include switch-style;
+}
+
+@include exports(switch) {
+  .switch {
+    @include switch;
+
+    &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
+    &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
new file mode 100644
index 0000000..7e4293e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_tabs.scss
@@ -0,0 +1,100 @@
+/*
+  TABS
+  ----
+*/
+
+/// @Foundation.settings
+// Tabs
+$tabstrip-background: transparent !default;
+
+$tab-title-background: $gray-light !default;
+$tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
+$tab-title-background-active: smartscale($tab-title-background, 3%) !default;
+$tab-title-color: isitlight($tab-title-background) !default;
+$tab-title-color-active: $tab-title-color !default;
+
+$tab-title-padding: $global-padding !default;
+$tab-content-padding: $global-padding !default;
+///
+
+@mixin tabstrip(
+	$orientation: horizontal,
+	$background: $tabstrip-background
+) {
+	/*
+		Container styles
+	*/
+	display: flex;
+	background: $background;
+
+	@if $orientation == vertical {
+	  flex-flow: column nowrap;
+	}
+	@else {
+		flex-flow: row wrap;
+	}
+}
+
+@mixin tabstrip-item(
+	$background: $tab-title-background,
+	$background-hover: $tab-title-background-hover,
+	$background-active: $tab-title-background-active,
+	$color: $tab-title-color,
+	$color-active: $tab-title-color-active,
+	$padding: $tab-title-padding
+) {
+  background: $background;
+  padding: $padding;
+  line-height: 1;
+  margin: 0;
+  flex: 0 1 auto;
+  cursor: pointer;
+  color: $color;
+
+  &.is-active {
+    background: $background-active;
+    color: $color-active;
+
+    &:hover {
+      background: $background-hover;
+    }
+  }
+  &:hover {
+    background: $background-hover;
+  }
+}
+
+@mixin tab-content(
+	$padding: $tab-content-padding
+) {
+  padding: $padding;
+}
+
+@mixin tab-content-item {
+  display: none;
+  &.is-active {
+    display: block;
+  }
+}
+
+@include exports(tabs) {
+  .tabs {
+    @include tabstrip(horizontal);
+
+    &.vertical {
+      @include tabstrip(vertical);
+    }
+
+    .tab-item {
+      @include tabstrip-item;
+    }
+  }
+
+  .tab-contents {
+    @include tab-content;
+
+    .tab-content {
+      @include tab-content-item;
+    }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss b/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss
new file mode 100644
index 0000000..e73bb4e
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss
@@ -0,0 +1,135 @@
+/*
+  TITLE BAR
+  ---------
+
+  A navigational component which can display the current screen the user is on, along with additional controls or menu items.
+
+  The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:
+   - Center
+   - Left
+   - Right
+*/
+
+/// @Foundation.settings
+// Title Bar
+$titlebar-center-width: 50% !default;
+$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
+$titlebar-background: #eee !default;
+$titlebar-color: #000 !default;
+$titlebar-border: 1px solid #ccc !default;
+$titlebar-padding: $global-padding !default;
+$titlebar-item-classes: (
+  center: 'center',
+  left: 'left',
+  right: 'right',
+  title: 'title',
+) !default;
+///
+
+%title-bar {
+  $center: map-get($titlebar-item-classes, center);
+  $left: map-get($titlebar-item-classes, left);
+  $right: map-get($titlebar-item-classes, right);
+  $title: map-get($titlebar-item-classes, title);
+
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: visible;
+
+  // Denotes the title of the bar
+  .#{$title} {
+    font-weight: bold;
+  }
+
+  // Denotes left, right, and center sections of the bar
+  .#{$left}, .#{$center}, .#{$right} {
+    display: block;
+    white-space: nowrap;
+    overflow: visible;
+
+    // If only one section is in use, stretch it all the way out
+    &:first-child:last-child {
+      flex: 1;
+      margin: 0;
+    }
+  }
+
+  // Left always comes first, then center, then right
+  // The left and right sections have the same width
+  .#{$left} {
+    order: 1;
+    flex: 0 0 $titlebar-side-width;
+  }
+  .#{$center} {
+    order: 2;
+    flex: 0 0 $titlebar-center-width;
+    text-align: center;
+  }
+  .#{$right} {
+    order: 3;
+    flex: 0 0 $titlebar-side-width;
+    text-align: right;
+  }
+
+  // If only left and right are in use, stretch them both out equally
+  .#{$left}:first-child {
+    flex: 1 1 auto;
+  }
+  .#{$left}:first-child + .#{$right}:last-child {
+    flex: 1 1 auto;
+  }
+
+  // If only center and right are in use, shift the center section into the right position
+  .#{$center}:first-child:not(:last-child) {
+    margin-left: $titlebar-side-width;
+  }
+  // If only center and left are in use, override the above style
+  .#{$center} + .#{$left} {
+    margin-right: -($titlebar-side-width);
+  }
+}
+
+@mixin title-bar-style(
+  $background: $titlebar-background,
+  $color: $titlebar-color,
+  $border: $titlebar-border,
+  $padding: $titlebar-padding
+) {
+  background: $background;
+  color: $color;
+  padding: $padding;
+  border-bottom: $border;
+}
+
+@mixin title-bar(
+  $background: $titlebar-background,
+  $color: $titlebar-color,
+  $border: $titlebar-border,
+  $padding: $titlebar-padding
+) {
+  @extend %title-bar;
+  @include title-bar-style($background, $color, $border, $padding);
+}
+
+@include exports(title-bar) {
+  .title-bar {
+    @include title-bar;
+
+    &.primary {
+      @include title-bar-style($primary-color, isitlight($primary-color));
+      a, a:hover { color: isitlight($primary-color); }
+      @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }
+    }
+    &.dark {
+      @include title-bar-style($dark-color, #fff);
+      a, a:hover { color: #fff; }
+      @if using(iconic) { .iconic { @include color-icon(#fff); } }
+    }
+  }
+    .title-bar-bottom {
+      border-bottom: 0;
+      border-top: $titlebar-border;
+    }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_typography.scss b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss
new file mode 100755
index 0000000..8e64a89
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_typography.scss
@@ -0,0 +1,345 @@
+/*
+  TYPOGRAPHY
+  ----------
+
+  Includes typographic resets for many common elements, and a few helper classes.
+   - Headers
+   - Subheaders
+   - Lead paragraphs
+   - Ordered/unordered lists
+   - Code samples
+   - Anchors
+   - Dividers
+   - Blockquotes
+   - Acronyms
+*/
+
+/// @Foundation.settings
+// Typography
+// We use these to control header font styles
+$header-font-family: $body-font-family !default;
+$header-font-weight: $font-weight-normal !default;
+$header-font-style: $font-weight-normal !default;
+$header-font-color: #222 !default;
+$header-line-height: 1.4 !default;
+$header-top-margin: .2rem !default;
+$header-bottom-margin: .5rem !default;
+$header-text-rendering: optimizeLegibility !default;
+
+// We use these to control header font sizes
+$h1-font-size: rem-calc(44) !default;
+$h2-font-size: rem-calc(37) !default;
+$h3-font-size: rem-calc(27) !default;
+$h4-font-size: rem-calc(23) !default;
+$h5-font-size: rem-calc(18) !default;
+$h6-font-size: 1rem !default;
+
+// We use these to control header size reduction on small screens
+$h1-font-reduction: rem-calc(10) !default;
+$h2-font-reduction: rem-calc(10) !default;
+$h3-font-reduction: rem-calc(5) !default;
+$h4-font-reduction: rem-calc(5) !default;
+$h5-font-reduction: 0 !default;
+$h6-font-reduction: 0 !default;
+
+// These control how subheaders are styled.
+$subheader-line-height: 1.4 !default;
+$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$subheader-font-weight: $font-weight-normal !default;
+$subheader-top-margin: .2rem !default;
+$subheader-bottom-margin: .5rem !default;
+
+// A general <small> styling
+$small-font-size: 60% !default;
+$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+
+// We use these to style paragraphs
+$paragraph-font-family: inherit !default;
+$paragraph-font-weight: $font-weight-normal !default;
+$paragraph-font-size: 1rem !default;
+$paragraph-line-height: 1.6 !default;
+$paragraph-margin-bottom: rem-calc(20) !default;
+$paragraph-aside-font-size: rem-calc(14) !default;
+$paragraph-aside-line-height: 1.35 !default;
+$paragraph-aside-font-style: italic !default;
+$paragraph-text-rendering: optimizeLegibility !default;
+
+// We use these to style <code> tags
+$code-color: grayscale($primary-color) !default;
+$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
+$code-font-weight: $font-weight-normal !default;
+$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
+$code-border-size: 1px !default;
+$code-border-style: solid !default;
+$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
+
+// We use these to style anchors
+$anchor-text-decoration: none !default;
+$anchor-text-decoration-hover: none !default;
+$anchor-font-color: $primary-color !default;
+$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;
+
+// We use these to style the <hr> element
+$hr-border-width: 1px !default;
+$hr-border-style: solid !default;
+$hr-border-color: #ddd !default;
+$hr-margin: rem-calc(20) !default;
+
+// We use these to style lists
+$list-font-family: $paragraph-font-family !default;
+$list-font-size: $paragraph-font-size !default;
+$list-line-height: $paragraph-line-height !default;
+$list-margin-bottom: $paragraph-margin-bottom !default;
+$list-style-position: outside !default;
+$list-side-margin: 1.1rem !default;
+$list-ordered-side-margin: 1.4rem !default;
+$list-side-margin-no-bullet: 0 !default;
+$list-nested-margin: rem-calc(20) !default;
+$definition-list-header-weight: $font-weight-bold !default;
+$definition-list-header-margin-bottom: .3rem !default;
+$definition-list-margin-bottom: rem-calc(12) !default;
+
+// We use these to style blockquotes
+$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
+$blockquote-padding: rem-calc(9 20 0 19) !default;
+$blockquote-border: 1px solid #ddd !default;
+$blockquote-cite-font-size: rem-calc(13) !default;
+$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;
+
+// Acronym styles
+$acronym-underline: 1px dotted #ddd !default;
+///
+
+@mixin lead {
+  font-size: $paragraph-font-size + rem-calc(3.5);
+  line-height: 1.6;
+}
+
+@mixin subheader {
+  line-height: $subheader-line-height;
+  color: $subheader-font-color;
+  font-weight: $subheader-font-weight;
+  margin-top: $subheader-top-margin;
+  margin-bottom: $subheader-bottom-margin;
+}
+
+@include exports(typography) {
+  /* Typography resets */
+  div,
+  dl,
+  dt,
+  dd,
+  ul,
+  ol,
+  li,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  form,
+  p,
+  blockquote,
+  th,
+  td {
+    margin:0;
+    padding:0;
+  }
+
+  /* Default Link Styles */
+  a {
+    color: $anchor-font-color;
+    text-decoration: $anchor-text-decoration;
+    line-height: inherit;
+
+    &[ui-sref] {
+      cursor: pointer;
+    }
+
+    &:hover,
+    &:focus {
+      color: $anchor-font-color-hover;
+      @if $anchor-text-decoration-hover != $anchor-text-decoration {
+      	text-decoration: $anchor-text-decoration-hover;
+      }
+    }
+
+    img { border:none; }
+  }
+
+  /* Default paragraph styles */
+  p {
+    font-family: $paragraph-font-family;
+    font-weight: $paragraph-font-weight;
+    font-size: $paragraph-font-size;
+    line-height: $paragraph-line-height;
+    margin-bottom: $paragraph-margin-bottom;
+    text-rendering: $paragraph-text-rendering;
+
+    &.lead { @include lead; }
+
+    & aside {
+      font-size: $paragraph-aside-font-size;
+      line-height: $paragraph-aside-line-height;
+      font-style: $paragraph-aside-font-style;
+    }
+  }
+
+  /* Default header styles */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $header-font-family;
+    font-weight: $header-font-weight;
+    font-style: $header-font-style;
+    color: $header-font-color;
+    text-rendering: $header-text-rendering;
+    margin-top: $header-top-margin;
+    margin-bottom: $header-bottom-margin;
+    line-height: $header-line-height;
+
+    small {
+      font-size: $small-font-size;
+      color: $small-font-color;
+      line-height: 0;
+    }
+  }
+
+  h1 { font-size: $h1-font-size - $h1-font-reduction; }
+  h2 { font-size: $h2-font-size - $h2-font-reduction; }
+  h3 { font-size: $h3-font-size - $h3-font-reduction; }
+  h4 { font-size: $h4-font-size - $h4-font-reduction; }
+  h5 { font-size: $h5-font-size - $h5-font-reduction; }
+  h6 { font-size: $h6-font-size - $h6-font-reduction; }
+
+  .subheader { @include subheader; }
+
+  hr {
+    border: $hr-border-style $hr-border-color;
+    border-width: $hr-border-width 0 0;
+    clear: both;
+    margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));
+    height: 0;
+  }
+
+  /* Helpful Typography Defaults */
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
+
+  strong,
+  b {
+    font-weight: $font-weight-bold;
+    line-height: inherit;
+  }
+
+  small {
+    font-size: $small-font-size;
+    color: $small-font-color;
+    line-height: inherit;
+  }
+
+  code {
+    font-family: $code-font-family;
+    font-weight: $code-font-weight;
+    color: $code-color;
+    background-color: $code-background-color;
+    border-width: $code-border-size;
+    border-style: $code-border-style;
+    border-color: $code-border-color;
+    padding: $code-padding;
+  }
+
+  /* Lists */
+  ul,
+  ol,
+  dl {
+    font-size: $list-font-size;
+    line-height: $list-line-height;
+    margin-bottom: $list-margin-bottom;
+    list-style-position: $list-style-position;
+    font-family: $list-font-family;
+  }
+
+  /* Lists */
+  ul, ol {
+    margin-left: $list-side-margin;
+    li {
+      ul,
+      ol {
+        margin-left: $list-nested-margin;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  /* Lists without bullets */
+  ul.no-bullet {
+    &, li ul, li ol {
+      list-style-type: none;
+    }
+    margin-left: $list-side-margin-no-bullet;
+  }
+
+  /* Definition Lists */
+  dl {
+    dt {
+      margin-bottom: $definition-list-header-margin-bottom;
+      font-weight: $definition-list-header-weight;
+    }
+    dd { margin-bottom: $definition-list-margin-bottom; }
+  }
+
+  /* Abbreviations */
+  abbr,
+  acronym {
+    text-transform: uppercase;
+    font-size: 90%;
+    color: $body-font-color;
+    border-bottom: $acronym-underline;
+    cursor: help;
+  }
+  abbr {
+    text-transform: none;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    margin: 0 0 $paragraph-margin-bottom;
+    padding: $blockquote-padding;
+    border-left: $blockquote-border;
+
+    cite {
+      display: block;
+      font-size: $blockquote-cite-font-size;
+      color: $blockquote-cite-font-color;
+      &:before {
+        content: "\2014 \0020";
+      }
+
+      a,
+      a:visited {
+        color: $blockquote-cite-link-color;
+      }
+    }
+  }
+  blockquote,
+  blockquote p {
+    line-height: $paragraph-line-height;
+    color: $blockquote-font-color;
+  }
+
+  @include breakpoint(medium) {
+    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
+    h1 { font-size: $h1-font-size; }
+    h2 { font-size: $h2-font-size; }
+    h3 { font-size: $h3-font-size; }
+    h4 { font-size: $h4-font-size; }
+    h5 { font-size: $h5-font-size; }
+    h6 { font-size: $h6-font-size; }
+  }
+}
diff --git a/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss b/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss
new file mode 100755
index 0000000..dabe22f
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_utilities.scss
@@ -0,0 +1,160 @@
+/*
+  UTILITIES
+  ---------
+
+  Responsive helper classes to assist you in quickly doing basic formatting and layout.
+
+  Features:
+   - Vertical alignment
+   - Visibility
+   - Text alignment
+   - Floating
+*/
+
+$block-selector: '[class*="grid-block"]';
+
+@mixin show-for($size, $prop: block) {
+  &:not(.ng-hide) {
+    display: none !important;
+    @include breakpoint($size) {
+      display: $prop !important;
+    }
+  }
+}
+
+@mixin show-for-only($size, $prop: block) {
+  &:not(.ng-hide) {
+    display: none !important;
+    @include breakpoint($size only) {
+      display: $prop !important;
+    }
+  }
+}
+
+@mixin hide-for($size, $prop: block) {
+  &:not(.ng-hide) {
+    display: $prop !important;
+    @include breakpoint($size) {
+      display: none !important;
+    }
+  }
+}
+
+@mixin hide-for-only($size, $prop: block) {
+  &:not(.ng-hide) {
+    display: $prop !important;
+    @include breakpoint($size only) {
+      display: none !important;
+    }
+  }
+}
+
+@include exports(utilities) {
+  // Vertical alignment
+  .v-align {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    $align-values: (
+      'top': flex-start,
+      'center': center,
+      'bottom': flex-end,
+    );
+
+    @each $orient in (top, center, bottom) {
+      .align-#{$orient} {
+        align-self: map-get($align-values, $orient);
+      }
+    }
+
+    @each $size in $breakpoint-classes {
+      @each $orient in (top, center, bottom) {
+        @include breakpoint($size) {
+          .#{$size}-align-#{$orient} {
+            align-self: map-get($align-values, $orient);
+          }
+        }
+      }
+    }
+  }
+
+  // Visibility
+  .hide { display: none !important; }
+
+  .invisible { visibility: hidden; }
+
+  @each $size in $breakpoint-classes {
+    .hide-for-#{$size} {
+      @include hide-for($size);
+      &#{$block-selector} { @include hide-for($size, flex); }
+    }
+
+    .show-for-#{$size} {
+      @include show-for($size);
+      &#{$block-selector} { @include show-for($size, flex); }
+    }
+
+    .hide-for-#{$size}-only {
+      @include hide-for-only($size);
+      &#{$block-selector} { @include hide-for-only($size, flex); }
+    }
+
+    .show-for-#{$size}-only {
+      @include show-for-only($size);
+      &#{$block-selector} { @include show-for-only($size, flex); }
+    }
+  }
+
+  @each $orientation in (portrait, landscape) {
+    .hide-for-#{$orientation} {
+      @include breakpoint($orientation) {
+        display: none !important;
+        &#{$block-selector} { display: flex !important; }
+      }
+    }
+
+    .show-for-#{$orientation} {
+      display: none !important;
+      
+      @include breakpoint($orientation) {
+        display: block !important;
+        &#{$block-selector} { display: flex !important; }
+      }
+    }
+  }
+
+  /*
+    Text alignment
+  */
+  @each $align in (left, right, center, justify) {
+    .text-#{$align} {
+      text-align: $align;
+    }
+    
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        .#{$size}-text-#{$align} {
+          text-align: $align;
+        }
+      }
+
+      @include breakpoint($size only) {
+        .#{$size}-only-text-#{$align} {
+          text-align: $align;
+        }
+      }
+    }
+  }
+
+  /*
+    Floating
+  */
+  .clearfix { @include clearfix; }
+
+  @each $float in (left, right, none) {
+    .float-#{$float} {
+      float: #{$float};
+    }
+  }
+}