diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..93001eb5c
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..1704bc3c4
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+# git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-journal
+
+# Ignore all logfiles and tempfiles.
+/log/*
+/tmp/*
+!/log/.keep
+!/tmp/.keep
+
+# Ignore Byebug command history file.
+.byebug_history
+
+# Ignore ENV full of secrets
+.env
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 000000000..f3dd35163
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,61 @@
+source 'https://rubygems.org'
+
+gem "binding_of_caller"
+gem 'pg', group: :production
+gem 'rails_12factor', group: :production
+
+# API GEMS
+gem 'httparty'
+gem 'foundation-rails'
+gem 'awesome_print'
+
+# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
+gem 'rails', '~> 5.0.0', '>= 5.0.0.1'
+
+# Use Puma as the app server
+gem 'puma', '~> 3.0'
+# Use SCSS for stylesheets
+gem 'sass-rails', '~> 5.0'
+# Use Uglifier as compressor for JavaScript assets
+gem 'uglifier', '>= 1.3.0'
+# Use CoffeeScript for .coffee assets and views
+gem 'coffee-rails', '~> 4.2'
+# See https://github.com/rails/execjs#readme for more supported runtimes
+# gem 'therubyracer', platforms: :ruby
+
+# Use jquery as the JavaScript library
+gem 'jquery-rails'
+# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
+gem 'turbolinks', '~> 5'
+# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
+gem 'jbuilder', '~> 2.5'
+# Use Redis adapter to run Action Cable in production
+# gem 'redis', '~> 3.0'
+# Use ActiveModel has_secure_password
+# gem 'bcrypt', '~> 3.1.7'
+
+# Use Capistrano for deployment
+# gem 'capistrano-rails', group: :development
+
+group :development, :test do
+ # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+ gem 'byebug', platform: :mri
+ gem 'dotenv-rails'
+ gem 'better_errors'
+ gem 'minitest-vcr'
+ gem 'webmock'
+ # Use sqlite3 as the database for Active Record
+ # gem 'sqlite3'
+end
+
+group :development do
+ # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
+ gem 'web-console'
+ gem 'listen', '~> 3.0.5'
+ # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
+ gem 'spring'
+ gem 'spring-watcher-listen', '~> 2.0.0'
+end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 000000000..35aea5d7c
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,231 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ actioncable (5.0.0.1)
+ actionpack (= 5.0.0.1)
+ nio4r (~> 1.2)
+ websocket-driver (~> 0.6.1)
+ 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.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.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.1)
+ activesupport (= 5.0.0.1)
+ globalid (>= 0.3.6)
+ 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.1)
+ concurrent-ruby (~> 1.0, >= 1.0.2)
+ i18n (~> 0.7)
+ minitest (~> 5.1)
+ tzinfo (~> 1.1)
+ addressable (2.4.0)
+ arel (7.1.4)
+ awesome_print (1.7.0)
+ babel-source (5.8.35)
+ babel-transpiler (0.7.0)
+ babel-source (>= 4.0, < 6)
+ execjs (~> 2.0)
+ 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)
+ builder (3.2.2)
+ byebug (9.0.6)
+ coderay (1.1.1)
+ coffee-rails (4.2.1)
+ coffee-script (>= 2.2.0)
+ railties (>= 4.0.0, < 5.2.x)
+ coffee-script (2.4.1)
+ coffee-script-source
+ execjs
+ coffee-script-source (1.10.0)
+ concurrent-ruby (1.0.2)
+ crack (0.4.3)
+ safe_yaml (~> 1.0.0)
+ debug_inspector (0.0.2)
+ dotenv (2.1.1)
+ dotenv-rails (2.1.1)
+ dotenv (= 2.1.1)
+ railties (>= 4.0, < 5.1)
+ erubis (2.7.0)
+ execjs (2.7.0)
+ ffi (1.9.14)
+ foundation-rails (6.2.4.0)
+ railties (>= 3.1.0)
+ sass (>= 3.3.0, < 3.5)
+ sprockets-es6 (>= 0.9.0)
+ globalid (0.3.7)
+ activesupport (>= 4.1.0)
+ hashdiff (0.3.0)
+ httparty (0.14.0)
+ multi_xml (>= 0.5.2)
+ i18n (0.7.0)
+ jbuilder (2.6.0)
+ activesupport (>= 3.0.0, < 5.1)
+ multi_json (~> 1.2)
+ jquery-rails (4.2.1)
+ rails-dom-testing (>= 1, < 3)
+ railties (>= 4.2.0)
+ thor (>= 0.14, < 2.0)
+ listen (3.0.8)
+ rb-fsevent (~> 0.9, >= 0.9.4)
+ rb-inotify (~> 0.9, >= 0.9.7)
+ loofah (2.0.3)
+ nokogiri (>= 1.5.9)
+ mail (2.6.4)
+ mime-types (>= 1.16, < 4)
+ 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)
+ minispec-metadata (2.0.0)
+ minitest
+ minitest (5.9.1)
+ minitest-vcr (1.4.0)
+ minispec-metadata (~> 2.0)
+ minitest (>= 4.7.5)
+ vcr (>= 2.9)
+ multi_json (1.12.1)
+ multi_xml (0.5.5)
+ nio4r (1.2.1)
+ nokogiri (1.6.8.1)
+ mini_portile2 (~> 2.1.0)
+ pg (0.19.0)
+ puma (3.6.0)
+ rack (2.0.1)
+ rack-test (0.6.3)
+ rack (>= 1.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.1)
+ sprockets-rails (>= 2.0.0)
+ rails-dom-testing (2.0.1)
+ activesupport (>= 4.2.0, < 6.0)
+ nokogiri (~> 1.6.0)
+ rails-html-sanitizer (1.0.3)
+ loofah (~> 2.0)
+ rails_12factor (0.0.3)
+ rails_serve_static_assets
+ rails_stdout_logging
+ rails_serve_static_assets (0.0.5)
+ rails_stdout_logging (0.0.5)
+ 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)
+ rake (11.3.0)
+ rb-fsevent (0.9.8)
+ rb-inotify (0.9.7)
+ ffi (>= 0.5.0)
+ safe_yaml (1.0.4)
+ sass (3.4.22)
+ sass-rails (5.0.6)
+ railties (>= 4.0.0, < 6)
+ sass (~> 3.1)
+ sprockets (>= 2.8, < 4.0)
+ sprockets-rails (>= 2.0, < 4.0)
+ tilt (>= 1.1, < 3)
+ spring (2.0.0)
+ activesupport (>= 4.2)
+ spring-watcher-listen (2.0.1)
+ listen (>= 2.7, < 4.0)
+ spring (>= 1.2, < 3.0)
+ sprockets (3.7.0)
+ concurrent-ruby (~> 1.0)
+ rack (> 1, < 3)
+ sprockets-es6 (0.9.2)
+ babel-source (>= 5.8.11)
+ babel-transpiler
+ sprockets (>= 3.0.0)
+ sprockets-rails (3.2.0)
+ actionpack (>= 4.0)
+ activesupport (>= 4.0)
+ sprockets (>= 3.0.0)
+ thor (0.19.1)
+ thread_safe (0.3.5)
+ tilt (2.0.5)
+ turbolinks (5.0.1)
+ turbolinks-source (~> 5)
+ turbolinks-source (5.0.0)
+ tzinfo (1.2.2)
+ thread_safe (~> 0.1)
+ uglifier (3.0.3)
+ execjs (>= 0.3.0, < 3)
+ vcr (3.0.3)
+ web-console (3.4.0)
+ actionview (>= 5.0)
+ activemodel (>= 5.0)
+ debug_inspector
+ railties (>= 5.0)
+ webmock (2.1.0)
+ addressable (>= 2.3.6)
+ crack (>= 0.3.2)
+ hashdiff
+ websocket-driver (0.6.4)
+ websocket-extensions (>= 0.1.0)
+ websocket-extensions (0.1.2)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ awesome_print
+ better_errors
+ binding_of_caller
+ byebug
+ coffee-rails (~> 4.2)
+ dotenv-rails
+ foundation-rails
+ httparty
+ jbuilder (~> 2.5)
+ jquery-rails
+ listen (~> 3.0.5)
+ minitest-vcr
+ pg
+ puma (~> 3.0)
+ rails (~> 5.0.0, >= 5.0.0.1)
+ rails_12factor
+ sass-rails (~> 5.0)
+ spring
+ spring-watcher-listen (~> 2.0.0)
+ turbolinks (~> 5)
+ tzinfo-data
+ uglifier (>= 1.3.0)
+ web-console
+ webmock
+
+BUNDLED WITH
+ 1.13.6
diff --git a/README.md b/README.md
index afd643dd4..581f5cb99 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,33 @@
+Heroku Live: https://otter-muncher.herokuapp.com/
+
+# Reflection
+
+- What do you understand better after doing this project?
+ - I learnt more about applying API to website, especially understanding on query parameters, and how this connects to our previous learning of model and database:
+ - completed all search, search result and show features using API
+ - filter search feature by health label and diet label using checkbox
+ - manually coded pagination feature without use gem
+ - Can show a 'sliding' pagination bar for previous 5 and next 5 pages to handle 1000+ results if needed. Knowing our developer account can only return a limited number of 100 recipes, I commented out this part for better user experience.
+ - When implement the +5 and -5 pagination bar, it is hard to stop pagination without reaching the last page because the API does not return a finite number for search result(1000 and more).
+ - I will try to implement pagination gem next time as it seems to handle better on the above described last page pagination situation
+ - change return recipe result to 9 per page for better display(which can be easily changed to any number in PAGE_SIZE in api wrapper).
+ - added API attribution in footer
+ - foundation framework: responsive, pagination, label, table, checkbox, go back button, sea otter theme design.
+
+
+- What do you want more practice with?
+ - I need to practice more on: API and controller tesing, try more complex foundation grid(e.g. 5 recipes in a row), try pagination gem, and try Google Auth next time:
+ - I did not attempt Google OAuth and save favorite feature this time due to time constrain. I did briefly think about how to implement these features.
+ - Google OAuth: will be similar to Github OAuth. will be nice to go through it if has the opportunity.
+ - Save favorites: create user and favorites model. model relation: User has many favorites. I can save and access user & favorites by sessions[user_id].
+
+ - under construction: testing on API and controller. I will update and merge my testing branch later.
+
+
+- What is something you saw done differently?
+My deskmate Jessica did great job on making the search bar available across pages, which definitely increases user experience. She also implemented api pigination gem for pages which I did not try this time. Her website also has very nice details like hover on recipe will change the recipe background color, etc.
+
+
# Recipe API Consumer
## Learning Goals:
diff --git a/Rakefile b/Rakefile
new file mode 100644
index 000000000..e85f91391
--- /dev/null
+++ b/Rakefile
@@ -0,0 +1,6 @@
+# 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.
+
+require_relative 'config/application'
+
+Rails.application.load_tasks
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 000000000..0764d0cbb
Binary files /dev/null and b/app/.DS_Store differ
diff --git a/app/assets/.DS_Store b/app/assets/.DS_Store
new file mode 100644
index 000000000..7ae2a74f5
Binary files /dev/null and b/app/assets/.DS_Store differ
diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
new file mode 100644
index 000000000..b16e53d6d
--- /dev/null
+++ b/app/assets/config/manifest.js
@@ -0,0 +1,3 @@
+//= link_tree ../images
+//= link_directory ../javascripts .js
+//= link_directory ../stylesheets .css
diff --git a/app/assets/images/.keep b/app/assets/images/.keep
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
new file mode 100644
index 000000000..b12018d09
--- /dev/null
+++ b/app/assets/javascripts/application.js
@@ -0,0 +1,16 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery_ujs
+//= require turbolinks
+//= require_tree .
diff --git a/app/assets/javascripts/cable.js b/app/assets/javascripts/cable.js
new file mode 100644
index 000000000..71ee1e66d
--- /dev/null
+++ b/app/assets/javascripts/cable.js
@@ -0,0 +1,13 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the rails generate channel command.
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+ this.App || (this.App = {});
+
+ App.cable = ActionCable.createConsumer();
+
+}).call(this);
diff --git a/app/assets/javascripts/channels/.keep b/app/assets/javascripts/channels/.keep
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/assets/javascripts/homepages.coffee b/app/assets/javascripts/homepages.coffee
new file mode 100644
index 000000000..24f83d18b
--- /dev/null
+++ b/app/assets/javascripts/homepages.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
new file mode 100644
index 000000000..932c72f1a
--- /dev/null
+++ b/app/assets/stylesheets/application.css
@@ -0,0 +1,130 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * 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 url('foundation.css');
+
+/*===========header & footer=============*/
+.header_box{
+ text-align: center;
+ opacity: 0.6;
+ width: 100%;
+ border-bottom: 1px solid lightgrey;
+ padding-top: 1%;
+ padding-bottom: 1%;
+ background-color: white;
+}
+
+.header_text{
+ font-family:"Dancing Script";
+ font-weight: bold;
+ color: #E15554;
+}
+
+.sub_header{
+ font-family:"PT Sans";
+ font-weight: bold;
+}
+
+.footer{
+ text-align: right;
+ font-family: "PT Sans";
+ font-size: 1.5vw;
+ color: grey;
+ position:relative;
+ bottom: -5vw;
+}
+
+.api_logo{
+ width: 6%;
+ height: 4%;
+}
+/*===========Index Page=============*/
+
+.home_body{
+ background-color: white;
+ background-image: url("https://s-media-cache-ak0.pinimg.com/originals/26/ba/c3/26bac33e1f8d5105db0000cef734fec3.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.search_label{
+ font-family: "Anton";
+ font-size: 5vw;
+ color: #E15554;
+ margin-left: 23%;
+ margin-bottom: 10%;
+ text-transform:uppercase;
+}
+.search_bar{
+ margin-top: 5%;
+ position:relative;
+ left: 25%;
+ opacity: 0.8;
+}
+
+.search_button{
+ width: 10%;
+ position: relative;
+ top: -3.5rem;
+ left: 75%;
+ opacity: 0.8;
+}
+.check_label{
+ color: #E15554;
+ font-family: "PT Sans";
+ font-weight: bold;
+ width: 10%;
+ display: inline;
+}
+.check_boxes{
+ margin-left: 30%;
+ margin-right: 30%;
+ padding-left: 3vw;
+ opacity: 0.8;
+ background-color: white;
+ border-radius: 1vw;
+}
+
+/*===========Search(Result) Page=============*/
+
+.page_body{
+ background-color: white;
+ margin-top: 5%;
+}
+.recipe_box{
+ box-shadow: 10px 10px 10px #888888;
+ background-color: white;
+ text-align: center;
+}
+.recipe_photo{
+ padding-top: 5%;
+}
+
+/*===========Show Page=============*/
+.recipe_title{
+ font-family: "Anton";
+ text-transform:uppercase;
+ color: #E15554;
+ text-align: center;
+}
+.show_photo{
+ width: 100%;
+ padding-left: 30%;
+ padding-right: 30%;
+}
+.label{
+ position:relative;;
+ left: 20%;
+}
diff --git a/app/assets/stylesheets/foundation.css b/app/assets/stylesheets/foundation.css
new file mode 100644
index 000000000..66aca962d
--- /dev/null
+++ b/app/assets/stylesheets/foundation.css
@@ -0,0 +1,4194 @@
+@charset "UTF-8";
+/**
+ * Foundation for Sites by ZURB
+ * Version 6.2.3
+ * foundation.zurb.com
+ * Licensed under MIT Open Source
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ * without disabling user zoom.
+ */
+html {
+ font-family: sans-serif;
+ /* 1 */
+ -ms-text-size-adjust: 100%;
+ /* 2 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */ }
+
+/**
+ * Remove default margin.
+ */
+body {
+ margin: 0; }
+
+/* HTML5 display definitions
+ ========================================================================== */
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block; }
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+audio,
+canvas,
+progress,
+video {
+ display: inline-block;
+ /* 1 */
+ vertical-align: baseline;
+ /* 2 */ }
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+audio:not([controls]) {
+ display: none;
+ height: 0; }
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+[hidden],
+template {
+ display: none; }
+
+/* Links
+ ========================================================================== */
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+a {
+ background-color: transparent; }
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+a:active,
+a:hover {
+ outline: 0; }
+
+/* Text-level semantics
+ ========================================================================== */
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+abbr[title] {
+ border-bottom: 1px dotted; }
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+b,
+strong {
+ font-weight: bold; }
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+dfn {
+ font-style: italic; }
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0; }
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+ background: #ff0;
+ color: #000; }
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+ font-size: 80%; }
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline; }
+
+sup {
+ top: -0.5em; }
+
+sub {
+ bottom: -0.25em; }
+
+/* Embedded content
+ ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+img {
+ border: 0; }
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+svg:not(:root) {
+ overflow: hidden; }
+
+/* Grouping content
+ ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+figure {
+ margin: 1em 40px; }
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+ box-sizing: content-box;
+ height: 0; }
+
+/**
+ * Contain overflow in all browsers.
+ */
+pre {
+ overflow: auto; }
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em; }
+
+/* Forms
+ ========================================================================== */
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+ margin: 0;
+ /* 3 */ }
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+button {
+ overflow: visible; }
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+button,
+select {
+ text-transform: none; }
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button;
+ /* 2 */
+ cursor: pointer;
+ /* 3 */ }
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+button[disabled],
+html input[disabled] {
+ cursor: not-allowed; }
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0; }
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+input {
+ line-height: normal; }
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box;
+ /* 1 */
+ padding: 0;
+ /* 2 */ }
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto; }
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+input[type="search"] {
+ -webkit-appearance: textfield;
+ /* 1 */
+ box-sizing: content-box;
+ /* 2 */ }
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none; }
+
+/**
+ * Define consistent border, margin, and padding.
+ * [NOTE] We don't enable this ruleset in Foundation, because we want the