Update JSON API

24 files changed, 4823 insertions, 0 deletions

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_accordion.scss b/afm-client/bower_components/foundation-apps/scss/components/_accordion.scss
new file mode 100644
index 0000000..032bd02
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_action-sheet.scss b/afm-client/bower_components/foundation-apps/scss/components/_action-sheet.scss
new file mode 100644
index 0000000..ed478bb
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_block-list.scss b/afm-client/bower_components/foundation-apps/scss/components/_block-list.scss
new file mode 100644
index 0000000..8cbcfc4
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_button-group.scss b/afm-client/bower_components/foundation-apps/scss/components/_button-group.scss
new file mode 100644
index 0000000..6670c91
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_button.scss b/afm-client/bower_components/foundation-apps/scss/components/_button.scss
new file mode 100644
index 0000000..147b4e6
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_card.scss b/afm-client/bower_components/foundation-apps/scss/components/_card.scss
new file mode 100644
index 0000000..e085373
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_extras.scss b/afm-client/bower_components/foundation-apps/scss/components/_extras.scss
new file mode 100644
index 0000000..1e2443a
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_forms.scss b/afm-client/bower_components/foundation-apps/scss/components/_forms.scss
new file mode 100755
index 0000000..7d0376b
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_grid.scss b/afm-client/bower_components/foundation-apps/scss/components/_grid.scss
new file mode 100644
index 0000000..4a00fd6
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_iconic.scss b/afm-client/bower_components/foundation-apps/scss/components/_iconic.scss
new file mode 100644
index 0000000..e290458
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_label.scss b/afm-client/bower_components/foundation-apps/scss/components/_label.scss
new file mode 100644
index 0000000..0d17247
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_list.scss b/afm-client/bower_components/foundation-apps/scss/components/_list.scss
new file mode 100755
index 0000000..70937ae
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_menu-bar.scss b/afm-client/bower_components/foundation-apps/scss/components/_menu-bar.scss
new file mode 100644
index 0000000..7e2f99d
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_modal.scss b/afm-client/bower_components/foundation-apps/scss/components/_modal.scss
new file mode 100644
index 0000000..9b9350f
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_motion.scss b/afm-client/bower_components/foundation-apps/scss/components/_motion.scss
new file mode 100644
index 0000000..678ef50
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_notification.scss b/afm-client/bower_components/foundation-apps/scss/components/_notification.scss
new file mode 100644
index 0000000..ef54456
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_off-canvas.scss b/afm-client/bower_components/foundation-apps/scss/components/_off-canvas.scss
new file mode 100644
index 0000000..60ab0a3
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_panel.scss b/afm-client/bower_components/foundation-apps/scss/components/_panel.scss
new file mode 100644
index 0000000..5855419
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_popup.scss b/afm-client/bower_components/foundation-apps/scss/components/_popup.scss
new file mode 100644
index 0000000..db13df7
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_switch.scss b/afm-client/bower_components/foundation-apps/scss/components/_switch.scss
new file mode 100644
index 0000000..0b11383
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_tabs.scss b/afm-client/bower_components/foundation-apps/scss/components/_tabs.scss
new file mode 100644
index 0000000..8d61927
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss b/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss
new file mode 100644
index 0000000..ca64124
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_typography.scss b/afm-client/bower_components/foundation-apps/scss/components/_typography.scss
new file mode 100755
index 0000000..c1cf4c6
--- /dev/null
+++ b/afm-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/afm-client/bower_components/foundation-apps/scss/components/_utilities.scss b/afm-client/bower_components/foundation-apps/scss/components/_utilities.scss
new file mode 100755
index 0000000..145a098
--- /dev/null
+++ b/afm-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};

+    }

+  }

+}