Release 1.0!

Merge branch 'develop'
2016-11-11 14:40:23 -06:00 · 2016-11-11 14:40:23 -06:00 · ea9c66892e
commit ea9c66892e
parent 3908682f8c 35cbe68f00
348 changed files with 9273 additions and 285 deletions
--- a/.bowerrc
+++ b/.bowerrc
@ -0,0 +1,4 @@
+{
+  "directory": "vendor/assets/bower_components",
+  "analytics": false
+}
--- a/.deploy.conf.sample
+++ b/.deploy.conf.sample
@ -0,0 +1,2 @@
+branch=develop
+app_env=sandbox
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -0,0 +1,21 @@
+# http://eslint.org/docs/user-guide/configuring
+# http://eslint.org/docs/2.0.0/rules/
+env:
+  browser: true
+  jquery: true
+extends: 'eslint:recommended'
+plugins:
+  - ignore-erb
+rules:
+  indent:
+    - error
+    - 2
+  linebreak-style:
+    - error
+    - unix
+  no-trailing-spaces:
+    - warn
+  quotes: off
+  semi:
+    - error
+    - always
--- a/.gitignore
+++ b/.gitignore
@ -12,6 +12,7 @@
 /tmp/*
 !/log/.keep
 !/tmp/.keep
+tmux*log

 ### Ruby ###
 *.gem
@ -36,6 +37,13 @@
 /.bundle/
 /vendor/bundle
 /lib/bundler/man/
+/vendor/assets/*
+bower_components/
+node_modules/
+.DS_Store
+
+## Public directory assets
+public/assets

 ### Vim ###
 [._]*.s[a-w][a-z]
@ -50,3 +58,8 @@ application.yml

 # Ignore Byebug command history file.
 .byebug_history
+
+# Ignore application configuration
+/config/application.yml
+.container-setup
+.deploy.conf
--- a/.rubocop.yml
+++ b/.rubocop.yml
@ -3,6 +3,10 @@ AllCops:
    - db/schema.rb
    - db/seeds.rb
    - bin/**/*
+    - vendor/assets/**/*
+
+Style/AndOr:
+  Enabled: false

 Style/ClassAndModuleChildren:
  Exclude:
@ -21,6 +25,8 @@ Style/ExtraSpacing:

 Style/IndentationConsistency:
  EnforcedStyle: rails
+  Exclude:
+    - config/routes.rb

 Style/MethodDefParentheses:
  Enabled: false
@ -32,9 +38,14 @@ Style/SpaceBeforeFirstArg:
 Style/StringLiterals:
  Enabled: false

+Style/StructInheritance:
+  Exclude:
+    - app/policies/**/*
+
 Metrics/AbcSize:
  Exclude:
    - db/migrate/**/*
+  Max: 20

 Metrics/LineLength:
  Max: 110
@ -47,3 +58,6 @@ Metrics/LineLength:
 Metrics/MethodLength:
  Exclude:
    - db/migrate/*
+
+Rails:
+  Enabled: true
--- a/.ruby-version
+++ b/.ruby-version
@ -0,0 +1 @@
+2.3.1
--- a/.tmux.conf
+++ b/.tmux.conf
@ -1,5 +0,0 @@
-set -g mode-mouse on
-set -g mouse-resize-pane on
-set -g mouse-select-pane on
-set -g mouse-select-window on
-set -g history-limit 30000
--- a/43
+++ b/43
@ -1,43 +0,0 @@
-FROM mysql:5.7
-MAINTAINER Mark Moser <markamoser@gmail.com>
-
-WORKDIR ~/
-
-ENV MYSQL_ROOT_PASSWORD=root
-ENV BUILD_PACKAGES="build-essential libmysqlclient-dev openssl graphviz nodejs curl wget zlib1g-dev tmux"
-
-RUN apt-get update \
-  && apt-get install --fix-missing -y $BUILD_PACKAGES \
-  && /usr/sbin/mysqld  --initialize --user=mysql \
-  && service mysql start \
-  && echo 'gem: --no-document' >> ~/.gemrc \
-  && cp ~/.gemrc /etc/gemrc \
-  && chmod uog+r /etc/gemrc \
-  && mkdir -p /usr/app \
-  && ln -s /usr/bin/nodejs /usr/bin/node \
-  && echo "alias ll='ls -Ahl'" >> /root/.bashrc \
-  && echo "alias la='ls -ahl'" >> /root/.bashrc \
-  && echo "export HISTCONTROL=ignoredups" >> /root/.bashrc
-
-# install current Ruby
-RUN curl -L --progress https://github.com/postmodern/ruby-install/archive/v0.6.0.tar.gz | tar xz \
-  && cd ruby-install-0.6.0 \
-  && make install \
-  && cd ../ \
-  && ruby-install --system ruby \
-  && gem install bundler
-
-COPY .tmux.conf /root/
-COPY Gemfile* /root/
-RUN cd /root \
-  && bundle install \
-  && apt-get clean \
-  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
-
-EXPOSE 3000 3306 35729
-WORKDIR /usr/app
-CMD ["mysqld"]
-
-# ./start-docker.sh
-# ./start-server.sh
-# rails server -b 0.0.0.0
--- a/37
+++ b/37
@ -1,41 +1,62 @@
+# frozen_string_literal: true
 source 'https://rubygems.org'

 gem 'figaro', '~> 1.1.1'
 gem 'bcrypt', '~> 3.1.7'
 gem 'mysql2', '>= 0.3.18', '< 0.5'
-gem 'rails', '~> 5.0.0'
+gem 'rails', '~> 5.0', '>= 5.0.0.1'

-# gem 'autoprefixer-rails'
 gem 'jbuilder', '~> 2.6'
 gem 'jquery-rails'
 gem 'json', '~> 2.0.2'
+gem 'mailjet', '~> 1.3.8'
 gem 'puma', '~> 3.0'
+gem 'pundit'
 gem 'sass-rails', '~> 5.0'
+gem 'settingslogic', '~> 2.0.9'
 gem 'turbolinks', '~> 5'
 gem 'uglifier', '>= 1.3.0'

+# assets
+gem 'bourbon'
+gem 'neat'
+
+# Foundation for Emails
+gem 'inky-rb', require: 'inky'
+gem 'premailer-rails'
+
 group :development do
+  gem 'better_errors'
  gem 'rack-livereload'
  gem 'rails-erd'
  gem 'web-console'
 end

 group :development, :test do
-  gem 'awesome_print'
-  gem 'binding_of_caller'
-  gem 'byebug', platform: :mri
+  gem 'spring'
+  gem 'spring-watcher-listen', '~> 2.0.0'
+  gem 'listen'
+
  gem 'guard'
+  gem 'guard-brakeman'
  gem 'guard-livereload'
  gem 'guard-minitest'
  gem 'guard-rubocop'
  gem 'guard-shell'
-  gem 'listen', '~> 3.0'
+
  gem 'minitest-reporters'
+  gem 'policy-assertions'
+  gem 'rails-controller-testing'
+
+  gem 'awesome_print'
+  gem 'binding_of_caller'
+  gem 'byebug', platform: :mri
  gem 'pry-byebug'
  gem 'pry-rails'
+
+  gem 'brakeman'
  gem 'rubocop', '~> 0.42.0'
-  gem 'spring'
-  gem 'spring-watcher-listen', '~> 2.0.0'
+  gem 'simplecov', require: false
 end

 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,56 +1,70 @@
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (5.0.0)
-      actionpack (= 5.0.0)
+    actioncable (5.0.0.1)
+      actionpack (= 5.0.0.1)
      nio4r (~> 1.2)
      websocket-driver (~> 0.6.1)
-    actionmailer (5.0.0)
-      actionpack (= 5.0.0)
-      actionview (= 5.0.0)
-      activejob (= 5.0.0)
+    actionmailer (5.0.0.1)
+      actionpack (= 5.0.0.1)
+      actionview (= 5.0.0.1)
+      activejob (= 5.0.0.1)
      mail (~> 2.5, >= 2.5.4)
      rails-dom-testing (~> 2.0)
-    actionpack (5.0.0)
-      actionview (= 5.0.0)
-      activesupport (= 5.0.0)
+    actionpack (5.0.0.1)
+      actionview (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
      rack (~> 2.0)
      rack-test (~> 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.0.0)
-      activesupport (= 5.0.0)
+    actionview (5.0.0.1)
+      activesupport (= 5.0.0.1)
      builder (~> 3.1)
      erubis (~> 2.7.0)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    activejob (5.0.0)
-      activesupport (= 5.0.0)
+    activejob (5.0.0.1)
+      activesupport (= 5.0.0.1)
      globalid (>= 0.3.6)
-    activemodel (5.0.0)
-      activesupport (= 5.0.0)
-    activerecord (5.0.0)
-      activemodel (= 5.0.0)
-      activesupport (= 5.0.0)
+    activemodel (5.0.0.1)
+      activesupport (= 5.0.0.1)
+    activerecord (5.0.0.1)
+      activemodel (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
      arel (~> 7.0)
-    activesupport (5.0.0)
+    activesupport (5.0.0.1)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (~> 0.7)
      minitest (~> 5.1)
      tzinfo (~> 1.1)
+    addressable (2.4.0)
    ansi (1.5.0)
-    arel (7.1.0)
+    arel (7.1.1)
    ast (2.3.0)
    awesome_print (1.7.0)
    bcrypt (3.1.11)
+    better_errors (2.1.1)
+      coderay (>= 1.0.0)
+      erubis (>= 2.6.6)
+      rack (>= 0.9.0)
    binding_of_caller (0.7.2)
      debug_inspector (>= 0.0.1)
+    bourbon (4.2.7)
+      sass (~> 3.4)
+      thor (~> 0.19)
+    brakeman (3.4.0)
    builder (3.2.2)
    byebug (9.0.5)
    choice (0.2.0)
    coderay (1.1.1)
    concurrent-ruby (1.0.2)
+    css_parser (1.4.5)
+      addressable
    debug_inspector (0.0.2)
+    docile (1.1.5)
+    domain_name (0.5.20160615)
+      unf (>= 0.0.5, < 1.0.0)
    em-websocket (0.5.1)
      eventmachine (>= 0.12.9)
      http_parser.rb (~> 0.6.0)
@ -61,7 +75,8 @@ GEM
    figaro (1.1.1)
      thor (~> 0.14)
    formatador (0.2.5)
-    globalid (0.3.6)
+    foundation_emails (2.2.0.0)
+    globalid (0.3.7)
      activesupport (>= 4.1.0)
    guard (2.14.0)
      formatador (>= 0.2.4)
@ -72,13 +87,16 @@ GEM
      pry (>= 0.9.12)
      shellany (~> 0.0)
      thor (>= 0.18.1)
+    guard-brakeman (0.8.3)
+      brakeman (>= 2.1.1)
+      guard (>= 2.0.0)
    guard-compat (1.2.1)
    guard-livereload (2.5.2)
      em-websocket (~> 0.5)
      guard (~> 2.8)
      guard-compat (~> 1.0)
      multi_json (~> 1.8)
-    guard-minitest (2.4.5)
+    guard-minitest (2.4.6)
      guard-compat (~> 1.2)
      minitest (>= 3.0)
    guard-rubocop (1.2.0)
@ -87,12 +105,17 @@ GEM
    guard-shell (0.7.1)
      guard (>= 2.0.0)
      guard-compat (~> 1.0)
+    htmlentities (4.3.4)
+    http-cookie (1.0.2)
+      domain_name (~> 0.5)
    http_parser.rb (0.6.0)
    i18n (0.7.0)
+    inky-rb (1.3.6.1)
+      foundation_emails (~> 2)
    jbuilder (2.6.0)
      activesupport (>= 3.0.0, < 5.1)
      multi_json (~> 1.2)
-    jquery-rails (4.1.1)
+    jquery-rails (4.2.1)
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
@ -106,31 +129,48 @@ GEM
    lumberjack (1.0.10)
    mail (2.6.4)
      mime-types (>= 1.16, < 4)
+    mailjet (1.3.8)
+      activesupport (>= 3.1.0)
+      rack (>= 1.4.0)
+      rest-client
    method_source (0.8.2)
    mime-types (3.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2016.0521)
    mini_portile2 (2.1.0)
    minitest (5.9.0)
-    minitest-reporters (1.1.10)
+    minitest-reporters (1.1.11)
      ansi
      builder
      minitest (>= 5.0)
      ruby-progressbar
    multi_json (1.12.1)
    mysql2 (0.4.4)
+    neat (1.8.0)
+      sass (>= 3.3)
+      thor (~> 0.19)
    nenv (0.3.0)
+    netrc (0.11.0)
    nio4r (1.2.1)
    nokogiri (1.6.8)
      mini_portile2 (~> 2.1.0)
      pkg-config (~> 1.1.7)
-    notiffany (0.1.0)
+    notiffany (0.1.1)
      nenv (~> 0.1)
      shellany (~> 0.0)
    parser (2.3.1.2)
      ast (~> 2.2)
    pkg-config (1.1.7)
+    policy-assertions (0.0.3)
+      activesupport (>= 3.0.0)
+      pundit (>= 1.0.0)
    powerpack (0.1.1)
+    premailer (1.8.7)
+      css_parser (>= 1.4.5)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.9.4)
+      actionmailer (>= 3, < 6)
+      premailer (~> 1.7, >= 1.7.9)
    pry (0.10.4)
      coderay (~> 1.1.0)
      method_source (~> 0.8.1)
@ -141,36 +181,42 @@ GEM
    pry-rails (0.3.4)
      pry (>= 0.9.10)
    puma (3.6.0)
+    pundit (1.1.0)
+      activesupport (>= 3.0.0)
    rack (2.0.1)
    rack-livereload (0.3.16)
      rack
    rack-test (0.6.3)
      rack (>= 1.0)
-    rails (5.0.0)
-      actioncable (= 5.0.0)
-      actionmailer (= 5.0.0)
-      actionpack (= 5.0.0)
-      actionview (= 5.0.0)
-      activejob (= 5.0.0)
-      activemodel (= 5.0.0)
-      activerecord (= 5.0.0)
-      activesupport (= 5.0.0)
+    rails (5.0.0.1)
+      actioncable (= 5.0.0.1)
+      actionmailer (= 5.0.0.1)
+      actionpack (= 5.0.0.1)
+      actionview (= 5.0.0.1)
+      activejob (= 5.0.0.1)
+      activemodel (= 5.0.0.1)
+      activerecord (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
      bundler (>= 1.3.0, < 2.0)
-      railties (= 5.0.0)
+      railties (= 5.0.0.1)
      sprockets-rails (>= 2.0.0)
+    rails-controller-testing (1.0.1)
+      actionpack (~> 5.x)
+      actionview (~> 5.x)
+      activesupport (~> 5.x)
    rails-dom-testing (2.0.1)
      activesupport (>= 4.2.0, < 6.0)
      nokogiri (~> 1.6.0)
-    rails-erd (1.4.7)
+    rails-erd (1.5.0)
      activerecord (>= 3.2)
      activesupport (>= 3.2)
      choice (~> 0.2.0)
      ruby-graphviz (~> 1.2)
    rails-html-sanitizer (1.0.3)
      loofah (~> 2.0)
-    railties (5.0.0)
-      actionpack (= 5.0.0)
-      activesupport (= 5.0.0)
+    railties (5.0.0.1)
+      actionpack (= 5.0.0.1)
+      activesupport (= 5.0.0.1)
      method_source
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
@ -179,6 +225,10 @@ GEM
    rb-fsevent (0.9.7)
    rb-inotify (0.9.7)
      ffi (>= 0.5.0)
+    rest-client (2.0.0)
+      http-cookie (>= 1.0.2, < 2.0)
+      mime-types (>= 1.16, < 4.0)
+      netrc (~> 0.8)
    rubocop (0.42.0)
      parser (>= 2.3.1.1, < 3.0)
      powerpack (~> 0.1)
@ -187,7 +237,7 @@ GEM
      unicode-display_width (~> 1.0, >= 1.0.1)
    ruby-graphviz (1.2.2)
    ruby-progressbar (1.8.1)
-    ruby_dep (1.3.1)
+    ruby_dep (1.4.0)
    sass (3.4.22)
    sass-rails (5.0.6)
      railties (>= 4.0.0, < 6)
@ -195,7 +245,13 @@ GEM
      sprockets (>= 2.8, < 4.0)
      sprockets-rails (>= 2.0, < 4.0)
      tilt (>= 1.1, < 3)
+    settingslogic (2.0.9)
    shellany (0.0.1)
+    simplecov (0.12.0)
+      docile (~> 1.1.0)
+      json (>= 1.8, < 3)
+      simplecov-html (~> 0.10.0)
+    simplecov-html (0.10.0)
    slop (3.6.0)
    spring (1.7.2)
    spring-watcher-listen (2.0.0)
@ -211,14 +267,17 @@ GEM
    thor (0.19.1)
    thread_safe (0.3.5)
    tilt (2.0.5)
-    turbolinks (5.0.0)
+    turbolinks (5.0.1)
      turbolinks-source (~> 5)
    turbolinks-source (5.0.0)
    tzinfo (1.2.2)
      thread_safe (~> 0.1)
-    uglifier (3.0.0)
+    uglifier (3.0.2)
      execjs (>= 0.3.0, < 3)
-    unicode-display_width (1.1.0)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.2)
+    unicode-display_width (1.1.1)
    web-console (3.3.1)
      actionview (>= 5.0)
      activemodel (>= 5.0)
@ -234,28 +293,41 @@ PLATFORMS
 DEPENDENCIES
  awesome_print
  bcrypt (~> 3.1.7)
+  better_errors
  binding_of_caller
+  bourbon
+  brakeman
  byebug
  figaro (~> 1.1.1)
  guard
+  guard-brakeman
  guard-livereload
  guard-minitest
  guard-rubocop
  guard-shell
+  inky-rb
  jbuilder (~> 2.6)
  jquery-rails
  json (~> 2.0.2)
-  listen (~> 3.0)
+  listen
+  mailjet (~> 1.3.8)
  minitest-reporters
  mysql2 (>= 0.3.18, < 0.5)
+  neat
+  policy-assertions
+  premailer-rails
  pry-byebug
  pry-rails
  puma (~> 3.0)
+  pundit
  rack-livereload
-  rails (~> 5.0.0)
+  rails (~> 5.0, >= 5.0.0.1)
+  rails-controller-testing
  rails-erd
  rubocop (~> 0.42.0)
  sass-rails (~> 5.0)
+  settingslogic (~> 2.0.9)
+  simplecov
  spring
  spring-watcher-listen (~> 2.0.0)
  turbolinks (~> 5)
--- a/86
+++ b/86
@ -1,3 +1,4 @@
+# frozen_string_literal: true
 # A sample Guardfile
 # More info at https://github.com/guard/guard#readme

@ -15,29 +16,82 @@
 #
 # and, you'll have to watch "config/Guardfile" instead of "Guardfile"

-guard :minitest, spring: true, all_after_pass: true do
-  watch(%r{^test/test_helper\.rb$}) { 'test' }
-  watch(%r{^test/(.*)\/?(.*)_test\.rb$})
-  watch(%r{^app/(.*/)?([^/]+)\.rb$}) { |m| "test/#{m[1]}#{m[2]}_test.rb" }
-  watch(%r{^lib/(.*/)?([^/]+)\.rb$}) { |m| "test/lib/#{m[1]}#{m[2]}_test.rb" }
+guard 'livereload' do
+  extensions = {
+    css: :css,
+    scss: :css,
+    sass: :css,
+    js: :js,
+    coffee: :js,
+    html: :html,
+    png: :png,
+    gif: :gif,
+    jpg: :jpg,
+    jpeg: :jpeg,
+    # less: :less, # uncomment if you want LESS stylesheets done in browser
+  }
+
+  rails_view_exts = %w(erb haml slim)
+
+  # file types LiveReload may optimize refresh for
+  compiled_exts = extensions.values.uniq
+  watch(%r{public/.+\.(#{compiled_exts * '|'})})
+
+  extensions.each do |ext, type|
+    watch(%r{
+          (?:app|vendor)
+          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
+           (?<ext>\.#{ext})) # matching extension (must be first encountered)
+          (?:\.\w+|$) # other extensions
+          }x) do |m|
+      path = m[1]
+      "/assets/#{path}.#{type}"
+    end
+  end
+
+  # file needing a full reload of the page anyway
+  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
+  watch(%r{app/(helpers|controllers)/.+\.rb})
+  watch(%r{config/locales/.+\.yml})
 end

-guard 'livereload' do
-  watch(%r{app/assets/.+\.(scss|css|js)})
-  watch(%r{app/views/.+\.(erb|haml|slim)$})
-  watch(%r{app/controllers/.+\.rb})
-  watch(%r{app/helpers/.+\.rb})
-  watch(%r{public/.+\.(css|js|html)})
-  watch(%r{config/locales/.+\.yml})
+guard :minitest, spring: "bin/rails test", all_after_pass: true do
+  watch(%r{^app/(.+)\.rb$}) { |m| ["test/#{m[1]}", "test/#{m[1]}_test.rb"] }
+  watch(%r{^app/controllers/(admin|application)_controller\.rb$}) { 'test/controllers' }
+  watch(%r{^app/controllers/(.+)_controller\.rb$}) { |m| "test/integration/#{m[1]}_test.rb" }
+  watch(%r{^app/views/(.+)_mailer/.+}) { |m| "test/mailers/#{m[1]}_mailer_test.rb" }
+  watch(%r{^lib/(.+)\.rb$}) { |m| "test/lib/#{m[1]}_test.rb" }
+  watch(%r{^test/test_helper\.rb$}) { 'test' }
+  watch(%r{^test/.+_test\.rb$})
+  # run controller/integration test when touching the router or erb files
+  watch(%r{^app/views/((?!_mailer).)*([^/]+)\.erb$}) { ["test/controllers", "test/integration"] }
+  watch(%r{^config/routes.rb}) { ["test/controllers", "test/integration"] }
+  # run mailers/integration test when touching mailer erb files
+  watch(%r{^app/views/(.*_mailer/)?([^/]+)\.erb$}) { ["test/mailers", "test/integration"] }
+end

-  # Rails Assets Pipeline
-  watch(%r{(app|vendor)(/assets/\w+/(.+\.(scss|css|js|html|png|jpg))).*}) do |m|
-    "/assets/#{m[3]}"
+# ESLint
+guard :shell, all_on_start: true do
+  # TODO: Annoyingly, all files are linted twice on start/full runs. Why?
+  watch %r{app/assets/javascripts/*/.*} do |file|
+    system %(echo "ESLint:\033[32m #{file[0]}\033[0m")
+    system %(eslint #{file[0]})
  end
 end

-guard :rubocop do
+guard :rubocop, cli: %w(-D -S) do
+  watch(/.rubocop.yml/)
  watch(/.+\.rb$/)
  watch(/Rakefile/)
  watch(%r{(?:.+/)?\.rubocop\.yml$}) { |m| File.dirname(m[0]) }
 end
+
+guard 'brakeman', run_on_start: true, quiet: true do
+  ## Lets not watch files for brakeman,
+  ## just scan on guard start, and full runs.
+  #
+  # watch(%r{^app/.+\.(erb|haml|rhtml|rb)$})
+  # watch(%r{^config/.+\.rb$})
+  # watch(%r{^lib/.+\.rb$})
+  # watch('Gemfile')
+end
--- a/README.md
+++ b/README.md
@ -2,27 +2,85 @@

 This application manages quizzes intended to be used as pre-interview skill assessments.

+## Development Guidelines
+
+Please follow these guidelines as close as possible. Discuss and question them as needed.
+
+* Run Guard while developing.
+    * `bundle exec guard`
+    * Always execute a full run before a push (simply hit return in your guard session).
+* Honor RuboCop warnings.
+* Write tests, And keep them green.
+    * Review the coverage report, keeping coverate > 90%.
+        * coverage/index.html
+    * It is OK to delete tests which are duplicated, or no longer relevant.
+    * If you find a bug, write a test to recreate it, so it never comes back unnoticed.
+* Make sure to keep the fixture files current.
+    * `test/fixtures/*.yml`
+    * Include any new development data needs.
+* Protect Gemfile.
+    * Does your new gem bring in a ton of unnecessary or outdated gems?
+    * Are you bringing in a gem that solves a problem already addressed by an existing gem?
+    * Do you really need this gem, or just a simple service object?
+    * Place your new gem appropriately. Some gem blocks are order specific, but most are alphabetized.
+* Keep git comment subjects short, and use git comment bodies for more details.
+* Pull with --rebase.
+    * `git config --global pull.rebase true`
+* Feature branches are nice.
+    * Rebase feature branches onto develop before merging.
+        * `push -f` is ok on feature branches. Just communicate with others using that branch.
+    * Never merge develop _down_ to a feature branch.
+    * Merge with `--no-ff` when appropriate, `--squash` "WIP" commits into a complete thought.
+    * Clean up your remote branches after merge.
+* Keep code comments to a minimum.
+    * We use git. Write a good commit message instead.
+    * Remove/Update code comments when changes are made.
+* Leave the code better than you found it.
+* Have fun.
+
+## Setup
+* clone
+* checkout develop
+* bundle
+* npm install
+* bower install
+* cp config/application.yml.sample config/application.yml
+* edit and update proper values to application.yml
+* rake db:setup
+* rake db:migrate
+* rake db:fixtures:load
+    * `./rebuild-dev-db.sh` is a convenience script to rebuild and refresh your dev db with the fixture data.
+
+## Docker
+
+You can develop in this app with a native rails install, if you prefer.
+However, there is also a docker image setup if you do not want to install all the supporting gems and libraries.
+Please note: The guard watch session does not run all watches correctly in the docker container. The only issue this causes is all the automation is not 100%. Simply manually kick off the runners occasionally by hitting return in the session.
+
+To use the docker container, you need to install and launch docker, which can be found here:
+https://www.docker.com/products/docker
+
+Once the container is started, you can still edit files from your host project directory.
+
+visit http://localhost:3000 like normal
+
+There are some convenience scripts included to make starting the container and rails app easier.
+
+#### `./start-docker.sh`
+* Execute from terminal, on the host machine, in the project directory
+- This will pull the image from dockerhub, if needed
+- Create and start up container
+
+#### Once in the container:
+* `./start-dev.sh`
+    * will spin up a dev session with tmux
+* `./start-server.sh`
+    - starts up just rails server for viewing application


-# dev
-* you can dev native, or in docker
-* use guard
-    * honor RuboCop
-    * keep tests green
-* pull --rebase !always `git config --global pull.rebase true`
-* cd vendor/assets/ && bitters install && cd ../..
-* place all required dev seed data in fixtures for rails db:fixtures:load
-
-# Docker
-
-* ./start-docker.sh
-    - will build source image, it not exist
-    - created contaier and starts
-* ./start-dev.sh
-    - after connected to container, run this to spin up a dev session
-    - edit files from host in favorite editor
-* ./start-server.sh
-    - starts up simple server for viewing/demo sans guard
-
-visit http://localhost:3000
+## TODOs and notes

+* Question attachment path: http://dev.perficientxd.com/skill_assets/
+* clean code
+    * [Confident Ruby](http://www.confidentruby.com/)
+    * [POODR](http://www.poodr.com/)
--- a/1
+++ b/1
@ -1,3 +1,4 @@
+# frozen_string_literal: true
 # Add your own tasks in files placed in lib/tasks ending in .rake,
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.

--- a/app/assets/fonts/HalisR-Black.otf
+++ b/app/assets/fonts/HalisR-Black.otf
--- a/app/assets/fonts/HalisR-Black.woff
+++ b/app/assets/fonts/HalisR-Black.woff
--- a/app/assets/fonts/HalisR-Black.woff2
+++ b/app/assets/fonts/HalisR-Black.woff2
--- a/app/assets/fonts/HalisR-Bold.otf
+++ b/app/assets/fonts/HalisR-Bold.otf
--- a/app/assets/fonts/HalisR-Bold.woff
+++ b/app/assets/fonts/HalisR-Bold.woff
--- a/app/assets/fonts/HalisR-Bold.woff2
+++ b/app/assets/fonts/HalisR-Bold.woff2
--- a/app/assets/fonts/HalisR-Book.otf
+++ b/app/assets/fonts/HalisR-Book.otf
--- a/app/assets/fonts/HalisR-Book.woff
+++ b/app/assets/fonts/HalisR-Book.woff
--- a/app/assets/fonts/HalisR-Book.woff2
+++ b/app/assets/fonts/HalisR-Book.woff2
--- a/app/assets/fonts/HalisR-ExtraLight.otf
+++ b/app/assets/fonts/HalisR-ExtraLight.otf
--- a/app/assets/fonts/HalisR-ExtraLight.woff
+++ b/app/assets/fonts/HalisR-ExtraLight.woff
--- a/app/assets/fonts/HalisR-ExtraLight.woff2
+++ b/app/assets/fonts/HalisR-ExtraLight.woff2
--- a/app/assets/fonts/HalisR-Light.otf
+++ b/app/assets/fonts/HalisR-Light.otf
--- a/app/assets/fonts/HalisR-Light.woff
+++ b/app/assets/fonts/HalisR-Light.woff
--- a/app/assets/fonts/HalisR-Light.woff2
+++ b/app/assets/fonts/HalisR-Light.woff2
--- a/app/assets/fonts/HalisR-Medium.otf
+++ b/app/assets/fonts/HalisR-Medium.otf
--- a/app/assets/fonts/HalisR-Medium.woff
+++ b/app/assets/fonts/HalisR-Medium.woff
--- a/app/assets/fonts/HalisR-Medium.woff2
+++ b/app/assets/fonts/HalisR-Medium.woff2
--- a/app/assets/fonts/HalisR-Regular.otf
+++ b/app/assets/fonts/HalisR-Regular.otf
--- a/app/assets/fonts/HalisR-Regular.woff
+++ b/app/assets/fonts/HalisR-Regular.woff
--- a/app/assets/fonts/HalisR-Regular.woff2
+++ b/app/assets/fonts/HalisR-Regular.woff2
--- a/app/assets/fonts/HalisR-Thin.otf
+++ b/app/assets/fonts/HalisR-Thin.otf
--- a/app/assets/fonts/HalisR-Thin.woff
+++ b/app/assets/fonts/HalisR-Thin.woff
--- a/app/assets/fonts/HalisR-Thin.woff2
+++ b/app/assets/fonts/HalisR-Thin.woff2
--- a/app/assets/fonts/Lato-Black.ttf
+++ b/app/assets/fonts/Lato-Black.ttf
--- a/app/assets/fonts/Lato-Black.woff
+++ b/app/assets/fonts/Lato-Black.woff
--- a/app/assets/fonts/Lato-Black.woff2
+++ b/app/assets/fonts/Lato-Black.woff2
--- a/app/assets/fonts/Lato-BlackItalic.ttf
+++ b/app/assets/fonts/Lato-BlackItalic.ttf
--- a/app/assets/fonts/Lato-BlackItalic.woff
+++ b/app/assets/fonts/Lato-BlackItalic.woff
--- a/app/assets/fonts/Lato-BlackItalic.woff2
+++ b/app/assets/fonts/Lato-BlackItalic.woff2
--- a/app/assets/fonts/Lato-Bold.ttf
+++ b/app/assets/fonts/Lato-Bold.ttf
--- a/app/assets/fonts/Lato-Bold.woff
+++ b/app/assets/fonts/Lato-Bold.woff
--- a/app/assets/fonts/Lato-Bold.woff2
+++ b/app/assets/fonts/Lato-Bold.woff2
--- a/app/assets/fonts/Lato-BoldItalic.ttf
+++ b/app/assets/fonts/Lato-BoldItalic.ttf
--- a/app/assets/fonts/Lato-BoldItalic.woff
+++ b/app/assets/fonts/Lato-BoldItalic.woff
--- a/app/assets/fonts/Lato-BoldItalic.woff2
+++ b/app/assets/fonts/Lato-BoldItalic.woff2
--- a/app/assets/fonts/Lato-Hairline.ttf
+++ b/app/assets/fonts/Lato-Hairline.ttf
--- a/app/assets/fonts/Lato-Hairline.woff
+++ b/app/assets/fonts/Lato-Hairline.woff
--- a/app/assets/fonts/Lato-Hairline.woff2
+++ b/app/assets/fonts/Lato-Hairline.woff2
--- a/app/assets/fonts/Lato-HairlineItalic.ttf
+++ b/app/assets/fonts/Lato-HairlineItalic.ttf
--- a/app/assets/fonts/Lato-HairlineItalic.woff
+++ b/app/assets/fonts/Lato-HairlineItalic.woff
--- a/app/assets/fonts/Lato-HairlineItalic.woff2
+++ b/app/assets/fonts/Lato-HairlineItalic.woff2
--- a/app/assets/fonts/Lato-Italic.ttf
+++ b/app/assets/fonts/Lato-Italic.ttf
--- a/app/assets/fonts/Lato-Italic.woff
+++ b/app/assets/fonts/Lato-Italic.woff
--- a/app/assets/fonts/Lato-Italic.woff2
+++ b/app/assets/fonts/Lato-Italic.woff2
--- a/app/assets/fonts/Lato-Light.ttf
+++ b/app/assets/fonts/Lato-Light.ttf
--- a/app/assets/fonts/Lato-Light.woff
+++ b/app/assets/fonts/Lato-Light.woff
--- a/app/assets/fonts/Lato-Light.woff2
+++ b/app/assets/fonts/Lato-Light.woff2
--- a/app/assets/fonts/Lato-LightItalic.ttf
+++ b/app/assets/fonts/Lato-LightItalic.ttf
--- a/app/assets/fonts/Lato-LightItalic.woff
+++ b/app/assets/fonts/Lato-LightItalic.woff
--- a/app/assets/fonts/Lato-LightItalic.woff2
+++ b/app/assets/fonts/Lato-LightItalic.woff2
--- a/app/assets/fonts/Lato-Regular.ttf
+++ b/app/assets/fonts/Lato-Regular.ttf
--- a/app/assets/fonts/Lato-Regular.woff
+++ b/app/assets/fonts/Lato-Regular.woff
--- a/app/assets/fonts/Lato-Regular.woff2
+++ b/app/assets/fonts/Lato-Regular.woff2
--- a/app/assets/images/icon-dropdownlist.png
+++ b/app/assets/images/icon-dropdownlist.png
--- a/app/assets/images/icon-unorderedlistbullet.png
+++ b/app/assets/images/icon-unorderedlistbullet.png
--- a/app/assets/images/perficientdigital-logo.jpg
+++ b/app/assets/images/perficientdigital-logo.jpg
--- a/app/assets/images/perficientdigital.png
+++ b/app/assets/images/perficientdigital.png
--- a/app/assets/images/yellowslant-left.jpg
+++ b/app/assets/images/yellowslant-left.jpg
--- a/app/assets/images/yellowslant-right.jpg
+++ b/app/assets/images/yellowslant-right.jpg
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@ -0,0 +1,18 @@
+$(function(){
+
+  $("form").on('click', "[data-id=input_option_adder]", function(){
+    var $new_li = $(this).siblings('li').clone();
+    $new_li.attr('style', '');
+    $("[data-id=input_option_list]").append($new_li);
+    $new_li.find('input').focus();
+  });
+
+  $("#question_input_type").on('change', function(){
+    var qid = $(this).attr('data-qid') === undefined ? '' : "/" + $(this).attr('data-qid');
+                                            // /admin/question(/:question_id)/options/:input_type
+    $("[data-id=input-options-wrapper]").load("/admin/question" + qid + "/options/" + $(this).val(), function(){
+      $(".code-input textarea").linedtextarea();
+    });
+  });
+
+});
--- a/app/assets/javascripts/ajax-links.js
+++ b/app/assets/javascripts/ajax-links.js
@ -0,0 +1,16 @@
+function handleAjaxResponse($el) {
+  var $header = $('header');
+  $el.on("ajax:success", function(e, data){
+    $header.after('<div class="success">' + data.message + '</div>');
+  }).on("ajax:error", function(e, xhr) {
+    if (xhr.status === 400){
+      $header.after('<div class="error">' + xhr.responseJSON.join('<br>') + '</div>');
+    } else {
+      $header.after('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
+    }
+  });
+}
+
+$(document).ready(function() {
+  $('[data-id=ajax-action]').each(function(){ handleAjaxResponse($(this)); });
+});
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@ -13,4 +13,10 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .
+//= require modernizr-lite/modernizr
+
+//= require ajax-links
+
+//= require forms/button-group
+//= require forms/animations
+//= require forms/textarea-limit
--- a/app/assets/javascripts/cable.js
+++ b/app/assets/javascripts/cable.js
@ -5,9 +5,9 @@
 //= require_self
 //= require_tree ./channels

-(function() {
-  this.App || (this.App = {});
-
-  App.cable = ActionCable.createConsumer();
-
-}).call(this);
+// (function() {
+//   this.App || (this.App = {});
+//
+//   App.cable = ActionCable.createConsumer();
+//
+// }).call(this);
--- a/app/assets/javascripts/forms/animations.js
+++ b/app/assets/javascripts/forms/animations.js
@ -0,0 +1,30 @@
+var $textInput = $('[type="color"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], input:not([type]), textarea');
+
+// Text Input Label Animation
+$textInput.prev('label').addClass('loaded');
+$textInput.each(function() {
+  if( $(this).val() ) {
+    $(this).prev('label').addClass('animate');
+  }
+});
+
+$textInput.on('focus', function() {
+  $(this).prev('label').addClass('animate');
+}).on('focusout', function() {
+  if( !$(this).val() ) {
+    $(this).prev('label').removeClass('animate');
+  }
+});
+
+// form error resolutions
+$('form').has('.error').each(function(){
+  var $form = $(this);
+
+  $form.on('keyup', $textInput, function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+
+  $form.on('change', $("[type=radio], [type=checkbox]"), function(){
+    $form.find(".error").addClass('resolve-error');
+  });
+});
--- a/app/assets/javascripts/forms/button-group.js
+++ b/app/assets/javascripts/forms/button-group.js
@ -0,0 +1,8 @@
+/**
+ * Button Group Functionality
+ */
+
+$('.btn-group button').click(function() {
+  $(this).siblings().removeClass('selected');
+  $(this).addClass('selected');
+});
--- a/app/assets/javascripts/forms/textarea-limit.js
+++ b/app/assets/javascripts/forms/textarea-limit.js
@ -0,0 +1,25 @@
+$.fn.extend({
+  characterLimiter: function(limit, label) {
+    this.on("keyup focus show", function() {
+      setCount(this, label);
+    });
+
+    // TODO: append label container after $this, instead of hard HTML
+    function setCount(src, label) {
+      if(src !== undefined) {
+        var chars = src.value.length;
+        if (chars >= limit) {
+          src.value = src.value.substr(0, limit);
+          chars = limit;
+        }
+        label.html(limit - chars);
+      }
+    }
+
+    setCount(this[0], label);
+  }
+});
+
+$(document).ready(function() {
+  $('textarea').characterLimiter(1000, $(".chars span"));
+});
--- a/app/assets/javascripts/ie9.js
+++ b/app/assets/javascripts/ie9.js
@ -0,0 +1 @@
+//= require html5shiv/dist/html5shiv.min
--- a/app/assets/javascripts/live-coder.js
+++ b/app/assets/javascripts/live-coder.js
@ -0,0 +1,2 @@
+//= require live-coder/linedtextarea
+//= require live-coder/editor
--- a/app/assets/javascripts/live-coder/editor.js.erb
+++ b/app/assets/javascripts/live-coder/editor.js.erb
@ -0,0 +1,117 @@
+function updateResults(elem) {
+  if ($(elem).length ===0){return false;}
+
+  var resultsContainer = $(elem).find('[data-id="results"]')[0];
+  var codeHtml = $(elem).find('.code-html')[0].value.trim();
+  var codeCss = $(elem).find('.code-css')[0].value.trim();
+  var codeJs = $(elem).find('.code-js')[0].value.trim();
+
+  resultsContainer.innerHTML = "";
+  var iDoc = document.createElement('html');
+  var iHead = document.createElement('head');
+  var iBody = document.createElement('body');
+
+  var codeFrame = document.createElement('iframe');
+  codeFrame.setAttribute("width", "100%");
+  codeFrame.setAttribute("height", "100%");
+  resultsContainer.appendChild(codeFrame);
+
+  var jqueryNode = document.createElement("script");
+  jqueryNode.setAttribute("type", "text/javascript");
+  jqueryNode.setAttribute("src", "<%= "//#{ENV['full_app_url']}#{javascript_path "jquery"}" %>");
+  iHead.appendChild(jqueryNode);
+
+  var codeStyle = document.createElement("style");
+  codeStyle.setAttribute("type", "text/css");
+  var rulesNode = document.createTextNode(codeCss);
+  codeStyle.appendChild(rulesNode);
+  iHead.appendChild(codeStyle);
+
+  iDoc.appendChild(iHead);
+  iBody.innerHTML = codeHtml;
+  iDoc.appendChild(iBody);
+
+  var codeScript = document.createElement("script");
+  codeScript.setAttribute("type", "text/javascript");
+  var scriptNode = document.createTextNode("setTimeout(function(){ " + codeJs + "}, 800);");
+  codeScript.appendChild(scriptNode);
+  iDoc.appendChild(codeScript);
+
+  codeFrame.contentWindow.document.open();
+  codeFrame.contentWindow.document.appendChild(iDoc);
+  codeFrame.contentWindow.document.close();
+}
+
+function indentSelection(e){
+  if(e.keyCode === 9){
+    e.preventDefault();
+
+    var indent = "  ";
+    var cursor = e.target.selectionStart;
+    var val = e.target.value;
+    var valStart = val.substring(0, e.target.selectionStart);
+    var valEnd = val.substring(e.target.selectionEnd, val.length);
+    var selected = val.substring(e.target.selectionStart, e.target.selectionEnd);
+
+    var resetCursor = function(start, end){
+      e.target.selectionStart = start;
+      e.target.selectionEnd = end;
+    };
+
+    var indented;
+    if(e.shiftKey){ //de-indent
+      if(selected.length > 0 && (/\n/.test(selected))){ //multi line
+        indented = selected.split(/\n/).map(function(line){
+          if(line.length > 0 && line.substring(0, indent.length) === indent){
+            line = line.substring(indent.length, line.length);
+          }
+          return line;
+        }).join("\n");
+        e.target.value = valStart + indented + val.substring(e.target.selectionEnd, val.length);
+        resetCursor(cursor, cursor + indented.length);
+      } else {
+        if(valStart.substring(valStart.length - indent.length) === indent){
+          e.target.value = valStart.substring(0, valStart.length - indent.length) + valEnd;
+          resetCursor(cursor, cursor - indent.length);
+        } else if(valEnd.substring(0, indent.length) === indent) {
+          e.target.value = valStart + valEnd.substring(indent.length, valEnd.length);
+          resetCursor(cursor, cursor);
+        }
+      }
+    } else { //indent
+      if(selected.length > 0 && (/\n/.test(selected))){ //multi line
+        indented = selected.split(/\n/).map(function(line){
+          if(line.length > 0){ line = indent + line; }
+          return line;
+        }).join("\n");
+        e.target.value = valStart + indented + val.substring(e.target.selectionEnd, val.length);
+        resetCursor(cursor, cursor + indented.length);
+      } else {
+        e.target.value = valStart + indent + selected + valEnd;
+        resetCursor(cursor + indent.length, cursor + indent.length);
+      }
+    }
+  }
+}
+
+
+var timer = 0;
+$(function(){
+  // wait a half second before updating results
+  // restart the timer if they resume typing
+  $('html').on('keyup', '.code-input textarea', function(){
+    var elem = $(this).closest("[data-id=live-coder-answer]");
+    if (timer) { clearTimeout(timer); }
+    timer = setTimeout(updateResults(elem), 500);
+  });
+
+  $("[data-id=live-coder-answer]").each(function(){
+    updateResults(this);
+  });
+
+  $("html").on('keydown', "textarea[data-id^=code-]", function(e){
+    indentSelection(e);
+  });
+
+  $(".code-input textarea").linedtextarea();
+});
--- a/app/assets/javascripts/live-coder/linedtextarea.js
+++ b/app/assets/javascripts/live-coder/linedtextarea.js
@ -0,0 +1,114 @@
+/**
+ * NOTE: MARK MOSER EDITED COPY. DO NOT USE BOWER.
+ *
+ * jQuery Lined Textarea Plugin
+ *   http://alan.blog-city.com/jquerylinedtextarea.htm
+ *
+ * Copyright (c) 2010 Alan Williamson
+ *
+ * Version:
+ *    $Id: jquery-linedtextarea.js 464 2010-01-08 10:36:33Z alan $
+ *
+ * Released under the MIT License:
+ *    http://www.opensource.org/licenses/mit-license.php
+ *
+ * Usage:
+ *   Displays a line number count column to the left of the textarea
+ *
+ *   Class up your textarea with a given class, or target it directly
+ *   with JQuery Selectors
+ *
+ *   $(".lined").linedtextarea({
+ *   	selectedLine: 10,
+ *    selectedClass: 'lineselect'
+ *   });
+ *
+ * History:
+ *   - 2010.01.08: Fixed a Google Chrome layout problem
+ *   - 2010.01.07: Refactored code for speed/readability; Fixed horizontal sizing
+ *   - 2010.01.06: Initial Release
+ *
+ */
+(function($) {
+  $.fn.linedtextarea = function(options) {
+
+    // Get the Options
+    var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
+
+    /*
+     * Helper function to make sure the line numbers are always
+     * kept up to the current system
+     */
+    var fillOutLines = function(codeLines, h, lineNo){
+      while ( (codeLines.height() - h ) <= 0 ){
+        if ( lineNo == opts.selectedLine )
+          codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
+        else
+          codeLines.append("<div class='lineno'>" + lineNo + "</div>");
+
+        lineNo++;
+      }
+      return lineNo;
+    };
+
+    /*
+     * Iterate through each of the elements are to be applied to
+     */
+    return this.each(function() {
+      var lineNo = 1;
+      var textarea = $(this);
+
+      /* Turn off the wrapping of as we don't want to screw up the line numbers */
+      textarea.attr("wrap", "off");
+      textarea.css({resize:'none'});
+      // var originalTextAreaWidth	= textarea.outerWidth();
+
+      /* Wrap the text area in the elements we need */
+      textarea.wrap("<div class='linedtextarea'></div>");
+      var linedTextAreaDiv	= textarea.parent().wrap("<div class='linedwrap'></div>");
+      var linedWrapDiv 			= linedTextAreaDiv.parent();
+
+      linedWrapDiv.prepend("<div class='lines'></div>");
+
+      var linesDiv	= linedWrapDiv.find(".lines");
+      linesDiv.height( textarea.height() + 4 );
+
+
+      /* Draw the number bar; filling it out where necessary */
+      linesDiv.append( "<div class='codelines'></div>" );
+      var codeLinesDiv	= linesDiv.find(".codelines");
+      lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );
+
+      /* Move the textarea to the selected line */
+      if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
+        var fontSize = parseInt( textarea.height() / (lineNo-2) );
+        var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
+        textarea[0].scrollTop = position;
+      }
+
+
+      /* React to the scroll event */
+      textarea.scroll( function(){
+        var domTextArea		= $(this)[0];
+        var scrollTop 		= domTextArea.scrollTop;
+        var clientHeight 	= domTextArea.clientHeight;
+        codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
+        lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
+      });
+
+
+      /* Should the textarea get resized outside of our control */
+      textarea.resize( function(){
+        var domTextArea	= $(this)[0];
+        linesDiv.height( domTextArea.clientHeight + 4 );
+      });
+
+    });
+  };
+
+  // default options
+  $.fn.linedtextarea.defaults = {
+    selectedLine: -1,
+    selectedClass: 'lineselect'
+  };
+})(jQuery);
--- a/app/assets/javascripts/summary-edit.js
+++ b/app/assets/javascripts/summary-edit.js
@ -0,0 +1,95 @@
+/* global updateResults */
+// TODO: remove global ^ once live-coder is properly name spaced
+/**
+ * Summary Page Answer Editor
+ */
+function disableForm($form){
+  $form.find('fieldset').prop('disabled', true);
+  $form.find('textarea').prop('disabled', true);
+  $form.find('.button-save, .button-cancel').hide();
+  $form.find('.button-edit').show();
+  $form.find('.editable').removeClass('editable');
+  $('.button-edit, .submit-button').removeClass('disabled-button');
+}
+
+function restoreValues($form){
+  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
+    $(this).prop('checked', $(this).attr('data-last'));
+  });
+
+  $form.find('textarea[data-last]').each(function(){
+    $(this).val($(this).attr('data-last'));
+  });
+}
+
+function updateLocalValues($form){
+  $form.find('[type=radio][data-last], [type=checkbox][data-last]').each(function(){
+    $(this).attr('data-last', $(this).prop('checked') ? 'checked' : '');
+  });
+
+  $form.find('textarea[data-last]').each(function(){
+    $(this).attr('data-last', $(this).val());
+  });
+}
+
+function updateProgress(data) {
+  $(".progress-bar").attr('aria-valuenow', data.progress)
+                    .attr('style','width: '+ data.progress +'%;')
+                    .find('span').text(data.progress + '%');
+  if(data.can_submit === true){
+    $('#summary-submit').find('.error').remove();
+    $('#summary-submit').find('.submit-button').prop('disabled', false);
+  }
+}
+
+function prepareAjax($form) {
+  $form.on("ajax:success", function(e, data){
+    $form.prepend('<div class="success">' + data.message + '</div>');
+    disableForm($form);
+    updateLocalValues($form);
+    updateProgress(data);
+  }).on("ajax:error", function(e, xhr) {
+    if (xhr.status === 400){
+      $form.prepend('<div class="error">' + xhr.responseJSON.join('<br>') + '</div>');
+    } else {
+      $form.prepend('<div class="error">Oops! There was an error processing your request. Please try again.</div>');
+    }
+  });
+}
+
+function editClickHandler(e) {
+  e.preventDefault();
+  $('.button-edit, .submit-button').addClass('disabled-button');
+  var $form = $(e.delegateTarget).closest('form');
+  $(e.delegateTarget).addClass('editable');
+  $form.find('fieldset').prop('disabled', false);
+  $form.find('textarea').prop('disabled', false);
+  $form.find('textarea').focus();
+  $form.find('.button-edit').hide().delay();
+  $form.find('.button-save, .button-cancel').show().delay();
+}
+
+function cancelClickHandler(e) {
+  e.preventDefault();
+  var $form = $(e.delegateTarget).closest('form');
+  $form.find('.error, .success').remove();
+  disableForm($form);
+  restoreValues($form);
+  updateResults($form.find("[data-id=live-coder-answer]"));
+}
+
+function saveClickHandler(e) {
+  e.preventDefault();
+  var $form = $(e.delegateTarget).closest('form');
+  $form.find('.error, .success').remove();
+  $form.submit();
+}
+
+$('.summary_tpl fieldset').prop('disabled', true);
+$('.summary_tpl textarea').prop('disabled', true);
+$('.summary_tpl form').each(function(){ prepareAjax($(this)); });
+$('.summary_tpl .answer-sec')
+  .find('.button-cancel, .button-save').hide().end()
+  .on('click', '.button-edit', editClickHandler)
+  .on('click', '.button-cancel', cancelClickHandler)
+  .on('click', '.button-save', saveClickHandler);
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@ -10,6 +10,17 @@
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
- *= require_tree .
- *= require_self
 */
+
+@import 'bourbon';
+@import 'neat';
+
+@import 'core/fonts';
+@import 'core/variables';
+@import 'core/animations';
+
+@import 'atoms/**/*';
+@import 'molecules/**/*';
+// @import 'organisms/**/*';
+@import 'templates/**/*';
+@import 'pages/**/*';
--- a/app/assets/stylesheets/atoms/_alerts.scss
+++ b/app/assets/stylesheets/atoms/_alerts.scss
@ -0,0 +1,8 @@
+.alert {
+  padding: 20px;
+  border-radius: 5px;
+  &.alert-success {
+    background-color: $accent-color-3;
+    color: $white;
+  }
+}
--- a/app/assets/stylesheets/atoms/_layout.scss
+++ b/app/assets/stylesheets/atoms/_layout.scss
@ -0,0 +1,61 @@
+html {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  margin: 0 1rem;
+  height: 100%;
+  .ignore-margin
+  {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+*:focus {
+    outline: 0;
+}
+
+main {
+  display: block;
+  padding-top: 8vw;
+}
+
+.layout {
+  min-height: calc(100% - 112px);
+  &:after {
+    content:"";
+    display:block;
+  }
+}
+
+@media only screen and (min-width: 480px) {
+  .layout {
+    min-height: calc(100% - 116px);
+  }
+}
+
+@media only screen and (min-width: $tablet) {
+  html {
+    // font-size: 2vw;
+  }
+  body {
+    margin: 0 2rem
+  }
+}
+
+@media only screen and (min-width: $desktop) {
+  html {
+    font-size: 16px;
+  }
+  main {
+    padding-top: 55px;
+  }
+}
--- a/app/assets/stylesheets/atoms/_media.scss
+++ b/app/assets/stylesheets/atoms/_media.scss
@ -0,0 +1,10 @@
+figure {
+  margin: 0;
+}
+
+img,
+picture {
+  margin: 0;
+  max-width: 100%;
+}
+
--- a/app/assets/stylesheets/atoms/_pd-slant.scss
+++ b/app/assets/stylesheets/atoms/_pd-slant.scss
@ -0,0 +1,75 @@
+// Slash Logo
+
+.slash-left {
+  position: relative;
+
+  &:before {
+    content: "";
+    background-color: $accent-color-1;
+    width:3px;
+    display: block;
+    position: absolute;
+    top:0;
+    bottom: -1rem;
+    left:0;
+    transform: skewX(-16.5deg);
+    transform-origin: bottom;
+  }
+}
+
+
+
+// HTML/CSS  only Slanted Border
+
+$prftangle: 90deg - 73.5deg;
+$prftangle-negative: 73.5deg - 90deg;
+
+@mixin slantmix ($lmargin, $rmargin, $slantht) {
+
+  position: relative;
+  display:block;
+  z-index: 1;
+  height: $slantht;
+  min-width: tan($prftangle) + 1 / 3;
+  overflow: wrap;
+  display:inline-block;
+
+  &.slantright {
+    margin-right:tan($prftangle) + $rmargin;
+    &:after {
+      transform: skewX($prftangle-negative);
+      transform-origin: 0% 100%;
+      min-width:auto;
+    }
+  }
+
+  &.slantleft {
+    margin-left:tan($prftangle) + $lmargin;
+    &:before {
+      transform: skewX($prftangle-negative);
+      transform-origin: 10% 0%;
+      min-width:auto;
+    }
+  }
+}
+
+.slantleft:before,
+.slantright:after {
+  background: inherit;
+  bottom: 0;
+  top:0;
+  content: '\00a0';
+  display: block;
+  position: absolute;
+  right: 0;
+  left:0;
+  z-index: -1;
+}
+
+.slantleft:before {
+  right: 50%;
+}
+
+.slantright:after {
+  left: 50%;
+}
--- a/app/assets/stylesheets/atoms/_typography.scss
+++ b/app/assets/stylesheets/atoms/_typography.scss
@ -0,0 +1,78 @@
+body {
+  color: $base-font-color;
+  font-family: $primary-font-face;
+  font-size: 1rem;
+  line-height: $base-line-height;
+    font-weight:300;
+    color: $primary-color;
+}
+
+.hidden {
+  display: none !important;
+}
+
+h1, h2, h3,
+h4, h5, h6 {
+  font-family: $heading-font-face;
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+  color: $black;
+  font-weight: bold;
+}
+
+h1 { font-size: modular-scale(6); }
+h2 { font-size: modular-scale(5); }
+h3 { font-size: modular-scale(4); }
+h4 { font-size: modular-scale(3); }
+h5 { font-size: modular-scale(2); }
+h6 { font-size: modular-scale(1); }
+
+p { margin: 0 0 $small-spacing; }
+
+a {
+  color: $primary-color;
+  transition: color $base-duration $base-timing;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: lighten($primary-color, 25%);
+  }
+}
+
+hr {
+  border-bottom: $base-border;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+  margin: $base-spacing 0;
+}
+
+// .prft-heading
+h1 {
+  text-transform: none;
+}
+
+.question-text {
+  margin-bottom: 1.5rem;
+}
+
+// .prft-heading,
+h1,
+.question-text {
+  font-size: 6vw;
+  font-weight: 100;
+}
+
+h1 > a {
+  font-size: 1rem;
+  font-weight: 300;
+}
+
+@media screen and (min-width: $screen-sm) {
+  // .prft-heading,
+  h1,
+  .question-text {
+    font-size: 2.45rem;
+  }
+}
--- a/app/assets/stylesheets/core/_animations.scss
+++ b/app/assets/stylesheets/core/_animations.scss
@ -0,0 +1,28 @@
+@keyframes success-fadeout {
+  0% {
+    max-height: 40px;
+    opacity: 1;
+  }
+
+  85% {
+    margin-bottom: .5rem;
+    max-height: 40px;
+    opacity: 0;
+    padding: .5rem 0;
+  }
+
+  96% {
+    margin-bottom: 0;
+    max-height: 0;
+    opacity: 0;
+    padding: 0;
+  }
+
+  100% {
+    height: 0;
+    left: -10px;
+    position: absolute;
+    top: -10px;
+    width: 0;
+  }
+}
--- a/app/assets/stylesheets/core/_fonts.scss
+++ b/app/assets/stylesheets/core/_fonts.scss
@ -0,0 +1,163 @@
+//HALISR
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Thin'),
+      font_url('HalisR-Thin.woff2') format('woff2'),
+      font_url('HalisR-Thin.woff') format('woff'),
+      font_url('HalisR-Thin.otf') format('opentype');
+  font-weight:100;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Light'),
+      font_url('HalisR-Light.woff2') format('woff2'),
+      font_url('HalisR-Light.woff') format('woff'),
+      font_url('HalisR-Light.otf') format('opentype');
+  font-weight:200;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Book'),
+      font_url('HalisR-Book.woff2') format('woff2'),
+      font_url('HalisR-Book.woff') format('woff'),
+      font_url('HalisR-Book.otf') format('opentype');
+  font-weight:300;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Regular'),
+      font_url('HalisR-Regular.woff2') format('woff2'),
+      font_url('HalisR-Regular.woff') format('woff'),
+      font_url('HalisR-Regular.otf') format('opentype');
+  font-weight:500;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Medium'),
+      font_url('HalisR-Medium.woff2') format('woff2'),
+      font_url('HalisR-Medium.woff') format('woff'),
+      font_url('HalisR-Medium.otf') format('opentype');
+  font-weight:600;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Bold'),
+      font_url('HalisR-Bold.woff2') format('woff2'),
+      font_url('HalisR-Bold.woff') format('woff'),
+      font_url('HalisR-Bold.otf') format('opentype');
+  font-weight:700;
+}
+
+@font-face {
+  font-family: 'HalisR';
+  src:local('Halis R Black'),
+      font_url('HalisR-Black.woff2') format('woff2'),
+      font_url('HalisR-Black.woff') format('woff'),
+      font_url('HalisR-Black.otf') format('opentype');
+  font-weight:900;
+}
+
+//LATO
+
+  //regular
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Hairline'),
+      font_url('Lato-Hairline.woff2') format('woff2'),
+      font_url('Lato-Hairline.woff') format('woff'),
+      font_url('Lato-Hairline.ttf') format('truetype');
+  font-weight:100;
+}
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Light'),
+      font_url('Lato-Light.woff2') format('woff2'),
+      font_url('Lato-Light.woff') format('woff'),
+      font_url('Lato-Light.ttf') format('truetype');
+  font-weight:300;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Regular'),
+      font_url('Lato-Regular.woff2') format('woff2'),
+      font_url('Lato-Regular.woff') format('woff'),
+      font_url('Lato-Regular.ttf') format('truetype');
+  font-weight:500;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Bold'),
+      font_url('Lato-Bold.woff2') format('woff2'),
+      font_url('Lato-Bold.woff') format('woff'),
+      font_url('Lato-Bold.ttf') format('truetype');
+  font-weight:700;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Black'),
+      font_url('Lato-Black.woff2') format('woff2'),
+      font_url('Lato-Black.woff') format('woff'),
+      font_url('Lato-Black.ttf') format('truetype');
+  font-weight:900;
+}
+
+  //italicized
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Hairline Italic'),
+      font_url('Lato-HairlineItalic.woff2') format('woff2'),
+      font_url('Lato-HairlineItalic.woff') format('woff'),
+      font_url('Lato-HairlineItalic.ttf') format('truetype');
+  font-weight:100;
+  font-style: italic;
+}
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Light Italic'),
+      font_url('Lato-LightItalic.woff2') format('woff2'),
+      font_url('Lato-LightItalic.woff') format('woff'),
+      font_url('Lato-LightItalic.ttf') format('truetype');
+  font-weight:300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Italic'),
+      font_url('Lato-Italic.woff2') format('woff2'),
+      font_url('Lato-Italic.woff') format('woff'),
+      font_url('Lato-Italic.ttf') format('truetype');
+  font-weight:500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Bold Italic'),
+      font_url('Lato-BoldItalic.woff2') format('woff2'),
+      font_url('Lato-BoldItalic.woff') format('woff'),
+      font_url('Lato-BoldItalic.ttf') format('truetype');
+  font-weight:700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src:local('Lato Black Italic'),
+      font_url('Lato-BlackItalic.woff2') format('woff2'),
+      font_url('Lato-BlackItalic.woff') format('woff'),
+      font_url('Lato-BlackItalic.ttf') format('truetype');
+  font-weight:900;
+  font-style: italic;
+}
--- a/app/assets/stylesheets/core/_variables.scss
+++ b/app/assets/stylesheets/core/_variables.scss
@ -0,0 +1,948 @@
+$bootstrap-sass-asset-helper: false !default;
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   lighten($gray-base, 33.5%) !default; // #555
+$gray-light:             lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee
+
+$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
+$brand-success:         #5cb85c !default;
+$brand-info:            #5bc0de !default;
+$brand-warning:         #f0ad4e !default;
+$brand-danger:          #d9534f !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #fff !default;
+//** Global text color on `<body>`.
+$text-color:            $gray-dark !default;
+
+//** Global textual link color.
+$link-color:            $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color:      darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:        $font-family-sans-serif !default;
+
+$font-size-base:          14px !default;
+$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5:            $font-size-base !default;
+$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base:        1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family:    inherit !default;
+$headings-font-weight:    500 !default;
+$headings-line-height:    1.1 !default;
+$headings-color:          inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name:          "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id:        "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   12px !default;
+
+$padding-large-vertical:    10px !default;
+$padding-large-horizontal:  16px !default;
+
+$padding-small-vertical:    5px !default;
+$padding-small-horizontal:  10px !default;
+
+$padding-xs-vertical:       1px !default;
+$padding-xs-horizontal:     5px !default;
+
+$line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small:         1.5 !default;
+
+$border-radius-base:        4px !default;
+$border-radius-large:       6px !default;
+$border-radius-small:       3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color:            #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal !default;
+
+$btn-default-color:              #333 !default;
+$btn-default-bg:                 #fff !default;
+$btn-default-border:             #ccc !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             darken($btn-primary-bg, 5%) !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             darken($btn-success-bg, 5%) !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                darken($btn-info-bg, 5%) !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             darken($btn-warning-bg, 5%) !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              darken($btn-danger-bg, 5%) !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg:                       #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled:              $gray-lighter !default;
+
+//** Text color for `<input>`s
+$input-color:                    $gray !default;
+//** `<input>` border color
+$input-border:                   #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+$input-border-radius:            $border-radius-base !default;
+//** Large `.form-control` border radius
+$input-border-radius-large:      $border-radius-large !default;
+//** Small `.form-control` border radius
+$input-border-radius-small:      $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus:             #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder:        #999 !default;
+
+//** Default `.form-control` height
+$input-height-base:              ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.form-control` height
+$input-height-large:             (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.form-control` height
+$input-height-small:             (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom:       15px !default;
+
+$legend-color:                   $gray-dark !default;
+$legend-border-color:            #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg:           $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled:                not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg:                    #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border:                rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border:       #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color:            $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color:   $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color:          $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color:           #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-modal-background:  1040 !default;
+$zindex-modal:             1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs:                  480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min:              $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns:              12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width:         30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint:     $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet:             (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm:                 $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop:            (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md:                 $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop:      (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg:                 $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height:                    50px !default;
+$navbar-margin-bottom:             $line-height-computed !default;
+$navbar-border-radius:             $border-radius-base !default;
+$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height:       340px !default;
+
+$navbar-default-color:             #777 !default;
+$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color:                #777 !default;
+$navbar-default-link-hover-color:          #333 !default;
+$navbar-default-link-hover-bg:             transparent !default;
+$navbar-default-link-active-color:         #555 !default;
+$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color:       #ccc !default;
+$navbar-default-link-disabled-bg:          transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg:            transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg:           #ddd !default;
+$navbar-default-toggle-icon-bar-bg:        #888 !default;
+$navbar-default-toggle-border-color:       #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color:                      lighten($gray-light, 15%) !default;
+$navbar-inverse-bg:                         #222 !default;
+$navbar-inverse-border:                     darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color:                 lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color:           #fff !default;
+$navbar-inverse-link-hover-bg:              transparent !default;
+$navbar-inverse-link-active-color:          $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg:             darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color:        #444 !default;
+$navbar-inverse-link-disabled-bg:           transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color:          #fff !default;
+$navbar-inverse-brand-hover-bg:             transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg:            #333 !default;
+$navbar-inverse-toggle-icon-bar-bg:         #fff !default;
+$navbar-inverse-toggle-border-color:        #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding:                          10px 15px !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius:                   $border-radius-base !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border:                    #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border:                         $pagination-border !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding:              30px !default;
+$jumbotron-color:                inherit !default;
+$jumbotron-bg:                   $gray-lighter !default;
+$jumbotron-heading-color:        inherit !default;
+$jumbotron-font-size:            ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size:    ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width:           200px !default;
+//** Tooltip text color
+$tooltip-color:               #fff !default;
+//** Tooltip background color
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width:         5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg:                          #fff !default;
+//** Popover maximum width
+$popover-max-width:                   276px !default;
+//** Popover border color
+$popover-border-color:                rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color:       #ccc !default;
+
+//** Popover title background color
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width:                 10px !default;
+//** Popover arrow color
+$popover-arrow-color:                 $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color:           fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color:  darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg:            $gray-light !default;
+//** Primary label background color
+$label-primary-bg:            $brand-primary !default;
+//** Success label background color
+$label-success-bg:            $brand-success !default;
+//** Info label background color
+$label-info-bg:               $brand-info !default;
+//** Warning label background color
+$label-warning-bg:            $brand-warning !default;
+//** Danger label background color
+$label-danger-bg:             $brand-danger !default;
+
+//** Default label text color
+$label-color:                 #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color:      #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding:         15px !default;
+//** Modal title line-height
+$modal-title-line-height:     $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg:                             #fff !default;
+//** Modal content border color
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color:          #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg:           #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity:      .5 !default;
+//** Modal header border color
+$modal-header-border-color:   #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius-base !default;
+$alert-link-font-weight:      bold !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg:                 #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color:          #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius:      $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg:             $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg:     $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg:     $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg:      $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg:        $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg:                 #fff !default;
+//** `.list-group-item` border color
+$list-group-border:             #ddd !default;
+//** List group border radius
+$list-group-border-radius:      $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg:           #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color:       $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg:          $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border:      $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color:      $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg:         $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg:                    #fff !default;
+$panel-body-padding:          15px !default;
+$panel-heading-padding:       10px 15px !default;
+$panel-footer-padding:        $panel-heading-padding !default;
+$panel-border-radius:         $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border:          #ddd !default;
+$panel-footer-bg:             #f5f5f5 !default;
+
+$panel-default-text:          $gray-dark !default;
+$panel-default-border:        #ddd !default;
+$panel-default-heading-bg:    #f5f5f5 !default;
+
+$panel-primary-text:          #fff !default;
+$panel-primary-border:        $brand-primary !default;
+$panel-primary-heading-bg:    $brand-primary !default;
+
+$panel-success-text:          $state-success-text !default;
+$panel-success-border:        $state-success-border !default;
+$panel-success-heading-bg:    $state-success-bg !default;
+
+$panel-info-text:             $state-info-text !default;
+$panel-info-border:           $state-info-border !default;
+$panel-info-heading-bg:       $state-info-bg !default;
+
+$panel-warning-text:          $state-warning-text !default;
+$panel-warning-border:        $state-warning-border !default;
+$panel-warning-heading-bg:    $state-warning-bg !default;
+
+$panel-danger-text:           $state-danger-text !default;
+$panel-danger-border:         $state-danger-border !default;
+$panel-danger-heading-bg:     $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding:           4px !default;
+//** Thumbnail background color
+$thumbnail-bg:                $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border:            #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius:     $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color:     $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding:   9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg:                     #f5f5f5 !default;
+$well-border:                 darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-font-weight:           bold !default;
+$badge-line-height:           1 !default;
+$badge-border-radius:         10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical:   8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg:                 #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color:              #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:       $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator:          "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color:                  #c7254e !default;
+$code-bg:                     #f9f2f4 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f5f5f5 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted:                  $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color:           $gray-light !default;
+//** Headings small color
+$headings-small-color:        $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color:      $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color:     $gray-lighter !default;
+//** Page header border color
+$page-header-border-color:    $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset:        $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint:    $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border:                   $gray-lighter !default;
+
+// BITTERS VARIABLES
+
+// Breakpoints
+$medium-screen: 600px;
+$large-screen: 900px;
+
+// Typography
+$base-font-family: $helvetica;
+$heading-font-family: $base-font-family;
+
+// Font Sizes
+$base-font-size: 1em;
+
+// Line height
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Other Sizes
+$base-border-radius: 0px;
+$base-spacing: $base-line-height * 1em;
+$small-spacing: $base-spacing / 2;
+$base-z-index: 0;
+
+// Colors
+$blue: #1565c0;
+$dark-gray: #333;
+$medium-gray: #999;
+$light-gray: #ddd;
+
+// Font Colors
+$base-font-color: $dark-gray;
+$action-color: $blue;
+
+// Border
+$base-border-color: $light-gray;
+$base-border: 1px solid $base-border-color;
+
+// Background Colors
+$base-background-color: #fff;
+$secondary-background-color: tint($base-border-color, 75%);
+
+// Forms
+$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
+$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -5%, $alpha: -0.3);
+
+// Animations
+$base-duration: 150ms;
+$base-timing: ease;
+
+// Perficient Digital Variables
+$heading-font-face: 'HalisR', sans-serif;
+$primary-font-face: 'Lato', sans-serif;
+
+$black: #000000;
+$primary-color: #202526;                        // Dark Gray
+$secondary-color: lighten($primary-color, 31%); // Gray
+$accent-color-1: #EF0734;                       // Perficient Digital Red
+$accent-color-2: #FFF200;                       // Perficient Digital Yellow
+$accent-color-3: #2AB68F;                       // Perficient Digital Green
+$white: #FFFFFF;
+
+$primary-padding:1.5rem 3rem 1rem;
+
+// Breakpoints Minimum Resolution
+$tablet: 48em;  // tablet
+$desktop: 64em; // desktop
+
+// Bourbon Omega Reset
+
+@mixin omega-reset($nth) {
+  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
+  &:nth-child(#{$nth}+1) { clear: none }
+}
--- a/app/assets/stylesheets/mailers/custom-mailer-styles.scss
+++ b/app/assets/stylesheets/mailers/custom-mailer-styles.scss
@ -0,0 +1,47 @@
+a {
+  text-decoration: underline;
+  color: $success-color;
+}
+
+.email-container {
+  .email-heading th {
+    font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
+    .prft-slash {
+      font-size: 100px;
+      font-weight: 200;
+      color: $success-color;
+      vertical-align: middle;
+    }
+    .email-title {
+      text-transform: uppercase;
+      font-weight: 700;
+      font-size:18px;
+      vertical-align: sub;
+    }
+  }
+  .email-body * {
+    font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
+    font-size: 16px;
+    line-height: 1.5em;
+    padding-bottom: 20px;
+    font-weight:300;
+    word-break: break-word;
+    strong {
+      font-weight:bold;
+    }
+  }
+  .email-copyright {
+    font-family: 'Lato', Helvetica Neue, Helvetica, Ariel, sans-serif;
+    font-size: 10px;
+    color: #909090;
+    vertical-align: bottom;
+  }
+  .email-logo {
+    text-align: right;
+    vertical-align: bottom;
+  }
+  .email-bg {
+    background:#fef035 !important;
+    background-color:#fef035 !important;
+  }
+}
--- a/app/assets/stylesheets/mailers/foundation_global_overrides.scss
+++ b/app/assets/stylesheets/mailers/foundation_global_overrides.scss
@ -0,0 +1,6 @@
+// foundation overrides
+
+$success-color: #EF0734;
+$global-width: 600px;
+$body-font-family: inherit;
+$body-background: #ffffff;
--- a/app/assets/stylesheets/mailers/foundation_vendor_manifest.scss
+++ b/app/assets/stylesheets/mailers/foundation_vendor_manifest.scss
@ -0,0 +1,18 @@
+@import 'foundation-emails/scss/util/util',
+        'foundation-emails/scss/global',
+
+        'foundation_global_overrides',
+
+        'foundation-emails/scss/components/normalize',
+        'foundation-emails/scss/grid/grid',
+        'foundation-emails/scss/grid/block-grid',
+        'foundation-emails/scss/components/alignment',
+        'foundation-emails/scss/components/visibility',
+        'foundation-emails/scss/components/typography',
+        'foundation-emails/scss/components/button',
+        'foundation-emails/scss/components/callout',
+        'foundation-emails/scss/components/thumbnail',
+        'foundation-emails/scss/components/menu',
+        'foundation-emails/scss/components/outlook-first',
+        'foundation-emails/scss/components/media-query';
+@import 'custom-mailer-styles';
--- a/app/assets/stylesheets/molecules/_admin.scss
+++ b/app/assets/stylesheets/molecules/_admin.scss
@ -0,0 +1,31 @@
+main {
+  @include outer-container;
+  .saveadd {
+    @include span-columns(12);
+  }
+  .savecancel {
+    @include span-columns(12);
+  }
+  label.error {
+    text-align: right;
+    padding-top: 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media only screen and (min-width: $tablet) {
+  main {
+    @include outer-container;
+    .viewall {
+      text-align: right;
+    }
+    .saveadd {
+      @include span-columns(6);
+    }
+    .savecancel {
+      @include span-columns(6);
+      @include omega();
+      text-align: right;
+    }
+  }
+}
--- a/app/assets/stylesheets/molecules/_buttongroups.scss
+++ b/app/assets/stylesheets/molecules/_buttongroups.scss
@ -0,0 +1,26 @@
+.btn-group {
+  > button {
+    float: left;
+    background-color: $white;
+    color: $secondary-color;
+    border-width: 1px 0;
+    border-style: solid;
+    border-color: $secondary-color;
+    margin: 0;
+    &:first-child {
+      border-radius: 999px 0 0 999px;
+      border-width:1px 0 1px 1px;
+    }
+    &:last-child {
+      border-radius: 0 999px 999px 0;
+      border-width:1px 1px 1px 0;
+    }
+    &.selected {
+      background-color: $primary-color;
+      color:$white;
+    }
+  }
+  &:after {
+    @include clearfix;
+  }
+}
--- a/app/assets/stylesheets/molecules/_buttons.scss
+++ b/app/assets/stylesheets/molecules/_buttons.scss
@ -0,0 +1,110 @@
+#{$all-buttons}, .btn {
+  appearance: none;
+  background-color: $primary-color;
+  border: 0;
+  border-radius: $base-border-radius;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: $primary-font-face;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  letter-spacing: 0.2rem;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 600;
+  line-height: 1;
+  padding: 1.2em 2em;
+  text-decoration: none;
+  transition: background-color $base-duration $base-timing;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+
+
+  &:hover,
+  &:focus {
+    &:not([disabled]) {
+      background-color: $secondary-color;
+      color: #fff;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+}
+.secondary-btn,
+input[type="submit"].secondary-btn,
+button.secondary-btn {
+  background-color: $secondary-color;
+}
+
+.tertiary-btn,
+input[type="submit"].tertiary-btn,
+button.tertiary-btn {
+  background-color: transparent;
+  color: $primary-color;
+  border: 1px solid $primary-color;
+}
+
+.button-save {
+  display: none;
+}
+
+.button-cancel,
+.tertiary-btn.button-cancel {
+  color: #ef0734;
+  border: 1px solid #ef0734;
+  display: none;
+
+  &:hover {
+    &:not([disabled]) {
+      color: #fff;
+      background-color: #ef0734;
+    }
+  }
+}
+
+.answer-buttons {
+  .button-cancel {
+    margin-left: .5rem;
+  }
+}
+
+.disabled-button {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: default;
+}
+
+.button-wrap {
+  margin-top: 3rem;
+}
+
+// JS-enabled styles
+html.no-js {
+  .tertiary-btn.button-edit {
+    border: none;
+    text-decoration: underline;
+  }
+  .button-save,
+  .button-cancel {
+    display: none;
+  }
+}
+html.js {
+  .button-edit {
+    @extend .btn;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  html.no-js {
+    .tertiary-btn.button-edit {
+      display: inline-block;
+      padding-top: .75rem;
+    }
+  }
+}
--- a/Show More
+++ b/Show More