Merge branch 'bpe_issues' into bom

2026-03-01 02:03:22 +00:00 · 2014-03-27 15:39:37 +11:00
parent 9c65dd2ace dae2d9db9e
commit ab14bf70ab
125 changed files with 11754 additions and 421 deletions
--- a/5
+++ b/5
@@ -20,7 +20,7 @@ gem 'angularjs-rails'
 gem 'bugsnag'
 gem 'newrelic_rpm'
 gem 'haml'
-gem 'sass'
+gem 'sass', "~> 3.2"
 gem 'aws-sdk'
 gem 'db2fog'
 gem 'andand'
@@ -49,8 +49,9 @@ group :assets do
  gem 'uglifier', '>= 1.0.3'

  gem 'turbo-sprockets-rails3'
-  gem 'zurb-foundation', :github => 'zurb/foundation'
+
 end
+gem "foundation-rails"
 gem 'foundation_rails_helper', github: 'willrjmarshall/foundation_rails_helper', branch: "rails3"

 gem 'jquery-rails'
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -103,13 +103,6 @@ GIT
      activemodel (>= 3.0)
      railties (>= 3.0)

-GIT
-  remote: git://github.com/zurb/foundation.git
-  revision: a81d639847ba5fc2e324b749b8e409e31e8d83c9
-  specs:
-    zurb-foundation (4.3.1)
-      sass (>= 3.2.0)
-
 PATH
  remote: lib/chili/eaterprises_feature
  specs:
@@ -186,20 +179,18 @@ GEM
      multi_json (~> 1.0)
    builder (3.0.4)
    cancan (1.6.8)
-    capybara (2.0.2)
+    capybara (2.2.1)
      mime-types (>= 1.16)
      nokogiri (>= 1.3.3)
      rack (>= 1.0.0)
      rack-test (>= 0.5.4)
-      selenium-webdriver (~> 2.0)
-      xpath (~> 1.0.0)
+      xpath (~> 2.0)
    celluloid (0.15.2)
      timers (~> 1.1.0)
-    childprocess (0.3.9)
-      ffi (~> 1.0, >= 1.0.11)
-    chunky_png (1.2.8)
+    chunky_png (1.3.0)
    climate_control (0.0.3)
      activesupport (>= 3.0)
+    cliver (0.3.2)
    cocaine (0.5.1)
      climate_control (>= 0.0.3, < 1.0)
    coderay (1.0.9)
@@ -216,10 +207,10 @@ GEM
      active_link_to (~> 1.0.0)
      paperclip (>= 2.3.0)
      rails (>= 3.0.0)
-    compass (0.12.2)
+    compass (0.12.4)
      chunky_png (~> 1.2)
      fssm (>= 0.2.7)
-      sass (~> 3.1)
+      sass (~> 3.2.17)
    compass-rails (1.0.3)
      compass (>= 0.12.2, < 0.14)
    crack (0.4.1)
@@ -258,10 +249,8 @@ GEM
      railties (>= 3.0.0)
    faker (1.0.1)
      i18n (~> 0.4)
-    faye-websocket (0.4.7)
-      eventmachine (>= 0.12.0)
    ffaker (1.15.0)
-    ffi (1.9.0)
+    ffi (1.9.3)
    fog (1.14.0)
      builder
      excon (~> 0.25.0)
@@ -273,6 +262,9 @@ GEM
      nokogiri (~> 1.5)
      ruby-hmac
    formatador (0.2.4)
+    foundation-rails (5.2.1.0)
+      railties (>= 3.1.0)
+      sass (>= 3.2.0)
    fssm (0.2.10)
    geocoder (1.1.8)
    gmaps4rails (1.5.6)
@@ -335,13 +327,13 @@ GEM
    money (5.0.0)
      i18n (~> 0.4)
      json
-    multi_json (1.8.4)
+    multi_json (1.9.2)
    multi_xml (0.5.5)
    net-scp (1.1.2)
      net-ssh (>= 2.6.5)
    net-ssh (2.6.8)
    newrelic_rpm (3.6.7.152)
-    nokogiri (1.6.0)
+    nokogiri (1.6.1)
      mini_portile (~> 0.5.0)
    oj (2.1.2)
    orm_adapter (0.4.0)
@@ -351,10 +343,11 @@ GEM
      cocaine (>= 0.0.2)
      mime-types
    pg (0.13.2)
-    poltergeist (1.1.2)
-      capybara (~> 2.0.1)
-      faye-websocket (~> 0.4.4)
-      http_parser.rb (~> 0.5.3)
+    poltergeist (1.5.0)
+      capybara (~> 2.1)
+      cliver (~> 0.3.1)
+      multi_json (~> 1.0)
+      websocket-driver (>= 0.2.0)
    polyamorous (0.5.0)
      activerecord (~> 3.0)
    polyglot (0.3.4)
@@ -373,7 +366,7 @@ GEM
      rack (>= 0.4)
    rack-livereload (0.3.15)
      rack
-    rack-ssl (1.3.3)
+    rack-ssl (1.3.4)
      rack
    rack-test (0.6.2)
      rack (>= 1.0)
@@ -428,20 +421,14 @@ GEM
      rspec-expectations (~> 2.14.0)
      rspec-mocks (~> 2.14.0)
    ruby-hmac (0.4.0)
-    rubyzip (0.9.9)
    safe_yaml (0.9.5)
-    sass (3.2.12)
+    sass (3.2.18)
    sass-rails (3.2.6)
      railties (~> 3.2.0)
      sass (>= 3.1.10)
      tilt (~> 1.3)
    select2-rails (3.2.1)
      thor (~> 0.14)
-    selenium-webdriver (2.35.0)
-      childprocess (>= 0.2.5)
-      multi_json (~> 1.0)
-      rubyzip
-      websocket (~> 1.0.4)
    shoulda-matchers (1.1.0)
      activesupport (>= 3.0.0)
    simplecov (0.7.1)
@@ -461,7 +448,7 @@ GEM
    therubyracer (0.12.0)
      libv8 (~> 3.16.14.0)
      ref
-    thor (0.18.1)
+    thor (0.19.0)
    tilt (1.4.1)
    timecop (0.6.2.2)
    timers (1.1.0)
@@ -495,8 +482,8 @@ GEM
    webmock (1.13.0)
      addressable (>= 2.2.7)
      crack (>= 0.3.2)
-    websocket (1.0.7)
-    xpath (1.0.0)
+    websocket-driver (0.3.2)
+    xpath (2.0.0)
      nokogiri (~> 1.3)
    zeus (0.13.3)
      method_source (>= 0.6.7)
@@ -522,6 +509,7 @@ DEPENDENCIES
  eaterprises_feature!
  factory_girl_rails
  faker
+  foundation-rails
  foundation_rails_helper!
  geocoder
  gmaps4rails
@@ -547,7 +535,7 @@ DEPENDENCIES
  rails (= 3.2.17)
  representative_view
  rspec-rails
-  sass
+  sass (~> 3.2)
  sass-rails (~> 3.2.3)
  shoulda-matchers
  simple_form!
@@ -566,4 +554,3 @@ DEPENDENCIES
  unicorn
  unicorn-rails
  webmock
-  zurb-foundation!
--- a/app/assets/javascripts/admin/bulk_product_update.js.coffee
+++ b/app/assets/javascripts/admin/bulk_product_update.js.coffee
@@ -237,6 +237,8 @@ productEditModule.controller "AdminProductEditCtrl", [
          else if confirm("'#{filter.predicate.name}' filter already exists on column '#{filter.property.name}'. Replace it?")
            $scope.currentFilters[existingfilterIndex] = filter
            $scope.fetchProducts()
+      else
+        alert("Please ensure all filter fields are filled in before adding a filter.")

    $scope.removeFilter = (filter) ->
      index = $scope.currentFilters.indexOf(filter)
--- a/app/assets/javascripts/admin/order_cycle.js.erb.coffee
+++ b/app/assets/javascripts/admin/order_cycle.js.erb.coffee
@@ -176,10 +176,10 @@ angular.module('order_cycle', ['ngResource'])
      	exchange.showProducts = !exchange.showProducts

      addSupplier: (new_supplier_id) ->
-      	this.order_cycle.incoming_exchanges.push({enterprise_id: new_supplier_id, active: true, variants: {}, enterprise_fees: []})
+      	this.order_cycle.incoming_exchanges.push({enterprise_id: new_supplier_id, incoming: true, active: true, variants: {}, enterprise_fees: []})

      addDistributor: (new_distributor_id) ->
-      	this.order_cycle.outgoing_exchanges.push({enterprise_id: new_distributor_id, active: true, variants: {}, enterprise_fees: []})
+      	this.order_cycle.outgoing_exchanges.push({enterprise_id: new_distributor_id, incoming: false, active: true, variants: {}, enterprise_fees: []})

      removeExchange: (exchange) ->
        incoming_index = this.order_cycle.incoming_exchanges.indexOf exchange
@@ -239,18 +239,15 @@ angular.module('order_cycle', ['ngResource'])
      	  service.order_cycle.incoming_exchanges = []
      	  service.order_cycle.outgoing_exchanges = []
      	  for exchange in service.order_cycle.exchanges
-      	    if exchange.sender_id == service.order_cycle.coordinator_id
-      	      angular.extend(exchange, {enterprise_id: exchange.receiver_id, active: true})
-      	      delete(exchange.sender_id)
-      	      service.order_cycle.outgoing_exchanges.push(exchange)
-      
-      	    else if exchange.receiver_id == service.order_cycle.coordinator_id
+      	    if exchange.incoming
      	      angular.extend(exchange, {enterprise_id: exchange.sender_id, active: true})
      	      delete(exchange.receiver_id)
      	      service.order_cycle.incoming_exchanges.push(exchange)
      
      	    else
-      	      console.log('Exchange between two enterprises, neither of which is coordinator!')
+      	      angular.extend(exchange, {enterprise_id: exchange.receiver_id, active: true})
+      	      delete(exchange.sender_id)
+      	      service.order_cycle.outgoing_exchanges.push(exchange)
      
          delete(service.order_cycle.exchanges)
          service.loaded = true
--- a/app/assets/javascripts/darkswarm/all.js.coffee
+++ b/app/assets/javascripts/darkswarm/all.js.coffee
@@ -5,6 +5,7 @@
 #
 #= require angular
 #= require angular-resource
+#= require ../shared/mm-foundation-tpls-0.2.0-SNAPSHOT
 #
 #= require ../shared/jquery.timeago
 #= require foundation
@@ -12,5 +13,8 @@
 #= require_tree .

 $ ->
+  # Hacky fix for issue - http://foundation.zurb.com/forum/posts/2112-foundation-5100-syntax-error-in-js
+  Foundation.set_namespace = ->
+    null
  $(document).foundation()
-  $(document).foundation('reveal', {animation: 'fade'})
+  $(document).foundation({reveal: {animation: 'fade'}})
--- a/app/assets/javascripts/darkswarm/controllers/forgot_sidebar_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/forgot_sidebar_controller.js.coffee
@@ -0,0 +1,6 @@
+window.ForgotSidebarCtrl = Darkswarm.controller "ForgotSidebarCtrl", ($scope, $http, $location) ->
+  $scope.active = ->
+    $location.path() == '/forgot'
+
+  $scope.select = ->
+    $location.path("/forgot")
--- a/app/assets/javascripts/darkswarm/controllers/login_sidebar_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/login_sidebar_controller.js.coffee
@@ -1,14 +1,16 @@
-window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http) ->
+window.LoginSidebarCtrl = Darkswarm.controller "LoginSidebarCtrl", ($scope, $http, $location) ->
  $scope.spree_user = {
    remember_me: 0
  }

  $scope.active = ->
-    $scope.active_sidebar == '/login'
+    $location.path() == '/login'
+
+  $scope.select = ->
+    $location.path("/login")

  $scope.submit = ->
    $http.post("/user/spree_user/sign_in", {spree_user: $scope.spree_user}).success (data)->
      location.href = location.origin + location.pathname  # Strips out hash fragments
    .error (data) ->
      $scope.errors = data.message
-
--- a/app/assets/javascripts/darkswarm/controllers/menu_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/menu_controller.js.coffee
@@ -0,0 +1,12 @@
+window.MenuCtrl = Darkswarm.controller "MenuCtrl", ($scope, $location) ->
+  $scope.toggleLogin = ->
+    if $location.path() == "/login"
+      $location.path("/")
+    else
+      $location.path("login")
+
+  $scope.toggleSignup = ->
+    if $location.path() == "/signup"
+      $location.path("/")
+    else
+      $location.path("signup")
--- a/app/assets/javascripts/darkswarm/controllers/order_cycle_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/order_cycle_controller.js.coffee
@@ -1,4 +1,5 @@
 Darkswarm.controller "OrderCycleCtrl", ($scope, $rootScope, OrderCycle) ->
  $scope.order_cycle = OrderCycle.order_cycle
+  $scope.OrderCycle = OrderCycle
  $scope.changeOrderCycle = ->
    OrderCycle.push_order_cycle()
--- a/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/sidebar_controller.js.coffee
@@ -1,8 +1,3 @@
 window.SidebarCtrl = Darkswarm.controller "SidebarCtrl", ($scope, $location) ->
-  $scope.$watch ->
-    $location.path()
-  , ->
-    $scope.active_sidebar = $location.path() 
-
  $scope.active = ->
-    return "active" if $scope.active_sidebar != null and $scope.active_sidebar != ""
+    $location.path() in ["/login", "/signup", "/forgot"]
--- a/app/assets/javascripts/darkswarm/controllers/signup_sidebar_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/signup_sidebar_controller.js.coffee
@@ -1,3 +1,17 @@
-window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope) ->
+window.SignupSidebarCtrl = Darkswarm.controller "SignupSidebarCtrl", ($scope, $http, $location) ->
+  $scope.spree_user = {}
+  $scope.errors =
+    email: null
+    password: null
+
  $scope.active = ->
-    $scope.active_sidebar == '/signup'
+    $location.path() == '/signup'
+
+  $scope.select = ->
+    $location.path("/signup")
+
+  $scope.submit = ->
+    $http.post("/user/spree_user", {spree_user: $scope.spree_user}).success (data)->
+      location.href = location.origin + location.pathname  # Strips out hash fragments
+    .error (data) ->
+      $scope.errors = data
--- a/app/assets/javascripts/darkswarm/controllers/tabs_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/tabs_controller.js.coffee
@@ -0,0 +1,18 @@
+Darkswarm.controller "TabsCtrl", ($scope, $rootScope, $location, OrderCycle) ->
+  $scope.active = (path)->
+    if !OrderCycle.selected() and $location.hash() == "" and path == "/about"
+      true
+    else
+      $location.hash() == path
+
+
+  $scope.tabs = ["contact", "about", "groups", "producers"]
+  for tab in $scope.tabs 
+    $scope[tab] =
+      path: "/" + tab 
+
+  $scope.select = (tab)->
+    if $scope.active(tab.path)
+      $location.hash "/"
+    else
+      $location.hash tab.path
--- a/app/assets/javascripts/darkswarm/darkswarm.js.coffee
+++ b/app/assets/javascripts/darkswarm/darkswarm.js.coffee
@@ -1,5 +1,4 @@
-window.Darkswarm = angular.module("Darkswarm", ["ngResource", "filters"]).config ($httpProvider) ->
+window.Darkswarm = angular.module("Darkswarm", ["ngResource", "filters", 'mm.foundation']).config ($httpProvider) ->
  $httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content') 
  $httpProvider.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest' 
  $httpProvider.defaults.headers.common.Accept = "application/json, text/javascript, */*"
-
--- a/app/assets/javascripts/darkswarm/overrides.js.coffee
+++ b/app/assets/javascripts/darkswarm/overrides.js.coffee
@@ -1,20 +1,20 @@
-Foundation.libs.section.toggle_active = (e)->
-  $this = $(this)
-  self = Foundation.libs.section
-  region = $this.parent()
-  content = $this.siblings(self.settings.content_selector)
-  section = region.parent()
-  settings = $.extend({}, self.settings, self.data_options(section))
-  prev_active_region = section.children(self.settings.region_selector).filter("." + self.settings.active_class)
+#Foundation.libs.section.toggle_active = (e)->
+  #$this = $(this)
+  #self = Foundation.libs.section
+  #region = $this.parent()
+  #content = $this.siblings(self.settings.content_selector)
+  #section = region.parent()
+  #settings = $.extend({}, self.settings, self.data_options(section))
+  #prev_active_region = section.children(self.settings.region_selector).filter("." + self.settings.active_class)
  
-  #for anchors inside [data-section-title]
-  e.preventDefault()  if not settings.deep_linking and content.length > 0
-  e.stopPropagation() #do not catch same click again on parent
-  unless region.hasClass(self.settings.active_class)
-    prev_active_region.removeClass self.settings.active_class
-    region.addClass self.settings.active_class
-    #force resize for better performance (do not wait timer)
-    self.resize region.find(self.settings.section_selector).not("[" + self.settings.resized_data_attr + "]"), true
-  else if not settings.one_up# and (self.small(section) or self.is_vertical_nav(section) or self.is_horizontal_nav(section) or self.is_accordion(section))
-    region.removeClass self.settings.active_class  
-  settings.callback section
+  ##for anchors inside [data-section-title]
+  #e.preventDefault()  if not settings.deep_linking and content.length > 0
+  #e.stopPropagation() #do not catch same click again on parent
+  #unless region.hasClass(self.settings.active_class)
+    #prev_active_region.removeClass self.settings.active_class
+    #region.addClass self.settings.active_class
+    ##force resize for better performance (do not wait timer)
+    #self.resize region.find(self.settings.section_selector).not("[" + self.settings.resized_data_attr + "]"), true
+  #else if not settings.one_up# and (self.small(section) or self.is_vertical_nav(section) or self.is_horizontal_nav(section) or self.is_accordion(section))
+    #region.removeClass self.settings.active_class  
+  #settings.callback section
--- a/app/assets/javascripts/darkswarm/services/order_cycle.js.coffee
+++ b/app/assets/javascripts/darkswarm/services/order_cycle.js.coffee
@@ -1,7 +1,15 @@
 Darkswarm.factory 'OrderCycle', ($resource, Product, orderCycleData) ->
  class OrderCycle
-    @order_cycle = orderCycleData || {orders_close_at: ""}
+    @order_cycle = orderCycleData || null 
    @push_order_cycle: ->
      new $resource("/shop/order_cycle").save {order_cycle_id: @order_cycle.order_cycle_id}, (order_data)->
        OrderCycle.order_cycle.orders_close_at = order_data.orders_close_at
        Product.update()
+
+    @orders_close_at: ->
+      if @order_cycle
+        @order_cycle.orders_close_at
+      else
+        ""
+    @selected: ->
+      @order_cycle != null
--- a/app/assets/javascripts/foundation4/foundation.scss
+++ b/app/assets/javascripts/foundation4/foundation.scss
@@ -0,0 +1,43 @@
+// Make sure the charset is set appropriately
+@charset "UTF-8";
+
+// This includes all of the foundation global elements that are needed to work with any of the other files.
+@import "foundation4/foundation/variables";
+
+// Foundation Components
+@import
+  "foundation4/foundation/components/global",
+  "foundation4/foundation/components/grid",
+  "foundation4/foundation/components/visibility",
+  "foundation4/foundation/components/block-grid",
+  "foundation4/foundation/components/type",
+  "foundation4/foundation/components/buttons",
+  "foundation4/foundation/components/forms",
+  "foundation4/foundation/components/button-groups",
+  "foundation4/foundation/components/dropdown-buttons",
+  "foundation4/foundation/components/split-buttons",
+  "foundation4/foundation/components/flex-video",
+  "foundation4/foundation/components/section",
+  "foundation4/foundation/components/top-bar",
+  "foundation4/foundation/components/orbit",
+  "foundation4/foundation/components/reveal",
+  "foundation4/foundation/components/joyride",
+  "foundation4/foundation/components/clearing",
+  "foundation4/foundation/components/alert-boxes",
+  "foundation4/foundation/components/breadcrumbs",
+  "foundation4/foundation/components/custom-forms",
+  "foundation4/foundation/components/keystrokes",
+  "foundation4/foundation/components/labels",
+  "foundation4/foundation/components/inline-lists",
+  "foundation4/foundation/components/pagination",
+  "foundation4/foundation/components/panels",
+  "foundation4/foundation/components/pricing-tables",
+  "foundation4/foundation/components/progress-bars",
+  "foundation4/foundation/components/side-nav",
+  "foundation4/foundation/components/sub-nav",
+  "foundation4/foundation/components/switch",
+  "foundation4/foundation/components/magellan",
+  "foundation4/foundation/components/tables",
+  "foundation4/foundation/components/thumbs",
+  "foundation4/foundation/components/tooltips",
+  "foundation4/foundation/components/dropdown";
--- a/app/assets/javascripts/foundation4/foundation/_variables.scss
+++ b/app/assets/javascripts/foundation4/foundation/_variables.scss
--- a/app/assets/javascripts/foundation4/foundation/components/_alert-boxes.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_alert-boxes.scss
@@ -0,0 +1,107 @@
+//
+// Alert Box Variables
+//
+$include-html-alert-classes: $include-html-classes !default;
+
+// We use this to control alert padding.
+$alert-padding-top: em-calc(11) !default;
+$alert-padding-default-float: $alert-padding-top !default;
+$alert-padding-opposite-direction: $alert-padding-top + em-calc(10) !default;
+$alert-padding-bottom: $alert-padding-top + em-calc(1) !default;
+
+// We use these to control text style.
+$alert-font-weight: bold !default;
+$alert-font-size: em-calc(14) !default;
+$alert-font-color: #fff !default;
+$alert-font-color-alt: darken($secondary-color, 60%) !default;
+
+// We use this for close hover effect.
+$alert-function-factor: 10% !default;
+
+// We use these to control border styles.
+$alert-border-style: solid !default;
+$alert-border-width: 1px !default;
+$alert-border-color: darken($primary-color, $alert-function-factor) !default;
+$alert-bottom-margin: em-calc(20) !default;
+
+// We use these to style the close buttons
+$alert-close-color: #333 !default;
+$alert-close-position: em-calc(5) !default;
+$alert-close-font-size: em-calc(22) !default;
+$alert-close-opacity: 0.3 !default;
+$alert-close-opacity-hover: 0.5 !default;
+$alert-close-padding: 5px 4px 4px !default;
+
+// We use this to control border radius
+$alert-radius: $global-radius !default;
+
+//
+// Alert Mixins
+//
+
+// We use this mixin to create a default alert base.
+@mixin alert-base {
+  border-style: $alert-border-style;
+  border-width: $alert-border-width;
+  display: block;
+  font-weight: $alert-font-weight;
+  margin-bottom: $alert-bottom-margin;
+  position: relative;
+  padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
+  font-size: $alert-font-size;
+}
+
+// We use this mixin to add alert styles
+@mixin alert-style($bg:$primary-color) {
+
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  // We control which background color and border come through.
+  background-color: $bg;
+  border-color: darken($bg, $alert-function-factor);
+
+  // We control the text color for you based on the background color.
+  @if $bg-lightness > 70% { color: $alert-font-color-alt; }
+  @else                   { color: $alert-font-color; }
+
+}
+
+// We use this to create the close button.
+@mixin alert-close {
+  font-size: $alert-close-font-size;
+  padding: $alert-close-padding;
+  line-height: 0;
+  position: absolute;
+  top: $alert-close-position + em-calc(2);
+  #{$opposite-direction}: $alert-close-position;
+  color: $alert-close-color;
+  opacity: $alert-close-opacity;
+  &:hover,
+  &:focus { opacity: $alert-close-opacity-hover; }
+}
+
+// We use this to quickly create alerts with a single mixin.
+@mixin alert($bg:$primary-color, $radius:false) {
+  @include alert-base;
+  @include alert-style($bg);
+  @include radius($radius);
+}
+
+@if $include-html-alert-classes != false {
+
+  /* Foundation Alerts */
+  .alert-box {
+    @include alert;
+
+    .close { @include alert-close; }
+
+    &.radius { @include radius($alert-radius); }
+    &.round { @include radius($global-rounded); }
+
+    &.success { @include alert-style($success-color); }
+    &.alert { @include alert-style($alert-color); }
+    &.secondary { @include alert-style($secondary-color); }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_block-grid.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_block-grid.scss
@@ -0,0 +1,71 @@
+//
+// Block Grid Variables
+//
+$include-html-grid-classes: $include-html-classes !default;
+
+// We use this to control the maximum number of block grid elements per row
+$block-grid-elements: 12 !default;
+$block-grid-default-spacing: em-calc(20) !default;
+
+// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
+$block-grid-media-queries: true !default;
+
+//
+// Block Grid Mixins
+//
+
+// We use this mixin to create different block-grids. You can apply per-row and spacing options.
+// Setting $base-style to false will ommit default styles.
+@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
+
+  @if $base-style {
+    display: block;
+    padding: 0;
+    margin: 0 (-$spacing/2);
+    @include clearfix;
+
+    &>li {
+      display: inline;
+      height: auto;
+      float: $default-float;
+      padding: 0 ($spacing/2) $spacing;
+    }
+  }
+
+  @if $per-row {
+    &>li {
+      width: 100%/$per-row;
+      padding: 0 ($spacing/2) $spacing;
+
+      &:nth-of-type(n) { clear: none; }
+      &:nth-of-type(#{$per-row}n+1) { clear: both; }
+    }
+  }
+
+}
+
+@if $include-html-grid-classes {
+  /* Foundation Block Grids for below small breakpoint */
+  @media only screen {
+    [class*="block-grid-"] { @include block-grid; }
+
+    @for $i from 1 through $block-grid-elements {
+      .small-block-grid-#{($i)} {
+        @include block-grid($i,$block-grid-default-spacing,false);
+      }
+    }
+  }
+
+  /* Foundation Block Grids for above small breakpoint */
+  @media #{$small} {
+    /* Remove small grid clearing */
+    @for $i from 1 through $block-grid-elements {
+      .small-block-grid-#{($i)} > li:nth-of-type(#{$i}n+1) { clear: none; }
+    }
+    @for $i from 1 through $block-grid-elements {
+      .large-block-grid-#{($i)} {
+        @include block-grid($i,$block-grid-default-spacing,false);
+      }
+    }
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_breadcrumbs.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_breadcrumbs.scss
@@ -0,0 +1,124 @@
+//
+// Breadcrumb Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to set the background color for the breadcrumb container.
+$crumb-bg: lighten($secondary-color, 5%) !default;
+
+// We use these to set the padding around the breadcrumbs.
+$crumb-padding: em-calc(9 14 9) !default;
+$crumb-side-padding: em-calc(12) !default;
+
+// We use these to control border styles.
+$crumb-function-factor: 10% !default;
+$crumb-border-size: 1px !default;
+$crumb-border-style: solid !default;
+$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
+$crumb-radius: $global-radius !default;
+
+// We use these to set various text styles for breadcrumbs.
+$crumb-font-size: em-calc(11) !default;
+$crumb-font-color: $primary-color !default;
+$crumb-font-color-current: #333 !default;
+$crumb-font-color-unavailable: #999 !default;
+$crumb-font-transform: uppercase !default;
+$crumb-link-decor: underline !default;
+
+// We use these to control the slash between breadcrumbs
+$crumb-slash-color: #aaa !default;
+$crumb-slash: "/" !default;
+
+//
+// Breakcrumb Mixins
+//
+
+// We use this mixin to create a container around our breadcrumbs
+@mixin crumb-container {
+  display: block;
+  padding: $crumb-padding;
+  overflow: hidden;
+  margin-#{$default-float}: 0;
+  list-style: none;
+  border-style: $crumb-border-style;
+  border-width: $crumb-border-size;
+
+  // We control which background color and border come through.
+  background-color: $crumb-bg;
+  border-color: $crumb-border-color;
+}
+
+// We use this mixin to create breadcrumb styles from list items.
+@mixin crumbs {
+
+  // A normal state will make the links look and act like clickable breadcrumbs.
+  margin: 0;
+  float: $default-float;
+  font-size: $crumb-font-size;
+  text-transform: $crumb-font-transform;
+
+  &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
+
+  a,
+  span {
+    text-transform: $crumb-font-transform;
+    color: $crumb-font-color;
+  }
+
+  // Current is for the link of the current page
+  &.current {
+    cursor: $cursor-default-value;
+    color: $crumb-font-color-current;
+    a {
+      cursor: $cursor-default-value;
+      color: $crumb-font-color-current;
+    }
+
+    &:hover, &:hover a,
+    &:focus, &:focus a { text-decoration: none; }
+  }
+
+  // Unavailable removed color and link styles so it looks inactive.
+  &.unavailable {
+    color: $crumb-font-color-unavailable;
+    a { color: $crumb-font-color-unavailable; }
+
+    &:hover,
+    &:hover a,
+    &:focus,
+    a:focus {
+      text-decoration: none;
+      color: $crumb-font-color-unavailable;
+      cursor: $cursor-default-value;
+    }
+  }
+
+  &:before {
+    content: "#{$crumb-slash}";
+    color: $crumb-slash-color;
+    margin: 0 $crumb-side-padding;
+    position: relative;
+    top: 1px;
+  }
+
+  &:first-child:before {
+    content: " ";
+    margin: 0;
+  }
+
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Breadcrumbs */
+  .breadcrumbs {
+    @include crumb-container;
+    @include radius($crumb-radius);
+
+    &>* {
+      @include crumbs;
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_button-groups.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_button-groups.scss
@@ -0,0 +1,89 @@
+//
+// Button Group Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
+$button-bar-margin-opposite: em-calc(10) !default;
+
+//
+// Button Group Mixins
+//
+
+// We use this to add styles for a button group container
+@mixin button-group-container($styles:true, $float:false) {
+  @if $styles {
+    list-style: none;
+    margin: 0;
+    @include clearfix();
+  }
+  @if $float {
+    float: #{$default-float};
+    margin-#{$opposite-direction}: $button-bar-margin-opposite;
+    & div { overflow: hidden; }
+  }
+}
+
+// We use this to control styles for button groups
+@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+
+  // We use this to control the flow, or remove those styles completely.
+  @if $float {
+    margin: 0 0 0 (-$button-border-width);
+    float: $float;
+    // Make sure the first child doesn't get the negative margin.
+    &:first-child { margin-#{$default-float}: 0; }
+  }
+
+  // We use these to control left and right radius on first/last buttons in the group.
+  @if $radius == true {
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $button-radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
+  }
+  @else if $radius {
+    &:first-child,
+    &:first-child > a,
+    &:first-child > button,
+    &:first-child > .button { @include side-radius($default-float, $radius); }
+    &:last-child,
+    &:last-child > a,
+    &:last-child > button,
+    &:last-child > .button { @include side-radius($opposite-direction, $radius); }
+  }
+
+  // We use this to make the buttons even width across their container
+  @if $even {
+    width: percentage((100/$even) / 100);
+    button, .button { width: 100%; }
+  }
+
+}
+
+// Only include these CSS classes if $include-html-classes: true
+@if $include-html-button-classes != false {
+
+  /* Button Groups */
+  .button-group { @include button-group-container;
+
+    &> * { @include button-group-style(); }
+
+    &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+    &.round > * { @include button-group-style($radius:$button-round, $float:null); }
+
+    @for $i from 2 through 8 {
+      &.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
+    }
+  }
+
+  .button-bar {
+    @include clearfix;
+    .button-group { @include button-group-container($styles:false,$float:true); }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_buttons.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_buttons.scss
@@ -0,0 +1,230 @@
+//
+// Button Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to build padding for buttons.
+$button-med: em-calc(12) !default;
+$button-tny: em-calc(7) !default;
+$button-sml: em-calc(9) !default;
+$button-lrg: em-calc(16) !default;
+
+// We use this to control the display property.
+$button-display: inline-block !default;
+$button-margin-bottom: em-calc(20) !default;
+
+// We use these to control button text styles.
+$button-font-family: inherit !default;
+$button-font-color: #fff !default;
+$button-font-color-alt: #333 !default;
+$button-font-med: em-calc(16) !default;
+$button-font-tny: em-calc(11) !default;
+$button-font-sml: em-calc(13) !default;
+$button-font-lrg: em-calc(20) !default;
+$button-font-weight: bold !default;
+$button-font-align: center !default;
+
+// We use these to control various hover effects.
+$button-function-factor: 10% !default;
+
+// We use these to control button border styles.
+$button-border-width: 1px !default;
+$button-border-style: solid !default;
+
+// We use this to set the default radius used throughout the core.
+$button-radius: $global-radius !default;
+$button-round: $global-rounded !default;
+
+// We use this to set default opacity for disabled buttons.
+$button-disabled-opacity: 0.6 !default;
+
+
+//
+// Button Mixins
+//
+
+// We use this mixin to create a default button base.
+@mixin button-base($style:true, $display:$button-display) {
+  @if $style {
+    border-style: $button-border-style;
+    border-width: $button-border-width;
+    cursor: $cursor-pointer-value;
+    font-family: $button-font-family;
+    font-weight: $button-font-weight;
+    line-height: normal;
+    margin: 0 0 $button-margin-bottom;
+    position: relative;
+    text-decoration: none;
+    text-align: $button-font-align;
+  }
+  @if $display { display: $display; }
+}
+
+// We use this mixin to add button size styles
+@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
+
+  // We control which padding styles come through,
+  // these can be turned off by setting $padding:false
+  @if $padding {
+    padding-top: $padding;
+    padding-#{$opposite-direction}: $padding * 2;
+    padding-bottom: $padding + em-calc(1);
+    padding-#{$default-float}: $padding * 2;
+
+    // We control the font-size based on mixin input.
+    @if      $padding == $button-med { font-size: $button-font-med; }
+    @else if $padding == $button-tny { font-size: $button-font-tny; }
+    @else if $padding == $button-sml { font-size: $button-font-sml; }
+    @else if $padding == $button-lrg { font-size: $button-font-lrg; }
+    @else                            { font-size: $padding - em-calc(2); }
+  }
+
+  // We can set $full-width:true to remove side padding extend width.
+  @if $full-width {
+    // We still need to check if $padding is set.
+    @if $padding {
+    padding-top: $padding;
+    padding-bottom: $padding + em-calc(1);
+    } @else if $padding == false {
+      padding-top:0;
+      padding-bottom:0;
+    }
+    padding-right: 0;
+    padding-left: 0;
+    width: 100%;
+  }
+
+  // <input>'s and <button>'s take on strange padding. We added this to help fix that.
+  @if $is-input == $button-lrg {
+    padding-top: $is-input + em-calc(.5);
+    padding-bottom: $is-input + em-calc(.5);
+    -webkit-appearance: none;
+  }
+  @else if $is-input {
+    padding-top: $is-input + em-calc(1);
+    padding-bottom: $is-input;
+    -webkit-appearance: none;
+  }
+}
+
+// We use this mixin to add button color styles
+@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
+
+  // We control which background styles are used,
+  // these can be removed by setting $bg:false
+  @if $bg {
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+    border-color: darken($bg, $button-function-factor);
+    &:hover,
+    &:focus { background-color: darken($bg, $button-function-factor); }
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness > 70% {
+      color: $button-font-color-alt;
+      &:hover,
+      &:focus { color: $button-font-color-alt; }
+    }
+    @else {
+      color: $button-font-color;
+      &:hover,
+      &:focus { color: $button-font-color; }
+    }
+  }
+
+  // We can set $disabled:true to create a disabled transparent button.
+  @if $disabled {
+    cursor: $cursor-default-value;
+    opacity: $button-disabled-opacity;
+    @if $experimental {
+      -webkit-box-shadow: none;
+    }
+    box-shadow: none;
+    &:hover,
+    &:focus { background-color: $bg; }
+  }
+
+  // We can control how much button radius us used.
+  @if $radius == true { @include radius($button-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
+@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
+  @include button-base;
+  @include button-size($padding, $full-width, $is-input);
+  @include button-style($bg, $radius, $disabled);
+}
+
+
+//
+// Button Classes
+//
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-button-classes != false {
+
+  // Default styles applied outside of media query
+  button, .button {
+    @include button-base;
+    @include button-size;
+    @include button-style;
+
+    &.secondary { @include button-style($bg:$secondary-color); }
+    &.success   { @include button-style($bg:$success-color); }
+    &.alert     { @include button-style($bg:$alert-color); }
+
+    &.large  { @include button-size($padding:$button-lrg); }
+    &.small  { @include button-size($padding:$button-sml); }
+    &.tiny   { @include button-size($padding:$button-tny); }
+    &.expand { @include button-size($padding:null,$full-width:true); }
+
+    &.left-align  { text-align: left; text-indent: em-calc(12); }
+    &.right-align { text-align: right; padding-right: em-calc(12); }
+
+    &.disabled, &[disabled] { @include button-style($bg:$primary-color, $disabled:true);
+      &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
+      &.success { @include button-style($bg:$success-color, $disabled:true); }
+      &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+    }
+
+  }
+
+  button, .button {
+    @include button-size($padding:false, $is-input:$button-med);
+    &.tiny { @include button-size($padding:false, $is-input:$button-tny); }
+    &.small { @include button-size($padding:false, $is-input:$button-sml); }
+    &.large { @include button-size($padding:false, $is-input:$button-lrg); }
+  }
+
+  // Styles for any browser or device that support media queries
+  @media only screen {
+
+    button, .button {
+      @include inset-shadow();
+      @include single-transition(background-color);
+
+      &.large  { @include button-size($padding:false, $full-width:false); }
+      &.small  { @include button-size($padding:false, $full-width:false); }
+      &.tiny   { @include button-size($padding:false, $full-width:false); }
+
+      &.radius { @include button-style($bg:false, $radius:true); }
+      &.round  { @include button-style($bg:false, $radius:$button-round); }
+    }
+
+  }
+
+  // Additional styles for screens larger than 768px
+  @media #{$small} {
+
+    button, .button {
+      @include button-base($style:false, $display:inline-block);
+      @include button-size($padding:false, $full-width:false);
+    }
+
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_clearing.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_clearing.scss
@@ -0,0 +1,227 @@
+//
+// Clearing Variables
+//
+$include-html-clearing-classes: $include-html-classes !default;
+
+// We use these to set the background colors for parts of Clearing.
+$clearing-bg: #111 !default;
+$clearing-caption-bg: $clearing-bg !default;
+$clearing-carousel-bg: #111 !default;
+$clearing-img-bg: $clearing-bg !default;
+
+// We use these to style the close button
+$clearing-close-color: #fff !default;
+$clearing-close-size: 40px !default;
+
+// We use these to style the arrows
+$clearing-arrow-size: 16px !default;
+$clearing-arrow-color: $clearing-close-color !default;
+
+// We use these to style captions
+$clearing-caption-font-color: #fff !default;
+$clearing-caption-padding: 10px 30px !default;
+
+// We use these to make the image and carousel height and style
+$clearing-active-img-height: 75% !default;
+$clearing-carousel-height: 150px !default;
+$clearing-carousel-thumb-width: 175px !default;
+$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
+
+@if $include-html-clearing-classes {
+  // We decided to not create a mixin for Clearing because it relies
+  // on predefined classes and structure to work properly.
+  // The variables above should give enough control.
+
+  /* Clearing Styles */
+  [data-clearing] {
+    @include clearfix;
+    margin-bottom: 0;
+    margin-#{$default-float}: 0;
+    list-style: none;
+
+    li {
+      float: $default-float;
+      margin-#{$opposite-direction}: 10px;
+    }
+  }
+
+  .clearing-blackout {
+    background: $clearing-bg;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    #{$default-float}: 0;
+    z-index: 998;
+
+    .clearing-close { display: block; }
+  }
+
+  .clearing-container {
+    position: relative;
+    z-index: 998;
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+  }
+
+  .visible-img {
+    height: 95%;
+    position: relative;
+
+    img {
+      position: absolute;
+      #{$default-float}: 50%;
+      top: 50%;
+      margin-#{$default-float}: -50%;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+
+  .clearing-caption {
+    color: $clearing-caption-font-color;
+    line-height: 1.3;
+    margin-bottom: 0;
+    text-align: center;
+    bottom: 0;
+    background: $clearing-caption-bg;
+    width: 100%;
+    padding: $clearing-caption-padding;
+    position: absolute;
+    #{$default-float}: 0;
+  }
+
+  .clearing-close {
+    z-index: 999;
+    padding-#{$default-float}: 20px;
+    padding-top: 10px;
+    font-size: $clearing-close-size;
+    line-height: 1;
+    color: $clearing-close-color;
+    display: none;
+
+    &:hover,
+    &:focus { color: #ccc; }
+  }
+
+  .clearing-assembled .clearing-container { height: 100%;
+    .carousel > ul { display: none; }
+  }
+
+  // If you want to show a lightbox, but only have a single image come through as the thumbnail
+  .clearing-feature li {
+    display: none;
+    &.clearing-featured-img {
+      display: block;
+    }
+  }
+
+  // Large screen overrides
+  @media #{$small} {
+    .clearing-main-prev,
+    .clearing-main-next {
+      position: absolute;
+      height: 100%;
+      width: 40px;
+      top: 0;
+      & > span {
+        position: absolute;
+        top: 50%;
+        display: block;
+        width: 0;
+        height: 0;
+        border: solid $clearing-arrow-size;
+      }
+    }
+    .clearing-main-prev {
+      #{$default-float}: 0;
+      & > span {
+        #{$default-float}: 5px;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $clearing-arrow-color;
+      }
+    }
+    .clearing-main-next {
+      #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-color: $clearing-arrow-color;
+      }
+    }
+
+    .clearing-main-prev.disabled,
+    .clearing-main-next.disabled { opacity: 0.5; }
+
+    .clearing-assembled .clearing-container {
+
+      .carousel {
+        background: $clearing-carousel-bg;
+        height: $clearing-carousel-height;
+        margin-top: 5px;
+
+        & > ul {
+          display: block;
+          z-index: 999;
+          width: 200%;
+          height: 100%;
+          margin-#{$default-float}: 0;
+          position: relative;
+          #{$default-float}: 0;
+
+          li {
+            display: block;
+            width: $clearing-carousel-thumb-width;
+            height: inherit;
+            padding: 0;
+            float: $default-float;
+            overflow: hidden;
+            margin-#{$opposite-direction}: 1px;
+            position: relative;
+            cursor: $cursor-pointer-value;
+            opacity: 0.4;
+
+            &.fix-height {
+              img {
+                min-height: 100%;
+                height: 100%;
+                max-width: none;
+              }
+            }
+
+            a.th {
+              border: none;
+              @if $experimental {
+                -webkit-box-shadow: none;
+              }
+                      box-shadow: none;
+              display: block;
+            }
+
+            img {
+            cursor: $cursor-pointer-value !important;
+              min-width: 100% !important;
+            }
+
+            &.visible { opacity: 1; }
+          }
+        }
+      }
+
+      .visible-img {
+        background: $clearing-img-bg;
+        overflow: hidden;
+        height: $clearing-active-img-height;
+      }
+    }
+
+    .clearing-close {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 20px;
+      padding-#{$default-float}: 0;
+      padding-top: 0;
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_custom-forms.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_custom-forms.scss
@@ -0,0 +1,278 @@
+//
+// Custom Form Variables
+//
+$include-html-custom-form-classes: $include-html-classes !default;
+
+// We use these to control the basic form styles input styles
+$custom-form-border-color: #ccc !default;
+$custom-form-border-size: 1px !default;
+$custom-form-bg: #fff !default;
+$custom-form-bg-disabled: #ddd !default;
+$custom-form-input-size: 16px !default;
+$custom-form-check-color: #222 !default;
+$custom-form-check-size: 16px !default;
+$custom-form-radio-size: 8px !default;
+$custom-form-checkbox-radius: 0 !default;
+
+// We use these to style the custom select form element.
+$custom-select-bg: #fff !default;
+$custom-select-fade-to-color: #f3f3f3 !default;
+$custom-select-border-color: #ddd !default;
+$custom-select-triangle-color: #aaa !default;
+$custom-select-triangle-color-open: #222 !default;
+$custom-select-height: em-calc(13) + ($form-spacing * 1.5) !default;
+$custom-select-margin-bottom: em-calc(20) !default;
+$custom-select-font-color-selected: #141414 !default;
+$custom-select-disabled-color: #888 !default;
+
+// We use these to control the style of the custom select dropdown element.
+$custom-dropdown-height: 200px !default;
+$custom-dropdown-bg: #fff !default;
+$custom-dropdown-border-color: darken(#fff, 20%) !default;
+$custom-dropdown-border-width: 1px !default;
+$custom-dropdown-border-style: solid !default;
+$custom-dropdown-font-color: #555 !default;
+$custom-dropdown-font-size: em-calc(14) !default;
+$custom-dropdown-color-selected: #eeeeee !default;
+$custom-dropdown-font-color-selected: #000 !default;
+$custom-dropdown-shadow: 0 2px 2px 0 rgba(0,0,0,0.1) !default;
+$custom-dropdown-offset-top: auto !default;
+$custom-dropdown-list-padding: em-calc(4) !default;
+$custom-dropdown-default-float-padding: em-calc(6) !default;
+$custom-dropdown-opposite-padding: em-calc(38) !default;
+$custom-dropdown-list-item-min-height: em-calc(24) !default;
+$custom-dropdown-width-small: 134px !default;
+$custom-dropdown-width-medium: 254px !default;
+$custom-dropdown-width-large: 434px !default;
+
+// We decided not to make a mixin for the custom forms because
+// they rely on a very specific class naming structure.
+// We may look at updating this in the future.
+@mixin custom-form-input($radius:0px, $mark-size:0px) {
+  @include radius($radius);
+  $custom-form-input-padding: (($custom-form-input-size - $mark-size) / 2) - $custom-form-border-size;
+  @if $custom-form-input-padding >= 0 {
+    padding: $custom-form-input-padding;
+  } @else {
+    padding: 0;
+  }
+}
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-custom-form-classes != false {
+
+  /* Custom Checkbox and Radio Inputs */
+  form.custom {
+
+    .hidden-field {
+      margin-#{$default-float}: -99999px;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .custom {
+      display: inline-block;
+      width: $custom-form-input-size;
+      height: $custom-form-input-size;
+      position: relative;
+      top:-1px; /* fix centering issue */
+      vertical-align: middle;
+      border: solid $custom-form-border-size $custom-form-border-color;
+      background: $custom-form-bg;
+
+      &.checkbox {
+        @include custom-form-input($radius:$custom-form-checkbox-radius, $mark-size:$custom-form-check-size);
+      }
+
+      &.radio {
+        @include custom-form-input($radius:1000px, $mark-size:$custom-form-radio-size);
+      }
+
+      &.checkbox {
+        &:before {
+          content: "";
+          display: block;
+          font-size: $custom-form-check-size;
+          color: $custom-form-bg;
+        }
+      }
+
+      &.radio.checked {
+        &:before {
+          content: "";
+          display: block;
+          width: $custom-form-radio-size;
+          height: $custom-form-radio-size;
+          @include radius(1000px);
+          background: $custom-form-check-color;
+          position: relative;
+        }
+      }
+
+      &.checkbox.checked {
+        &:before {
+          content: "\00d7";
+          color: $custom-form-check-color;
+          position: absolute;
+          top: -50%;
+          left: 50%;
+          margin-top: 4px;
+          margin-left: -5px;
+        }
+      }
+    }
+  }
+
+  /* Custom Select Options and Dropdowns */
+  form.custom {
+    .custom.dropdown {
+      display: block;
+      position: relative;
+      top: 0;
+      height: $custom-select-height;
+      margin-bottom: $custom-select-margin-bottom;
+      margin-top: 0;
+      padding: 0;
+      width: 100%;
+      background: $custom-dropdown-bg;
+      @if $experimental {
+        background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
+        background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+        -webkit-box-shadow: none;
+      }
+      background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
+      box-shadow: none;
+      font-size: $custom-dropdown-font-size;
+      vertical-align: top;
+
+      ul {
+        overflow-y: auto;
+        max-height: $custom-dropdown-height;
+      }
+
+      .current {
+        cursor:default;
+        white-space: nowrap;
+        line-height: $custom-select-height - em-calc(1);
+        color: $input-font-color;
+        text-decoration: none;
+        overflow: hidden;
+        display: block;
+        margin-#{$default-float}: $form-spacing / 2;
+        margin-#{$opposite-direction}: $custom-select-height;
+      }
+
+      .selector {
+        cursor:default;
+        position: absolute;
+        width: $form-spacing * 2.5;
+        height: $custom-select-height;
+        display: block;
+        #{$opposite-direction}: 0;
+        top: 0;
+        &:after {
+          content: "";
+          display: block;
+          @include css-triangle(5px, $custom-select-triangle-color, top);
+          position: absolute;
+          #{$default-float}: ($form-spacing * 2.5) / 2 - em-calc(5);
+          top: 50%;
+          margin-top: -3px;
+        }
+      }
+
+      &:hover, &.open {
+        a.selector {
+          &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
+        }
+      }
+
+      .disabled {
+        color: $custom-select-disabled-color;
+        &:hover {
+          background: transparent;
+          color: $custom-select-disabled-color;
+          &:after { display: none; }
+        }
+      }
+
+      &.open ul {
+        display: block;
+        z-index: 10;
+        min-width:100%;
+        @include box-sizing(content-box);
+      }
+
+      &.small { max-width: $custom-dropdown-width-small; }
+      &.medium { max-width: $custom-dropdown-width-medium; }
+      &.large { max-width: $custom-dropdown-width-large; }
+      &.expand { width: 100% !important; }
+
+      &.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
+      &.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
+      &.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
+    }
+
+    .error .custom.dropdown {
+      @include form-error-color;
+      background: rgba($alert-color, 0.1);
+      margin-bottom: 0;
+    }
+
+    .error .custom.dropdown + small.error {
+      margin-top: 0;
+    }
+
+    .custom.dropdown ul {
+      position: absolute;
+      width: auto;
+      display: none;
+      margin: 0;
+      #{$default-float}: -$input-border-width;
+      top: $custom-dropdown-offset-top;
+      @if $experimental {
+        -webkit-box-shadow: $custom-dropdown-shadow;
+      }
+      box-shadow: $custom-dropdown-shadow;
+      margin: 0;
+      padding: 0;
+      background: $custom-dropdown-bg;
+      border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
+      font-size: $em-base;
+
+      li {
+        color: $custom-dropdown-font-color;
+        font-size: $custom-dropdown-font-size;
+        cursor: $cursor-default-value;
+        padding-top: $custom-dropdown-list-padding;
+        padding-bottom: $custom-dropdown-list-padding;
+        padding-#{$default-float}: $custom-dropdown-default-float-padding;
+        padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
+        min-height: $custom-dropdown-list-item-min-height;
+        line-height: $custom-dropdown-list-item-min-height;
+        margin: 0;
+        white-space: nowrap;
+        list-style: none;
+
+        &.selected {
+          background: $custom-dropdown-color-selected;
+          color: $custom-dropdown-font-color-selected;
+        }
+        &:hover {
+          background-color: darken($custom-dropdown-color-selected, 4%);
+          color: $custom-dropdown-font-color-selected;
+        }
+        &.selected:hover {
+          background: $custom-dropdown-color-selected;
+          cursor: $cursor-default-value;
+          color: $custom-dropdown-font-color-selected;
+        }
+      }
+
+      &.show { display: block; }
+    }
+
+    /* Custom input, disabled */
+    .custom.disabled { background: $custom-form-bg-disabled; }
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_dropdown-buttons.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_dropdown-buttons.scss
@@ -0,0 +1,115 @@
+//
+// Dropdown Button Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to set the color of the pip in dropdown buttons
+$dropdown-button-pip-color: #fff !default;
+$dropdown-button-pip-color-alt: #333 !default;
+
+// We use these to style tiny dropdown buttons
+$dropdown-button-padding-tny: $button-tny * 5 !default;
+$dropdown-button-pip-size-tny: $button-tny !default;
+$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
+$dropdown-button-pip-top-tny: -$button-tny / 2 + em-calc(1) !default;
+
+// We use these to style small dropdown buttons
+$dropdown-button-padding-sml: $button-sml * 5 !default;
+$dropdown-button-pip-size-sml: $button-sml !default;
+$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
+$dropdown-button-pip-top-sml: -$button-sml / 2 + em-calc(1) !default;
+
+// We use these to style medium dropdown buttons
+$dropdown-button-padding-med: $button-med * 4 + em-calc(3) !default;
+$dropdown-button-pip-size-med: $button-med - em-calc(3) !default;
+$dropdown-button-pip-opposite-med: $button-med * 2 !default;
+$dropdown-button-pip-top-med: -$button-med / 2 + em-calc(2) !default;
+
+// We use these to style large dropdown buttons
+$dropdown-button-padding-lrg: $button-lrg * 4 !default;
+$dropdown-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
+$dropdown-button-pip-opposite-lrg: $button-lrg + em-calc(12) !default;
+$dropdown-button-pip-top-lrg: -$button-lrg / 2 + em-calc(3) !default;
+
+//
+// Dropdown Button Mixin
+//
+
+// We use this mixin to build off of the button mixin and add dropdown button styles
+@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
+
+  // We add in base styles, but they can be negated by setting to 'false'.
+  @if $base-style {
+    position: relative;
+
+    // This creates the base styles for the triangle pip
+    &:before {
+      position: absolute;
+      content: "";
+      width: 0;
+      height: 0;
+      display: block;
+      border-style: solid;
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      top: 50%;
+    }
+  }
+
+  // If we're dealing with tiny buttons, use these styles
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $dropdown-button-padding-tny;
+    &:before {
+      border-width: $dropdown-button-pip-size-tny;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
+      margin-top: $dropdown-button-pip-top-tny;
+    }
+  }
+
+  // If we're dealing with small buttons, use these styles
+  @if $padding == small {
+    padding-#{$opposite-direction}: $dropdown-button-padding-sml;
+    &:before {
+      border-width: $dropdown-button-pip-size-sml;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
+      margin-top: $dropdown-button-pip-top-sml;
+    }
+  }
+
+  // If we're dealing with default (medium) buttons, use these styles
+  @if $padding == medium {
+    padding-#{$opposite-direction}: $dropdown-button-padding-med;
+    &:before {
+      border-width: $dropdown-button-pip-size-med;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-med;
+      margin-top: $dropdown-button-pip-top-med;
+    }
+  }
+
+  // If we're dealing with large buttons, use these styles
+  @if $padding == large {
+    padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
+    &:before {
+      border-width: $dropdown-button-pip-size-lrg;
+      #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
+      margin-top: $dropdown-button-pip-top-lrg;
+    }
+  }
+
+  // We can control the pip color. We didn't use logic in this case, just set it and forget it.
+  @if $pip-color {
+    &:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+
+@if $include-html-button-classes {
+
+  /* Dropdown Button */
+  .dropdown.button { @include dropdown-button;
+    &.tiny { @include dropdown-button(tiny,$base-style:false); }
+    &.small { @include dropdown-button(small,$base-style:false); }
+    &.large { @include dropdown-button(large,$base-style:false); }
+    &.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_dropdown.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_dropdown.scss
@@ -0,0 +1,151 @@
+//
+// Dropdown Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to controls height and width styles.
+$f-dropdown-max-width: 200px !default;
+$f-dropdown-height: auto !default;
+$f-dropdown-max-height: none !default;
+$f-dropdown-margin-top: 2px !default;
+
+// We use this to control the background color
+$f-dropdown-bg: #fff !default;
+
+// We use this to set the border styles for dropdowns.
+$f-dropdown-border-style: solid !default;
+$f-dropdown-border-width: 1px !default;
+$f-dropdown-border-color: darken(#fff, 20%) !default;
+
+// We use these to style the triangle pip.
+$f-dropdown-triangle-size: 6px !default;
+$f-dropdown-triangle-color: #fff !default;
+$f-dropdown-triangle-side-offset: 10px !default;
+
+// We use these to control styles for the list elements.
+$f-dropdown-list-style: none !default;
+$f-dropdown-font-color: #555 !default;
+$f-dropdown-font-size: em-calc(14) !default;
+$f-dropdown-list-padding: em-calc(5, 10) !default;
+$f-dropdown-line-height: em-calc(18) !default;
+$f-dropdown-list-hover-bg: #eeeeee !default;
+$dropdown-mobile-default-float: 0 !default;
+
+// We use this to control the styles for when the dropdown has custom content.
+$f-dropdown-content-padding: em-calc(20) !default;
+
+//
+// Dropdown Mixins
+//
+
+// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
+
+// We use this to style the dropdown container element.
+@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
+  position: absolute;
+  top: -9999px;
+  list-style: $f-dropdown-list-style;
+  margin-#{$default-float}: 0;
+
+  > *:first-child { margin-top: 0; }
+  > *:last-child { margin-bottom: 0; }
+
+  @if $content == list {
+    width: 100%;
+    max-height: $f-dropdown-max-height;
+    height: $f-dropdown-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+  @else if $content == content {
+    padding: $f-dropdown-content-padding;
+    width: 100%;
+    height: $f-dropdown-height;
+    max-height: $f-dropdown-max-height;
+    background: $f-dropdown-bg;
+    border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
+    font-size: $em-base;
+    z-index: 99;
+  }
+
+  @if $triangle {
+    margin-top: $f-dropdown-margin-top;
+
+    &:before {
+      @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
+      position: absolute;
+      top: -($f-dropdown-triangle-size * 2);
+      #{$default-float}: $f-dropdown-triangle-side-offset;
+      z-index: 99;
+    }
+    &:after {
+      @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
+      position: absolute;
+      top: -(($f-dropdown-triangle-size + 1) * 2);
+      #{$default-float}: $f-dropdown-triangle-side-offset - 1;
+      z-index: 98;
+    }
+
+    &.right:before {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset;
+    }
+    &.right:after {
+      left: auto;
+      right: $f-dropdown-triangle-side-offset - 1;
+    }
+  }
+
+  @if $max-width { max-width: $max-width; }
+  @else { max-width: $f-dropdown-max-width; }
+
+}
+
+// We use this to style the list elements or content inside the dropdown.
+@mixin dropdown-style {
+  font-size: $f-dropdown-font-size;
+  cursor: $cursor-pointer-value;
+
+  line-height: $f-dropdown-line-height;
+  margin: 0;
+
+  &:hover,
+  &:focus { background: $f-dropdown-list-hover-bg; }
+
+  a {
+    display: block;
+    padding: $f-dropdown-list-padding;
+    color: $f-dropdown-font-color;
+  }
+}
+
+
+@if $include-html-button-classes != false {
+
+  @media only screen and (max-width: 767px) {
+    .f-dropdown {
+      max-width: 100%;
+      #{$default-float}: $dropdown-mobile-default-float;
+    }
+  }
+
+  /* Foundation Dropdowns */
+  .f-dropdown {
+    @include dropdown-container(list);
+    // max-width: none;
+
+    li { @include dropdown-style; }
+
+    // You can also put custom content in these dropdowns
+    &.content { @include dropdown-container(content, $triangle:false); }
+
+    // Sizes
+    &.tiny    { max-width: 200px; }
+    &.small   { max-width: 300px; }
+    &.medium  { max-width: 500px; }
+    &.large   { max-width: 800px; }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_flex-video.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_flex-video.scss
@@ -0,0 +1,46 @@
+//
+// Flex Video Variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use these to control video container padding and margins
+$flex-video-padding-top: em-calc(25) !default;
+$flex-video-padding-bottom: 67.5% !default;
+$flex-video-margin-bottom: em-calc(16) !default;
+
+// We use this to control widescreen bottom padding
+$flex-video-widescreen-padding-bottom: 57.25% !default;
+
+//
+// Flex Video Mixins
+//
+
+@mixin flex-video-container {
+  position: relative;
+  padding-top: $flex-video-padding-top;
+  padding-bottom: $flex-video-padding-bottom;
+  height: 0;
+  margin-bottom: $flex-video-margin-bottom;
+  overflow: hidden;
+
+  &.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
+  &.vimeo { padding-top: 0; }
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$default-float}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@if $include-html-media-classes != false {
+
+  /* Flex Video */
+  .flex-video { @include flex-video-container; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_forms.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_forms.scss
@@ -0,0 +1,409 @@
+//
+// Form Variables
+//
+$include-html-form-classes: $include-html-classes !default;
+
+// We use this to set the base for lots of form spacing and positioning styles
+$form-spacing: em-calc(16) !default;
+
+// We use these to style the labels in different ways
+$form-label-pointer: pointer !default;
+$form-label-font-size: em-calc(14) !default;
+$form-label-font-weight: 500 !default;
+$form-label-font-color: lighten(#000, 30%) !default;
+$form-label-bottom-margin: em-calc(3) !default;
+$input-font-family: inherit !default;
+$input-font-color: rgba(0,0,0,0.75) !default;
+$input-font-size: em-calc(14) !default;
+$input-bg-color: #fff !default;
+$input-focus-bg-color: darken(#fff, 2%) !default;
+$input-border-color: darken(#fff, 20%) !default;
+$input-focus-border-color: darken(#fff, 40%) !default;
+$input-border-style: solid !default;
+$input-border-width: 1px !default;
+$input-disabled-bg: #ddd !default;
+$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
+$input-include-glowing-effect: true !default;
+
+// We use these to style the fieldset border and spacing.
+$fieldset-border-style: solid !default;
+$fieldset-border-width: 1px !default;
+$fieldset-border-color: #ddd !default;
+$fieldset-padding: em-calc(20) !default;
+$fieldset-margin: em-calc(18 0) !default;
+
+// We use these to style the legends when you use them
+$legend-bg: #fff !default;
+$legend-font-weight: bold !default;
+$legend-padding: em-calc(0 3) !default;
+
+// We use these to style the prefix and postfix input elements
+$input-prefix-bg: darken(#fff, 5%) !default;
+$input-prefix-border-color: darken(#fff, 20%) !default;
+$input-prefix-border-size: 1px !default;
+$input-prefix-border-type: solid !default;
+$input-prefix-overflow: hidden !default;
+$input-prefix-font-color: #333 !default;
+$input-prefix-font-color-alt: #fff !default;
+
+// We use these to style the error states for inputs and labels
+$input-error-message-padding: em-calc(6 4) !default;
+$input-error-message-top: 0;
+$input-error-message-font-size: em-calc(12) !default;
+$input-error-message-font-weight: bold !default;
+$input-error-message-font-color: #fff !default;
+$input-error-message-font-color-alt: #333 !default;
+
+// We use this to style the glowing effect of inputs when focused
+$glowing-effect-fade-time: 0.45s !default;
+$glowing-effect-color: $input-focus-border-color !default;
+
+//
+// Form Mixins
+//
+
+// We use this mixin to give us form styles for rows inside of forms
+@mixin form-row-base {
+  .row { margin: 0 ((-$form-spacing) / 2);
+
+    .column,
+    .columns { padding: 0 $form-spacing / 2; }
+
+    // Use this to collapse the margins of a form row
+    &.collapse { margin: 0;
+
+      .column,
+      .columns { padding: 0; }
+      input { 
+        -moz-border-radius-bottom#{$opposite-direction}: 0;
+        -moz-border-radius-top#{$opposite-direction}: 0;
+        -webkit-border-bottom-#{$opposite-direction}-radius: 0;
+        -webkit-border-top-#{$opposite-direction}-radius: 0;
+      }
+
+    }
+  }
+  input.column,
+  input.columns,
+  textarea.column,
+  textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
+}
+
+// We use this mixin to give all basic form elements their style
+@mixin form-element() {
+  background-color: $input-bg-color;
+  font-family: $input-font-family;
+  border: $input-border-width $input-border-style $input-border-color;
+  @if $experimental {
+    -webkit-box-shadow: $input-box-shadow;
+  }
+  box-shadow: $input-box-shadow;
+  color: $input-font-color;
+  display: block;
+  font-size: $input-font-size;
+  margin: 0 0 $form-spacing 0;
+  padding: $form-spacing / 2;
+  height: ($input-font-size + ($form-spacing * 1.5) - em-calc(1));
+  width: 100%;
+  @include box-sizing(border-box);
+  @if $input-include-glowing-effect {
+      @include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
+  }
+  // Basic focus styles
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+    outline: none;
+  }
+
+  // Disabled background input background color
+  &[disabled] { background-color: $input-disabled-bg; }
+}
+
+// We use this mixin to create form labels
+@mixin form-label($alignment:false, $base-style:true) {
+
+  // Control whether or not the base styles come through.
+  @if $base-style {
+    font-size: $form-label-font-size;
+    color: $form-label-font-color;
+    cursor: $form-label-pointer;
+    display: block;
+    font-weight: $form-label-font-weight;
+    margin-bottom: $form-label-bottom-margin;
+  }
+
+  // Alignment options
+  @if $alignment == right {
+    float: none;
+    text-align: right;
+  }
+  @else if $alignment == inline {
+    margin: 0 0 $form-spacing 0;
+    padding: $form-spacing / 2 + em-calc($input-border-width * 2) 0;
+  }
+}
+
+// We use this mixin to create postfix/prefix form Labels
+@mixin prefix-postfix-base {
+  display: block;
+  position: relative;
+  z-index: 2;
+  text-align: center;
+  width: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-style: $input-prefix-border-type;
+  border-width: $input-prefix-border-size;
+  overflow: $input-prefix-overflow;
+  font-size: $form-label-font-size;
+  height: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
+  line-height: ($form-label-font-size + ($form-spacing * 1.5) - em-calc(1));
+}
+
+// We use this mixin to create prefix label styles
+@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    border-color: darken($bg, 10%);
+    border-#{$opposite-direction}: none;
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $is-button {
+    padding-#{$default-float}: 0;
+    padding-#{$opposite-direction}: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+    line-height: em-calc(34);
+  }
+
+}
+
+// We use this mixin to create postfix label styles
+@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+    background: $bg;
+    border-color: darken($bg, 15%);
+    border-#{$default-float}: none;
+
+    // Control the font color based on background brightness
+    @if $bg-lightness > 70%  or $bg == yellow { color: $input-prefix-font-color; }
+    @else { color: $input-prefix-font-color-alt; }
+  }
+
+  @if $is-button {
+    padding-#{$default-float}: 0;
+    padding-#{$opposite-direction}: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: center;
+    line-height: em-calc(34);
+  }
+
+}
+
+// We use this mixin to style fieldsets
+@mixin fieldset {
+  border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
+  padding: $fieldset-padding;
+  margin: $fieldset-margin;
+
+  // and legend styles
+  legend {
+    font-weight: $legend-font-weight;
+    background: $legend-bg;
+    padding: $legend-padding;
+    margin: 0;
+    margin-#{$default-float}: em-calc(-3);
+  }
+}
+
+// We use this mixin to control border and background color of error inputs
+@mixin form-error-color($color:$alert-color) {
+  border-color: $color;
+  background-color: rgba($color, 0.1);
+
+  // Go back to normal on focus
+  &:focus {
+    background: $input-focus-bg-color;
+    border-color: $input-focus-border-color;
+  }
+}
+
+// We use this simple mixin to style labels for error inputs
+@mixin form-label-error-color($color:$alert-color) { color: $color; }
+
+// We use this mixin to create error message styles
+@mixin form-error-message($bg:$alert-color) {
+  display: block;
+  padding: $input-error-message-padding;
+  margin-top: $input-error-message-top;
+  margin-bottom: $form-spacing;
+  font-size: $input-error-message-font-size;
+  font-weight: $input-error-message-font-weight;
+
+  // We can control the text color based on the brightness of the background.
+  $bg-lightness: lightness($bg);
+  background: $bg;
+  @if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
+  @else { color: $input-error-message-font-color-alt; }
+}
+
+// Only include these classes if the variable is true, otherwise they'll be left out.
+@if $include-html-form-classes != false {
+  /* Standard Forms */
+  form { margin: 0 0 $form-spacing; }
+
+  /* Using forms within rows, we need to set some defaults */
+  form .row { @include form-row-base; }
+
+  /* Label Styles */
+  label { @include form-label;
+    &.right { @include form-label(right,false); }
+    &.inline { @include form-label(inline,false); }
+    /* Styles for required inputs */
+    small {
+      text-transform: capitalize;
+      color: lighten($form-label-font-color, 10%);
+    }
+  }
+
+  /* Attach elements to the beginning or end of an input */
+  .prefix,
+  .postfix { @include prefix-postfix-base; }
+
+  /* Adjust padding, alignment and radius if pre/post element is a button */
+  .postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
+  .prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
+
+  .prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
+  .postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
+  .prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
+  .postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
+
+  /* Separate prefix and postfix styles when on span or label so buttons keep their own */
+  span.prefix,label.prefix { @include prefix();
+    &.radius { @include radius(0); @include side-radius(left, $global-radius); }
+  }
+  span.postfix,label.postfix { @include postfix();
+    &.radius { @include radius(0); @include side-radius(right, $global-radius); }
+  }
+
+  /* Input groups will automatically style first and last elements of the group */
+  .input-group {
+    &.radius {
+      &>*:first-child,  &>*:first-child * {
+        @include side-radius($default-float, $global-radius);
+      }
+      &>*:last-child, &>*:last-child * {
+        @include side-radius($opposite-direction, $global-radius);
+      }
+    }
+    &.round {
+      &>*:first-child,  &>*:first-child * {
+        @include side-radius($default-float, $button-round);
+      }
+      &>*:last-child, &>*:last-child * {
+        @include side-radius($opposite-direction, $button-round);
+      }
+    }
+  }
+
+  /* We use this to get basic styling on all basic form elements */
+  input[type="text"],
+  input[type="password"],
+  input[type="date"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="week"],
+  input[type="email"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="time"],
+  input[type="url"],
+  textarea {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    @include form-element;
+    @if not $input-include-glowing-effect {
+        @include single-transition(all, 0.15s, linear);
+    }
+  }
+
+  /* Adjust margin for form elements below */
+  input[type="file"],
+  input[type="checkbox"],
+  input[type="radio"],
+  select {
+    margin: 0 0 $form-spacing 0;
+  }
+
+  /* Normalize file input width */
+  input[type="file"] {
+    width:100%;
+  }
+
+  /* We add basic fieldset styling */
+  fieldset {
+    @include fieldset;
+  }
+
+  /* Error Handling */
+
+  [data-abide] {
+    .error small.error, span.error, small.error {
+      @include form-error-message;
+    }
+    span.error, small.error { display: none; }
+  }
+  span.error, small.error {
+    @include form-error-message;
+  }
+  .error {
+    input,
+    textarea,
+    select {
+      @include form-error-color;
+      margin-bottom: 0;
+    }
+
+    label,
+    label.error {
+      @include form-label-error-color;
+    }
+
+    > small,
+    small.error {
+      @include form-error-message;
+    }
+
+    span.error-message {
+      display: block;
+    }
+  }
+
+  input.error,
+  textarea.error {
+    @include form-error-color;
+    margin-bottom: 0;
+  }
+
+  .error select {
+    @include form-error-color;
+  }
+
+  label.error { @include form-label-error-color; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_global.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_global.scss
@@ -0,0 +1,363 @@
+//
+// Global Foundation Mixins
+//
+
+$experimental: true !default;
+
+// We use this to control border radius.
+@mixin radius($radius:$global-radius) {
+  @if $radius {
+    @if $experimental {
+      -webkit-border-radius: $radius;
+    }
+    border-radius: $radius;
+  }
+}
+
+// We use this to create equal side border radius on elements.
+@mixin side-radius($side, $radius:$global-radius) {
+  @if $side == left {
+    @if $experimental {
+      -moz-border-radius-bottomleft: $radius;
+      -moz-border-radius-topleft: $radius;
+      -webkit-border-bottom-left-radius: $radius;
+      -webkit-border-top-left-radius: $radius;
+    }
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
+  }
+  @else if $side == right {
+    @if $experimental {
+      -moz-border-radius-topright: $radius;
+      -moz-border-radius-bottomright: $radius;
+      -webkit-border-top-right-radius: $radius;
+      -webkit-border-bottom-right-radius: $radius;
+    }
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+  @else if $side == top {
+    @if $experimental {
+      -moz-border-radius-topright: $radius;
+      -moz-border-radius-topleft: $radius;
+      -webkit-border-top-right-radius: $radius;
+      -webkit-border-top-left-radius: $radius;
+    }
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
+  }
+  @else if $side == bottom {
+    @if $experimental {
+      -moz-border-radius-bottomright: $radius;
+      -moz-border-radius-bottomleft: $radius;
+      -webkit-border-bottom-right-radius: $radius;
+      -webkit-border-bottom-left-radius: $radius;
+    }
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+  }
+}
+
+// We can control whether or not we have inset shadows edges.
+@mixin inset-shadow($active:true) {
+  @if $experimental {
+    -webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
+  }
+  box-shadow: $shiny-edge-size $shiny-edge-color inset;
+
+  @if $active { &:active {
+    @if $experimental {
+      -webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+    }
+    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+}
+
+// We use this to add transitions to elements
+@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+  @if $experimental {
+    -webkit-transition: $property $speed $ease;
+    -moz-transition: $property $speed $ease;
+  }
+  transition: $property $speed $ease;
+}
+
+// We use this to add box-sizing across browser prefixes
+@mixin box-sizing($type:border-box) {
+  @if $experimental {
+    -moz-box-sizing: $type;
+    -webkit-box-sizing: $type;
+  }
+  box-sizing: $type;
+}
+
+// We use this to create equilateral triangles
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border: inset $triangle-size;
+  @if ($triangle-direction == top) {
+    border-color: $triangle-color transparent transparent transparent;
+    border-top-style: solid;
+  }
+  @if ($triangle-direction == bottom) {
+    border-color: transparent transparent $triangle-color transparent;
+    border-bottom-style: solid;
+  }
+  @if ($triangle-direction == left) {
+    border-color: transparent transparent transparent $triangle-color;
+    border-left-style: solid;
+  }
+  @if ($triangle-direction == right) {
+    border-color: transparent $triangle-color transparent transparent;
+    border-right-style: solid;
+  }
+}
+
+// We use this to do clear floats
+@mixin clearfix() {
+  *zoom:1;
+  &:before, &:after { content: " "; display: table; }
+  &:after { clear: both; }
+}
+
+
+// We use this to add a glowing effect to block elements
+@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+  @if $experimental {
+    -webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
+    -moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
+  }
+  transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
+
+  &:#{$selector} {
+    @if $experimental {
+      -webkit-box-shadow: 0 0 5px $glowing-effect-color;
+      -moz-box-shadow: 0 0 5px $glowing-effect-color;
+    }
+    box-shadow: 0 0 5px $glowing-effect-color;
+    border-color: $glowing-effect-color;
+  }
+}
+
+//
+// Foundation Variables
+//
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with brower-based text zoom or user-set defaults.
+
+// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
+// If you want your base font-size to be different and not have it effect the grid breakpoints,
+// set $em-base to $base-font-size and make sure $base-font-size is a px value.
+$base-font-size: 100% !default;
+
+// $base-line-height is 24px while $base-font-size is 16px
+$base-line-height: 150% !default;
+
+// This is the default html and body font-size for the base em value.
+$em-base: 16px !default;
+
+// It strips the unit of measure and returns it
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of em's.
+// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported
+// em-calc(10 20 30px 40);
+// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
+// em-calc((10, 20, 30, 40px));
+// Optionally call with a different base (eg: 8px) to calculate em.
+// em-calc(16px 32px 48px, 8px);
+// If you require to comma separate your list
+// em-calc((16px, 32px, 48), 8px);
+
+@function convert-to-em($value, $base-value: $em-base)  {
+  $value: strip-unit($value) / strip-unit($base-value) * 1em;
+  @if ($value == 0em) { $value: 0; } // Turn 0em into 0
+  @return $value;
+}
+
+@function em-calc($values, $base-value: $em-base) {
+  $max: length($values);
+
+  @if $max == 1 { @return convert-to-em(nth($values, 1), $base-value); }
+
+  $emValues: ();
+  @for $i from 1 through $max {
+    $emValues: append($emValues, convert-to-em(nth($values, $i), $base-value));
+  }
+  @return $emValues;
+}
+
+// Support for the old syntax
+
+@function emCalc($values){
+  @return em-calc($values);
+}
+
+// Maybe you want to create rems with pixels
+// $rem-base: 0.625 !default; //Set the value corresponding to body font size. In this case, you should set as: body {font-size: 62.5%;}
+// @function remCalc($pxWidth) {
+//   @return $pxWidth / $rem-base * 1rem;
+// }
+
+// We use these to control various global styles
+$body-bg: #fff !default;
+$body-font-color: #222 !default;
+$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-weight: normal !default;
+$body-font-style: normal !default;
+
+// We use this to control font-smoothing
+$font-smoothing: subpixel-antialiased !default;
+
+// We use these to control text direction settings
+$text-direction: ltr !default;
+
+// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
+$default-float: left !default;
+$opposite-direction: right !default;
+@if $text-direction == ltr {
+  $default-float: left;
+  $opposite-direction: right;
+} @else {
+  $default-float: right;
+  $opposite-direction: left;
+}
+
+// We use these as default colors throughout
+$primary-color: #2ba6cb !default;
+$secondary-color: #e9e9e9 !default;
+$alert-color: #c60f13 !default;
+$success-color: #5da423 !default;
+
+// We use these to make sure border radius matches unless we want it different.
+$global-radius: 3px !default;
+$global-rounded: 1000px !default;
+
+// We use these to control inset shadow shiny edges and depressions.
+$shiny-edge-size: 0 1px 0 !default;
+$shiny-edge-color: rgba(#fff, .5) !default;
+$shiny-edge-active-color: rgba(#000, .2) !default;
+
+// We use this to control whether or not CSS classes come through in the gem files.
+$include-html-classes: true !default;
+$include-print-styles: true !default;
+$include-html-global-classes: $include-html-classes !default;
+
+// Media Queries
+$small-screen: 768px !default;
+$medium-screen: 1280px !default;
+$large-screen: 1440px !default;
+
+$screen: "only screen" !default;
+$small: "only screen and (min-width: #{$small-screen})" !default;
+$medium: "only screen and (min-width:#{$medium-screen})" !default;
+$large: "only screen and (min-width:#{$large-screen})" !default;
+$landscape: "only screen and (orientation: landscape)" !default;
+$portrait: "only screen and (orientation: portrait)" !default;
+
+// Used to provide media query values for javascript components.
+meta.foundation-mq-small {
+  font-family: $small;
+  width: $small-screen;
+}
+
+meta.foundation-mq-medium {
+  font-family: $medium;
+  width: $medium-screen;
+}
+
+meta.foundation-mq-large {
+  font-family: $large;
+  width: $large-screen;
+}
+
+//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+$cursor-crosshair-value: crosshair !default;
+$cursor-default-value: default !default;
+$cursor-pointer-value: pointer !default;
+$cursor-help-value: help !default;
+$cursor-text-value: text !default;
+
+
+@if $include-html-global-classes {
+
+  // Set box-sizing globally to handle padding and border widths
+  *,
+  *:before,
+  *:after {
+    @include box-sizing(border-box);
+  }
+
+  html,
+  body { font-size: $base-font-size; }
+
+  // Default body styles
+  body {
+    background: $body-bg;
+    color: $body-font-color;
+    padding: 0;
+    margin: 0;
+    font-family: $body-font-family;
+    font-weight: $body-font-weight;
+    font-style: $body-font-style;
+    line-height: 1; // Set to $base-line-height to take on browser default of 150%
+    position: relative;
+    cursor: $cursor-default-value;
+  }
+
+a:hover { cursor: $cursor-pointer-value; }
+
+  // Grid Defaults to get images and embeds to work properly
+  img,
+  object,
+  embed { max-width: 100%; height: auto; }
+
+  object,
+  embed { height: 100%; }
+  img { -ms-interpolation-mode: bicubic; }
+
+  #map_canvas,
+  .map_canvas {
+    img,
+    embed,
+    object { max-width: none !important;
+    }
+  }
+
+  // Miscellaneous useful HTML classes
+  .left         { float: left !important; }
+  .right        { float: right !important; }
+  .text-left    { text-align: left !important; }
+  .text-right   { text-align: right !important; }
+  .text-center  { text-align: center !important; }
+  .text-justify { text-align: justify !important; }
+  .hide         { display: none; }
+
+  // Font smoothing
+  // Antialiased font smoothing works best for light text on a dark background.
+  // Apply to single elements instead of globally to body.
+  // Note this only applies to webkit-based desktop browsers on the Mac.
+  .antialiased { -webkit-font-smoothing: antialiased; }
+
+  // Get rid of gap under images by making them display: inline-block; by default
+  img {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  //
+  // Global resets for forms
+  //
+
+  // Make sure textarea takes on height automatically
+  textarea { height: auto; min-height: 50px; }
+
+  // Make select elements 100% width by default
+  select { width: 100%; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_grid-5.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_grid-5.scss
@@ -0,0 +1,214 @@
+//
+// @version
+//   4.3.0
+//
+// @title
+//   Grid
+//
+// @description
+//   With a default "small-#" grid, a 640-1024px "medium-#" grid, and a 1024+ "large-#" grid, we've got you covered for any layout you can think of.
+//
+
+//
+// Grid Variables
+//
+$include-html-grid-classes: true !default;
+$row-width: em-calc(1000) !default;
+$column-gutter: em-calc(30) !default;
+$total-columns: 12 !default;
+
+//
+// Grid Calc Function
+//
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
+// Right and Left "auto" for grid
+%right-auto { #{$opposite-direction}: auto; }
+%left-auto { #{$default-float}: auto; }
+
+//
+// Grid Mixins
+//
+
+// Create default, nested, and collapsed rows
+@mixin grid-row($behavior: false) {
+
+  // use @include grid-row(nest); to include a nested row
+  @if $behavior == nest {
+    margin-#{$default-float}: -($column-gutter/2);
+    margin-#{$opposite-direction}: -($column-gutter/2);
+    max-width: none;
+    width: auto;
+  }
+
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    max-width: $row-width;
+    width: 100%;
+  }
+
+  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
+  @else if $behavior == nest-collapse {
+    margin-#{$default-float}: 0;
+    margin-#{$opposite-direction}: 0;
+    max-width: none;
+    width: auto;
+  }
+
+  // use @include grid-row; to use a container row
+  @else {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
+    width: 100%;
+  }
+
+  @include clearfix;
+}
+
+
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true, $include-position-relative: false) {
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // Gutter padding whenever a column isn't set to collapse
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width: gridCalc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $opposite-direction; }
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    float: none !important;
+  }
+
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
+  // This helps us not need to repeat "position:relative" everywehere
+  @if $include-position-relative { position: relative; }
+}
+
+
+@if $include-html-grid-classes != false {
+  /* Grid HTML Classes */
+  .row {
+    @include grid-row;
+
+    &.collapse {
+      .column,
+      .columns { @include grid-column($collapse:true); }
+    }
+
+    .row { @include grid-row($behavior:nest);
+      &.collapse { @include grid-row($behavior:nest-collapse); }
+    }
+  }
+
+  .column,
+  .columns { @include grid-column($columns:$total-columns, $include-position-relative: true); }
+
+  @media only screen {
+
+    @for $i from 1 through $total-columns {
+      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 2 {
+      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
+    .column.small-centered,
+    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+  }
+
+  @media only screen and (min-width: $small-screen) {
+
+    @for $i from 1 through $total-columns {
+      .medium#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 1 {
+      .medium-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    @for $i from 1 through $total-columns - 1 {
+      .medium-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .medium-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
+    }
+
+    .column.medium-centered,
+    .columns.medium-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+    .column.medium-uncentered,
+    .columns.medium-uncentered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
+  }
+
+  @media only screen and (min-width: $medium-screen) {
+
+    @for $i from 1 through $total-columns {
+      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 1 {
+      .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    @for $i from 1 through $total-columns - 1 {
+      .large-push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .large-pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
+    }
+
+    .column.large-centered,
+    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+    .column.large-uncentered,
+    .columns.large-uncentered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_grid.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_grid.scss
@@ -0,0 +1,188 @@
+//
+// Grid Variables
+//
+$include-html-grid-classes: $include-html-classes !default;
+
+$row-width: em-calc(1000) !default;
+$column-gutter: em-calc(30) !default;
+$total-columns: 12 !default;
+
+//
+// Grid Function
+//
+
+@function gridCalc($colNumber, $totalColumns) {
+  @return percentage(($colNumber / $totalColumns));
+}
+
+//
+// Grid Mixins
+//
+
+// For creating container, nested, and collapsed rows.
+@mixin grid-row($behavior: false) {
+
+  // use @include grid-row(nest); to include a nested row
+  @if $behavior == nest {
+    width: auto;
+    margin-#{$default-float}: -($column-gutter/2);
+    margin-#{$opposite-direction}: -($column-gutter/2);
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: none;
+  }
+
+  // use @include grid-row(collapse); to collapsed a container row margins
+  @else if $behavior == collapse {
+    width: 100%;
+    margin: 0;
+    max-width: $row-width;
+  }
+
+  // use @include grid-row(nest-collapse); to collapse outer margins on a nested row
+  @else if $behavior == nest-collapse {
+    width: auto;
+    margin: 0;
+    max-width: none;
+  }
+
+  // use @include grid-row; to use a container row
+  @else {
+    width: 100%;
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    margin-top: 0;
+    margin-bottom: 0;
+    max-width: $row-width;
+  }
+
+  // Clearfix for all rows
+  @include clearfix();
+
+}
+
+
+// For creating columns - @include these inside a media query to control small vs. large grid layouts
+@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
+
+  position: relative;
+
+  // If collapsed, get rid of gutter padding
+  @if $collapse {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // Gutter padding whenever a column isn't set to collapse
+  // (use $collapse:null to do nothing)
+  @else if $collapse == false {
+    padding-left: $column-gutter / 2;
+    padding-right: $column-gutter / 2;
+  }
+
+  // If a column number is given, calculate width
+  @if $columns {
+    width: gridCalc($columns, $total-columns);
+
+    // If last column, float naturally instead of to the right
+    @if $last-column { float: $opposite-direction; }
+  }
+
+  // If offset, calculate appropriate margins
+  @if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
+
+  // Source Ordering, adds left/right depending on which you use.
+  @if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
+  @if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
+
+  // If centered, get rid of float and add appropriate margins
+  @if $center {
+    margin-#{$default-float}: auto;
+    margin-#{$opposite-direction}: auto;
+    float: none !important;
+  }
+
+  @if $float {
+    @if $float == left or $float == true { float: $default-float; }
+    @else if $float == right { float: $opposite-direction; }
+    @else { float: none; }
+  }
+
+}
+
+
+@if $include-html-grid-classes != false {
+  /* Grid HTML Classes */
+  .row {
+    @include grid-row;
+
+    &.collapse {
+       > .column,
+       > .columns { @include grid-column($collapse:true); }
+    
+      .row {margin-left:0; margin-right:0;}
+    }
+
+    .row { @include grid-row($behavior:nest);
+      &.collapse { @include grid-row($behavior:nest-collapse); }
+    }
+  }
+
+  .column,
+  .columns { @include grid-column($columns:$total-columns); }
+
+  @media only screen {
+
+    .column,
+    .columns { @include grid-column($columns:false); }
+
+    @for $i from 1 through $total-columns {
+      .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 2 {
+      .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
+    .column.small-centered,
+    .columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+  }
+
+  /* Styles for screens that are atleast 768px; */
+  @media #{$small} {
+
+    @for $i from 1 through $total-columns {
+      .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
+    }
+
+    @for $i from 0 through $total-columns - 1 {
+      .row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
+    }
+
+    @for $i from 1 through $total-columns - 1 {
+      .push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
+      .pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
+    }
+
+    .column.large-centered,
+    .columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
+
+    .column.large-uncentered,
+    .columns.large-uncentered {
+      margin-#{$default-float}: 0;
+      margin-#{$opposite-direction}: 0;
+      float: $default-float !important;
+    }
+
+    .column.large-uncentered.opposite,
+    .columns.large-uncentered.opposite {
+      float: $opposite-direction !important;
+    }
+
+
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_inline-lists.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_inline-lists.scss
@@ -0,0 +1,53 @@
+//
+// Inline List Variables
+//
+$include-html-inline-list-classes: $include-html-classes !default;
+
+// We use this to control the margins and padding of the inline list.
+$inline-list-top-margin: 0 !default;
+$inline-list-opposite-margin: 0 !default;
+$inline-list-bottom-margin: em-calc(17) !default;
+$inline-list-default-float-margin: em-calc(-22) !default;
+
+$inline-list-padding: 0 !default;
+
+// We use this to control the overflow of the inline list.
+$inline-list-overflow: hidden !default;
+
+// We use this to control the list items
+$inline-list-display: block !default;
+
+// We use this to control any elments within list items
+$inline-list-children-display: block !default;
+
+//
+// Inline List Mixins
+//
+
+// We use this mixin to create inline lists
+@mixin inline-list {
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  margin-#{$default-float}: $inline-list-default-float-margin;
+  margin-#{$opposite-direction}: $inline-list-opposite-margin;
+  padding: $inline-list-padding;
+  list-style: none;
+  overflow: $inline-list-overflow;
+
+  & > li {
+    list-style: none;
+    float: $default-float;
+    margin-#{$default-float}: em-calc(22);
+    display: $inline-list-display;
+    &>* { display: $inline-list-children-display; }
+  }
+}
+
+
+@if $include-html-inline-list-classes != false {
+
+  /* Inline Lists */
+  .inline-list {
+    @include inline-list();
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_joyride.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_joyride.scss
@@ -0,0 +1,217 @@
+//
+// Joyride Variables
+//
+$include-html-joyride-classes: $include-html-classes !default;
+
+// Controlling default Joyride styles
+$joyride-tip-bg: rgb(0,0,0) !default;
+$joyride-tip-default-width: 300px !default;
+$joyride-tip-padding: em-calc(18 20 24) !default;
+$joyride-tip-border: solid 1px #555 !default;
+$joyride-tip-radius: 4px !default;
+$joyride-tip-position-offset: 22px !default;
+
+// Here, we're setting the tip dont styles
+$joyride-tip-font-color: #fff !default;
+$joyride-tip-font-size: em-calc(14) !default;
+$joyride-tip-header-weight: bold !default;
+
+// This changes the nub size
+$joyride-tip-nub-size: 14px !default;
+
+// This adjusts the styles for the timer when its enabled
+$joyride-tip-timer-width: 50px !default;
+$joyride-tip-timer-height: 3px !default;
+$joyride-tip-timer-color: #666 !default;
+
+// This changes up the styles for the close button
+$joyride-tip-close-color: #777 !default;
+$joyride-tip-close-size: 30px !default;
+$joyride-tip-close-weight: normal !default;
+
+// When Joyride is filling the screen, we use this style for the bg
+$joyride-screenfill: rgba(0,0,0,0.5) !default;
+
+
+// We decided not to make a mixin for this because it relies on predefined classes to work properly.
+
+@if $include-html-joyride-classes != false {
+
+  /* Foundation Joyride */
+  .joyride-list { display: none; }
+
+  /* Default styles for the container */
+  .joyride-tip-guide {
+    display: none;
+    position: absolute;
+    background: $joyride-tip-bg;
+    color: $joyride-tip-font-color;
+    z-index: 101;
+    top: 0;
+    #{$default-float}: 2.5%;
+    font-family: inherit;
+    font-weight: normal;
+    width: 95%;
+  }
+
+  .lt-ie9 .joyride-tip-guide {
+    max-width:800px;
+    #{$default-float}: 50%;
+    margin-#{$default-float}:-400px;
+  }
+
+  .joyride-content-wrapper {
+    width: 100%;
+
+    padding: $joyride-tip-padding;
+
+    .button { margin-bottom: 0 !important; }
+  }
+
+  /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+  .joyride-tip-guide {
+    .joyride-nub {
+      display: block;
+      position: absolute;
+      #{$default-float}: $joyride-tip-position-offset;
+      width: 0;
+      height: 0;
+      border: inset $joyride-tip-nub-size;
+
+      &.top {
+        border-top-style: solid;
+        border-color: $joyride-tip-bg;
+        border-top-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
+        top: -($joyride-tip-nub-size*2);
+      }
+      &.bottom {
+        border-bottom-style: solid;
+        border-color: $joyride-tip-bg !important;
+        border-bottom-color: transparent !important;
+        border-#{$default-float}-color: transparent !important;
+        border-#{$opposite-direction}-color: transparent !important;
+        bottom: -($joyride-tip-nub-size*2);
+      }
+
+      &.right { right: -($joyride-tip-nub-size*2); }
+      &.left { left: -($joyride-tip-nub-size*2); }
+    }
+  }
+
+  /* Typography */
+  .joyride-tip-guide h1,
+  .joyride-tip-guide h2,
+  .joyride-tip-guide h3,
+  .joyride-tip-guide h4,
+  .joyride-tip-guide h5,
+  .joyride-tip-guide h6 {
+    line-height: 1.25;
+    margin: 0;
+    font-weight: $joyride-tip-header-weight;
+    color: $joyride-tip-font-color;
+  }
+  .joyride-tip-guide p {
+    margin: em-calc(0 0 18 0);
+    font-size: $joyride-tip-font-size;
+    line-height: 1.3;
+  }
+
+  .joyride-timer-indicator-wrap {
+    width: $joyride-tip-timer-width;
+    height: $joyride-tip-timer-height;
+    border: $joyride-tip-border;
+    position: absolute;
+    #{$opposite-direction}: em-calc(17);
+    bottom: em-calc(16);
+  }
+  .joyride-timer-indicator {
+    display: block;
+    width: 0;
+    height: inherit;
+    background: $joyride-tip-timer-color;
+  }
+
+  .joyride-close-tip {
+    position: absolute;
+    #{$opposite-direction}: 12px;
+    top: 10px;
+    color: $joyride-tip-close-color !important;
+    text-decoration: none;
+    font-size: $joyride-tip-close-size;
+    font-weight: $joyride-tip-close-weight;
+    line-height: .5 !important;
+
+    &:hover,
+    &:focus { color: #eee !important; }
+  }
+
+  .joyride-modal-bg {
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+    background: $joyride-screenfill;
+    z-index: 100;
+    display: none;
+    top: 0;
+    #{$default-float}: 0;
+    cursor: $cursor-pointer-value;
+  }
+
+  .joyride-expose-wrapper {
+    background-color: #ffffff;
+    position: absolute;
+    border-radius: 3px;
+    z-index: 102;
+    @if $experimental {
+      -moz-box-shadow: 0 0 30px #ffffff;
+      -webkit-box-shadow: 0 0 15px #ffffff;
+    }
+    box-shadow: 0 0 15px #ffffff;
+  }
+
+  .joyride-expose-cover {
+    background: transparent;
+    border-radius: 3px;
+    position: absolute;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+  }
+
+
+  /* Styles for screens that are atleast 768px; */
+  @media #{$small} {
+    .joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
+      .joyride-nub {
+        &.bottom {
+          border-color: $joyride-tip-bg !important;
+          border-bottom-color: transparent !important;
+          border-#{$default-float}-color: transparent !important;
+          border-#{$opposite-direction}-color: transparent !important;
+          bottom: -($joyride-tip-nub-size*2);
+        }
+        &.right {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-right-color: transparent !important; border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: auto;
+          right: -($joyride-tip-nub-size*2);
+        }
+        &.left {
+          border-color: $joyride-tip-bg !important;
+          border-top-color: transparent !important;
+          border-left-color: transparent !important;
+          border-bottom-color: transparent !important;
+          top: $joyride-tip-position-offset;
+          left: -($joyride-tip-nub-size*2);
+          right: auto;
+        }
+      }
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_keystrokes.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_keystrokes.scss
@@ -0,0 +1,57 @@
+//
+// Keystroke Variables
+//
+$include-html-type-classes: $include-html-classes !default;
+
+// We use these to control text styles.
+$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
+$keystroke-font-size: em-calc(14) !default;
+$keystroke-font-color: #222 !default;
+$keystroke-font-color-alt: #fff !default;
+$keystroke-function-factor: 7% !default;
+
+// We use this to control keystroke padding.
+$keystroke-padding: em-calc(2 4 0) !default;
+
+// We use these to control background and border styles.
+$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
+$keystroke-border-style: solid !default;
+$keystroke-border-width: 1px !default;
+$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
+$keystroke-radius: $global-radius !default;
+
+//
+// Keystroke Mixins
+//
+
+// We use this mixin to create keystroke styles.
+@mixin keystroke($bg:$keystroke-bg) {
+  // This find the lightness percentage of the background color.
+  $bg-lightness: lightness($bg);
+
+  background-color: $bg;
+  border-color: darken($bg, $keystroke-function-factor);
+
+  // We adjust the font color based on the brightness of the background.
+  @if $bg-lightness > 70% { color: $keystroke-font-color; }
+  @else { color: $keystroke-font-color-alt; }
+
+  border-style: $keystroke-border-style;
+  border-width: $keystroke-border-width;
+  margin: 0;
+  font-family: $keystroke-font;
+  font-size: $keystroke-font-size;
+  padding: $keystroke-padding;
+}
+
+
+@if $include-html-type-classes != false {
+
+  /* Keystroke Characters */
+  .keystroke,
+  kbd {
+    @include keystroke;
+    @include radius($keystroke-radius);
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_labels.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_labels.scss
@@ -0,0 +1,85 @@
+//
+// Label Variables
+//
+$include-html-label-classes: $include-html-classes !default;
+
+// We use these to style the labels
+$label-padding: em-calc(3 10 4) !default;
+$label-radius: $global-radius !default;
+
+// We use these to style the label text
+$label-font-sizing: em-calc(14) !default;
+$label-font-weight: bold !default;
+$label-font-color: #333 !default;
+$label-font-color-alt: #fff !default;
+
+//
+// Label Mixins
+//
+
+// We use this mixin to create a default label base.
+@mixin label-base {
+  font-weight: $label-font-weight;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-block;
+  position: relative;
+}
+
+// We use this mixin to add label size styles.
+@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
+  @if $padding { padding: $padding; }
+  @if $text-size { font-size: $text-size; }
+}
+
+// We use this mixin to add label styles.
+@mixin label-style($bg:$primary-color, $radius:false) {
+
+  // We control which background color comes through
+  @if $bg {
+
+    // This find the lightness percentage of the background color.
+    $bg-lightness: lightness($bg);
+
+    background-color: $bg;
+
+    // We control the text color for you based on the background color.
+    @if $bg-lightness < 70% { color: $label-font-color-alt; }
+    @else { color: $label-font-color; }
+  }
+
+  // We use this to control the radius on labels.
+  @if $radius == true { @include radius($label-radius); }
+  @else if $radius { @include radius($radius); }
+
+}
+
+// We use this to add close buttons to alerts
+@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
+
+  @include label-base;
+  @include label-size($padding, $text-size);
+  @include label-style($bg, $radius);
+}
+
+
+@if $include-html-label-classes != false {
+
+  /* Labels */
+  .label {
+    @include label-base;
+    @include label-size;
+    @include label-style;
+
+
+    &.radius { @include label-style(false, true); }
+    &.round { @include label-style(false, $radius:1000px); }
+
+    &.alert     { @include label-style($alert-color); }
+    &.success   { @include label-style($success-color); }
+    &.secondary { @include label-style($secondary-color); }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_magellan.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_magellan.scss
@@ -0,0 +1,23 @@
+//
+// Magellan Variables
+//
+$include-html-magellan-classes: $include-html-classes !default;
+
+$magellan-bg: #fff !default;
+$magellan-padding: 10px !default;
+
+@if $include-html-magellan-classes != false {
+
+  [data-magellan-expedition] {
+    background: $magellan-bg;
+    z-index: 50;
+    min-width: 100%;
+    padding: $magellan-padding;
+
+    .sub-nav {
+      margin-bottom: 0;
+      dd { margin-bottom: 0; }
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_orbit.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_orbit.scss
@@ -0,0 +1,340 @@
+// Orbit Variables
+//
+$include-html-orbit-classes: $include-html-classes !default;
+
+// We use these to control the caption styles
+$orbit-container-bg: #f5f5f5 !default;
+$orbit-caption-bg: rgba(0,0,0,0.6) !default;
+$orbit-caption-font-color: #fff !default;
+$orbit-caption-font-size: em-calc(14) !default;
+$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
+$orbit-caption-padding: em-calc(10,14) !default;
+$orbit-caption-height: auto !default;
+
+// We use these to control the left/right nav styles
+$orbit-nav-bg: rgba(0,0,0,0.6) !default;
+$orbit-nav-bg-hover: rgba(0,0,0,0.6) !default;
+$orbit-nav-arrow-color: #fff !default;
+$orbit-nav-arrow-color-hover: #ccc !default;
+
+// We use these to control the timer styles
+$orbit-timer-bg: rgba(0,0,0,0.6) !default;
+$orbit-timer-show-progress-bar: true !default;
+
+// We use these to control the bullet nav styles
+$orbit-bullet-nav-color: #999 !default;
+$orbit-bullet-nav-color-active: #555 !default;
+$orbit-bullet-radius: em-calc(12) !default;
+
+// We use these to controls the style of slide numbers
+$orbit-slide-number-bg: rgba(0,0,0,0) !default;
+$orbit-slide-number-font-color: #fff !default;
+$orbit-slide-number-padding: em-calc(5) !default;
+
+// Graceful Loading Wrapper and preloader
+$wrapper-class: "slideshow-wrapper" !default;
+$preloader-class: "preloader" !default;
+
+
+@if $include-html-orbit-classes != false {
+
+  @if $experimental {
+    @-webkit-keyframes rotate {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
+    @-moz-keyframes rotate {
+      from { -moz-transform: rotate(0deg); }
+      to { -moz-transform: rotate(360deg); }
+    }
+    @-o-keyframes rotate {
+      from { -o-transform: rotate(0deg); }
+      to { -o-transform: rotate(360deg); }
+    }
+  }
+  @keyframes rotate {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  /* Orbit Graceful Loading */
+  .#{$wrapper-class} {
+    position: relative;
+
+    ul {
+      // Prevent bullets showing before .orbit-container is loaded
+      list-style-type: none;
+      margin: 0;
+
+      // Hide all list items
+      li,
+      li .orbit-caption { display: none; }
+
+      // ...except for the first one
+      li:first-child { display: block; }
+    }
+
+    .orbit-container { background-color: transparent;
+
+      // Show images when .orbit-container is loaded
+      li { display: block;
+
+        .orbit-caption { display: block; }
+      }
+    }
+  }
+
+  // Orbit preloader
+  .#{$preloader-class} {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -20px;
+    margin-left: -20px;
+    border: solid 3px;
+    border-color: #555 #fff;
+    @include radius(1000px);
+    @if $experimental {
+      -webkit-animation-name: rotate;
+      -webkit-animation-duration: 1.5s;
+      -webkit-animation-iteration-count: infinite;
+      -webkit-animation-timing-function: linear;
+      -moz-animation-name: rotate;
+      -moz-animation-duration: 1.5s;
+      -moz-animation-iteration-count: infinite;
+      -moz-animation-timing-function: linear;
+      -o-animation-name: rotate;
+      -o-animation-duration: 1.5s;
+      -o-animation-iteration-count: infinite;
+      -o-animation-timing-function: linear;
+    }
+    animation-name: rotate;
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+  }
+
+  .orbit-container {
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+    background: $orbit-container-bg;
+
+    .orbit-slides-container {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+
+      img { display: block; max-width: 100%; }
+
+      &>* {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        @if $text-direction == rtl {
+          margin-right: 100%;
+        }
+        @else {
+          margin-left: 100%;
+        }
+
+        &:first-child {
+          @if $text-direction == rtl {
+          margin-right: 0%;
+          }
+          @else {
+          margin-left: 0%;
+          }
+        }
+
+        .orbit-caption {
+          @if $orbit-caption-position == "bottom" {
+            position: absolute;
+            bottom: 0;
+          } @else if $orbit-caption-position == "under" {
+            position: relative;
+          }
+
+          background-color: $orbit-caption-bg;
+          color: $orbit-caption-font-color;
+          width: 100%;
+          padding: 10px 14px;
+          font-size: em-calc(14);
+        }
+      }
+    }
+
+    .orbit-slide-number {
+      position: absolute;
+      top: 10px;
+      #{$default-float}: 10px;
+      font-size: 12px;
+      span { font-weight: 700; padding: $orbit-slide-number-padding;}
+      color: $orbit-slide-number-font-color;
+      background: $orbit-slide-number-bg;
+      z-index: 10;
+    }
+
+    .orbit-timer {
+      position: absolute;
+      top: 10px;
+      #{$opposite-direction}: 10px;
+      height: 6px;
+      width: 100px;
+      z-index: 10;
+      .orbit-progress {
+        @if $orbit-timer-show-progress-bar {
+          height: 100%;
+          background-color: $orbit-timer-bg;
+          display: block;
+          width: 0%;
+        }
+      }
+
+      // Play button
+      & > span {
+        display: none;
+        position: absolute;
+        top: 10px;
+        #{$opposite-direction}: 0;
+        width: 11px;
+        height: 14px;
+        border: solid 4px #000;
+        border-top: none;
+        border-bottom: none;
+      }
+
+      // Pause button
+      &.paused {
+        & > span {
+          #{$opposite-direction}: -6px;
+          top: 9px;
+          width: 11px;
+          height: 14px;
+          border: inset 8px;
+          border-right-style: solid;
+          border-color: transparent transparent transparent #000;
+        }
+      }
+    }
+
+    &:hover .orbit-timer > span { display: block; }
+
+    // Let's get those controls to be right in the center on each side
+    .orbit-prev,
+    .orbit-next {
+      position: absolute;
+      top: 50%;
+      margin-top: -25px;
+      background-color: $orbit-nav-bg;
+      width: 50px;
+      height: 60px;
+      line-height: 50px;
+      color: white;
+      text-indent: -9999px !important;
+      z-index: 10;
+
+      &:hover {
+        background-color: $orbit-nav-bg-hover;
+      }
+
+      & > span {
+        position: absolute;
+        top: 50%;
+        margin-top: -16px;
+        display: block;
+        width: 0;
+        height: 0;
+        border: inset 16px;
+      }
+    }
+    .orbit-prev { #{$default-float}: 0;
+      & > span {
+        border-#{$opposite-direction}-style: solid;
+        border-color: transparent;
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color;
+      }
+      &:hover > span {
+        border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover;
+      }
+    }
+    .orbit-next { #{$opposite-direction}: 0;
+      & > span {
+        border-color: transparent;
+        border-#{$default-float}-style: solid;
+        border-#{$default-float}-color: $orbit-nav-arrow-color;
+        #{$default-float}: 50%;
+        margin-#{$default-float}: -8px;
+      }
+      &:hover > span {
+        border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
+      }
+    }
+  }
+
+  .orbit-bullets {
+    margin: 0 auto 30px auto;
+    overflow: hidden;
+    position: relative;
+    top: 10px;
+
+    li {
+      display: block;
+      width: $orbit-bullet-radius;
+      height: $orbit-bullet-radius;
+      background: $orbit-bullet-nav-color;
+      float: $default-float;
+      margin-#{$opposite-direction}: 6px;
+      border: solid 1px $orbit-bullet-nav-color-active;
+      @include radius(1000px);
+
+      &.active {
+        background: $orbit-bullet-nav-color-active;
+      }
+
+      &:last-child { margin-#{$opposite-direction}: 0; }
+    }
+  }
+
+  .touch {
+    .orbit-container {
+      .orbit-prev,
+      .orbit-next { display: none; }
+    }
+
+    .orbit-bullets { display: none; }
+  }
+
+
+  @media #{$small} {
+
+    .touch {
+      .orbit-container {
+        .orbit-prev,
+        .orbit-next { display: inherit; }
+      }
+
+      .orbit-bullets { display: block; }
+    }
+
+  }
+
+  @media only screen and (max-width: #{$small-screen}) {
+    .orbit-stack-on-small {
+      .orbit-slides-container {height: auto !important;}
+      .orbit-slides-container > * {
+        position: relative;
+        margin-left: 0% !important;
+      }
+      .orbit-timer,
+      .orbit-next,
+      .orbit-prev,
+      .orbit-bullets {display: none;}
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_pagination.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_pagination.scss
@@ -0,0 +1,140 @@
+//
+// Pagination Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control the pagination container
+$pagination-height: em-calc(24) !default;
+$pagination-margin: em-calc(-5) !default;
+
+// We use these to set the list-item properties
+$pagination-li-float: $default-float;
+$pagination-li-height: em-calc(24) !default;
+$pagination-li-font-color: #222 !default;
+$pagination-li-font-size: em-calc(14) !default;
+$pagination-li-margin: em-calc(5) !default;
+
+// We use these for the pagination anchor links
+$pagination-link-pad: em-calc(1 7 1) !default;
+$pagination-link-font-color: #999 !default;
+$pagination-link-active-bg: darken(#fff, 10%) !default;
+
+// We use these for disabled anchor links
+$pagination-link-unavailable-cursor: default !default;
+$pagination-link-unavailable-font-color: #999 !default;
+$pagination-link-unavailable-bg-active: transparent !default;
+
+// We use these for currently selected anchor links
+$pagination-link-current-background: $primary-color !default;
+$pagination-link-current-font-color: #fff !default;
+$pagination-link-current-font-weight: bold !default;
+$pagination-link-current-cursor: default !default;
+$pagination-link-current-active-bg: $primary-color !default;
+
+//
+// Pagination Mixin
+//
+
+// Style the pagination container. Currently only used when centering elements.
+@mixin pagination-container($center:false) {
+  @if $center { text-align: center; }
+}
+
+// Style unavailable list items
+@mixin pagination-unavailable-item() {
+  a {
+    cursor: $pagination-link-unavailable-cursor;
+    color: $pagination-link-unavailable-font-color;
+  }
+  &:hover a,
+  & a:focus { background: $pagination-link-unavailable-bg-active; }
+}
+
+// Style the current list item. Do not assume that the current item has
+// an anchor <a> element.
+@mixin pagination-current-item($has-anchor: true) {
+  @if $has-anchor {
+    a {
+      background: $pagination-link-current-background;
+      color: $pagination-link-current-font-color;
+      font-weight: $pagination-link-current-font-weight;
+      cursor: $pagination-link-current-cursor;
+
+      &:hover,
+      &:focus { background: $pagination-link-current-active-bg; }
+    }
+  } @else {
+    height: auto;
+    padding: $pagination-link-pad;
+    background: $pagination-link-current-background;
+    color: $pagination-link-current-font-color;
+    font-weight: $pagination-link-current-font-weight;
+    cursor: $pagination-link-current-cursor;
+
+    &:hover,
+    &:focus { background: $pagination-link-current-active-bg; }
+  }
+}
+
+// We use this mixin to set the properties for the creating Foundation pagination
+@mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
+
+  @if $base-style {
+    display: block;
+    height: $pagination-height;
+    margin-#{$default-float}: $pagination-margin;
+
+    li {
+      height: $pagination-li-height;
+      color: $pagination-li-font-color;
+      font-size: $pagination-li-font-size;
+      margin-#{$default-float}: $pagination-li-margin;
+
+      a {
+        display: block;
+        padding: $pagination-link-pad;
+        color: $pagination-link-font-color;
+      }
+
+      &:hover a,
+      a:focus { background: $pagination-link-active-bg; }
+
+      @if $use-default-classes {
+        &.unavailable { @include pagination-unavailable-item(); }
+        &.current { @include pagination-current-item(); }
+      }
+    }
+  }
+
+  // Left or center align the li elements
+  li {
+    @if $center {
+      float: none;
+      display: inline-block;
+    } @else {
+      float: $pagination-li-float;
+      display: block;
+    }
+  }
+}
+
+@if $include-html-nav-classes != false {
+
+  // Detach the nested class selectors from the containing
+  // ul and div elements in order to support more flexibility
+  // for external code that uses the Sass mixins.
+
+  /* Default Pagination */
+  ul.pagination {
+    @include pagination;
+  }
+
+  /* Pagination centred wrapper */
+  .pagination-centered {
+    @include pagination-container(true);
+
+    ul.pagination {
+      @include pagination(true, false);
+    }
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_panels.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_panels.scss
@@ -0,0 +1,83 @@
+//
+// Panel Variables
+//
+$include-html-panel-classes: $include-html-classes !default;
+
+// We use these to control the background and border styles
+$panel-bg: darken(#fff, 5%) !default;
+$panel-border-style: solid !default;
+$panel-border-size: 1px !default;
+
+// We use this % to control how much we darken things on hover
+$panel-function-factor: 10% !default;
+$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
+
+// We use these to set default inner padding and bottom margin
+$panel-margin-bottom: em-calc(20) !default;
+$panel-padding: em-calc(20) !default;
+
+// We use these to set default font colors
+$panel-font-color: #333 !default;
+$panel-font-color-alt: #fff !default;
+
+$panel-header-adjust: true !default;
+$callout-panel-link-color: #fff !default;
+//
+// Panel Mixins
+//
+
+// We use this mixin to create panels.
+@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
+
+  @if $bg {
+    $bg-lightness: lightness($bg);
+
+    border-style: $panel-border-style;
+    border-width: $panel-border-size;
+    border-color: darken($bg, $panel-function-factor);
+    margin-bottom: $panel-margin-bottom;
+    padding: $padding;
+
+    background: $bg;
+
+    // Respect the padding, fool.
+    &>:first-child { margin-top: 0; }
+    &>:last-child { margin-bottom: 0; }
+
+    @if $adjust {
+      // We set the font color based on the darkness of the bg.
+      @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
+      @else if $bg-lightness >= 50%            { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
+      @else                                    { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
+
+      // reset header line-heights for panels
+      h1,h2,h3,h4,h5,h6 {
+        line-height: 1; margin-bottom: em-calc(20) / 2;
+        &.subheader { line-height: 1.4; }
+      }
+    }
+  }
+}
+
+// Only include these classes if the option exists
+@if $include-html-panel-classes != false {
+
+  /* Panels */
+  .panel { @include panel;
+
+    &.callout {
+      @include panel($primary-color);
+      @include inset-shadow($active:false);
+      a {
+        color: $callout-panel-link-color;
+      }
+    }
+
+    &.radius {
+      @include panel($bg:false);
+      @include radius;
+    }
+
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_pricing-tables.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_pricing-tables.scss
@@ -0,0 +1,131 @@
+//
+// Pricing Table Variables
+//
+$include-html-pricing-classes: $include-html-classes !default;
+
+// We use this to control the border color
+$price-table-border: solid 1px #ddd !default;
+
+// We use this to control the bottom margin of the pricing table
+$price-table-margin-bottom: em-calc(20) !default;
+
+// We use these to control the title styles
+$price-title-bg: #ddd !default;
+$price-title-padding: em-calc(15 20) !default;
+$price-title-align: center !default;
+$price-title-color: #333 !default;
+$price-title-weight: bold !default;
+$price-title-size: em-calc(16) !default;
+
+// We use these to control the price styles
+$price-money-bg: #eee !default;
+$price-money-padding: em-calc(15 20) !default;
+$price-money-align: center !default;
+$price-money-color: #333 !default;
+$price-money-weight: normal !default;
+$price-money-size: em-calc(20) !default;
+
+// We use these to control the description styles
+$price-bg: #fff !default;
+$price-desc-color: #777 !default;
+$price-desc-padding: em-calc(15) !default;
+$price-desc-align: center !default;
+$price-desc-font-size: em-calc(12) !default;
+$price-desc-weight: normal !default;
+$price-desc-line-height: 1.4 !default;
+$price-desc-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the list item styles
+$price-item-color: #333 !default;
+$price-item-padding: em-calc(15) !default;
+$price-item-align: center !default;
+$price-item-font-size: em-calc(14) !default;
+$price-item-weight: normal !default;
+$price-item-bottom-border: dotted 1px #ddd !default;
+
+// We use these to control the CTA area styles
+$price-cta-bg: #f5f5f5 !default;
+$price-cta-align: center !default;
+$price-cta-padding: em-calc(20 20 0) !default;
+
+//
+// Pricing Table Mixins
+//
+
+// We use this to create the container element for the pricing tables
+@mixin pricing-table-container {
+  border: $price-table-border;
+  margin-#{$default-float}: 0;
+  margin-bottom: $price-table-margin-bottom;
+
+  & * {
+    list-style: none;
+    line-height: 1;
+  }
+}
+
+// We use this mixin to create the pricing table title styles
+@mixin pricing-table-title {
+  background-color: $price-title-bg;
+  padding: $price-title-padding;
+  text-align: $price-title-align;
+  color: $price-title-color;
+  font-weight: $price-title-weight;
+  font-size: $price-title-size;
+}
+
+// We use this mixin to control the pricing table price styles
+@mixin pricing-table-price {
+  background-color: $price-money-bg;
+  padding: $price-money-padding;
+  text-align: $price-money-align;
+  color: $price-money-color;
+  font-weight: $price-money-weight;
+  font-size: $price-money-size;
+}
+
+// We use this mixin to create the description styles for the pricing table
+@mixin pricing-table-description {
+  background-color: $price-bg;
+  padding: $price-desc-padding;
+  text-align: $price-desc-align;
+  color: $price-desc-color;
+  font-size: $price-desc-font-size;
+  font-weight: $price-desc-weight;
+  line-height: $price-desc-line-height;
+  border-bottom: $price-desc-bottom-border;
+}
+
+// We use this mixin to style the bullet items in the pricing table
+@mixin pricing-table-bullet {
+  background-color: $price-bg;
+  padding: $price-item-padding;
+  text-align: $price-item-align;
+  color: $price-item-color;
+  font-size: $price-item-font-size;
+  font-weight: $price-item-weight;
+  border-bottom: $price-item-bottom-border;
+}
+
+// We use this mixin to style the CTA area of the pricing tables
+@mixin pricing-table-cta {
+  background-color: $price-cta-bg;
+  text-align: $price-cta-align;
+  padding: $price-cta-padding;
+}
+
+
+@if $include-html-pricing-classes != false {
+
+  /* Pricing Tables */
+  .pricing-table {
+    @include pricing-table-container;
+
+    .title { @include pricing-table-title; }
+    .price { @include pricing-table-price; }
+    .description { @include pricing-table-description; }
+    .bullet-item { @include pricing-table-bullet; }
+    .cta-button { @include pricing-table-cta; }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_progress-bars.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_progress-bars.scss
@@ -0,0 +1,71 @@
+//
+// Progress Bar Variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use this to se the prog bar height
+$progress-bar-height: em-calc(25) !default;
+$progress-bar-color: transparent !default;
+
+// We use these to control the border styles
+$progress-bar-border-color: darken(#fff, 20%) !default;
+$progress-bar-border-size: 1px !default;
+$progress-bar-border-style: solid !default;
+$progress-bar-border-radius: $global-radius !default;
+
+// We use these to control the margin & padding
+$progress-bar-pad: em-calc(2) !default;
+$progress-bar-margin-bottom: em-calc(10) !default;
+
+// We use these to set the meter colors
+$progress-meter-color: $primary-color !default;
+$progress-meter-secondary-color: $secondary-color !default;
+$progress-meter-success-color: $success-color !default;
+$progress-meter-alert-color: $alert-color !default;
+
+
+//
+// Progress Bar Mixins
+//
+
+// We use this to set up the progress bar container
+@mixin progress-container {
+  background-color: $progress-bar-color;
+  height: $progress-bar-height;
+  border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
+  padding: $progress-bar-pad;
+  margin-bottom: $progress-bar-margin-bottom;
+}
+
+@mixin progress-meter($bg:$progress-meter-color) {
+  background: $bg;
+  height: 100%;
+  display: block;
+}
+
+
+@if $include-html-media-classes != false {
+
+  /* Progress Bar */
+  .progress {
+    @include progress-container;
+
+    // Meter
+    .meter {
+      @include progress-meter;
+    }
+    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
+    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
+    &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
+
+    &.radius { @include radius($global-radius);
+      .meter { @include radius($global-radius - 1); }
+    }
+
+    &.round { @include radius(1000px);
+      .meter { @include radius(999px); }
+    }
+
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_reveal.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_reveal.scss
@@ -0,0 +1,136 @@
+//
+// Reveal Variables
+//
+
+$include-html-reveal-classes: $include-html-classes !default;
+
+// We use these to control the style of the reveal overlay.
+$reveal-overlay-bg: rgba(#000, .45) !default;
+$reveal-overlay-bg-old: #000 !default;
+
+// We use these to control the style of the modal itself.
+$reveal-modal-bg: #fff !default;
+$reveal-position-top: 50px !default;
+$reveal-default-width: 80% !default;
+$reveal-modal-padding: em-calc(20) !default;
+$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+
+// We use these to style the reveal close button
+$reveal-close-font-size: em-calc(22) !default;
+$reveal-close-top: em-calc(8) !default;
+$reveal-close-side: em-calc(11) !default;
+$reveal-close-color: #aaa !default;
+$reveal-close-weight: bold !default;
+
+// We use these to control the modal border
+$reveal-border-style: solid !default;
+$reveal-border-width: 1px !default;
+$reveal-border-color: #666 !default;
+
+$reveal-modal-class: "reveal-modal" !default;
+$close-reveal-modal-class: "close-reveal-modal" !default;
+
+//
+// Reveal Mixins
+//
+
+// We use this to create the reveal background overlay styles
+@mixin reveal-bg {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: $reveal-overlay-bg-old;
+  background: $reveal-overlay-bg;
+  z-index: 98;
+  display: none;
+  top: 0;
+  #{$default-float}: 0;
+}
+
+// We use this mixin to create the structure of a reveal modal
+@mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
+  @if $base-style {
+    visibility: hidden;
+    display: none;
+    position: absolute;
+    #{$default-float}: 50%;
+    z-index: 99;
+    height: auto;
+
+    // Make sure rows don't have a min-width on them
+    .column,
+    .columns { min-width: 0; }
+
+    // Get rid of margin from first and last element inside modal
+    & > :first-child { margin-top: 0; }
+    & > :last-child { margin-bottom: 0; }
+  }
+
+  @if $width {
+    margin-#{$default-float}: -($width / 2);
+    width: $width;
+  }
+}
+
+// We use this to style the reveal modal defaults
+@mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
+
+  @if $bg { background-color: $bg; }
+  @if $padding { padding: $padding; }
+
+  @if $border { border: $border-style $border-width $border-color; }
+
+  // We can choose whether or not to include the default box-shadow.
+  @if $box-shadow {
+    @if $experimental {
+      -webkit-box-shadow: $reveal-box-shadow;
+    }
+    box-shadow: $reveal-box-shadow;
+  }
+
+  @if $top-offset { top: $top-offset; }
+}
+
+// We use this to create a close button for the reveal modal
+@mixin reveal-close($color:$reveal-close-color) {
+  font-size: $reveal-close-font-size;
+  line-height: 1;
+  position: absolute;
+  top: $reveal-close-top;
+  #{$opposite-direction}: $reveal-close-side;
+  color: $color;
+  font-weight: $reveal-close-weight;
+  cursor: $cursor-pointer-value;
+}
+
+@if $include-html-reveal-classes != false {
+
+  // Reveal Modals
+  .reveal-modal-bg { @include reveal-bg; }
+
+  .#{$reveal-modal-class} {
+    @include reveal-modal-base;
+    @include reveal-modal-style;
+
+    .#{$close-reveal-modal-class} { @include reveal-close; }
+  }
+
+  // Large Screen Styles
+  @media #{$small} {
+
+    .#{$reveal-modal-class} {
+      @include reveal-modal-style(false, em-calc(30), false, $box-shadow: false, $top-offset: em-calc(100));
+
+      &.tiny  { @include reveal-modal-base(false, 30%); }
+      &.small { @include reveal-modal-base(false, 40%); }
+      &.medium  { @include reveal-modal-base(false, 60%); }
+      &.large { @include reveal-modal-base(false, 70%); }
+      &.xlarge { @include reveal-modal-base(false, 95%); }
+    }
+  }
+
+  // Reveal Print Styles
+  @media print {
+    .#{$reveal-modal-class} {background: #fff !important;}
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_section.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_section.scss
@@ -0,0 +1,391 @@
+//
+// Section Variables
+//
+$include-html-section-classes: $include-html-classes !default;
+
+// We use these to set padding and hover factor
+$section-title-padding: em-calc(15) !default;
+$section-content-padding: em-calc(15) !default;
+$section-function-factor: 10% !default;
+
+// These style the titles
+$section-title-color: #333 !default;
+$section-title-color-active: #333 !default;
+$section-title-bg: #efefef !default;
+$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
+$section-title-bg-active-tabs: #fff !default;
+$section-title-bg-hover: darken($section-title-bg, $section-function-factor / 2) !default;
+
+// Want to control border size, here ya go!
+$section-border-size: 1px !default;
+$section-border-style: solid !default;
+$section-border-color: #ccc !default;
+
+// Font controls
+$section-font-size: em-calc(14) !default;
+
+// Control the color of the background and some size options
+$section-content-bg: #fff !default;
+$section-vertical-nav-min-width: em-calc(200) !default;
+$section-vertical-tabs-title-width: em-calc(200) !default;
+$section-bottom-margin: em-calc(20) !default;
+
+$title-selector: ".title" !default;
+$content-selector: ".content" !default;
+$active-region-selector: ".active" !default;
+
+//
+// Section Mixins
+//
+
+// basic styles for sections.js: positions
+@mixin section-container-base($section-type: accordion) {
+  width: 100%;
+  position: relative;
+  display: block;
+  margin-bottom: $section-bottom-margin;
+
+  @if $section-type != accordion {
+    &:not([data-section-resized]):not([data-section-small-style]) {
+      visibility: hidden;
+    }
+  }
+
+  @if $section-type != tabs {
+  	&[data-section-small-style] {
+      width: 100% !important; // override inline style
+
+	  & > [data-section-region], & > section, & > .section {
+        padding: 0 !important; // override inline style
+        margin: 0 !important; // override inline style
+        & > [data-section-title], & > #{$title-selector}{
+          width: 100% !important; // override inline style
+        }
+      }
+	}
+  }
+}
+
+// foundation styles for sections
+@mixin section-container-style($section-type: accordion) {
+
+  // Accordion container border styles
+  @if $section-type == accordion {
+    border-top: $section-border-size $section-border-style $section-border-color;
+  }
+
+  // Tabs container border styles
+  @else if $section-type == tabs {
+	border: none;
+  }
+
+  // Vertical Tabs container border styles
+  @else if $section-type == vertical-tabs {
+    border: none;
+  }
+
+  // Vertical Nav container border styles
+  @else if $section-type == vertical-nav {
+    border: none;
+  }
+
+  // Horizontal Nav container border styles
+  @else if $section-type == horizontal-nav {
+    background: $section-title-bg;
+    border: $section-border-size $section-border-style $section-border-color;
+  }
+}
+
+//basic styles for section.js: section region positions
+@mixin section-base($section-type: accordion) {
+
+  & > [data-section-title], & > #{$title-selector} {
+    margin-bottom: 0;
+	a {
+	  width: 100%;
+      display: inline-block;
+      white-space: nowrap;
+    }
+  }
+
+  & > [data-section-content], & > #{$content-selector} {
+    display: none;
+  }
+
+  &#{$active-region-selector} {
+    & > [data-section-content], & > #{$content-selector} { display: block; }
+  }
+
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
+  }
+
+  // Style for when Accordion
+  @if $section-type == accordion {
+	margin: 0;
+    & > [data-section-title], & > #{$title-selector} { width: 100%; }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+
+    & > [data-section-title], & > #{$title-selector} {
+	  width: auto;
+      position: absolute;
+      top: 0;
+	  #{$default-float}: 0;
+    }
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+
+    & > [data-section-title], & > #{$title-selector} {
+	  position: absolute;
+	  top:0;
+      #{$default-float}: 0;
+      width: $section-vertical-tabs-title-width;
+    }
+
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width;
+
+      & > [data-section-title], & > #{$title-selector} {
+        width: $section-vertical-tabs-title-width;
+      }
+    }
+  }
+
+  // Styles for when Vertical Nav
+  @else if $section-type == vertical-nav {
+
+	position: relative;
+    display: inline-block;
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
+    }
+
+	& > [data-section-content], & > #{$content-selector} {
+	    position: absolute;
+	    top:0;
+		#{$default-float}: 0;
+		z-index: 999;
+		min-width: $section-vertical-nav-min-width;
+	}
+  }
+
+  // Styles for when Horizontal Nav
+  @else if $section-type == horizontal-nav {
+
+	position: relative;
+	float: #{$default-float};
+
+	& > [data-section-title], & > #{$title-selector} {
+	  position: static;
+	  width: auto;
+	  a { display: block; }
+    }
+
+	& > [data-section-content], & > #{$content-selector} {
+	  width: auto;
+	  position: absolute;
+	  top: 0;
+      #{$default-float}: 0;
+	  z-index: 999;
+	  min-width: $section-vertical-nav-min-width;
+	}
+  }
+}
+
+//foundation styles for section regions
+@mixin section-style($section-type:accordion, $title-selector: $title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
+
+  // Default Styles
+  & > #{$title-selector} {
+    background-color: $title-bg;
+    cursor: $cursor-pointer-value;
+	border: $section-border-style $section-border-size $section-border-color;
+	a {
+      padding: $title-padding;
+      color: $title-color;
+      font-size: $title-font-size;
+	  background: none;
+    }
+    &:hover { background-color: $title-bg-hover; }
+  }
+
+  & > #{$content-selector} {
+    padding: $content-padding;
+    background-color: $content-bg;
+	border: $section-border-style $section-border-size $section-border-color;
+
+    &>*:last-child { margin-bottom: 0; }
+    &>*:first-child { padding-top: 0; }
+    &>*:last-child:not(.flex-video) { padding-bottom: 0; }
+  }
+
+  &#{$active-region-selector} {
+	& > #{$title-selector} {
+	  background: $title-bg-active;
+      a { color: $title-color-active; }
+    }
+  }
+
+  &:not(#{$active-region-selector}) {
+    padding: 0 !important; //override inline style
+  }
+
+  // Style for when Accordion
+  @if $section-type == accordion {
+    & > #{$title-selector} { border-top: none; }
+  }
+
+  // Styles for when tabs
+  @else if $section-type == tabs {
+
+	&#{$active-region-selector} > #{$title-selector} {
+      border-bottom: 0;
+	}
+  }
+
+  // Styles for when Vertical Tabs
+  @else if $section-type == vertical-tabs {
+
+    &#{$active-region-selector} {
+	  padding-#{$default-float}: $section-vertical-tabs-title-width - em-calc(1px);
+
+      & > #{$title-selector} {
+        background-color: $title-bg-active;
+      }
+    }
+  }
+}
+
+@mixin section-container($base-style:true, $section-type:accordion)  {
+  @include section-container-base($section-type);
+  @include section-container-style($section-type);
+}
+
+@mixin section($section-type:accordion, $title-selector:$title-selector, $content-selector: $content-selector, $title-padding:$section-title-padding, $title-color:$section-title-color, $title-font-size:$section-font-size, $title-bg:$section-title-bg, $title-bg-hover:$section-title-bg-hover, $title-bg-active:$section-title-bg-active, $title-color-active:$section-title-color-active, $content-bg:$section-content-bg, $content-padding:$section-content-padding, $section-border-size:$section-border-size, $section-border-style:$section-border-style, $section-border-color: $section-border-color) {
+  @include section-base($section-type);
+  @include section-style($section-type, $title-selector, $content-selector, $title-padding, $title-color, $title-font-size, $title-bg, $title-bg-hover, $title-bg-active, $title-color-active, $content-bg, $content-padding, $section-border-size, $section-border-style, $section-border-color);
+}
+
+@if $include-html-section-classes != false {
+
+  /* Sections */
+
+  [data-section=''], [data-section='auto'], .section-container.auto,
+  [data-section='vertical-tabs'], .section-container.vertical-tabs,
+  [data-section='vertical-nav'], .section-container.vertical-nav,
+  [data-section='horizontal-nav'], .section-container.horizontal-nav,
+  [data-section='accordion'], .section-container.accordion {
+	@include section-container-base(accordion);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(accordion);
+    }
+  }
+
+  .section-container.auto,
+  .section-container.vertical-tabs,
+  .section-container.vertical-nav,
+  .section-container.horizontal-nav,
+  .section-container.accordion {
+	@include section-container-style(accordion);
+	& > section, & > .section {
+      @include section-style(accordion);
+    }
+  }
+
+  [data-section='tabs'], .section-container.tabs {
+	@include section-container-base(tabs);
+	& > section, & > .section, & > [data-section-region] {
+      @include section-base(tabs);
+    }
+  }
+
+  .section-container.tabs {
+	@include section-container-style(tabs);
+	& > section, & > .section {
+      @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+    }
+  }
+
+  @media #{$small} {
+
+    [data-section=''], [data-section='auto'], .section-container.auto {
+	  @include section-container-base(tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(tabs);
+      }
+    }
+
+	.section-container.auto {
+	  @include section-container-style(tabs);
+	  & > section, & > .section {
+        @include section-style(tabs, $title-bg-active: $section-title-bg-active-tabs);
+      }
+    }
+
+	[data-section='vertical-tabs'], .section-container.vertical-tabs {
+	  @include section-container-base(vertical-tabs);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-tabs);
+      }
+    }
+
+	.section-container.vertical-tabs {
+	  @include section-container-style(vertical-tabs);
+	  & > section, & > .section {
+        @include section-style(vertical-tabs);
+      }
+    }
+
+	[data-section='vertical-nav'], .section-container.vertical-nav {
+	  @include section-container-base(vertical-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(vertical-nav);
+      }
+    }
+
+	.section-container.vertical-nav {
+	  @include section-container-style(vertical-nav);
+	  & > section, & > .section {
+        @include section-style(vertical-nav);
+      }
+    }
+
+	[data-section='horizontal-nav'], .section-container.horizontal-nav {
+	  @include section-container-base(horizontal-nav);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(horizontal-nav);
+      }
+    }
+
+	.section-container.horizontal-nav {
+	  @include section-container-style(horizontal-nav);
+	  & > section, & > .section {
+        @include section-style(horizontal-nav);
+      }
+    }
+  }
+
+  // Change all variations to expanded accordions when no JS is detected.
+  .no-js {
+    [data-section], .section-container {
+	  @include section-container-base(accordion);
+	  & > section, & > .section, & > [data-section-region] {
+        @include section-base(accordion);
+      }
+    }
+	.section-container {
+      @include section-container-style(accordion);
+	  & > section, & > .section {
+        @include section-style(accordion);
+      }
+    }
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_side-nav.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_side-nav.scss
@@ -0,0 +1,69 @@
+//
+// Side Nav Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use this to control padding.
+$side-nav-padding: em-calc(14 0) !default;
+
+// We use these to control list styles.
+$side-nav-list-type: none !default;
+$side-nav-list-position: inside !default;
+$side-nav-list-margin: em-calc(0 0 7 0) !default;
+
+// We use these to control link styles.
+$side-nav-link-color: $primary-color !default;
+$side-nav-link-color-active: lighten(#000, 30%) !default;
+$side-nav-font-size: em-calc(14) !default;
+$side-nav-font-weight: bold !default;
+
+// We use these to control border styles
+$side-nav-divider-size: 1px !default;
+$side-nav-divider-style: solid !default;
+$side-nav-divider-color: darken(#fff, 10%) !default;
+
+
+//
+// Side Nav Mixins
+//
+
+
+// We use this to style the side-nav
+@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
+  display: block;
+  margin: 0;
+  padding: $side-nav-padding;
+  list-style-type: $side-nav-list-type;
+  list-style-position: $side-nav-list-position;
+
+  li {
+    margin: $side-nav-list-margin;
+    font-size: $font-size;
+
+    a {
+      display: block;
+      color: $link-color;
+    }
+
+    &.active > a:first-child {
+      color: $side-nav-link-color-active;
+      font-weight: $side-nav-font-weight;
+    }
+
+    &.divider {
+      border-top: $side-nav-divider-size $side-nav-divider-style;
+      height: 0;
+      padding: 0;
+      list-style: none;
+      border-top-color: $divider-color;
+    }
+  }
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Side Nav */
+  .side-nav { @include side-nav; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_split-buttons.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_split-buttons.scss
@@ -0,0 +1,167 @@
+//
+// Split Button Variables
+//
+$include-html-button-classes: $include-html-classes !default;
+
+// We use these to control different shared styles for Split Buttons
+$split-button-function-factor: 15% !default;
+$split-button-pip-color: #fff !default;
+$split-button-pip-color-alt: #333 !default;
+$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
+
+// We use these to control tiny split buttons
+$split-button-padding-tny: $button-tny * 9 !default;
+$split-button-span-width-tny: $button-tny * 6.5 !default;
+$split-button-pip-size-tny: $button-tny !default;
+$split-button-pip-top-tny: $button-tny * 2 !default;
+$split-button-pip-default-float-tny: em-calc(-5) !default;
+
+// We use these to control small split buttons
+$split-button-padding-sml: $button-sml * 7 !default;
+$split-button-span-width-sml: $button-sml * 5 !default;
+$split-button-pip-size-sml: $button-sml !default;
+$split-button-pip-top-sml: $button-sml * 1.5 !default;
+$split-button-pip-default-float-sml: em-calc(-9) !default;
+
+// We use these to control medium split buttons
+$split-button-padding-med: $button-med * 6.4 !default;
+$split-button-span-width-med: $button-med * 4 !default;
+$split-button-pip-size-med: $button-med - em-calc(3) !default;
+$split-button-pip-top-med: $button-med * 1.5 !default;
+$split-button-pip-default-float-med: em-calc(-9) !default;
+
+// We use these to control large split buttons
+$split-button-padding-lrg: $button-lrg * 6 !default;
+$split-button-span-width-lrg: $button-lrg * 3.75 !default;
+$split-button-pip-size-lrg: $button-lrg - em-calc(6) !default;
+$split-button-pip-top-lrg: $button-lrg + em-calc(5) !default;
+$split-button-pip-default-float-lrg: em-calc(-9) !default;
+
+
+//
+// Split Button Mixin
+//
+
+// We use this mixin to create split buttons that build upon the button mixins
+@mixin split-button($padding:medium, $pip-color:$split-button-pip-color, $span-border:$primary-color, $base-style:true) {
+
+  // With this, we can control whether or not the base styles come through.
+  @if $base-style {
+    position: relative;
+
+    // Styling for the split arrow clickable area
+    span {
+      display: block;
+      height: 100%;
+      position: absolute;
+      #{$opposite-direction}: 0;
+      top: 0;
+      border-#{$default-float}: solid 1px;
+
+      // Building the triangle pip indicator
+      &:before {
+        position: absolute;
+        content: "";
+        width: 0;
+        height: 0;
+        display: block;
+        border-style: inset;
+
+        #{$default-float}: 50%;
+      }
+
+      &:active { background-color: $split-button-active-bg-tint; }
+    }
+  }
+
+  // Control the border color for the span area of the split button
+  @if $span-border {
+    span {
+      border-#{$default-float}-color: darken($span-border, $split-button-function-factor);
+    }
+  }
+
+  // Style of the button and clickable area for tiny sizes
+  @if $padding == tiny {
+    padding-#{$opposite-direction}: $split-button-padding-tny;
+
+    span { width: $split-button-span-width-tny;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-tny;
+        top: $split-button-pip-top-tny;
+        margin-#{$default-float}: $split-button-pip-default-float-tny;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for small sizes
+  @else if $padding == small {
+    padding-#{$opposite-direction}: $split-button-padding-sml;
+
+    span { width: $split-button-span-width-sml;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-sml;
+        top: $split-button-pip-top-sml;
+        margin-#{$default-float}: $split-button-pip-default-float-sml;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for default (medium) sizes
+  @else if $padding == medium {
+    padding-#{$opposite-direction}: $split-button-padding-med;
+
+    span { width: $split-button-span-width-med;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-med;
+        top: $split-button-pip-top-med;
+        margin-#{$default-float}: $split-button-pip-default-float-med;
+      }
+    }
+  }
+
+  // Style of the button and clickable area for large sizes
+  @else if $padding == large {
+    padding-#{$opposite-direction}: $split-button-padding-lrg;
+
+    span { width: $split-button-span-width-lrg;
+      &:before {
+        border-top-style: solid;
+        border-width: $split-button-pip-size-lrg;
+        top: $split-button-pip-top-lrg;
+        margin-#{$default-float}: $split-button-pip-default-float-lrg;
+      }
+    }
+  }
+
+  // Control the color of the triangle pip
+  @if $pip-color {
+    span:before { border-color: $pip-color transparent transparent transparent; }
+  }
+}
+
+
+@if $include-html-button-classes != false {
+
+  /* Split Buttons */
+  .split.button { @include split-button;
+
+    &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
+    &.alert { @include split-button(false, false, $alert-color, false); }
+    &.success { @include split-button(false, false, $success-color, false); }
+
+    &.tiny { @include split-button(tiny, false, false, false); }
+    &.small { @include split-button(small, false, false, false); }
+    &.large { @include split-button(large, false, false, false); }
+    &.expand { padding-left: 2em; }
+
+    &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
+
+    &.radius span { @include side-radius($opposite-direction, $global-radius); }
+    &.round span { @include side-radius($opposite-direction, 1000px); }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_sub-nav.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_sub-nav.scss
@@ -0,0 +1,84 @@
+//
+// Sub Nav Variables
+//
+$include-html-nav-classes: $include-html-classes !default;
+
+// We use these to control margin and padding
+$sub-nav-list-margin: em-calc(-4 0 18) !default;
+$sub-nav-list-padding-top: em-calc(4) !default;
+
+// We use this to control the definition
+$sub-nav-font-size: em-calc(14) !default;
+$sub-nav-font-color: #999 !default;
+$sub-nav-font-weight: normal !default;
+$sub-nav-text-decoration: none !default;
+$sub-nav-border-radius: 1000px !default;
+
+// We use these to control the active item styles
+$sub-nav-active-font-weight: bold !default;
+$sub-nav-active-bg: $primary-color !default;
+$sub-nav-active-color: #fff !default;
+$sub-nav-active-padding: em-calc(3 9) !default;
+$sub-nav-active-cursor: default !default;
+
+$sub-nav-item-divider: "" !default;
+$sub-nav-item-divider-margin: emCalc(12) !default;
+
+//
+// Sub Nav Mixins
+//
+
+@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
+  display: block;
+  width: auto;
+  overflow: hidden;
+  margin: $sub-nav-list-margin;
+  padding-top: $sub-nav-list-padding-top;
+  margin-#{$opposite-direction}: 0;
+  margin-#{$default-float}: em-calc(-9);
+
+  dt,
+  dd,
+  li {
+    float: $default-float;
+    display: inline;
+    margin-#{$default-float}: em-calc(9);
+    margin-bottom: em-calc(10);
+    font-weight: $sub-nav-font-weight;
+    font-size: $font-size;
+
+    a {
+      color: $font-color;
+      text-decoration: $sub-nav-text-decoration; }
+
+    &.active a {
+      @include radius($sub-nav-border-radius);
+      font-weight: $sub-nav-active-font-weight;
+      background: $active-bg;
+      padding: $sub-nav-active-padding;
+      cursor: $sub-nav-active-cursor;
+      color: $sub-nav-active-color;
+    }
+    @if $sub-nav-item-divider != "" {
+      margin-#{$default-float}: 0;
+
+      &:before {
+        content: "#{$sub-nav-item-divider}";
+        margin: 0 $sub-nav-item-divider-margin;
+      }
+
+      &:first-child:before {
+        content: "";
+        margin: 0;
+      }
+    }
+  }
+}
+
+
+@if $include-html-nav-classes != false {
+
+  /* Side Nav */
+  .sub-nav { @include sub-nav; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_switch.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_switch.scss
@@ -0,0 +1,266 @@
+//
+// Switch Variables
+//
+$include-html-form-classes: $include-html-classes !default;
+
+// Controlling border styles and background colors for the switch container
+$switch-border-color: darken(#fff, 20%) !default;
+$switch-border-style: solid !default;
+$switch-border-width: 1px !default;
+$switch-bg: #fff !default;
+
+// We use these to control the switch heights for our default classes
+$switch-height-tny: 22px !default;
+$switch-height-sml: 28px !default;
+$switch-height-med: 36px !default;
+$switch-height-lrg: 44px !default;
+$switch-bottom-margin: em-calc(20) !default;
+
+// We use these to control default font sizes for our classes.
+$switch-font-size-tny: 11px !default;
+$switch-font-size-sml: 12px !default;
+$switch-font-size-med: 14px !default;
+$switch-font-size-lrg: 17px !default;
+$switch-label-side-padding: 6px !default;
+
+// We use these to style the switch-paddle
+$switch-paddle-bg: #fff !default;
+$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) !default;
+$switch-paddle-border-color: darken($switch-paddle-bg, 35%) !default;
+$switch-paddle-border-width: 1px !default;
+$switch-paddle-border-style: solid !default;
+$switch-paddle-transition-speed: .1s !default;
+$switch-paddle-transition-ease: ease-out !default;
+$switch-positive-color: lighten($success-color, 50%) !default;
+$switch-negative-color: #f5f5f5 !default;
+
+// Outline Style for tabbing through switches
+$switch-label-outline: 1px dotted #888 !default;
+
+
+//
+// Switch Mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
+
+  // Default position and structure for switch container.
+  position: relative;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+  border-style: $switch-border-style;
+  border-width: $switch-border-width;
+  margin-bottom: $switch-bottom-margin;
+
+  // Default label styles for type and transition
+  label {
+    position: relative;
+    #{$default-float}: 0;
+    z-index: 2;
+    float: $default-float;
+    width: 50%;
+    height: 100%;
+    margin: 0;
+    font-weight: bold;
+    text-align: $default-float;
+
+    // Transition for the switch label to follow paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // So that we don't need to recreate the form with any JS, we use the
+  // existing radio button, but we cleverly position and hide it.
+  input {
+    position: absolute;
+    z-index: 3;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    -moz-appearance: none;
+
+    // Hover and focus styles for the paddle
+    &:hover,
+    &:focus {
+      cursor: $cursor-pointer-value;
+    }
+  }
+
+  // The toggle area for radio switches. We call is a paddle.
+  span:last-child {
+    position: absolute;
+    top: -1px;
+    #{$default-float}: -1px;
+    z-index: 1;
+    display: block;
+    padding: 0;
+    border-width: $switch-paddle-border-width;
+    border-style: $switch-paddle-border-style;
+
+    // Transition for the switch paddle
+    @include single-transition(all, $transition-speed, $transition-ease);
+  }
+
+  // When a label isn't :checked, we hide it as it slides away.
+  input:not(:checked) + label { opacity: 0; }
+
+  // Controlling the position of the labels as they are toggled.
+  input:checked { display: none !important; }
+  input { #{$default-float}: 0; display: block !important; }
+
+  // Left Label alignment and position changes, including fixes for while inside a custom form
+  input:first-of-type + label,
+  input:first-of-type + span + label { #{$default-float}: -50%; }
+  input:first-of-type:checked + label,
+  input:first-of-type:checked + span + label { #{$default-float}: 0%; }
+
+  // Right Label alignment and position changes, including fixes for while inside a custom form
+  input:last-of-type + label,
+  input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
+  input:last-of-type:checked + label,
+  input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
+
+  // Hiding custom form spans since we auto-create them
+  span.custom { display: none !important; }
+
+  // Bugfix for older Webkit, including mobile Webkit. Adapted from:
+  // http://css-tricks.com/webkit-sibling-bug/
+  @media only screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:480px) {
+    @if $experimental { -webkit-animation: webkitSiblingBugfix infinite 1s; }
+  }
+
+  @media only screen and (-webkit-min-device-pixel-ratio:1.5) {
+    @if $experimental { -webkit-animation: none 0; }
+  }
+
+  form.custom & .hidden-field {
+    margin-left: auto;
+    position: absolute;
+    visibility: visible;
+  }
+}
+
+// We use this mixin to create the size styles for switches.
+@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
+
+  height: em-calc($height);
+
+  label {
+    padding: em-calc(0, $switch-label-side-padding);
+    line-height: $line-height;
+    font-size: em-calc($font-size);
+  }
+
+  input {
+    // Move the paddle to the right position
+    &:first-of-type:checked ~ span:last-child {
+      #{$default-float}: 100%;
+      margin-#{$default-float}: em-calc(-$height + 1px);
+    }
+  }
+
+  span:last-child {
+    width: em-calc($height);
+    height: em-calc($height);
+  }
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+@mixin switch-style($paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
+
+  @if $base-style {
+    background: $switch-bg;
+    border-color: $switch-border-color;
+
+    span:last-child {
+      border-color: darken($paddle-bg, 30%);
+      background: $paddle-bg;
+      @if $experimental {
+        background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+        background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+      }
+      background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+
+      // Building the alternating colored sides of the switch
+      @if $experimental {
+        -webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
+                            1000px 0 0 1000px $positive-color,
+                            -2px 0 10px 0 rgba(0,0,0,0.07),
+                            -1000px 0 0 1000px $negative-color;
+      }
+      box-shadow:         2px 0 10px 0 rgba(0,0,0,0.07),
+                          1000px 0 0 980px $positive-color,
+                          -2px 0 10px 0 rgba(0,0,0,0.07),
+                          -1000px 0 0 1000px $negative-color;
+    }
+
+    &:hover,
+    &:focus {
+      span:last-child {
+        background: $paddle-bg;
+        @if $experimental {
+          background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+          background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+        }
+        background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+      }
+    }
+
+    &:active { background: transparent; }
+  }
+
+  // Setting up the radius for switches
+  @if $radius == true {
+    @include radius(4px);
+    span:last-child { @include radius(3px); }
+  }
+  @else if $radius {
+    @include radius($radius);
+    span:last-child { @include radius($radius - 1px); }
+  }
+
+}
+
+// We use this to quickly create switches with a single mixin
+@mixin switch($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease, $height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em, $paddle-bg:$switch-paddle-bg, $positive-color:$switch-positive-color, $negative-color:$switch-negative-color, $radius:false, $base-style:true) {
+  @include switch-base($transition-speed, $transition-ease);
+  @include switch-size($height, $font-size, $line-height);
+  @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
+}
+
+@if $include-html-form-classes != false {
+
+  /* Foundation Switches */
+  @media only screen {
+
+    // Containing element for the radio switch
+    div.switch {
+      @include switch;
+
+      // Large radio switches
+      &.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
+
+      // Small radio switches
+      &.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1em); }
+
+      // Tiny radio switches
+      &.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
+
+      // Add a radius to the switch
+      &.radius { @include radius(4px);
+        span:last-child{ @include radius(3px); }
+      }
+
+      // Make the switch completely round, like a pill
+      &.round { @include radius(1000px);
+        span:last-child { @include radius(999px); }
+        label { padding: em-calc(0 $switch-label-side-padding + 3); }
+      }
+
+    }
+
+    @if $experimental { @-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } } }
+  }
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_tables.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_tables.scss
@@ -0,0 +1,84 @@
+//
+// Table Variables
+//
+$include-html-table-classes: $include-html-classes !default;
+
+// These control the background color for the table and even rows
+$table-bg: #fff !default;
+$table-even-row-bg: #f9f9f9 !default;
+
+// These control the table cell border style
+$table-border-style: solid !default;
+$table-border-size: 1px !default;
+$table-border-color: #ddd !default;
+
+// These control the table head styles
+$table-head-bg: #f5f5f5 !default;
+$table-head-font-size: em-calc(14) !default;
+$table-head-font-color: #222 !default;
+$table-head-font-weight: bold !default;
+$table-head-padding: em-calc(8 10 10) !default;
+
+// These control the row padding and font styles
+$table-row-padding: em-calc(9 10) !default;
+$table-row-font-size: em-calc(14) !default;
+$table-row-font-color: #222 !default;
+$table-line-height: em-calc(18) !default;
+
+// These are for controlling the display and margin of tables
+$table-display: table-cell !default;
+$table-margin-bottom: em-calc(20) !default;
+
+
+//
+// Table Mixin
+//
+@mixin table {
+  background: $table-bg;
+  margin-bottom: $table-margin-bottom;
+  border: $table-border-style $table-border-size $table-border-color;
+
+  thead,
+  tfoot {
+    background: $table-head-bg;
+    font-weight: $table-head-font-weight;
+
+    tr {
+      th,
+      td {
+        padding: $table-head-padding;
+        font-size: $table-head-font-size;
+        color: $table-head-font-color;
+        text-align: $default-float;
+      }
+    }
+  }
+
+  tr {
+    th,
+    td {
+      padding: $table-row-padding;
+      font-size: $table-row-font-size;
+      color: $table-row-font-color;
+    }
+
+    &.even,
+    &.alt,
+    &:nth-of-type(even) { background: $table-even-row-bg; }
+  }
+
+  thead tr th,
+  tfoot tr th,
+  tbody tr td,
+  tr td,
+  tfoot tr td { display: $table-display; line-height: $table-line-height; }
+}
+
+@if $include-html-table-classes {
+
+  /* Tables */
+  table {
+    @include table;
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_thumbs.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_thumbs.scss
@@ -0,0 +1,53 @@
+//
+// Image Thumbnail Variables
+//
+$include-html-media-classes: $include-html-classes !default;
+
+// We use these to control border styles
+$thumb-border-style: solid !default;
+$thumb-border-width: 4px !default;
+$thumb-border-color: #fff !default;
+$thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
+$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
+
+// Radius and transition speed for thumbs
+$thumb-radius: $global-radius !default;
+$thumb-transition-speed: 200ms !default;
+
+//
+// Image Thumbnail Mixins
+//
+
+// We use this to create image thumbnail styles.
+@mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
+  line-height: 0;
+  display: inline-block;
+  border: $thumb-border-style $border-width $thumb-border-color;
+  @if $experimental {
+    -webkit-box-shadow: $box-shadow;
+  }
+  box-shadow: $box-shadow;
+
+  &:hover,
+  &:focus {
+    @if $experimental {
+      -webkit-box-shadow: $box-shadow-hover;
+    }
+    box-shadow: $box-shadow-hover;
+  }
+}
+
+
+// If html classes are turned on we'll include these classes.
+@if $include-html-media-classes != false {
+
+  /* Image Thumbnails */
+  .th {
+    @include thumb;
+    @include single-transition(all,$thumb-transition-speed,ease-out);
+
+    &.radius { @include radius($thumb-radius); }
+  }
+  a.th { display: inline-block; max-width:100%; }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_tooltips.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_tooltips.scss
@@ -0,0 +1,117 @@
+//
+// Tooltip Variables
+//
+$include-html-tooltip-classes: $include-html-classes !default;
+
+$has-tip-border-bottom: dotted 1px #ccc !default;
+$has-tip-font-weight: bold !default;
+$has-tip-font-color: #333 !default;
+$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
+$has-tip-font-color-hover: $primary-color !default;
+$has-tip-cursor-type: help !default;
+
+$tooltip-padding: em-calc(8) !default;
+$tooltip-bg: #000 !default;
+$tooltip-font-size: em-calc(15) !default;
+$tooltip-font-weight: bold !default;
+$tooltip-font-color: #fff !default;
+$tooltip-line-height: 1.3 !default;
+$tooltip-close-font-size: em-calc(10) !default;
+$tooltip-close-font-weight: normal !default;
+$tooltip-close-font-color: #888 !default;
+$tooltip-font-size-sml: em-calc(14) !default;
+$tooltip-radius: $global-radius !default;
+$tooltip-pip-size: 5px !default;
+
+@if $include-html-tooltip-classes != false {
+
+  /* Tooltips */
+  .has-tip {
+    border-bottom: $has-tip-border-bottom;
+    cursor: $has-tip-cursor-type;
+    font-weight: $has-tip-font-weight;
+    color: $has-tip-font-color;
+
+    &:hover,
+    &:focus {
+      border-bottom: $has-tip-border-bottom-hover;
+      color: $has-tip-font-color-hover;
+    }
+
+    &.tip-left,
+    &.tip-right { float: none !important; }
+  }
+
+  .tooltip {
+    display: none;
+    position: absolute;
+    z-index: 999;
+    font-weight: $tooltip-font-weight;
+    font-size: $tooltip-font-size;
+    line-height: $tooltip-line-height;
+    padding: $tooltip-padding;
+    max-width: 85%;
+    #{$default-float}: 50%;
+    width: 100%;
+    color: $tooltip-font-color;
+    background: $tooltip-bg;
+    @include radius($tooltip-radius);
+
+    &>.nub {
+      display: block;
+      #{$default-float}: $tooltip-pip-size;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: solid $tooltip-pip-size;
+      border-color: transparent transparent $tooltip-bg transparent;
+      top: -($tooltip-pip-size * 2);
+    }
+
+    &.opened {
+      color: $has-tip-font-color-hover !important;
+      border-bottom: $has-tip-border-bottom-hover !important;
+    }
+  }
+
+  .tap-to-close {
+    display: block;
+    font-size: $tooltip-close-font-size;
+    color: $tooltip-close-font-color;
+    font-weight: $tooltip-close-font-weight;
+  }
+
+  @media #{$small} {
+    .tooltip {
+      &>.nub {
+        border-color: transparent transparent $tooltip-bg transparent;
+        top: -($tooltip-pip-size * 2);
+      }
+      &.tip-top>.nub {
+        border-color: $tooltip-bg transparent transparent transparent;
+        top: auto;
+        bottom: -($tooltip-pip-size * 2);
+      }
+
+      &.tip-left,
+      &.tip-right { float: none !important; }
+
+      &.tip-left>.nub {
+        border-color: transparent transparent transparent $tooltip-bg;
+        right: -($tooltip-pip-size * 2);
+        left: auto;
+        top: 50%;
+        margin-top: -$tooltip-pip-size;
+      }
+      &.tip-right>.nub {
+        border-color: transparent $tooltip-bg transparent transparent;
+        right: auto;
+        left: -($tooltip-pip-size * 2);
+        top: 50%;
+        margin-top: -$tooltip-pip-size;
+      }
+
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_top-bar.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_top-bar.scss
@@ -0,0 +1,570 @@
+//
+// Top Bar Variables
+//
+$include-html-top-bar-classes: $include-html-classes !default;
+
+// Background color for the top bar
+$topbar-bg-color: #111 !default;
+$topbar-bg: $topbar-bg-color !default;
+
+// Height and margin
+$topbar-height: 45px !default;
+$topbar-margin-bottom: 0 !default;
+
+// Control Input height for top bar
+$topbar-input-height: 2.45em !default;
+
+// Controlling the styles for the title in the top bar
+$topbar-title-weight: bold !default;
+$topbar-title-font-size: em-calc(17) !default;
+
+// Style the top bar dropdown elements
+$topbar-dropdown-bg: #222 !default;
+$topbar-dropdown-link-color: #fff !default;
+$topbar-dropdown-link-bg: lighten($topbar-bg-color, 5%) !default;
+$topbar-dropdown-toggle-size: 5px !default;
+$topbar-dropdown-toggle-color: #fff !default;
+$topbar-dropdown-toggle-alpha: 0.5 !default;
+
+// Set the link colors and styles for top-level nav
+$topbar-link-color: #fff !default;
+$topbar-link-color-hover: #fff !default;
+$topbar-link-color-active: #fff !default;
+$topbar-link-weight: bold !default;
+$topbar-link-font-size: em-calc(13) !default;
+$topbar-link-hover-lightness: -30% !default; // Darken by 30%
+$topbar-link-bg-hover: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness) !default;
+$topbar-link-bg-active: darken($topbar-bg-color, 3%) !default;
+
+
+$topbar-dropdown-label-color: #555 !default;
+$topbar-dropdown-label-text-transform: uppercase !default;
+$topbar-dropdown-label-font-weight: bold !default;
+$topbar-dropdown-label-font-size: em-calc(10) !default;
+$topbar-dropdown-label-bg: lighten($topbar-bg-color, 5%) !default;
+
+// Top menu icon styles
+$topbar-menu-link-transform: uppercase !default;
+$topbar-menu-link-font-size: em-calc(13) !default;
+$topbar-menu-link-weight: bold !default;
+$topbar-menu-link-color: #fff !default;
+$topbar-menu-icon-color: #fff !default;
+$topbar-menu-link-color-toggled: #888 !default;
+$topbar-menu-icon-color-toggled: #888 !default;
+
+// Transitions and breakpoint styles
+$topbar-transition-speed: 300ms !default;
+// Using em-calc for the below breakpoint causes issues with top bar
+$topbar-breakpoint: 940px !default; // Change to 9999px for always mobile layout
+$topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})" !default;
+
+// Divider Styles
+$topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%) !default;
+$topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%) !default;
+
+// Sticky Class
+$topbar-sticky-class: ".sticky" !default;
+$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
+
+@if $include-html-top-bar-classes != false {
+
+  /* Wrapped around .top-bar to contain to grid width */
+  .contain-to-grid {
+    width: 100%;
+    background: $topbar-bg;
+
+    .top-bar { margin-bottom: $topbar-margin-bottom; }
+  }
+
+  // Wrapped around .top-bar to make it stick to the top
+  .fixed {
+    width: 100%;
+    #{$default-float}: 0;
+    position: fixed;
+    top: 0;
+    z-index: 99;
+
+    &.expanded:not(.top-bar) {
+        overflow-y: auto;
+        height: auto;
+        width: 100%;
+        max-height: 100%;
+
+      .title-area {
+        position: fixed;
+        width: 100%;
+        z-index: 99;
+      }
+      // Ensure you can scroll the menu on small screens
+      .top-bar-section {
+        z-index: 98;
+        margin-top: $topbar-height;
+      }
+    }
+  }
+
+  .top-bar {
+    overflow: hidden;
+    height: $topbar-height;
+    line-height: $topbar-height;
+    position: relative;
+    background: $topbar-bg;
+    margin-bottom: $topbar-margin-bottom;
+
+    // Topbar Global list Styles
+    ul {
+      margin-bottom: 0;
+      list-style: none;
+    }
+
+    .row { max-width: none; }
+
+    form,
+    input { margin-bottom: 0; }
+
+    input { height: $topbar-input-height; }
+
+    .button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
+
+    // Title Area
+    .title-area {
+      position: relative;
+      margin: 0;
+    }
+
+    .name {
+      height: $topbar-height;
+      margin: 0;
+      font-size: $em-base;
+
+      h1 {
+        line-height: $topbar-height;
+        font-size: $topbar-title-font-size;
+        margin: 0;
+        a {
+          font-weight: $topbar-title-weight;
+          color: $topbar-link-color;
+          width: 50%;
+          display: block;
+          padding: 0 $topbar-height / 3;
+        }
+      }
+    }
+
+    // Menu toggle button on small devices
+    .toggle-topbar {
+      position: absolute;
+      #{$opposite-direction}: 0;
+      top: 0;
+
+      a {
+        color: $topbar-link-color;
+        text-transform: $topbar-menu-link-transform;
+        font-size: $topbar-menu-link-font-size;
+        font-weight: $topbar-menu-link-weight;
+        position: relative;
+        display: block;
+        padding: 0 $topbar-height / 3;
+        height: $topbar-height;
+        line-height: $topbar-height;
+      }
+
+      // Adding the class "menu-icon" will add the 3-line icon people love and adore.
+      &.menu-icon {
+        #{$opposite-direction}: $topbar-height / 3;
+        top: 50%;
+        margin-top: -16px;
+        padding-#{$default-float}: 40px;
+
+        a {
+          text-indent: -48px;
+          width: 34px;
+          height: 34px;
+          line-height: 33px;
+          padding: 0;
+          color: $topbar-menu-link-color;
+
+          span {
+            position: absolute;
+            #{$opposite-direction}: 0;
+            display: block;
+            width: 16px;
+            height: 0;
+            // Shh, don't tell, but box-shadows create the menu icon :)
+            @if $experimental {
+              -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
+                                  0 16px 0 1px $topbar-menu-icon-color,
+                                  0 22px 0 1px $topbar-menu-icon-color;
+            }
+            box-shadow:         0 10px 0 1px $topbar-menu-icon-color,
+                                0 16px 0 1px $topbar-menu-icon-color,
+                                0 22px 0 1px $topbar-menu-icon-color;
+          }
+        }
+      }
+    }
+
+    // Change things up when the top-bar is expanded
+    &.expanded {
+      height: auto;
+      background: transparent;
+
+      .title-area { background: $topbar-bg; }
+
+      .toggle-topbar {
+        a { color: $topbar-menu-link-color-toggled;
+          span {
+            // Shh, don't tell, but box-shadows create the menu icon :)
+            @if $experimental {
+              -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
+                                  0 16px 0 1px $topbar-menu-icon-color-toggled,
+                                  0 22px 0 1px $topbar-menu-icon-color-toggled;
+            }
+            box-shadow:         0 10px 0 1px $topbar-menu-icon-color-toggled,
+                                0 16px 0 1px $topbar-menu-icon-color-toggled,
+                                0 22px 0 1px $topbar-menu-icon-color-toggled;
+          }
+        }
+      }
+    }
+
+  }
+
+  // Right and Left Navigation that stacked by default
+  .top-bar-section {
+    #{$default-float}: 0;
+    position: relative;
+    width: auto;
+    @include single-transition($default-float, $topbar-transition-speed);
+
+    ul {
+      width: 100%;
+      height: auto;
+      display: block;
+      background: $topbar-dropdown-bg;
+      font-size: $em-base;
+      margin: 0;
+    }
+
+    .divider,
+    [role="separator"] {
+      border-bottom: $topbar-divider-border-bottom;
+      border-top: $topbar-divider-border-top;
+      clear: both;
+      height: 1px;
+      width: 100%;
+    }
+
+    ul li {
+      & > a {
+        display: block;
+        width: 100%;
+        color: $topbar-link-color;
+        padding: 12px 0 12px 0;
+        padding-#{$default-float}: $topbar-height / 3;
+        font-size: $topbar-link-font-size;
+        font-weight: $topbar-link-weight;
+        background: $topbar-dropdown-bg;
+
+        &.button {
+          background: $primary-color;
+          font-size: $topbar-link-font-size;
+           padding-right: $topbar-height / 3;
+           padding-left: $topbar-height / 3;
+          &:hover {
+            background: darken($primary-color, 10%);
+          }
+        }
+        &.button.secondary {
+          background: $secondary-color;
+          &:hover {
+            background: darken($secondary-color, 10%);
+          }
+        }
+        &.button.success {
+          background: $success-color;
+          &:hover {
+            background: darken($success-color, 10%);
+          }
+        }
+        &.button.alert {
+          background: $alert-color;
+          &:hover {
+            background: darken($alert-color, 10%);
+          }
+        }
+
+      }
+
+      // Apply the hover link color when it has that class
+      &:hover > a {
+        background: $topbar-link-bg-hover;
+        color: $topbar-link-color-hover;
+      }
+
+      // Apply the active link color when it has that class
+      &.active > a {
+        background: $topbar-link-bg-active;
+        color: $topbar-link-color-active;
+      }
+    }
+
+    // Add some extra padding for list items contains buttons
+    .has-form { padding: $topbar-height / 3; }
+
+    // Styling for list items that have a dropdown within them.
+    .has-dropdown {
+      position: relative;
+
+      & > a {
+        &:after {
+          @if ($topbar-arrows){
+            @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
+          }
+          margin-#{$opposite-direction}: $topbar-height / 3;
+          margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
+          position: absolute;
+          top: 50%;
+          #{$opposite-direction}: 0;
+        }
+      }
+
+      &.moved { position: static;
+        & > .dropdown {
+          display: block;
+        }
+      }
+    }
+
+    // Styling elements inside of dropdowns
+    .dropdown {
+      position: absolute;
+      #{$default-float}: 100%;
+      top: 0;
+      display: none;
+      z-index: 99;
+
+      li {
+        width: 100%;
+        height: auto;
+
+        a {
+          font-weight: normal;
+          padding: 8px $topbar-height / 3;
+          &.parent-link {
+            font-weight: $topbar-link-weight;
+          }
+        }
+
+        &.title h5 { margin-bottom: 0;
+          a {
+            color: $topbar-link-color;
+            line-height: $topbar-height / 2;
+            display: block;
+          }
+        }
+      }
+
+      label {
+        padding: 8px $topbar-height / 3 2px;
+        margin-bottom: 0;
+        text-transform: $topbar-dropdown-label-text-transform;
+        color: $topbar-dropdown-label-color;
+        font-weight: $topbar-dropdown-label-font-weight;
+        font-size: $topbar-dropdown-label-font-size;
+      }
+    }
+  }
+
+  // Element that controls breakpoint, no need to change this ever
+  .top-bar-js-breakpoint {
+    width: $topbar-breakpoint !important;
+    visibility: hidden;
+  }
+  .js-generated { display: block; }
+
+
+  // Top Bar styles intended for screen sizes above the breakpoint.
+  @media #{$topbar-media-query} {
+    .top-bar {
+      background: $topbar-bg;
+      @include clearfix;
+      overflow: visible;
+
+      .toggle-topbar { display: none; }
+
+      .title-area { float: $default-float; }
+      .name h1 a { width: auto; }
+
+      input,
+      .button {
+        line-height: 2em;
+        font-size: em-calc(14);
+        height: 2em;
+        padding: 0 10px;
+        position: relative;
+        top: 8px;
+      }
+
+      &.expanded { background: $topbar-bg; }
+    }
+
+    .contain-to-grid .top-bar {
+      max-width: $row-width;
+      margin: 0 auto;
+      margin-bottom: $topbar-margin-bottom;
+    }
+
+    .top-bar-section {
+      @include single-transition(none,0,0);
+      #{$default-float}: 0 !important;
+
+      ul {
+        width: auto;
+        height: auto !important;
+        display: inline;
+
+        li {
+          float: $default-float;
+          .js-generated { display: none; }
+        }
+      }
+
+      li {
+        &.hover {
+          > a:not(.button) {
+            background: $topbar-link-bg-hover;
+            color: $topbar-link-color-hover;
+          }
+        }
+        a:not(.button) {
+          padding: 0 $topbar-height / 3;
+          line-height: $topbar-height;
+          background: $topbar-bg;
+          &:hover { background: $topbar-link-bg-hover; }
+        }
+      }
+
+      .has-dropdown {
+
+        @if($topbar-arrows){
+
+          & > a {
+            padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
+            &:after {
+              @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
+              margin-top: -($topbar-dropdown-toggle-size / 2);
+              top: $topbar-height / 2;
+            }
+          }
+
+        }
+
+        &.moved { position: relative;
+          & > .dropdown { display: none; }
+        }
+
+        &.hover, &.not-click:hover {
+          & > .dropdown {
+            display: block;
+          }
+        }
+
+        .dropdown li.has-dropdown {
+          & > a {
+            &:after {
+              border: none;
+              content: "\00bb";
+              top: 1em;
+              margin-top: -7px;
+              #{$opposite-direction}: 5px;
+            }
+          }
+        }
+
+      }
+
+      .dropdown {
+        #{$default-float}: 0;
+        top: auto;
+        background: transparent;
+        min-width: 100%;
+
+        li {
+          a {
+            color: $topbar-dropdown-link-color;
+            line-height: 1;
+            white-space: nowrap;
+            padding: 7px $topbar-height / 3;
+            background: $topbar-dropdown-link-bg;
+          }
+
+          label {
+            white-space: nowrap;
+            background: $topbar-dropdown-label-bg;
+          }
+
+          // Second Level Dropdowns
+          .dropdown {
+            #{$default-float}: 100%;
+            top: 0;
+          }
+        }
+      }
+
+      & > ul > .divider,
+      & > ul > [role="separator"] {
+        border-bottom: none;
+        border-top: none;
+        border-#{$opposite-direction}: $topbar-divider-border-bottom;
+        border-#{$default-float}: $topbar-divider-border-top;
+        clear: none;
+        height: $topbar-height;
+        width: 0;
+      }
+
+      .has-form {
+        background: $topbar-bg;
+        padding: 0 $topbar-height / 3;
+        height: $topbar-height;
+      }
+
+      // Position overrides for ul.right
+      ul.right {
+        li .dropdown {
+          left: auto;
+          right: 0;
+
+          li .dropdown { right: 100%; }
+        }
+      }
+    }
+
+    // Degrade gracefully when Javascript is disabled. Displays dropdown and changes
+    // background & text color on hover.
+    .no-js .top-bar-section {
+	  ul li {
+        // Apply the hover link color when it has that class
+        &:hover > a {
+          background: $topbar-link-bg-hover;
+          color: $topbar-link-color-hover;
+        }
+
+        // Apply the active link color when it has that class
+        &:active > a {
+          background: $topbar-link-bg-active;
+          color: $topbar-link-color-active;
+        }
+      }
+
+	  .has-dropdown {
+        &:hover {
+          & > .dropdown {
+            display: block;
+          }
+        }
+	  }
+	}
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_type.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_type.scss
@@ -0,0 +1,435 @@
+//
+// Typography Variables
+//
+$include-html-type-classes: $include-html-classes !default;
+
+// We use these to control header font styles
+$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$header-font-weight: bold !default;
+$header-font-style: normal !default;
+$header-font-color: #222 !default;
+$header-line-height: 1.4 !default;
+$header-top-margin: .2em !default;
+$header-bottom-margin: .5em !default;
+$header-text-rendering: optimizeLegibility !default;
+
+// We use these to control header font sizes
+$h1-font-size: em-calc(44) !default;
+$h2-font-size: em-calc(37) !default;
+$h3-font-size: em-calc(27) !default;
+$h4-font-size: em-calc(23) !default;
+$h5-font-size: em-calc(18) !default;
+$h6-font-size: 1em !default;
+
+// These control how subheaders are styled.
+$subheader-line-height: 1.4 !default;
+$subheader-font-color: lighten($header-font-color, 30%) !default;
+$subheader-font-weight: 300 !default;
+$subheader-top-margin: .2em !default;
+$subheader-bottom-margin: .5em !default;
+
+// A general <small> styling
+$small-font-size: 60% !default;
+$small-font-color: lighten($header-font-color, 30%) !default;
+
+// We use these to style paragraphs
+$paragraph-font-family: inherit !default;
+$paragraph-font-weight: normal !default;
+$paragraph-font-size: 1em !default;
+$paragraph-line-height: 1.6 !default;
+$paragraph-margin-bottom: em-calc(20) !default;
+$paragraph-aside-font-size: em-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: darken($alert-color, 15%) !default;
+$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
+$code-font-weight: bold !default;
+
+// We use these to style anchors
+$anchor-text-decoration: none !default;
+$anchor-font-color: $primary-color !default;
+$anchor-font-color-hover: darken($primary-color, 5%) !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: em-calc(20) !default;
+
+// We use these to style lists
+$list-style-position: outside !default;
+$list-side-margin: 0 !default;
+$list-side-margin-no-bullet: $list-side-margin;
+$list-nested-margin: em-calc(20) !default;
+$definition-list-header-weight: bold !default;
+$definition-list-header-margin-bottom: .3em !default;
+$definition-list-margin-bottom: em-calc(12) !default;
+
+// We use these to style blockquotes
+$blockquote-font-color: lighten($header-font-color, 30%) !default;
+$blockquote-padding: em-calc(9 20 0 19) !default;
+$blockquote-border: 1px solid #ddd !default;
+$blockquote-cite-font-size: em-calc(13) !default;
+$blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;
+
+// Acronym styles
+$acronym-underline: 1px dotted #ddd !default;
+
+// We use these to control padding and margin
+$microformat-padding: em-calc(10 12) !default;
+$microformat-margin: em-calc(0 0 20 0) !default;
+
+// We use these to control the border styles
+$microformat-border-width: 1px !default;
+$microformat-border-style: solid !default;
+$microformat-border-color: #ddd !default;
+
+// We use these to control full name font styles
+$microformat-fullname-font-weight: bold !default;
+$microformat-fullname-font-size: em-calc(15) !default;
+
+// We use this to control the summary font styles
+$microformat-summary-font-weight: bold !default;
+
+// We use this to control abbr padding
+$microformat-abbr-padding: em-calc(0 1) !default;
+
+// We use this to control abbr font styles
+$microformat-abbr-font-weight: bold !default;
+$microformat-abbr-font-decoration: none !default;
+
+
+//
+// Typography Placeholders
+//
+
+// These will throw a deprecation warning if used within a media query.
+%lead {
+  font-size: $paragraph-font-size + em-calc(3.5);
+  line-height: 1.6;
+}
+
+%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;
+}
+
+@if $include-html-type-classes != false {
+
+  /* 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;
+    direction: $text-direction;
+  }
+
+  /* Default Link Styles */
+  a {
+    color: $anchor-font-color;
+    text-decoration: $anchor-text-decoration;
+    line-height: inherit;
+
+    &:hover,
+    &:focus { color: $anchor-font-color-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 { @extend %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 - em-calc(3);
+
+    small {
+      font-size: $small-font-size;
+      color: $small-font-color;
+      line-height: 0;
+    }
+  }
+
+  h1 { font-size: $h1-font-size - em-calc(10); }
+  h2 { font-size: $h2-font-size - em-calc(10); }
+  h3 { font-size: $h3-font-size - em-calc(5); }
+  h4 { font-size: $h4-font-size - em-calc(5); }
+  h5 { font-size: $h5-font-size; }
+  h6 { font-size: $h6-font-size; }
+
+  .subheader { @extend %subheader; }
+
+  hr {
+    border: $hr-border-style $hr-border-color;
+    border-width: $hr-border-width 0 0;
+    clear: both;
+    margin: $hr-margin 0 ($hr-margin - em-calc(1));
+    height: 0;
+  }
+
+  /* Helpful Typography Defaults */
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
+
+  strong,
+  b {
+    font-weight: bold;
+    line-height: inherit;
+  }
+
+  small {
+    font-size: $small-font-size;
+    line-height: inherit;
+  }
+
+  code {
+    font-family: $code-font-family;
+    font-weight: $code-font-weight;
+    color: $code-color;
+  }
+
+  /* Lists */
+  ul,
+  ol,
+  dl {
+    font-size: $paragraph-font-size;
+    line-height: $paragraph-line-height;
+    margin-bottom: $paragraph-margin-bottom;
+    list-style-position: $list-style-position;
+    font-family: $paragraph-font-family;
+  }
+
+  ul, ol {
+    margin-#{$default-float}: $list-side-margin;
+    &.no-bullet { margin-#{$default-float}: $list-side-margin-no-bullet; }
+  }
+
+  /* Unordered Lists */
+  ul {
+    li {
+      ul,
+      ol {
+        margin-#{$default-float}: $list-nested-margin;
+        margin-bottom: 0;
+        font-size: 1em; /* Override nested font-size change */
+      }
+    }
+    &.square,
+    &.circle,
+    &.disc {
+      li ul { list-style: inherit; }
+    }
+
+    &.square { list-style-type: square; }
+    &.circle { list-style-type: circle; }
+    &.disc { list-style-type: disc; }
+    &.no-bullet { list-style: none; }
+  }
+
+  /* Ordered Lists */
+  ol {
+    li {
+      ul,
+      ol {
+        margin-#{$default-float}: $list-nested-margin;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  /* 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: $cursor-help-value;
+  }
+  abbr {
+    text-transform: none;
+  }
+
+  /* Blockquotes */
+  blockquote {
+    margin: 0 0 $paragraph-margin-bottom;
+    padding: $blockquote-padding;
+    border-#{$default-float}: $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;
+  }
+
+  /* Microformats */
+  .vcard {
+    display: inline-block;
+    margin: $microformat-margin;
+    border: $microformat-border-width $microformat-border-style $microformat-border-color;
+    padding: $microformat-padding;
+
+    li {
+      margin: 0;
+      display: block;
+    }
+    .fn {
+      font-weight: $microformat-fullname-font-weight;
+      font-size: $microformat-fullname-font-size;
+    }
+  }
+
+  .vevent {
+    .summary { font-weight: $microformat-summary-font-weight; }
+
+    abbr {
+      cursor: $cursor-default-value;
+      text-decoration: $microformat-abbr-font-decoration;
+      font-weight: $microformat-abbr-font-weight;
+      border: none;
+      padding: $microformat-abbr-padding;
+    }
+  }
+
+
+  @media #{$small} {
+    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; }
+  }
+
+  // Only include these styles if you want them.
+  @if $include-print-styles {
+    /*
+     * Print styles.
+     *
+     * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+     * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
+    */
+    .print-only { display: none !important; }
+    @media print {
+      * {
+        background: transparent !important;
+        color: #000 !important; /* Black prints faster: h5bp.com/s */
+        box-shadow: none !important;
+        text-shadow: none !important;
+      }
+
+      a,
+      a:visited { text-decoration: underline;}
+      a[href]:after { content: " (" attr(href) ")"; }
+
+      abbr[title]:after { content: " (" attr(title) ")"; }
+
+      // Don't show links for images, or javascript/internal links
+      .ir a:after,
+      a[href^="javascript:"]:after,
+      a[href^="#"]:after { content: ""; }
+
+      pre,
+      blockquote {
+        border: 1px solid #999;
+        page-break-inside: avoid;
+      }
+
+      thead { display: table-header-group; /* h5bp.com/t */ }
+
+      tr,
+      img { page-break-inside: avoid; }
+
+      img { max-width: 100% !important; }
+
+      @page { margin: 0.5cm; }
+
+      p,
+      h2,
+      h3 {
+        orphans: 3;
+        widows: 3;
+      }
+
+      h2,
+      h3 { page-break-after: avoid; }
+
+      .hide-on-print { display: none !important; }
+      .print-only { display: block !important; }
+      .hide-for-print { display: none !important; }
+      .show-for-print { display: inherit !important; }
+    }
+  }
+
+}
--- a/app/assets/javascripts/foundation4/foundation/components/_visibility.scss
+++ b/app/assets/javascripts/foundation4/foundation/components/_visibility.scss
@@ -0,0 +1,322 @@
+//
+// Foundation Visibility Classes
+//
+$include-html-visibility-classes: $include-html-classes !default;
+
+@if $include-html-visibility-classes != false {
+
+  /* Foundation Visibility HTML Classes */
+  .show-for-small,
+  .show-for-medium-down,
+  .show-for-large-down { display: inherit !important; }
+
+  .show-for-medium,
+  .show-for-medium-up,
+  .show-for-large,
+  .show-for-large-up,
+  .show-for-xlarge { display: none !important; }
+
+  .hide-for-medium,
+  .hide-for-medium-up,
+  .hide-for-large,
+  .hide-for-large-up,
+  .hide-for-xlarge { display: inherit !important; }
+
+  .hide-for-small,
+  .hide-for-medium-down,
+  .hide-for-large-down { display: none !important; }
+
+  /* Specific visilbity for tables */
+  table {
+    &.show-for-small,
+    &.show-for-medium-down,
+    &.show-for-large-down,
+    &.hide-for-medium,
+    &.hide-for-medium-up,
+    &.hide-for-large,
+    &.hide-for-large-up,
+    &.hide-for-xlarge { display: table; }
+  }
+  thead {
+    &.show-for-small,
+    &.show-for-medium-down,
+    &.show-for-large-down,
+    &.hide-for-medium,
+    &.hide-for-medium-up,
+    &.hide-for-large,
+    &.hide-for-large-up,
+    &.hide-for-xlarge { display: table-header-group !important; }
+  }
+  tbody {
+    &.show-for-small,
+    &.show-for-medium-down,
+    &.show-for-large-down,
+    &.hide-for-medium,
+    &.hide-for-medium-up,
+    &.hide-for-large,
+    &.hide-for-large-up,
+    &.hide-for-xlarge { display: table-row-group !important; }
+  }
+  tr {
+    &.show-for-small,
+    &.show-for-medium-down,
+    &.show-for-large-down,
+    &.hide-for-medium,
+    &.hide-for-medium-up,
+    &.hide-for-large,
+    &.hide-for-large-up,
+    &.hide-for-xlarge { display: table-row !important; }
+  }
+  td,
+  th {
+    &.show-for-small,
+    &.show-for-medium-down,
+    &.show-for-large-down,
+    &.hide-for-medium,
+    &.hide-for-medium-up,
+    &.hide-for-large,
+    &.hide-for-large-up,
+    &.hide-for-xlarge { display: table-cell !important; }
+  }
+
+  /* Medium Displays: 768px - 1279px */
+  @media #{$small} {
+    .show-for-medium,
+    .show-for-medium-up { display: inherit !important; }
+
+    .show-for-small { display: none !important; }
+
+    .hide-for-small { display: inherit !important; }
+
+    .hide-for-medium,
+    .hide-for-medium-up { display: none !important; }
+
+    /* Specific visilbity for tables */
+    table {
+      &.show-for-medium,
+      &.show-for-medium-up,
+      &.hide-for-small { display: table; }
+    }
+    thead {
+      &.show-for-medium,
+      &.show-for-medium-up,
+      &.hide-for-small { display: table-header-group !important; }
+    }
+    tbody {
+      &.show-for-medium,
+      &.show-for-medium-up,
+      &.hide-for-small { display: table-row-group !important; }
+    }
+    tr {
+      &.show-for-medium,
+      &.show-for-medium-up,
+      &.hide-for-small { display: table-row !important; }
+    }
+    td,
+    th {
+      &.show-for-medium,
+      &.show-for-medium-up,
+      &.hide-for-small { display: table-cell !important; }
+    }
+  }
+
+  /* Large Displays: 1280px - 1440px */
+  @media #{$medium} {
+    .show-for-large,
+    .show-for-large-up { display: inherit !important; }
+
+    .show-for-medium,
+    .show-for-medium-down { display: none !important; }
+
+    .hide-for-medium,
+    .hide-for-medium-down { display: inherit !important; }
+
+    .hide-for-large,
+    .hide-for-large-up { display: none !important; }
+
+    /* Specific visilbity for tables */
+    table {
+      &.show-for-large,
+      &.show-for-large-up,
+      &.hide-for-medium,
+      &.hide-for-medium-down { display: table; }
+    }
+    thead {
+      &.show-for-large,
+      &.show-for-large-up,
+      &.hide-for-medium,
+      &.hide-for-medium-down { display: table-header-group !important; }
+    }
+    tbody {
+      &.show-for-large,
+      &.show-for-large-up,
+      &.hide-for-medium,
+      &.hide-for-medium-down { display: table-row-group !important; }
+    }
+    tr {
+      &.show-for-large,
+      &.show-for-large-up,
+      &.hide-for-medium,
+      &.hide-for-medium-down { display: table-row !important; }
+    }
+    td,
+    th {
+      &.show-for-large,
+      &.show-for-large-up,
+      &.hide-for-medium,
+      &.hide-for-medium-down { display: table-cell !important; }
+    }
+  }
+
+  /* X-Large Displays: 1400px and up */
+  @media #{$large} {
+    .show-for-xlarge { display: inherit !important; }
+
+    .show-for-large,
+    .show-for-large-down { display: none !important; }
+
+    .hide-for-large,
+    .hide-for-large-down { display: inherit !important; }
+
+    .hide-for-xlarge { display: none !important; }
+
+    /* Specific visilbity for tables */
+    table {
+      &.show-for-xlarge,
+      &.hide-for-large,
+      &.hide-for-large-down { display: table; }
+    }
+    thead {
+      &.show-for-xlarge,
+      &.hide-for-large,
+      &.hide-for-large-down { display: table-header-group !important; }
+    }
+    tbody {
+      &.show-for-xlarge,
+      &.hide-for-large,
+      &.hide-for-large-down { display: table-row-group !important; }
+    }
+    tr {
+      &.show-for-xlarge,
+      &.hide-for-large,
+      &.hide-for-large-down { display: table-row !important; }
+    }
+    td,
+    th {
+      &.show-for-xlarge,
+      &.hide-for-large,
+      &.hide-for-large-down { display: table-cell !important; }
+    }
+  }
+
+
+  /* Orientation targeting */
+  .show-for-landscape,
+  .hide-for-portrait { display: inherit !important; }
+  .hide-for-landscape,
+  .show-for-portrait { display: none !important; }
+
+  /* Specific visilbity for tables */
+  table {
+    &.hide-for-landscape,
+    &.show-for-portrait { display: table; }
+  }
+  thead {
+    &.hide-for-landscape,
+    &.show-for-portrait { display: table-header-group !important; }
+  }
+  tbody {
+    &.hide-for-landscape,
+    &.show-for-portrait { display: table-row-group !important; }
+  }
+  tr {
+    &.hide-for-landscape,
+    &.show-for-portrait { display: table-row !important; }
+  }
+  td,
+  th {
+    &.hide-for-landscape,
+    &.show-for-portrait { display: table-cell !important; }
+  }
+
+  @media #{$landscape} {
+    .show-for-landscape,
+    .hide-for-portrait { display: inherit !important; }
+    .hide-for-landscape,
+    .show-for-portrait { display: none !important; }
+
+    /* Specific visilbity for tables */
+    table {
+      &.show-for-landscape,
+      &.hide-for-portrait { display: table; }
+    }
+    thead {
+      &.show-for-landscape,
+      &.hide-for-portrait { display: table-header-group !important; }
+    }
+    tbody {
+      &.show-for-landscape,
+      &.hide-for-portrait { display: table-row-group !important; }
+    }
+    tr {
+      &.show-for-landscape,
+      &.hide-for-portrait { display: table-row !important; }
+    }
+    td,
+    th {
+      &.show-for-landscape,
+      &.hide-for-portrait { display: table-cell !important; }
+    }
+  }
+
+  @media #{$portrait} {
+    .show-for-portrait,
+    .hide-for-landscape { display: inherit !important; }
+    .hide-for-portrait,
+    .show-for-landscape { display: none !important; }
+
+    /* Specific visilbity for tables */
+    table {
+      &.show-for-portrait,
+      &.hide-for-landscape { display: table; }
+    }
+    thead {
+      &.show-for-portrait,
+      &.hide-for-landscape { display: table-header-group !important; }
+    }
+    tbody {
+      &.show-for-portrait,
+      &.hide-for-landscape { display: table-row-group !important; }
+    }
+    tr {
+      &.show-for-portrait,
+      &.hide-for-landscape { display: table-row !important; }
+    }
+    td,
+    th {
+      &.show-for-portrait,
+      &.hide-for-landscape { display: table-cell !important; }
+    }
+  }
+
+  /* Touch-enabled device targeting */
+  .show-for-touch { display: none !important; }
+  .hide-for-touch { display: inherit !important; }
+  .touch .show-for-touch { display: inherit !important; }
+  .touch .hide-for-touch { display: none !important; }
+
+  /* Specific visilbity for tables */
+  table.hide-for-touch { display: table; }
+  .touch table.show-for-touch { display: table; }
+  thead.hide-for-touch { display: table-header-group !important; }
+  .touch thead.show-for-touch { display: table-header-group !important; }
+  tbody.hide-for-touch { display: table-row-group !important; }
+  .touch tbody.show-for-touch { display: table-row-group !important; }
+  tr.hide-for-touch { display: table-row !important; }
+  .touch tr.show-for-touch { display: table-row !important; }
+  td.hide-for-touch { display: table-cell !important; }
+  .touch td.show-for-touch { display: table-cell !important; }
+  th.hide-for-touch { display: table-cell !important; }
+  .touch th.show-for-touch { display: table-cell !important; }
+
+}
--- a/app/assets/javascripts/foundation4/normalize.scss
+++ b/app/assets/javascripts/foundation4/normalize.scss
@@ -0,0 +1,410 @@
+/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
+
+/* ==========================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+    display: none;
+}
+
+script {
+  display: none !important;
+}
+
+/* ==========================================================================
+   Base
+   ========================================================================== */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+    background: transparent;
+}
+
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+
+a:focus {
+    outline: thin dotted;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+/* ==========================================================================
+   Typography
+   ========================================================================== */
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+    font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+    font-style: italic;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+
+pre {
+    white-space: pre-wrap;
+}
+
+/**
+ * Set consistent quote types.
+ */
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+    font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+/* ==========================================================================
+   Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+    border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+/* ==========================================================================
+   Figures
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Forms
+   ========================================================================== */
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Correct font family not being inherited in all browsers.
+ * 2. Correct font size not being inherited in all browsers.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+button,
+input {
+    line-height: normal;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
+ * Correct `select` style inheritance in Firefox 4+ and Opera.
+ */
+
+button,
+select {
+    text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+/**
+ * 1. Address box sizing set to `content-box` in IE 8/9.
+ * 2. Remove excess padding in IE 8/9.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari 5 and Chrome
+ * on OS X.
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * 1. Remove default vertical scrollbar in IE 8/9.
+ * 2. Improve readability and alignment in all browsers.
+ */
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
--- a/app/assets/javascripts/search/all.js
+++ b/app/assets/javascripts/search/all.js
@@ -11,5 +11,8 @@
 //= require spin
 //= require foundation
 //= require_tree .
+//

+// Hacky fix for issue - http://foundation.zurb.com/forum/posts/2112-foundation-5100-syntax-error-in-js
+Foundation.set_namespace = function() {};
 $(function(){ $(document).foundation(); });
--- a/app/assets/javascripts/shared/mm-foundation-tpls-0.2.0-SNAPSHOT.js
+++ b/app/assets/javascripts/shared/mm-foundation-tpls-0.2.0-SNAPSHOT.js
--- a/app/assets/stylesheets/darkswarm/header.css.sass
+++ b/app/assets/stylesheets/darkswarm/header.css.sass
@@ -1,3 +1,6 @@
 /*body { background: #ff0000; }*/
 nav.top-bar
  margin-bottom: 0px
+
+body > section[role='main']
+  padding: 0px
--- a/app/assets/stylesheets/darkswarm/shop.css.sass
+++ b/app/assets/stylesheets/darkswarm/shop.css.sass
@@ -58,7 +58,7 @@ product
            padding-right: 14px
            @media all and (max-width: 768px)
              font-size: 1.2em
-          .custom.dropdown
+          select
            width: 280px
            display: inline-block
            background: transparent
@@ -66,6 +66,7 @@ product
            border-color: #666666
            font-size: 1em 
            margin-bottom: 0
+            padding: 8px 0px 8px 12px
            @media all and (max-width: 768px)
              font-size: 1.2em
              width: 180px
@@ -74,41 +75,6 @@ product
          display: block
          padding-top: 14px

-  tabs
-    background: url("/assets/matte.png") top left repeat
-    display: block
-    .section-container.auto
-      margin-bottom: 0
-      & > section 
-        transition:height 0s linear 0.5s
-        & > .content
-          background: none
-          border: none
-          img
-            margin: 0px 0px 0px 40px
-          p
-            max-width: 555px
-            @media all and (max-width: 768px)
-              height: auto !important
-          ul
-            list-style-type: none
-            padding-left: none
-          .panel
-            padding-bottom: 1.25em
-
-        & > .title, &.active > .title
-          text-transform: uppercase
-          line-height: 50px
-          @media all and (max-width: 768px)
-            line-height: 30px !important
-          border: none
-          &, &:hover
-            background: none
-          a
-            padding: 0px 2.2em
-            @media all and (max-width: 768px)
-              line-height: inherit !important
-
  products
    display: block
    padding-top: 2.3em 
--- a/app/assets/stylesheets/darkswarm/sidebar.css.sass
+++ b/app/assets/stylesheets/darkswarm/sidebar.css.sass
@@ -0,0 +1,22 @@
+// OMG
+// We can't import foundation components?
+// See https://github.com/zurb/foundation/issues/3855#issuecomment-30372252
+
+@import "variables"
+@import "components/global"
+@import "components/buttons"
+@import "components/panels"
+
+
+#sidebar
+  margin-top: 1.875em
+  $bg: #222
+  $padding: emCalc(20)
+  $adjust: true
+  $adjust: true
+  @include panel($bg, $padding, $adjust)
+  .content
+    background: white
+
+  .tabs dd a
+    padding: 0.5em 1em
--- a/app/assets/stylesheets/darkswarm/sidepanel.css.sass
+++ b/app/assets/stylesheets/darkswarm/sidepanel.css.sass
@@ -1,13 +0,0 @@
-@import "foundation/variables"
-@import "foundation/components/global"
-@import "foundation/components/buttons"
-@import "foundation/components/panels"
-
-
-#sidebar
-  margin-top: 1.875em
-  .login-panel
-    $bg: #222
-    $padding: emCalc(20)
-    $adjust: true
-    @include panel($bg, $padding, $adjust)
--- a/app/assets/stylesheets/darkswarm/tabs.css.sass
+++ b/app/assets/stylesheets/darkswarm/tabs.css.sass
@@ -0,0 +1,37 @@
+@import "darkswarm/typography"
+
+#tabs
+  background: url("/assets/matte.png") top left repeat
+  display: block
+  dl dd a
+    @include avenir
+    background: transparent
+    text-transform: uppercase
+    line-height: 50px
+    font-size: 0.875em
+    @media all and (max-width: 768px)
+      line-height: 30px !important
+    border: none
+    &, &:hover
+      background: none
+    padding: 0px 2.2em
+    @media all and (max-width: 768px)
+      line-height: inherit !important
+
+  .tabs-content
+    margin-bottom: 0
+    & > .content
+      background: none
+      border: none
+      img
+        margin: 0px 0px 0px 40px
+      p
+        max-width: 555px
+        @media all and (max-width: 768px)
+          height: auto !important
+      ul
+        list-style-type: none
+        padding-left: none
+      .panel
+        padding-bottom: 1.25em
+
--- a/app/assets/stylesheets/darkswarm/typography.css.sass
+++ b/app/assets/stylesheets/darkswarm/typography.css.sass
@@ -22,9 +22,12 @@ a
  &:hover
    text-decoration: underline

-h1, h2, h3, h4, h5, h6, .avenir
+@mixin avenir
  color: #333333
  font-family: "AvenirBla_IE", "AvenirBla"
+
+h1, h2, h3, h4, h5, h6, .avenir
+  @include avenir
  padding: 0px


--- a/app/assets/stylesheets/search/auto_complete.css.scss
+++ b/app/assets/stylesheets/search/auto_complete.css.scss
@@ -1,5 +1,5 @@
-@import "foundation/variables";
-@import "foundation/components/global";
+@import "foundation4/foundation/variables";
+@import "foundation4/foundation/components/global";

 ul.ui-autocomplete {
  position: absolute;
@@ -31,4 +31,4 @@ ul.ui-autocomplete {
      background-color: #FFFCB2;
    }
  }
-}
+}
--- a/app/assets/stylesheets/search/enteprise_search.css.scss
+++ b/app/assets/stylesheets/search/enteprise_search.css.scss
@@ -1,5 +1,5 @@
-@import "foundation/variables";
-@import "foundation/components/global";
+@import "foundation4/foundation/variables";
+@import "foundation4/foundation/components/global";

 .search-result {
  min-height: 3em;
@@ -13,4 +13,4 @@

 .with-separator {
  border-bottom: 1px solid #E0E0E0;
-}
+}
--- a/app/assets/stylesheets/search/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/search/foundation_and_overrides.scss
@@ -380,6 +380,7 @@ $default-float: left;
 // $button-radius: $global-radius;
 // $button-round: $global-rounded;

+
 // We use this to set default opacity for disabled buttons.

 // $button-disabled-opacity: 0.6;
@@ -1301,7 +1302,7 @@ $topbar-link-font-size: emCalc(16);
 // $topbar-sticky-class: ".sticky";


-@import 'foundation';
+@import 'foundation4/foundation';

 textarea {
  min-height: emCalc(120) !important;
--- a/app/assets/stylesheets/search/home.css.scss
+++ b/app/assets/stylesheets/search/home.css.scss
@@ -2,10 +2,10 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/

-@import "foundation/variables";
-@import "foundation/components/global";
-@import "foundation/components/buttons";
-@import "foundation/components/panels";
+@import "foundation4/foundation/variables";
+@import "foundation4/foundation/components/global";
+@import "foundation4/foundation/components/buttons";
+@import "foundation4/foundation/components/panels";

 #postcode_select_box {
  text-align: center;
--- a/app/assets/stylesheets/search/products.css.scss
+++ b/app/assets/stylesheets/search/products.css.scss
@@ -1,8 +1,8 @@
-@import "foundation/variables";
-@import "foundation/components/global";
+@import "foundation4/foundation/variables";
+@import "foundation4/foundation/components/global";

 .products {
  margin: 0, emCalc(20);
  border: 1px solid black;
  padding: emCalc(10);
-}
+}
--- a/app/assets/stylesheets/search/temp_landing_page.css.scss
+++ b/app/assets/stylesheets/search/temp_landing_page.css.scss
@@ -1,5 +1,5 @@
-@import "foundation/variables";
-@import "foundation/components/global";
+@import "foundation4/foundation/variables";
+@import "foundation4/foundation/components/global";

 .landing-page-row {
  padding-top: emCalc(40);
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -5,6 +5,7 @@ class ApplicationController < ActionController::Base
  before_filter :load_data_for_sidebar
  before_filter :require_certified_hostname

+  include EnterprisesHelper

  def after_sign_in_path_for(resource)
    if request.referer and referer_path = URI(request.referer).path
@@ -44,6 +45,12 @@ class ApplicationController < ActionController::Base
    end
  end

+  def require_order_cycle
+    unless current_order_cycle
+      redirect_to main_app.shop_path
+    end
+  end
+
  def check_order_cycle_expiry
    if current_order_cycle.andand.closed?
      session[:expired_order_cycle_id] = current_order_cycle.id
--- a/app/controllers/shop/checkout_controller.rb
+++ b/app/controllers/shop/checkout_controller.rb
@@ -1,6 +1,5 @@
 class Shop::CheckoutController < Spree::CheckoutController
  layout 'darkswarm'
-
  prepend_before_filter :require_order_cycle
  prepend_before_filter :require_distributor_chosen
  skip_before_filter :check_registration
@@ -62,12 +61,6 @@ class Shop::CheckoutController < Spree::CheckoutController
      redirect_to main_app.root_path
    end
  end
-
-  def require_order_cycle
-    unless current_order_cycle
-      redirect_to main_app.shop_path
-    end
-  end
  
  def load_order
    @order = current_order
--- a/app/controllers/spree/orders_controller_decorator.rb
+++ b/app/controllers/spree/orders_controller_decorator.rb
@@ -5,6 +5,9 @@ Spree::OrdersController.class_eval do
  before_filter :update_distribution, :only => :update
  before_filter :filter_order_params, :only => :update

+  prepend_before_filter :require_order_cycle, only: [:edit]
+  prepend_before_filter :require_distributor_chosen, only: [:edit]
+
  layout 'darkswarm'

  # Patch Orders#populate to populate multi_cart (if enabled)
--- a/app/controllers/user_passwords_controller.rb
+++ b/app/controllers/user_passwords_controller.rb
@@ -0,0 +1,3 @@
+class UserPasswordsController < Spree::UserPasswordsController
+
+end
--- a/app/controllers/user_registrations_controller.rb
+++ b/app/controllers/user_registrations_controller.rb
@@ -0,0 +1,32 @@
+class UserRegistrationsController < Spree::UserRegistrationsController
+
+  # POST /resource/sign_up
+  def create
+    @user = build_resource(params[:spree_user])
+    if resource.save
+      set_flash_message(:notice, :signed_up)
+      sign_in(:spree_user, @user)
+      session[:spree_user_signup] = true
+      associate_user
+
+      respond_to do |format|
+        format.html do
+          sign_in_and_redirect(:spree_user, @user)
+        end
+        format.js do
+          render json: { email: @user.email }
+        end
+      end
+    else
+      clean_up_passwords(resource)
+      respond_to do |format|
+        format.html do
+          render :new
+        end
+        format.js do
+          render json: @user.errors, status: :unauthorized
+        end
+      end
+    end
+  end
+end
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -1,6 +1,7 @@
 module ApplicationHelper
  include FoundationRailsHelper::FlashHelper

+
  def home_page_cms_content
    if controller.controller_name == 'home' && controller.action_name == 'index'
      cms_page_content(:content, Cms::Page.find_by_full_path('/'))
--- a/app/helpers/shared_helper.rb
+++ b/app/helpers/shared_helper.rb
@@ -11,7 +11,11 @@ module SharedHelper

  # all suppliers of current distributor's products
  def current_producers
-    Exchange.where(receiver_id: current_distributor.id).map{ |ex| ex.variants.map {|v| v.product.supplier }}.flatten.uniq 
+    if current_distributor && current_order_cycle
+      variants = current_order_cycle.variants_distributed_by(current_distributor)
+      Enterprise.supplying_variant_in(variants)
+    else
+      []
+    end
  end
 end
-
--- a/app/models/enterprise.rb
+++ b/app/models/enterprise.rb
@@ -32,6 +32,7 @@ class Enterprise < ActiveRecord::Base
  scope :by_name, order('name')
  scope :is_primary_producer, where(:is_primary_producer => true)
  scope :is_distributor, where(:is_distributor => true)
+  scope :supplying_variant_in, lambda { |variants| joins(:supplied_products => :variants_including_master).where('spree_variants.id IN (?)', variants).select('DISTINCT enterprises.*') }
  scope :with_supplied_active_products_on_hand, lambda {
    joins(:supplied_products)
      .where('spree_products.deleted_at IS NULL AND spree_products.available_on <= ? AND spree_products.count_on_hand > 0', Time.now)
@@ -47,7 +48,7 @@ class Enterprise < ActiveRecord::Base
    joins('LEFT OUTER JOIN product_distributions ON product_distributions.distributor_id = enterprises.id').
    joins('LEFT OUTER JOIN spree_products ON spree_products.id = product_distributions.product_id')
  scope :with_order_cycles_outer,
-    joins('LEFT OUTER JOIN exchanges ON (exchanges.receiver_id = enterprises.id)').
+    joins("LEFT OUTER JOIN exchanges ON (exchanges.receiver_id = enterprises.id AND exchanges.incoming = 'f')").
    joins('LEFT OUTER JOIN order_cycles ON (order_cycles.id = exchanges.order_cycle_id)')

  scope :with_order_cycles_and_exchange_variants_outer,
--- a/app/models/exchange.rb
+++ b/app/models/exchange.rb
@@ -15,14 +15,19 @@ class Exchange < ActiveRecord::Base

  accepts_nested_attributes_for :variants

-  scope :incoming, joins(:order_cycle).where('exchanges.receiver_id = order_cycles.coordinator_id')
-  scope :outgoing, joins(:order_cycle).where('exchanges.sender_id   = order_cycles.coordinator_id')
+  scope :in_order_cycle, lambda { |order_cycle| where(order_cycle_id: order_cycle) }
+  scope :incoming, where(incoming: true)
+  scope :outgoing, where(incoming: false)
+  scope :from_enterprise, lambda { |enterprise| where(sender_id: enterprise) }
+  scope :to_enterprise, lambda { |enterprise| where(receiver_id: enterprise) }
  scope :from_enterprises, lambda { |enterprises| where('exchanges.sender_id IN (?)', enterprises) }
  scope :to_enterprises, lambda { |enterprises| where('exchanges.receiver_id IN (?)', enterprises) }
+  scope :supplying_to, lambda { |distributor| where('exchanges.incoming OR exchanges.receiver_id = ?', distributor) }
  scope :with_variant, lambda { |variant| joins(:exchange_variants).where('exchange_variants.variant_id = ?', variant) }
  scope :with_any_variant, lambda { |variants| joins(:exchange_variants).where('exchange_variants.variant_id IN (?)', variants).select('DISTINCT exchanges.*') }
  scope :with_product, lambda { |product| joins(:exchange_variants).where('exchange_variants.variant_id IN (?)', product.variants_including_master) }

+
  def clone!(new_order_cycle)
    exchange = self.dup
    exchange.order_cycle = new_order_cycle
@@ -32,17 +37,13 @@ class Exchange < ActiveRecord::Base
    exchange
  end

-  def incoming?
-    receiver == order_cycle.coordinator
-  end
-
  def role
    incoming? ? 'supplier' : 'distributor'
  end

-  def to_h(core=false)
+  def to_h(core_only=false)
    h = attributes.merge({ 'variant_ids' => variant_ids.sort, 'enterprise_fee_ids' => enterprise_fee_ids.sort })
-    h.reject! { |k| %w(id order_cycle_id created_at updated_at).include? k } if core
+    h.reject! { |k| %w(id order_cycle_id created_at updated_at).include? k } if core_only
    h
  end

@@ -54,5 +55,4 @@ class Exchange < ActiveRecord::Base
    end
  end

-
 end
--- a/app/models/order_cycle.rb
+++ b/app/models/order_cycle.rb
@@ -20,20 +20,20 @@ class OrderCycle < ActiveRecord::Base
  scope :closed, lambda { where('order_cycles.orders_close_at < ?', Time.now) }
  scope :undated, where(orders_open_at: nil, orders_close_at: nil)

-  scope :distributing_product, lambda { |product|
-    joins(:exchanges => :variants).
-    merge(Exchange.outgoing).
-    where('spree_variants.id IN (?)', product.variants_including_master.pluck(:id)).
-    select('DISTINCT order_cycles.*') }
-
-  scope :with_distributor, lambda { |distributor|
-    joins(:exchanges).merge(Exchange.outgoing).where('exchanges.receiver_id = ?', distributor)
-  }
-
  scope :soonest_closing,      lambda { active.order('order_cycles.orders_close_at ASC') }
  scope :most_recently_closed, lambda { closed.order('order_cycles.orders_close_at DESC') }
  scope :soonest_opening,      lambda { upcoming.order('order_cycles.orders_open_at ASC') }

+  scope :distributing_product, lambda { |product|
+    joins(:exchanges).
+    merge(Exchange.outgoing).
+    merge(Exchange.with_product(product)).
+    select('DISTINCT order_cycles.*') }
+
+  scope :with_distributor, lambda { |distributor|
+    joins(:exchanges).merge(Exchange.outgoing).merge(Exchange.to_enterprise(distributor))
+  }
+

  scope :managed_by, lambda { |user|
    if user.has_spree_role?('admin')
@@ -43,7 +43,7 @@ class OrderCycle < ActiveRecord::Base
    end
  }

-  # Order cycles that user coordinates, sends to or receives from
+  # Return order cycles that user coordinates, sends to or receives from
  scope :accessible_by, lambda { |user|
    if user.has_spree_role?('admin')
      scoped
@@ -59,12 +59,13 @@ class OrderCycle < ActiveRecord::Base
    joins('LEFT OUTER JOIN enterprises ON (enterprises.id = exchanges.sender_id OR enterprises.id = exchanges.receiver_id)')
  }

+
  def self.first_opening_for(distributor)
    with_distributor(distributor).soonest_opening.first
  end

  def self.most_recently_closed_for(distributor)
-    OrderCycle.with_distributor(distributor).most_recently_closed.first
+    with_distributor(distributor).most_recently_closed.first
  end

  def clone!
@@ -78,11 +79,11 @@ class OrderCycle < ActiveRecord::Base
  end

  def suppliers
-    self.exchanges.where(:receiver_id => self.coordinator).map(&:sender).uniq
+    self.exchanges.incoming.map(&:sender).uniq
  end

  def distributors
-    self.exchanges.where(:sender_id => self.coordinator).map(&:receiver).uniq
+    self.exchanges.outgoing.map(&:receiver).uniq
  end

  def variants
@@ -90,15 +91,15 @@ class OrderCycle < ActiveRecord::Base
  end

  def distributed_variants
-    self.exchanges.where(:sender_id => self.coordinator).map(&:variants).flatten.uniq
+    self.exchanges.outgoing.map(&:variants).flatten.uniq
  end

  def variants_distributed_by(distributor)
    Spree::Variant.
      joins(:exchanges).
+      merge(Exchange.in_order_cycle(self)).
      merge(Exchange.outgoing).
-      where('exchanges.order_cycle_id = ?', self).
-      where('exchanges.receiver_id = ?', distributor)
+      merge(Exchange.to_enterprise(distributor))
  end

  def products_distributed_by(distributor)
@@ -239,11 +240,10 @@ class OrderCycle < ActiveRecord::Base
  end

  def exchanges_carrying(variant, distributor)
-    exchanges.to_enterprises([coordinator, distributor]).with_variant(variant)
+    exchanges.supplying_to(distributor).with_variant(variant)
  end

  def exchanges_supplying(order)
-    variants = order.line_items.map(&:variant)
-    exchanges.to_enterprises([coordinator, order.distributor]).with_any_variant(variants)
+    exchanges.supplying_to(order.distributor).with_any_variant(order.variants)
  end
 end
--- a/app/models/spree/product_decorator.rb
+++ b/app/models/spree/product_decorator.rb
@@ -35,10 +35,8 @@ Spree::Product.class_eval do
                                  joins('LEFT OUTER JOIN exchanges AS o_exchanges ON (o_exchanges.id = o_exchange_variants.exchange_id)').
                                  joins('LEFT OUTER JOIN order_cycles AS o_order_cycles ON (o_order_cycles.id = o_exchanges.order_cycle_id)')

-  scope :with_order_cycles_inner, joins('INNER JOIN spree_variants ON (spree_variants.product_id = spree_products.id)').
-                                  joins('INNER JOIN exchange_variants ON (exchange_variants.variant_id = spree_variants.id)').
-                                  joins('INNER JOIN exchanges ON (exchanges.id = exchange_variants.exchange_id)').
-                                  joins('INNER JOIN order_cycles ON (order_cycles.id = exchanges.order_cycle_id)')
+  scope :with_order_cycles_inner, joins(:variants_including_master => {:exchanges => :order_cycle})
+

  # -- Scopes
  scope :in_supplier, lambda { |supplier| where(:supplier_id => supplier) }
@@ -52,7 +50,7 @@ Spree::Product.class_eval do
    distributor = distributor.respond_to?(:id) ? distributor.id : distributor.to_i

    with_product_distributions_outer.with_order_cycles_outer.
-    where('product_distributions.distributor_id = ? OR (o_exchanges.sender_id = o_order_cycles.coordinator_id AND o_exchanges.receiver_id = ?)', distributor, distributor).
+    where('product_distributions.distributor_id = ? OR (o_exchanges.incoming = ? AND o_exchanges.receiver_id = ?)', distributor, false, distributor).
    select('distinct spree_products.*')
  }

@@ -69,13 +67,13 @@ Spree::Product.class_eval do
    enterprise = enterprise.respond_to?(:id) ? enterprise.id : enterprise.to_i

    with_product_distributions_outer.with_order_cycles_outer.
-    where('spree_products.supplier_id = ? OR product_distributions.distributor_id = ? OR (o_exchanges.sender_id = o_order_cycles.coordinator_id AND o_exchanges.receiver_id = ?)', enterprise, enterprise, enterprise).
+    where('spree_products.supplier_id = ? OR product_distributions.distributor_id = ? OR (o_exchanges.incoming = ? AND o_exchanges.receiver_id = ?)', enterprise, enterprise, false, enterprise).
    select('distinct spree_products.*')
  }

  # Find products that are distributed by the given order cycle
  scope :in_order_cycle, lambda { |order_cycle| with_order_cycles_inner.
-                                                where('exchanges.sender_id = order_cycles.coordinator_id').
+                                                merge(Exchange.outgoing).
                                                where('order_cycles.id = ?', order_cycle) }
  scope :managed_by, lambda { |user|
    if user.has_spree_role?('admin')
--- a/app/views/admin/order_cycles/show.rep
+++ b/app/views/admin/order_cycles/show.rep
@@ -13,6 +13,7 @@ r.element :order_cycle, @order_cycle do
    r.element :id
    r.element :sender_id
    r.element :receiver_id
+    r.element :incoming

    r.element :variants, Hash[ exchange.variants.map { |v| [v.id, true] } ], {}

--- a/app/views/layouts/darkswarm.html.haml
+++ b/app/views/layouts/darkswarm.html.haml
@@ -16,9 +16,7 @@
    = render partial: "shared/menu"
    = display_flash_messages

-    %section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", "ng-class" => "active()"}
-      = render partial: "shared/login_panel"
-      = yield :sidebar
+    = render "shared/sidebar"

    %section{ role: "main" }
      = yield
@@ -27,4 +25,3 @@


    = yield :scripts
-
--- a/app/views/shared/_forgot_sidebar.html.haml
+++ b/app/views/shared/_forgot_sidebar.html.haml
@@ -0,0 +1,5 @@
+%tab#forgot{"ng-controller" => "ForgotSidebarCtrl",
+  heading: "Forgot Password?",
+  active: "active()",
+  select: "select()"}
+  Well you're a bit stupid then
--- a/app/views/shared/_login_panel.html.haml
+++ b/app/views/shared/_login_panel.html.haml
@@ -1,38 +0,0 @@
-.login-panel
-  %a{href: "#"} Close
-  #login-content{"ng-controller" => "LoginSidebarCtrl", "ng-show" => "active()"}
-    %h2 Login
-    %form{"ng-submit" => "submit()"}
-      .alert-box.alert{"ng-show" => "errors != null"}
-        {{ errors }}
-      .row
-        .large-12.columns
-          %label{for: "email"} Email
-          %input.title.input-text{name: "email", 
-            type: "email",
-            tabindex: 1,
-            "ng-model" => "spree_user.email"}
-      .row
-        .large-12.columns
-          %label{for: "password"} Password
-          %input.title.input-text{name: "password", 
-            type: "password",
-            autocomplete: "off",
-            tabindex: 2,
-            "ng-model" => "spree_user.password"}
-      .row
-        .large-12.columns
-          %label{for: "remember_me"} Remember Me
-          %input{name: "remember_me", 
-          type: "checkbox", 
-          value: "1",
-          "ng-model" => "spree_user.remember_me"}
-      .row
-        .large-12.columns
-          %input.button.primary{name: "commit", 
-            tabindex: "3", 
-            type: "submit", 
-            value: "Login"}
-
-  #sign-up-content{"ng-controller" => "SignupSidebarCtrl", "ng-show" => "active()"}
-    = render "home/signup"
--- a/app/views/shared/_login_sidebar.html.haml
+++ b/app/views/shared/_login_sidebar.html.haml
@@ -0,0 +1,35 @@
+%tab#login-content{"ng-controller" => "LoginSidebarCtrl", 
+  heading: "Login", 
+  active: "active()", 
+  select: "select()"}
+  %form{"ng-submit" => "submit()"}
+    .alert-box.alert{"ng-show" => "errors != null"}
+      {{ errors }}
+    .row
+      .large-12.columns
+        %label{for: "email"} Email
+        %input.title.input-text{name: "email", 
+          type: "email",
+          tabindex: 1,
+          "ng-model" => "spree_user.email"}
+    .row
+      .large-12.columns
+        %label{for: "password"} Password
+        %input.title.input-text{name: "password", 
+          type: "password",
+          autocomplete: "off",
+          tabindex: 2,
+          "ng-model" => "spree_user.password"}
+    .row
+      .large-12.columns
+        %label{for: "remember_me"} Remember Me
+        %input{name: "remember_me", 
+        type: "checkbox", 
+        value: "1",
+        "ng-model" => "spree_user.remember_me"}
+    .row
+      .large-12.columns
+        %input.button.primary{name: "commit", 
+          tabindex: "3", 
+          type: "submit", 
+          value: "Login"}
--- a/app/views/shared/_menu.html.haml
+++ b/app/views/shared/_menu.html.haml
@@ -1,6 +1,6 @@
 %nav.top-bar
  %section.top-bar-section
-    %ul.left
+    %ul.left{"ng-controller" => "MenuCtrl"}
      %li= link_to image_tag("ofn_logo_small.png"), root_path
      %li.divider
      - if spree_current_user.nil?
--- a/app/views/shared/_sidebar.html.haml
+++ b/app/views/shared/_sidebar.html.haml
@@ -0,0 +1,7 @@
+%section#sidebar{ role: "complementary", "ng-controller" => "SidebarCtrl", 
+"ng-class" => "{'active' : active()}"}
+  %tabset
+    = render partial: "shared/login_sidebar"
+    = render partial: "shared/signup_sidebar"
+    = render partial: "shared/forgot_sidebar"
+  = yield :sidebar
--- a/app/views/shared/_signed_out.html.haml
+++ b/app/views/shared/_signed_out.html.haml
@@ -1,5 +1,8 @@
-%li#login-link= link_to "Login", "#login", id: "sidebarLoginButton", class: "sidebar-button"
+%li#login-link
+  %a.sidebar-button{"ng-click" => "toggleLogin()"} Login
+
 %li#login-name.hide
 %li.divider
-%li#sign-up-link= link_to "Sign Up", "#signup", id: "sidebarSignUpButton", class: "sidebar-button"
-%li#sign-out-link.hide= link_to "Sign Out", "/logout"
+
+%li#sign-up-link
+  %a.sidebar-button{"ng-click" => "toggleSignup()"} Sign Up
--- a/app/views/shared/_signup_sidebar.html.haml
+++ b/app/views/shared/_signup_sidebar.html.haml
@@ -0,0 +1,38 @@
+%tab#sign-up-content{"ng-controller" => "SignupSidebarCtrl", 
+  heading: "Signup", 
+  active: "active()", 
+  select: "select()"}
+  %form{"ng-submit" => "submit()"}
+    .row
+      .large-12.columns
+        %label{for: "email"} Email
+        %input.title.input-text{name: "email", 
+          type: "email",
+          tabindex: 1,
+          "ng-model" => "spree_user.email"}
+        %span.error{"ng-show" => "errors.email != null"}
+          {{ errors.email.join(' ') }}
+    .row
+      .large-12.columns
+        %label{for: "password"} Password
+        %input.title.input-text{name: "password", 
+          type: "password",
+          autocomplete: "off",
+          tabindex: 2,
+          "ng-model" => "spree_user.password"}
+        %span.error{"ng-show" => "errors.password != null"}
+          {{ errors.password.join(' ') }}
+    .row
+      .large-12.columns
+        %label{for: "password"} Password Confirmation
+        %input.title.input-text{name: "password_confirmation", 
+          type: "password",
+          autocomplete: "off",
+          tabindex: 2,
+          "ng-model" => "spree_user.password_confirmation"}
+    .row
+      .large-12.columns
+        %input.button.primary{name: "commit", 
+          tabindex: "3", 
+          type: "submit", 
+          value: "Signup"}
--- a/app/views/shop/_tabs.html.haml
+++ b/app/views/shop/_tabs.html.haml
@@ -1,7 +1,13 @@
-%tabs
+#tabs{"ng-controller" => "TabsCtrl"}
  .row
-    .section-container.auto{"data-section" => "", "data-options" => "one_up: false"}
-      = render 'shop/shop/about_us'
-      = render 'shop/shop/producers'
-      = render 'shop/shop/groups'
-      = render 'shop/shop/contact'
+    %tabset
+      - for name, heading in { about: "About Us", 
+        producers: "Producers", 
+        groups: "Groups", 
+        contact: "Contact"} 
+
+        %tab{heading: heading, 
+        id: "tab_#{name}",
+        active: "active(#{name}.path)",
+        select: "select(#{name})"}
+          = render "shop/shop/#{name}"
--- a/app/views/shop/shop/_about.html.haml
+++ b/app/views/shop/shop/_about.html.haml
@@ -0,0 +1,3 @@
+.content#about
+  %img.about.right{src: current_distributor.promo_image.url(:large)}
+  %p= current_distributor.long_description.andand.html_safe
--- a/app/views/shop/shop/_about_us.html.haml
+++ b/app/views/shop/shop/_about_us.html.haml
@@ -1,10 +0,0 @@
-%section#about{class: current_order_cycle ? nil : "active" }
-  %p.title.avenir{"data-section-title" => ""}
-    %a{href: "#about"} About Us 
-
-  .content{"data-section-content" => ""}
-    %img.about.right{src: current_distributor.promo_image.url(:large)}
-    %p= current_distributor.long_description.andand.html_safe
-    
-    -#.panel
-      -#= @distributor.distributor_info.andand.html_safe
--- a/app/views/shop/shop/_contact.html.haml
+++ b/app/views/shop/shop/_contact.html.haml
@@ -1,18 +1,15 @@
-%section
-  %p.title.avenir{"data-section-title" => ""}
-    %a{href: "#contact"} Contact 
-  .content{"data-section-content" => ""}
-    .panel
-      %p
-        %strong E
-        %a{href: "mailto:#{current_distributor.email}"}= current_distributor.email
-        - unless current_distributor.website.blank?
-          %br 
-          %strong W
-          %a{href: current_distributor.website}= current_distributor.website
+.content#contact
+  .panel
+    %p
+      %strong E
+      %a{href: "mailto:#{current_distributor.email}"}= current_distributor.email
+      - unless current_distributor.website.blank?
        %br 
-        = [current_distributor.address.address1, current_distributor.address.address2].join ", "
-        %br
-        = current_distributor.address.city
-        = current_distributor.address.state
-        = current_distributor.address.zipcode
+        %strong W
+        %a{href: current_distributor.website}= current_distributor.website
+      %br 
+      = [current_distributor.address.address1, current_distributor.address.address2].join ", "
+      %br
+      = current_distributor.address.city
+      = current_distributor.address.state
+      = current_distributor.address.zipcode
--- a/app/views/shop/shop/_groups.html.haml
+++ b/app/views/shop/shop/_groups.html.haml
@@ -1,13 +1,10 @@
-%section
-  %p.title.avenir{"data-section-title" => ""}
-    %a{href: "#groups"} Our Groups 
-  .content{"data-section-content" => ""}
-    %ul
-      - for group in current_distributor.groups
-        %li
-          %h4= group.name 
-          %ul
-            - for sibling in group.enterprises.except(current_distributor)
-              %li
-                %a{"data-reveal-id" => "sibling_details_#{sibling.id}"}
-                  = sibling.name 
+.content#groups
+  %ul
+    - for group in current_distributor.groups
+      %li
+        %h4= group.name 
+        %ul
+          - for sibling in group.enterprises.except(current_distributor)
+            %li
+              %a{"data-reveal-id" => "sibling_details_#{sibling.id}"}
+                = sibling.name 
--- a/app/views/shop/shop/_producers.html.haml
+++ b/app/views/shop/shop/_producers.html.haml
@@ -1,9 +1,6 @@
-%section
-  %p.title.avenir{"data-section-title" => ""}
-    %a{href: "#producers"} Our Producers 
-  .content{"data-section-content" => ""}
-    %ul
-      - for producer in current_producers
-        %li
-          %a{"data-reveal-id" => "producer_details_#{producer.id}"}
-            = producer.name
+.content#producers
+  %ul
+    - for producer in current_producers
+      %li
+        %a{"data-reveal-id" => "producer_details_#{producer.id}"}
+          = producer.name
--- a/app/views/shop/shop/show.html.haml
+++ b/app/views/shop/shop/show.html.haml
@@ -8,7 +8,7 @@
    %closing
      -#%img{src: "/icon/goes/here"}
      Orders close
-      %strong {{ order_cycle.orders_close_at | date_in_words }} 
+      %strong {{ OrderCycle.orders_close_at() | date_in_words }} 
  = render partial: "shop/details"

  %products.row
--- a/app/views/spree/api/products/bulk_show.v1.rabl
+++ b/app/views/spree/api/products/bulk_show.v1.rabl
@@ -1,8 +1,9 @@
 object @product
-attributes :id, :name, :price, :variant_unit, :variant_unit_scale, :variant_unit_name, :on_demand
+attributes :id, :name, :variant_unit, :variant_unit_scale, :variant_unit_name, :on_demand

 # Infinity is not a valid JSON object, but Rails encodes it anyway
-node( :on_hand ) { |p| p.on_hand.to_f.finite? ? p.on_hand : "On demand" }
+node( :on_hand ) { |p| p.on_hand.nil? ? 0 : p.on_hand.to_f.finite? ? p.on_hand : "On demand" }
+node( :price ) { |p| p.price.nil? ? '0.0' : p.price }

 node( :available_on ) { |p| p.available_on.blank? ? "" : p.available_on.strftime("%F %T") }
 node( :permalink_live ) { |p| p.permalink }
--- a/app/views/spree/api/variants/bulk_show.v1.rabl
+++ b/app/views/spree/api/variants/bulk_show.v1.rabl
@@ -1,6 +1,7 @@
 object @variant

-attributes :id, :options_text, :price, :unit_value, :unit_description, :on_demand
+attributes :id, :options_text, :unit_value, :unit_description, :on_demand

 # Infinity is not a valid JSON object, but Rails encodes it anyway
-node( :on_hand ) { |p| p.on_hand.to_f.finite? ? p.on_hand : "On demand" }
+node( :on_hand ) { |v| v.on_hand.nil? ? 0 : v.on_hand.to_f.finite? ? v.on_hand : "On demand" }
+node( :price ) { |v| v.price.nil? ? '0.0' : v.price }
--- a/config/application.rb
+++ b/config/application.rb
@@ -75,6 +75,11 @@ module Openfoodnetwork
    # Version of your assets, change this if you want to expire all your assets
    config.assets.version = '1.0'

+    config.sass.load_paths += [
+      "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/components",
+      "#{Gem.loaded_specs['foundation-rails'].full_gem_path}/vendor/assets/stylesheets/foundation/"
+    ]
+
    # css and js files other than application.* are not precompiled by default
    # Instead, they must be explicitly included below
    # http://stackoverflow.com/questions/8012434/what-is-the-purpose-of-config-assets-precompile
@@ -85,5 +90,6 @@ module Openfoodnetwork
    config.assets.precompile += ['comfortable_mexican_sofa/*']
    config.assets.precompile += ['search/all.css', 'search/*.js']
    config.assets.precompile += ['shared/*']
+
  end
 end
--- a/config/ng-test.conf.js
+++ b/config/ng-test.conf.js
@@ -9,6 +9,7 @@ module.exports = function(config) {
      'app/assets/javascripts/shared/angular.js',
      'app/assets/javascripts/shared/angular-*.js',
      'app/assets/javascripts/shared/jquery.timeago.js',
+      'app/assets/javascripts/shared/mm-foundation-tpls-0.2.0-SNAPSHOT.js',

      'app/assets/javascripts/admin/shared_directives.js.coffee',
      'app/assets/javascripts/admin/shared_services.js.coffee',
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -8,12 +8,8 @@ Openfoodnetwork::Application.routes.draw do
  end

  namespace :shop do
-    #resource :checkout, only: :edit, controller: :checkout do
-      #get '', to: ""
-    #end
    get '/checkout', :to => 'checkout#edit' , :as => :checkout
    put '/checkout', :to => 'checkout#update' , :as => :update_checkout
-
    get "/checkout/paypal_payment", to: 'checkout#paypal_payment', as: :paypal_payment
  end

@@ -73,6 +69,20 @@ Openfoodnetwork::Application.routes.draw do
 end


+# Overriding Devise routes to use our own controller
+Spree::Core::Engine.routes.draw do
+  devise_for :spree_user,
+             :class_name => 'Spree::User',
+             :controllers => { :sessions => 'spree/user_sessions',
+                               :registrations => 'user_registrations',
+                               :passwords => 'spree/user_passwords' },
+             :skip => [:unlocks, :omniauth_callbacks],
+             :path_names => { :sign_out => 'logout' },
+             :path_prefix => :user
+end
+
+
+
 Spree::Core::Engine.routes.prepend do
  match '/admin/reports/orders_and_distributors' => 'admin/reports#orders_and_distributors', :as => "orders_and_distributors_admin_reports",  :via  => [:get, :post]
  match '/admin/reports/group_buys' => 'admin/reports#group_buys', :as => "group_buys_admin_reports",  :via  => [:get, :post]
--- a/Show More
+++ b/Show More