diff --git a/Gruntfile.js b/Gruntfile.js
index b4a39cb..977531b 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -32,8 +32,7 @@ module.exports = function(grunt) {
           '<%= meta.srcPath %>js/push.js',
           '<%= meta.srcPath %>js/segmented-controllers.js',
           '<%= meta.srcPath %>js/sliders.js',
-          '<%= meta.srcPath %>js/toggles.js',
-          '<%= meta.srcPath %>js/alerts.js'
+          '<%= meta.srcPath %>js/toggles.js'
         ],
         dest: '<%= meta.distPath %><%= pkg.name %>.js'
       }
@@ -47,8 +46,10 @@ module.exports = function(grunt) {
       dist: {
         files: {
           '<%= meta.distPath %><%= pkg.name %>.css': '<%= meta.srcPath %>sass/ratchet.scss',
-          '<%= meta.distPath %>ratchet-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss',
-          '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss'
+          '<%= meta.docsPath %>/css/docs.css': '<%= meta.srcPath %>sass/docs.scss',
+          '<%= meta.distPath %><%= pkg.name %>-theme.css': '<%= meta.srcPath %>sass/theme-classic.scss',
+          '<%= meta.distPath %>ios-theme.css': '<%= meta.srcPath %>sass/theme-ios.scss',
+          '<%= meta.distPath %>android-theme.css': '<%= meta.srcPath %>sass/theme-android.scss'
         }
       }
     },
diff --git a/README.md b/README.md
index 6df1d51..ac15c4a 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
-# Ratchet v2.0 WIP
+# Ratchet v2.0 WIP [![devDependencies](https://david-dm.org/maker/ratchet/dev-status.png)](https://david-dm.org/maker/ratchet#info=devDependencies)
 
-Prototype mobile apps with simple HTML, CSS and JS components.
+Prototype mobile apps with simple HTML, CSS, and JS components.
 
 ## Getting Started
 
-- Clone the repo with `git clone https://github.com/maker/ratchet.git` or just [download](http://maker.github.io/ratchet/ratchet.zip) the bundled CSS and JS
+- Clone the repo with `git clone https://github.com/maker/ratchet.git` or just [download](http://github.com/maker/ratchet/archive/v2.0.0.zip) the bundled CSS and JS
 - [Read the docs](http://maker.github.io/ratchet) to learn about the components and how to get a prototype on your phone
 - We will have example apps to check out very soon!
 
diff --git a/_includes/header.html b/_includes/header.html
index 764bdec..f00b392 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -6,9 +6,12 @@
 <link rel="shortcut icon" href="{{ page.base_url }}favicon.ico">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
 <link rel="stylesheet" href="{{ page.base_url }}dist/ratchet.css">
+<!-- <link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css"> -->
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
+
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ page.base_url }}docs-assets/img/apple-touch-icon-114x114.png">
diff --git a/dist/android-theme.css b/dist/android-theme.css
new file mode 100644
index 0000000..01f1f21
--- /dev/null
+++ b/dist/android-theme.css
@@ -0,0 +1,277 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+.content {
+  background: #111111;
+  background: -moz-linear-gradient(top, #111111 0%, #2b2b2b 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #2b2b2b));
+  background: -webkit-linear-gradient(top, #111111 0%, #2b2b2b 100%);
+  background: -o-linear-gradient(top, #111111 0%, #2b2b2b 100%);
+  background: -ms-linear-gradient(top, #111111 0%, #2b2b2b 100%);
+  background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 );
+}
+
+[class*="bar-"] {
+  height: 50px;
+  background-color: #111111;
+  border-bottom: 1px solid #565656;
+}
+[class*="bar-"].bar-header-secondary {
+  top: 51px;
+}
+
+.bar-tab {
+  height: 70px;
+  border-top: 1px solid #565656;
+  border-bottom: 0;
+}
+
+.title {
+  position: static;
+  padding-left: 10px;
+  line-height: 50px;
+  color: white;
+  text-align: left;
+}
+
+.popover .bar-nav {
+  border-bottom: 1px solid #565656;
+}
+
+.table-view .table-view-cell {
+  border-bottom: 1px solid #565656;
+}
+.table-view .table-view-cell:last-child {
+  background-image: none;
+}
+.table-view .table-view-divider {
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0;
+  border-radius: 6px;
+}
+
+input[type=search]:focus {
+  text-align: left;
+}
+
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+.input-group {
+  padding: 0;
+}
+
+.input-group input {
+  border: 0;
+}
+
+.input-group input:last-child {
+  background-image: none;
+}
+
+.input-row {
+  border-bottom: 0;
+}
+
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+[class*="button"] {
+  border: 1px solid #565656;
+  color: white;
+  background-color: #111111;
+  border-radius: 3px;
+}
+[class*="button"]:active, [class*="button"].active {
+  color: #fff;
+  background-color: white;
+}
+
+[class*="bar-"] [class*="button"] {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+[class*="bar-"] .button-link {
+  padding: 0;
+  color: #33b5e5;
+  line-height: 50px;
+}
+[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active {
+  color: #1a9bcb;
+}
+
+.button-primary {
+  color: #fff;
+  border: 1px solid #33b5e5;
+  background-color: #33b5e5;
+}
+.button-primary:active, .button-primary.active {
+  border: 1px solid #1a9bcb;
+  background-color: #1a9bcb;
+}
+
+.button-positive {
+  color: #fff;
+  border: 1px solid #81c700;
+  background-color: #81c700;
+}
+.button-positive:active, .button-positive.active {
+  border: 1px solid #609400;
+  background-color: #609400;
+}
+
+.button-negative {
+  color: #fff;
+  border: 1px solid #f20754;
+  background-color: #f20754;
+}
+.button-negative:active, .button-negative.active {
+  border: 1px solid #c00643;
+  background-color: #c00643;
+}
+
+.button-outlined {
+  background-color: transparent;
+}
+.button-outlined.button-primary {
+  color: #33b5e5;
+}
+.button-outlined.button-positive {
+  color: #81c700;
+}
+.button-outlined.button-negative {
+  color: #f20754;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+  color: #fff;
+}
+
+.button-link {
+  color: #33b5e5;
+  background-color: transparent;
+  border: none;
+}
+.button-link:active, .button-link.active {
+  color: #1a9bcb;
+  background-color: transparent;
+}
+
+.bar-nav .button-link {
+  color: #33b5e5;
+}
+.bar-nav .button-link:active {
+  color: #33b5e5;
+  opacity: .6;
+}
+
+[class*="badge"].badge-inverted {
+  color: white;
+}
+
+.badge-primary {
+  color: #fff;
+  background-color: #33b5e5;
+}
+.badge-primary.badge-inverted {
+  color: #33b5e5;
+}
+
+.badge-positive {
+  color: #fff;
+  background-color: #81c700;
+}
+.badge-positive.badge-inverted {
+  color: #81c700;
+}
+
+.badge-negative {
+  color: #fff;
+  background-color: #f20754;
+}
+.badge-negative.badge-inverted {
+  color: #f20754;
+}
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid #33b5e5;
+  border-radius: 3px;
+}
+.segmented-controller li {
+  border-left: 1px solid #33b5e5;
+}
+.segmented-controller li > a {
+  padding-top: 9px;
+  padding-bottom: 10px;
+  color: #33b5e5;
+}
+.segmented-controller li.selected {
+  background-color: #33b5e5;
+}
+
+.popover {
+  border-radius: 12px;
+}
+.popover:after {
+  border-bottom: 15px solid #111111;
+}
+
+.toggle .toggle-handle {
+  border: 1px solid #565656;
+}
+.toggle:active .toggle-handle {
+  width: 35px;
+}
+.toggle.active {
+  border: 2px solid #81c700;
+  background-color: #81c700;
+}
+.toggle.active .toggle-handle {
+  border-color: #81c700;
+}
diff --git a/dist/ios-theme.css b/dist/ios-theme.css
new file mode 100644
index 0000000..0c54f6d
--- /dev/null
+++ b/dist/ios-theme.css
@@ -0,0 +1,350 @@
+/*
+ * =====================================================
+ * Ratchet v2.0.0
+ * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Licensed under http://www.opensource.org/licenses/MIT
+ *
+ * Designed and built by @connors, @dhg, and @fat.
+ * =====================================================
+ */
+
+.content {
+  background-color: #efeff4;
+}
+
+[class*="bar-"] {
+  border-bottom: 0;
+  background-color: rgba(247, 247, 247, 0.98);
+  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+}
+[class*="bar-"].bar-header-secondary {
+  top: 44px;
+}
+[class*="bar-"].bar-footer-secondary {
+  bottom: 44px;
+}
+[class*="bar-"].bar-footer-secondary-tab {
+  bottom: 50px;
+}
+
+.bar-tab {
+  border-top: 0;
+  -webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+  box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
+}
+
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.table-view .table-view-cell {
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+.table-view .table-view-cell:last-child {
+  background-image: none;
+}
+.table-view .table-view-divider {
+  border-top: 0;
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 0 100%, 0 0%;
+  background-repeat: no-repeat;
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+.card .table-view li:last-child {
+  background-image: none;
+}
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0;
+  border-radius: 6px;
+}
+
+input[type=search]:focus {
+  text-align: left;
+}
+
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+.input-group {
+  padding: 0;
+}
+
+.input-group input {
+  border: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+
+.input-group input:last-child {
+  background-image: none;
+}
+
+.input-row {
+  border-bottom: 0;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
+  background-position: 15px 100%;
+  background-repeat: no-repeat;
+}
+
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+[class*="button"] {
+  border: 1px solid #929292;
+  color: #929292;
+  background-color: rgba(247, 247, 247, 0.98);
+  -webkit-transition: all;
+  transition: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+[class*="button"]:active, [class*="button"].active {
+  color: #fff;
+  background-color: #929292;
+}
+
+.button-primary {
+  color: #fff;
+  border: 1px solid #007aff;
+  background-color: #007aff;
+}
+.button-primary:active, .button-primary.active {
+  border: 1px solid #0062cc;
+  background-color: #0062cc;
+}
+
+.button-positive {
+  color: #fff;
+  border: 1px solid #4cd964;
+  background-color: #4cd964;
+}
+.button-positive:active, .button-positive.active {
+  border: 1px solid #2ac845;
+  background-color: #2ac845;
+}
+
+.button-negative {
+  color: #fff;
+  border: 1px solid #dd524d;
+  background-color: #dd524d;
+}
+.button-negative:active, .button-negative.active {
+  border: 1px solid #cf2d28;
+  background-color: #cf2d28;
+}
+
+.button-outlined {
+  background-color: transparent;
+}
+.button-outlined.button-primary {
+  color: #007aff;
+}
+.button-outlined.button-positive {
+  color: #4cd964;
+}
+.button-outlined.button-negative {
+  color: #dd524d;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+  color: #fff;
+}
+
+.button-link {
+  color: #007aff;
+  background-color: transparent;
+  border: none;
+}
+.button-link:active, .button-link.active {
+  color: #0062cc;
+  background-color: transparent;
+}
+
+.bar-nav .button-link {
+  color: #007aff;
+}
+.bar-nav .button-link:active {
+  color: #007aff;
+  opacity: .6;
+}
+
+[class*="badge"].badge-inverted {
+  color: #929292;
+}
+
+.badge-primary {
+  color: #fff;
+  background-color: #007aff;
+}
+.badge-primary.badge-inverted {
+  color: #007aff;
+}
+
+.badge-positive {
+  color: #fff;
+  background-color: #4cd964;
+}
+.badge-positive.badge-inverted {
+  color: #4cd964;
+}
+
+.badge-negative {
+  color: #fff;
+  background-color: #dd524d;
+}
+.badge-negative.badge-inverted {
+  color: #dd524d;
+}
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid #007aff;
+}
+.segmented-controller li {
+  border-left: 1px solid #007aff;
+  -webkit-transition: background-color 0.1s linear;
+  transition: background-color 0.1s linear;
+}
+.segmented-controller li > a {
+  color: #007aff;
+}
+.segmented-controller li.selected {
+  background-color: #007aff;
+}
+
+.popover {
+  border-radius: 12px;
+  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+.popover:after {
+  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
+}
+
+.modal {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.modal.active {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+
+.toggle {
+  width: 47px;
+  border: 2px solid #e6e6e6;
+  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
+  box-shadow: inset 0 0 0 0 #e1e1e1;
+  -webkit-transition-property: box-shadow, border;
+  transition-property: box-shadow, border;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+.toggle .toggle-handle {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
+  -webkit-transition-property: -webkit-transform, border, width;
+  transition-property: -webkit-transform, border, width;
+}
+.toggle:before {
+  display: none;
+}
+.toggle:active .toggle-handle {
+  width: 35px;
+}
+.toggle.active {
+  border: 2px solid #4cd964;
+  background-color: transparent;
+  -webkit-box-shadow: inset 0 0 0 13px #4cd964;
+  box-shadow: inset 0 0 0 13px #4cd964;
+}
+.toggle.active .toggle-handle {
+  -webkit-transform: translate3d(17px, 0, 0);
+  transform: translate3d(17px, 0, 0);
+}
+.toggle.active:active .toggle-handle,
+.toggle.active .toggle-handle:active {
+  -webkit-transform: translate3d(10px, 0, 0) !important;
+  transform: translate3d(10px, 0, 0) !important;
+}
+.toggle.active .toggle-handle {
+  border-color: #4cd964;
+}
+
+.content.fade {
+  -webkit-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+}
+.content.slide {
+  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
+}
+.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-name: fadeOverlay;
+  animation-name: fadeOverlay;
+  -webkit-animation-duration: 0.4s;
+  animation-duration: 0.4s;
+}
+.content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
+}
+.content.slide.left {
+  -webkit-transform: translate3d(-20%, 0, 0);
+  transform: translate3d(-20%, 0, 0);
+}
+
+@-webkit-keyframes fadeOverlay {
+  from {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
+  }
+
+  to {
+    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
+  }
+}
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 294f48d..c49d264 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -237,7 +237,7 @@ body {
 }
 
 a {
-  color: #007aff;
+  color: #428bca;
   text-decoration: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -253,7 +253,7 @@ strong {
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: #efeff4;
+  background-color: #fff;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -271,7 +271,7 @@ strong {
 }
 
 .bar-tab ~ .content {
-  padding-bottom: 51px;
+  padding-bottom: 50px;
 }
 
 .bar-header-secondary ~ .content {
@@ -292,10 +292,10 @@ strong {
   left: 0;
   z-index: 10;
   height: 44px;
-  padding: 5px 10px;
-  background-color: rgba(247, 247, 247, 0.98);
-  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
+  padding-right: 10px;
+  padding-left: 10px;
+  border-bottom: 1px solid #dddddd;
+  background-color: white;
 }
 [class*="bar-"].bar-header-secondary {
   top: 44px;
@@ -312,20 +312,17 @@ strong {
 
 .bar-nav {
   top: 0;
-  display: -webkit-box;
-  display: box;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
 }
 
 .title {
   position: absolute;
-  top: 0;
-  left: 0;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -10px;
+  margin-right: -10px;
   font-size: 17px;
   font-weight: 500;
   line-height: 44px;
@@ -345,28 +342,19 @@ strong {
 }
 
 .bar-tab {
+  display: table;
   bottom: 0;
   height: 50px;
   padding: 0;
-}
-
-.tab-inner {
-  display: -webkit-box;
-  display: box;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
+  border-top: 1px solid #dddddd;
 }
 
 .tab-item {
+  display: table-cell;
   height: 100%;
+  width: 1%;
   padding-top: 9px;
   text-align: center;
-  -webkit-box-flex: 1;
-  box-flex: 1;
 }
 .tab-item .tab-label,
 .tab-item .icon {
@@ -385,13 +373,11 @@ strong {
 .tab-item.active .tab-label,
 .tab-item.active .icon, .tab-item:active .tab-label,
 .tab-item:active .icon {
-  color: #007aff;
+  color: #428bca;
 }
 
 .popover .bar-nav {
-  padding-right: 15px;
-  padding-left: 15px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid #dddddd;
   border-radius: 12px 12px 0 0;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -400,6 +386,15 @@ strong {
   right: 15px;
 }
 
+.card {
+  width: auto;
+  overflow: hidden;
+  margin: 10px;
+  background-color: white;
+  border: 1px solid #dddddd;
+  border-radius: 6px;
+}
+
 .table-view {
   padding: 0;
   margin: 0;
@@ -409,12 +404,10 @@ strong {
 .table-view .table-view-cell {
   position: relative;
   padding: 11px 60px 12px 15px;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 15px 100%;
-  background-repeat: no-repeat;
+  border-bottom: 1px solid #dddddd;
 }
 .table-view .table-view-cell:last-child {
-  background-image: none;
+  border-bottom: 0;
 }
 .table-view .table-view-cell > a:not([class*="button"]) {
   position: relative;
@@ -429,16 +422,6 @@ strong {
 .table-view .table-view-cell p {
   margin: 0;
 }
-.table-view.inset {
-  width: auto;
-  margin-right: 10px;
-  margin-left: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 6px;
-}
-.table-view.inset li:last-child {
-  background-image: none;
-}
 .table-view .table-view-divider {
   padding-top: 6px;
   padding-bottom: 6px;
@@ -447,10 +430,9 @@ strong {
   margin-left: 0;
   color: #999;
   font-weight: 500;
+  border-top: 1px solid #dddddd;
+  border-bottom: 1px solid #dddddd;
   background-color: #fafafa;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 0 100%, 0 0%;
-  background-repeat: no-repeat;
 }
 .table-view .table-view-divider:first-child {
   top: 0;
@@ -467,10 +449,12 @@ strong {
   top: 50%;
   right: 10px;
 }
-.table-view .chevron,
-.table-view [class*="badge"] {
+.table-view .chevron {
   margin-top: -10px;
 }
+.table-view [class*="badge"] {
+  margin-top: -9px;
+}
 .table-view .chevron + [class*="badge"] {
   right: 30px;
 }
@@ -496,6 +480,10 @@ strong {
   z-index: 1;
 }
 
+.card .table-view li:last-child {
+  border: 0;
+}
+
 .popover .table-view {
   width: auto;
   max-height: 300px;
@@ -504,7 +492,7 @@ strong {
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border-radius: 12px;
+  border-radius: 6px;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -534,25 +522,21 @@ input[type="tel"],
 input[type="color"],
 .input-group {
   width: 100%;
-  height: 40px;
-  padding: 10px 15px;
+  height: 35px;
+  padding: 0 10px;
   margin-bottom: 10px;
   line-height: 21px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #dddddd;
   border-radius: 3px;
   outline: none;
   -webkit-appearance: none;
 }
 
 input[type=search] {
-  height: 34px;
   padding: 0 10px;
   font-size: 16px;
-  text-align: center;
-  border-radius: 6px;
-  border-width: 0;
-  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
   box-sizing: border-box;
 }
 
@@ -584,28 +568,26 @@ select {
 .input-group input {
   margin-bottom: 0;
   background-color: transparent;
-  border: 0;
+  border-bottom: 1px solid #dddddd;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-radius: 0;
   -webkit-box-shadow: none;
   box-shadow: none;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 15px 100%;
-  background-repeat: no-repeat;
 }
 
 .input-group input:last-child {
-  background-image: none;
+  border-bottom: 0;
 }
 
 .input-row {
   overflow: hidden;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
-  background-position: 15px 100%;
-  background-repeat: no-repeat;
+  border-bottom: 1px solid #dddddd;
 }
 
 .input-row:last-child {
-  background-image: none;
+  border-bottom: 0;
 }
 
 .input-row label {
@@ -621,7 +603,7 @@ select {
   width: 65%;
   padding-left: 0;
   margin-bottom: 0;
-  background-image: none;
+  border: 0;
 }
 
 [class*="bar-"] input[type=search] {
@@ -637,61 +619,76 @@ select {
   font-size: 12px;
   font-weight: 400;
   line-height: 1.15;
-  color: #929292;
+  color: #333;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
-  background-color: transparent;
-  border: 1px solid #929292;
-  border-radius: 4px;
-  -webkit-transition: background-color, opacity, color;
-  transition: background-color, opacity, color;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-timing-function: linear;
-  transition-timing-function: linear;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 3px;
 }
-[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
-  color: #fff;
-  background-color: #929292;
+[class*="button"]:active, [class*="button"].active {
+  background-color: #ccc;
 }
-[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
+[class*="button"]:disabled, [class*="button"].disabled {
   opacity: .6;
 }
 
 .button-primary {
-  color: #007aff;
-  border: 1px solid #007aff;
+  color: #fff;
+  border: 1px solid #428bca;
+  background-color: #428bca;
 }
-.button-primary:active, .button-primary.active, .button-primary.button-filled {
-  background-color: #007aff;
+.button-primary:active, .button-primary.active {
+  border: 1px solid #3071a9;
+  background-color: #3071a9;
 }
 
 .button-positive {
-  color: #4cd964;
-  border: 1px solid #4cd964;
+  color: #fff;
+  border: 1px solid #5cb85c;
+  background-color: #5cb85c;
 }
-.button-positive:active, .button-positive.active, .button-positive.button-filled {
-  background-color: #4cd964;
+.button-positive:active, .button-positive.active {
+  border: 1px solid #449d44;
+  background-color: #449d44;
 }
 
 .button-negative {
-  color: #dd524d;
-  border: 1px solid #dd524d;
+  color: #fff;
+  border: 1px solid #d9534f;
+  background-color: #d9534f;
 }
-.button-negative:active, .button-negative.active, .button-negative.button-filled {
-  background-color: #dd524d;
+.button-negative:active, .button-negative.active {
+  border: 1px solid #c9302c;
+  background-color: #c9302c;
+}
+
+.button-outlined {
+  background-color: transparent;
+}
+.button-outlined.button-primary {
+  color: #428bca;
+}
+.button-outlined.button-positive {
+  color: #5cb85c;
+}
+.button-outlined.button-negative {
+  color: #d9534f;
+}
+.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active {
+  color: #fff;
 }
 
 .button-link {
-  color: #007aff;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  color: #428bca;
+  background-color: transparent;
   border: none;
 }
 .button-link:active, .button-link.active {
-  color: #007aff;
-  opacity: .3;
-}
-.button-link.button-filled {
+  color: #3071a9;
   background-color: transparent;
 }
 
@@ -702,108 +699,57 @@ select {
   font-size: 18px;
 }
 
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  width: 100%;
+}
+
 .bar-nav [class*="button"] {
   position: relative;
   z-index: 10;
-  padding: 0;
-  margin-top: -5px;
-  font-size: 16px;
+  padding: 6px 12px;
+  margin-top: 8px;
   font-weight: 400;
-  line-height: 44px;
-  color: #007aff;
-  border: 0;
-  -webkit-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
-  -webkit-box-flex: 0;
-  box-flex: 0;
 }
-.bar-nav .title + [class*="button"]:last-child,
-.bar-nav .button + [class*="button"]:last-child,
 .bar-nav [class*="button"].pull-right {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-}
-.bar-nav .button:active,
-.bar-nav .button.active,
-.bar-nav .button-prev:active,
-.bar-nav .button-prev.active,
-.bar-nav .button-next:active,
-.bar-nav .button-next.active,
-.bar-nav .button-primary:active,
-.bar-nav .button-primary.active {
-  color: #007aff;
-  background-color: transparent;
-  opacity: .3;
-}
-.bar-nav .button-primary {
-  font-weight: 500;
-}
-.bar-nav .button-prev:before,
-.bar-nav .button-prev:after,
-.bar-nav .button-next:before,
-.bar-nav .button-next:after {
-  position: absolute;
-  display: block;
-  width: 15px;
-  height: 3px;
-  background-color: #007aff;
-  content: '';
-}
-.bar-nav .button-prev {
-  padding-left: 20px;
-  margin-left: -5px;
-}
-.bar-nav .button-next {
-  padding-right: 20px;
-  margin-right: -5px;
-}
-.bar-nav .button-prev:before,
-.bar-nav .button-prev:after {
-  left: 0;
-}
-.bar-nav .button-next:before,
-.bar-nav .button-next:after {
-  right: 0;
-}
-.bar-nav .button-prev:before,
-.bar-nav .button-next:before {
-  top: 16px;
+  margin-left: 10px;
 }
-.bar-nav .button-prev:after,
-.bar-nav .button-next:after {
-  top: 25px;
+.bar-nav [class*="button"].pull-left {
+  margin-right: 10px;
 }
-.bar-nav .button-prev:before,
-.bar-nav .button-next:after {
-  -webkit-transform: rotate(-45deg);
-  transform: rotate(-45deg);
+.bar-nav .button-link {
+  padding: 0;
+  margin-top: 0;
+  font-size: 16px;
+  color: #428bca;
+  line-height: 44px;
+  background-color: transparent;
+  border: none;
 }
-.bar-nav .button-prev:after,
-.bar-nav .button-next:before {
-  -webkit-transform: rotate(45deg);
-  transform: rotate(45deg);
+.bar-nav .button-link:active, .bar-nav .button-link.active {
+  color: #3071a9;
 }
 
 [class*="bar"] .button-block {
   padding: 7px 0;
-  margin-top: 1px;
+  margin-top: 4px;
+  margin-bottom: 5px;
   font-size: 16px;
 }
 
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  width: 100%;
-}
-
 .popover .button-block {
   margin-bottom: 5px;
 }
-
 .popover .button-block:last-child {
   margin-bottom: 0;
 }
+.popover .bar-nav .button-link.pull-left {
+  margin-left: 5px;
+}
+.popover .bar-nav .button-link.pull-right {
+  margin-right: 5px;
+}
 
 .chevron {
   display: block;
@@ -830,36 +776,40 @@ input[type="button"] {
 
 [class*="badge"] {
   display: inline-block;
-  color: #929292;
-}
-[class*="badge"].badge-filled {
   padding: 2px 9px;
-  color: #fff;
   font-size: 13px;
   line-height: 1;
-  background-color: #929292;
+  color: #333;
+  background-color: rgba(0, 0, 0, 0.15);
   border-radius: 100px;
 }
+[class*="badge"].badge-inverted {
+  padding: 0;
+  background-color: transparent;
+}
 
 .badge-primary {
-  color: #007aff;
+  color: #fff;
+  background-color: #428bca;
 }
-.badge-primary.badge-filled {
-  background-color: #007aff;
+.badge-primary.badge-inverted {
+  color: #428bca;
 }
 
 .badge-positive {
-  color: #4cd964;
+  color: #fff;
+  background-color: #5cb85c;
 }
-.badge-positive.badge-filled {
-  background-color: #4cd964;
+.badge-positive.badge-inverted {
+  color: #5cb85c;
 }
 
 .badge-negative {
-  color: #dd524d;
+  color: #fff;
+  background-color: #d9534f;
 }
-.badge-negative.badge-filled {
-  background-color: #dd524d;
+.badge-negative.badge-inverted {
+  color: #d9534f;
 }
 
 [class*="button"] [class*="badge"] {
@@ -867,11 +817,18 @@ input[type="button"] {
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
+  background-color: rgba(0, 0, 0, 0.15);
 }
 
-.button-filled .badge-filled,
-[class*="button"]:active .badge-filled {
-  background-color: rgba(0, 0, 0, 0.2);
+[class*="button"] .badge-inverted,
+[class*="button"]:active .badge-inverted {
+  background-color: transparent;
+}
+
+.button-primary:active .badge-inverted,
+.button-positive:active .badge-inverted,
+.button-negative:active .badge-inverted {
+  color: #fff;
 }
 
 .button-block [class*="badge"] {
@@ -881,48 +838,97 @@ input[type="button"] {
 }
 
 .segmented-controller {
-  display: -webkit-box;
-  display: box;
+  display: table;
   padding: 0;
-  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: 400;
   list-style: none;
-  background-color: transparent;
-  border: 1px solid #007aff;
+  background-color: white;
+  border: 1px solid #ccc;
   border-radius: 4px;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
 }
 .segmented-controller li {
+  display: table-cell;
   overflow: hidden;
+  width: 1%;
   text-align: center;
   white-space: nowrap;
-  border-left: 1px solid #007aff;
-  -webkit-box-flex: 1;
-  box-flex: 1;
-  -webkit-transition: background-color 0.1s linear;
-  transition: background-color 0.1s linear;
+  border-left: 1px solid #ccc;
 }
 .segmented-controller li > a {
   display: block;
-  padding: 6px 16px 7px;
+  padding-top: 6px;
+  padding-bottom: 7px;
   overflow: hidden;
   line-height: 1;
-  color: #007aff;
+  color: #333;
   text-overflow: ellipsis;
 }
 .segmented-controller li:first-child {
   border-left-width: 0;
 }
 .segmented-controller li:active {
-  background-color: #d5e9ff;
+  background-color: #eee;
 }
 .segmented-controller li.selected {
-  background-color: #007aff;
+  background-color: #ccc;
+}
+
+.segmented-controller-primary {
+  border: 1px solid #428bca;
+}
+.segmented-controller-primary li {
+  border-color: inherit;
 }
-.segmented-controller li.selected > a {
+.segmented-controller-primary li > a {
+  color: #428bca;
+}
+.segmented-controller-primary li:active {
+  background-color: #cde1f1;
+}
+.segmented-controller-primary li.selected {
+  background-color: #428bca;
+}
+.segmented-controller-primary li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-positive {
+  border: 1px solid #5cb85c;
+}
+.segmented-controller-positive li {
+  border-color: inherit;
+}
+.segmented-controller-positive li > a {
+  color: #5cb85c;
+}
+.segmented-controller-positive li:active {
+  background-color: #d8eed8;
+}
+.segmented-controller-positive li.selected {
+  background-color: #5cb85c;
+}
+.segmented-controller-positive li.selected > a {
+  color: #fff;
+}
+
+.segmented-controller-negative {
+  border: 1px solid #d9534f;
+}
+.segmented-controller-negative li {
+  border-color: inherit;
+}
+.segmented-controller-negative li > a {
+  color: #d9534f;
+}
+.segmented-controller-negative li:active {
+  background-color: #f9e2e2;
+}
+.segmented-controller-negative li.selected {
+  background-color: #d9534f;
+}
+.segmented-controller-negative li.selected > a {
   color: #fff;
 }
 
@@ -934,18 +940,7 @@ input[type="button"] {
 }
 
 [class*="bar-"] .segmented-controller {
-  margin: 3px 0;
-  -webkit-box-flex: 1;
-  box-flex: 1;
-}
-
-.bar-nav .segmented-controller {
-  margin-bottom: 4px;
-}
-
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: 10px;
+  margin: 8px auto 0;
 }
 
 .popover {
@@ -956,14 +951,12 @@ input[type="button"] {
   display: none;
   width: 280px;
   margin-left: -140px;
-  background-color: rgba(247, 247, 247, 0.98);
-  border-radius: 12px;
+  background-color: white;
+  border-radius: 6px;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
   transform: translate3d(0, -15px, 0);
-  -webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
 }
 .popover:after {
   position: absolute;
@@ -974,7 +967,7 @@ input[type="button"] {
   margin-left: -15px;
   content: '';
   border-right: 15px solid transparent;
-  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
+  border-bottom: 15px solid white;
   border-left: 15px solid transparent;
 }
 .popover.visible {
@@ -993,55 +986,6 @@ input[type="button"] {
   background-color: rgba(0, 0, 0, 0.15);
 }
 
-.alert {
-  position: fixed;
-  right: 15px;
-  left: 15px;
-  bottom: 65px;
-  padding: 15px;
-  color: #fff;
-  border-radius: 3px;
-  z-index: 10;
-  -webkit-transition: opacity;
-  transition: opacity;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-timing-function: linear;
-  transition-timing-function: linear;
-}
-.alert .close {
-  position: relative;
-  top: -2px;
-  float: right;
-  color: inherit;
-  cursor: pointer;
-  -webkit-transition: opacity;
-  transition: opacity;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-timing-function: linear;
-  transition-timing-function: linear;
-}
-.alert .close:active {
-  opacity: .6;
-}
-.alert.dismiss {
-  opacity: 0;
-}
-
-.alert-positive {
-  background-color: rgba(76, 217, 100, 0.97);
-}
-
-.alert-negative {
-  background-color: rgba(221, 82, 77, 0.97);
-}
-
-.alert-inline {
-  position: static;
-  margin: 15px;
-}
-
 .modal {
   position: fixed;
   top: 0;
@@ -1055,8 +999,6 @@ input[type="button"] {
   transform: translate3d(0, 100%, 0);
   -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: -webkit-transform 0.25s, opacity 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 .modal.active {
   opacity: 1;
@@ -1065,8 +1007,6 @@ input[type="button"] {
   transform: translate3d(0, 0, 0);
   -webkit-transition: -webkit-transform 0.25s;
   transition: -webkit-transform 0.25s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
 }
 
 .slider,
@@ -1098,16 +1038,15 @@ input[type="button"] {
 }
 
 .toggle {
+  display: block;
   position: relative;
-  width: 47px;
+  width: 74px;
   height: 30px;
   background-color: #fff;
-  border: 2px solid #e6e6e6;
+  border: 2px solid #ddd;
   border-radius: 20px;
-  -webkit-box-shadow: inset 0 0 0 0 #e1e1e1;
-  box-shadow: inset 0 0 0 0 #e1e1e1;
-  -webkit-transition-property: box-shadow, border;
-  transition-property: box-shadow, border;
+  -webkit-transition-property: background-color, border;
+  transition-property: background-color, border;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
@@ -1119,39 +1058,43 @@ input[type="button"] {
   width: 28px;
   height: 28px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #ddd;
   border-radius: 100px;
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
   -webkit-transition-property: -webkit-transform, border, width;
   transition-property: -webkit-transform, border, width;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
-.toggle:active .toggle-handle {
-  width: 35px;
+.toggle:before {
+  position: absolute;
+  top: 3px;
+  right: 11px;
+  color: #999;
+  text-transform: uppercase;
+  content: "Off";
 }
 .toggle.active {
-  border: 2px solid #4cd964;
-  -webkit-box-shadow: inset 0 0 0 13px #4cd964;
-  box-shadow: inset 0 0 0 13px #4cd964;
+  border: 2px solid #5cb85c;
+  background-color: #5cb85c;
 }
 .toggle.active .toggle-handle {
-  border-color: #4cd964;
-  -webkit-transform: translate3d(17px, 0, 0);
-  transform: translate3d(17px, 0, 0);
+  border-color: #5cb85c;
+  -webkit-transform: translate3d(44px, 0, 0);
+  transform: translate3d(44px, 0, 0);
 }
-.toggle.active:active .toggle-handle,
-.toggle.active .toggle-handle:active {
-  -webkit-transform: translate3d(10px, 0, 0) !important;
-  transform: translate3d(10px, 0, 0) !important;
+.toggle.active:before {
+  right: auto;
+  left: 15px;
+  color: #fff;
+  content: "On";
+}
+.toggle input[type="checkbox"] {
+  display: none;
 }
 
 .content.fade {
   left: 0;
   opacity: 0;
-  -webkit-transition: opacity 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
 }
 .content.fade.in {
   opacity: 1;
@@ -1162,23 +1105,11 @@ input[type="button"] {
   transition: -webkit-transform 0.4s;
   -webkit-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
-}
-.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-name: fadeOverlay;
-  animation-name: fadeOverlay;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
-}
-.content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-direction: reverse;
-  animation-direction: reverse;
 }
 .content.slide.left {
   z-index: 1;
-  -webkit-transform: translate3d(-20%, 0, 0);
-  transform: translate3d(-20%, 0, 0);
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
 }
 .content.slide.right {
   z-index: 3;
@@ -1186,18 +1117,6 @@ input[type="button"] {
   transform: translate3d(100%, 0, 0);
 }
 
-@-webkit-keyframes fadeOverlay {
-  from {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
-  }
-
-  to {
-    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1);
-  }
-}
-
 @font-face {
   font-family: "Ratchicons";
   src: url("ratchicons/ratchicons.eot");
@@ -1208,52 +1127,66 @@ input[type="button"] {
 
 .icon {
   display: inline-block;
-  font-family: "Ratchicons", sans-serif;
+  font-family: Ratchicons;
   font-size: 24px;
   text-decoration: none;
   line-height: 1;
   cursor: default;
   -webkit-font-smoothing: antialiased;
 }
-.icon.icon-down:before {
+
+.icon-down:before {
   content: '\f00b';
 }
-.icon.icon-download:before {
+
+.icon-download:before {
   content: '\f005';
 }
-.icon.icon-left:before {
+
+.icon-left:before {
   content: '\f00c';
 }
-.icon.icon-list:before {
+
+.icon-list:before {
   content: '\f008';
 }
-.icon.icon-pages:before {
+
+.icon-pages:before {
   content: '\f000';
 }
-.icon.icon-refresh:before {
+
+.icon-refresh:before {
   content: '\f009';
 }
-.icon.icon-right:before {
+
+.icon-right:before {
   content: '\f00d';
 }
-.icon.icon-search:before {
+
+.icon-search:before {
   content: '\f007';
 }
-.icon.icon-share:before {
+
+.icon-share:before {
   content: '\f00a';
 }
-.icon.icon-sound:before {
+
+.icon-sound:before {
   content: '\f001';
 }
-.icon.icon-sound2:before {
+
+.icon-sound2:before {
   content: '\f002';
 }
-.icon.icon-sound3:before {
+
+.icon-sound3:before {
   content: '\f003';
 }
-.icon.icon-sound4:before {
+
+.icon-sound4:before {
   content: '\f004';
 }
-.icon.icon-up:before {
+
+.icon-up:before {
   content: '\f00e';
 }
diff --git a/dist/ratchet.js b/dist/ratchet.js
index 990c28e..c8bd8d9 100644
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@@ -783,39 +783,3 @@
   });
 
 }();
-/* ----------------------------------
- * ALERT v0.0.1
- * Licensed under The MIT License
- * http://opensource.org/licenses/MIT
- * ---------------------------------- */
-
-!function () {
-  var findAlerts = function (target) {
-    var i, alerts = document.querySelectorAll('a');
-    for (; target && target !== document; target = target.parentNode) {
-      for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
-    }
-  };
-
-  var onAlertHidden = function () {
-    var alert = getAlert(event);
-
-    alert.style.display = 'none';
-    alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
-  }
-
-  var getAlert = function (event) {
-    var alertDismiss = findAlerts(event.target);
-    if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
-  };
-
-  window.addEventListener('click', function (event) {
-    var alert = getAlert(event);
-    
-    if (alert) {
-      if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
-      alert.addEventListener('webkitTransitionEnd', onAlertHidden);
-      event.preventDefault();
-    }
-  });
-}();
diff --git a/examples/app-default/index.html b/examples/app-default/index.html
index 75b2fd1..b1f9e16 100644
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@@ -18,12 +18,6 @@
   </head>
   <body>
 
-    <!-- Alert -->
-    <div id="myAlert" class="alert alert-negative">
-      <a href="#myAlert" class="icon icon-share close"></a>
-      <strong>This</strong> is an alert.
-    </div>
-
     <header class="bar-nav">
       <h1 class="title">Movie finder</h1>
     </header>
diff --git a/lib/js/alerts.js b/lib/js/alerts.js
deleted file mode 100644
index c1e7165..0000000
--- a/lib/js/alerts.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/* ----------------------------------
- * ALERT v0.0.1
- * Licensed under The MIT License
- * http://opensource.org/licenses/MIT
- * ---------------------------------- */
-
-!function () {
-  var findAlerts = function (target) {
-    var i, alerts = document.querySelectorAll('a');
-    for (; target && target !== document; target = target.parentNode) {
-      for (i = alerts.length; i--;) { if (alerts[i] === target) return target; }
-    }
-  };
-
-  var onAlertHidden = function () {
-    var alert = getAlert(event);
-
-    alert.style.display = 'none';
-    alert.removeEventListener('webkitTransitionEnd', onAlertHidden);
-  }
-
-  var getAlert = function (event) {
-    var alertDismiss = findAlerts(event.target);
-    if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash);
-  };
-
-  window.addEventListener('click', function (event) {
-    var alert = getAlert(event);
-    
-    if (alert) {
-      if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss');
-      alert.addEventListener('webkitTransitionEnd', onAlertHidden);
-      event.preventDefault();
-    }
-  });
-}();
diff --git a/lib/js/toggles.js b/lib/js/toggles.js
index f257ac9..2b681c6 100644
--- a/lib/js/toggles.js
+++ b/lib/js/toggles.js
@@ -88,4 +88,4 @@
     toggle    = false;
   });
 
-}();
\ No newline at end of file
+}();
diff --git a/lib/sass/alerts.scss b/lib/sass/alerts.scss
deleted file mode 100644
index 39abcc3..0000000
--- a/lib/sass/alerts.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-//
-// Alerts
-// --------------------------------------------------
-
-.alert {
-  position: fixed;
-  right: 15px;
-  left: 15px;
-  bottom: $bar-tab-height + 15px;
-  padding: 15px;
-  color: #fff;
-  border-radius: 3px;
-  z-index: 10;
-  @include transition(opacity);
-  @include transition-duration(.2s);
-  @include transition-timing-function(linear);
-
-  .close {
-    position: relative;
-    top: -2px;
-    float: right;
-    color: inherit;
-    cursor: pointer;
-    @include transition(opacity);
-    @include transition-duration(.2s);
-    @include transition-timing-function(linear);
-
-    &:active {
-      opacity: .6;
-    }
-  }
-
-  &.dismiss {
-    opacity: 0;
-  }
-}
-
-// Positive alert (Default color is green)
-.alert-positive {
-  background-color: transparentize($positive-color, .03);
-}
-
-// Negative alert (Default color is red)
-.alert-negative {
-  background-color: transparentize($negative-color, .03);
-}
-
-// Inline alert
-.alert-inline {
-  position: static;
-  margin: 15px;
-}
diff --git a/lib/sass/badges.scss b/lib/sass/badges.scss
index 0ad6751..36c6651 100644
--- a/lib/sass/badges.scss
+++ b/lib/sass/badges.scss
@@ -4,15 +4,16 @@
 
 [class*="badge"] {
   display: inline-block;
-  color: $default-color;
-
-  &.badge-filled {
-    padding: 2px 9px;
-    color: #fff;
-    font-size: 13px;
-    line-height: 1;
-    background-color: $default-color;
-    border-radius: 100px;
+  padding: 2px 9px;
+  font-size: 13px;
+  line-height: 1;
+  color: #333;
+  background-color: rgba(0,0,0,.15);
+  border-radius: 100px;
+
+  &.badge-inverted {
+    padding: 0;
+    background-color: transparent;
   }
 }
 
@@ -22,28 +23,31 @@
 
 // Main badge
 .badge-primary {
-  color: $primary-color;
+  color: #fff;
+  background-color: $primary-color;
 
-  &.badge-filled {
-    background-color: $primary-color;
+  &.badge-inverted {
+    color: $primary-color;
   }
 }
 
 // Positive badge
 .badge-positive {
-  color: $positive-color;
+  color: #fff;
+  background-color: $positive-color;
 
-  &.badge-filled {
-    background-color: $positive-color;
+  &.badge-inverted {
+    color: $positive-color;
   }
 }
 
 // Negative badge
 .badge-negative {
-  color: $negative-color;
+  color: #fff;
+  background-color: $negative-color;
 
-  &.badge-filled {
-    background-color: $negative-color;
+  &.badge-inverted {
+    color: $negative-color;
   }
 }
 
@@ -57,12 +61,18 @@
   padding-top: 2px;
   padding-bottom: 2px;
   margin: -2px -4px -2px 4px;
+  background-color: rgba(0,0,0,.15);
 }
 
 // Styles for filled badges within filled buttons
-.button-filled .badge-filled,
-[class*="button"]:active .badge-filled {
-  background-color: rgba(0,0,0,.2);
+[class*="button"] .badge-inverted,
+[class*="button"]:active .badge-inverted {
+  background-color: transparent;
+}
+.button-primary:active .badge-inverted,
+.button-positive:active .badge-inverted,
+.button-negative:active .badge-inverted {
+  color: #fff;
 }
 
 // Position badges within block level buttons
@@ -72,4 +82,9 @@
   position: absolute;
   right: 0;
   margin-right: 10px;
-}
\ No newline at end of file
+}
+
+// Badges in table-views
+// --------------------------------------------------
+
+
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 641d37d..843a8ef 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -8,9 +8,11 @@
   left: 0;
   z-index: 10;
   height: $bar-base-height;
-  padding: 5px $bar-side-spacing;
+  padding-right: $bar-side-spacing;
+  padding-left: $bar-side-spacing;
+  border-bottom: $border-default;
   background-color: $chrome-color;
-  @include box-shadow(0 0 1px rgba(0,0,0,.85));
+
 
   // Modifier class to dock any bar below .bar-nav
   &.bar-header-secondary {
@@ -40,20 +42,18 @@
 // Bar docked to top of viewport for showing page title and actions
 .bar-nav {
   top: 0;
-  display: -webkit-box;
-  display: box;
-  @include box-orient(horizontal);
 }
 
 // Centered text in the .bar-nav 
 .title {
   position: absolute;
-  top: 0;
-  left: 0;
   display: block;
   width: 100%;
   padding: 0;
-  margin: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: -$bar-side-spacing;
+  margin-right: -$bar-side-spacing;
   font-size: $font-size-default;
   font-weight: $font-weight;
   line-height: $bar-base-height;
@@ -79,32 +79,24 @@
 
 // Bar docked to bottom used for primary app navigation
 .bar-tab {
+  display: table;
   bottom: 0;
   height: $bar-tab-height;
   padding: 0;
-}
-
-// Wrapper for individual tab
-.tab-inner {
-  display: -webkit-box;
-  display: box;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  @include box-orient(horizontal);
+  border-top: $border-default;
 }
 
 // Navigational tab
 .tab-item {
+  display: table-cell;
   height: 100%;
+  width: 1%;
   padding-top: 9px;
   text-align: center;
-  @include box-flex(1);
 
   .tab-label,
   .icon {
-    color: $default-color;
+    color: #929292;
   }
 
   // Label for tab
@@ -130,17 +122,16 @@
   }
 }
 
+
 // Nav bar in popovers
 // --------------------------------------------------
 
 .popover .bar-nav {
-  padding-right: 15px;
-  padding-left: 15px;
-  border-bottom: 1px solid rgba(0,0,0,.15);
+  border-bottom: $border-default;
   border-radius: 12px 12px 0 0;
   @include box-shadow(none);
 
   .title + [class*="button"]:last-child {
     right: 15px;
   }
-}
\ No newline at end of file
+}
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 7616bb8..884256f 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -36,7 +36,7 @@ strong {
   bottom: 0;
   left: 0;
   overflow: auto;
-  background-color: #efeff4;
+  background-color: #fff;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -55,13 +55,13 @@ strong {
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .bar-nav ~ .content {
-  padding-top: 44px;
+  padding-top: $bar-base-height;
 }
 .bar-tab ~ .content {
-  padding-bottom: 51px;
+  padding-bottom: $bar-tab-height;
 }
 .bar-header-secondary ~ .content {
-  padding-top: 88px;
+  padding-top: $bar-base-height*2;
 }
 
 // Utility classes
diff --git a/lib/sass/buttons.scss b/lib/sass/buttons.scss
index 675429c..4175214 100644
--- a/lib/sass/buttons.scss
+++ b/lib/sass/buttons.scss
@@ -10,29 +10,23 @@
   font-size: $button-font-size;
   font-weight: $font-weight-light;
   line-height: 1.15; // Center button text on the phone.
-  color: $default-color;
+  color: #333;
   text-align: center;
   vertical-align: top;
   cursor: pointer;
-  background-color: transparent;
-  border: 1px solid $default-color;
-  border-radius: 4px;
-  @include transition(background-color, opacity, color);
-  @include transition-duration(.2s);
-  @include transition-timing-function(linear);
+  background-color: $chrome-color;
+  border: 1px solid #ccc;
+  border-radius: 3px;
 
   // Active & filled button styles
   &:active,
-  &.active,
-  &.button-filled {
-    color: #fff;
-    background-color: $default-color;
+  &.active {
+    background-color: #ccc;
   }
 
   // Disabled styles & filled button active styles
   &:disabled,
-  &.disabled,
-  &.button-filled:active {
+  &.disabled {
     opacity: .6;
   }
 }
@@ -43,51 +37,75 @@
 
 // Primary button (Default color is blue)
 .button-primary {
-  color: $primary-color;
+  color: #fff;
   border: 1px solid $primary-color;
+  background-color: $primary-color;
 
   &:active,
-  &.active,
-  &.button-filled {
-    background-color: $primary-color;
+  &.active {
+    border: 1px solid darken($primary-color, 10%);
+    background-color: darken($primary-color, 10%);
   }
 }
 
 // Positive button (Default color is green)
 .button-positive {
-  color: $positive-color;
+  color: #fff;
   border: 1px solid $positive-color;
+  background-color: $positive-color;
 
   &:active,
-  &.active,
-  &.button-filled {
-    background-color: $positive-color;
+  &.active{
+    border: 1px solid darken($positive-color, 10%);
+    background-color: darken($positive-color, 10%);
   }
 }
 
 // Negative button (Default color is red)
 .button-negative {
-  color: $negative-color;
+  color: #fff;
   border: 1px solid $negative-color;
+  background-color: $negative-color;
 
   &:active,
-  &.active,
-  &.button-filled {
-    background-color: $negative-color;
+  &.active {
+    border: 1px solid darken($negative-color, 10%);
+    background-color: darken($negative-color, 10%);
+  }
+}
+
+// Outlined buttons 
+.button-outlined {
+  background-color: transparent;
+
+  &.button-primary {
+    color: $primary-color;
+  }
+  &.button-positive {
+    color: $positive-color;
+  }
+  &.button-negative {
+    color: $negative-color;
+  }
+  // Active states
+  &.button-primary:active,
+  &.button-positive:active,
+  &.button-negative:active {
+    color: #fff;
   }
 }
 
 // Link button (Buttons that look like links)
 .button-link {
+  padding-top: 6px;
+  padding-bottom: 6px;
   color: $primary-color;
+  background-color: transparent;
   border: none;
 
   &:active,
   &.active {
-    color: $primary-color;
-    opacity: .3;
-  }
-  &.button-filled {
+    color: darken($primary-color, 10%);
     background-color: transparent;
   }
 }
@@ -100,139 +118,84 @@
   font-size: 18px;
 }
 
+// Button overrides
+// --------------------------------------------------
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  width: 100%;
+}
+
 // Buttons in nav bars
 // --------------------------------------------------
 
 .bar-nav {
-
   // Generic style for all buttons in .bar-title
   [class*="button"] {
     position: relative;
-    z-index: 10; // Places buttons over full width title
-    padding: 0;
-    margin-top: -5px; // Offsets the bar's vertical padding
-    font-size: 16px;
+    z-index: 10; // Position the buttons on top of .title
+    padding: 6px 12px;
+    margin-top: 8px;
     font-weight: $font-weight-light;
-    line-height: $bar-base-height;
-    color: $primary-color;
-    border: 0;
-    @include transition(opacity .2s linear);
-    @include box-flex(0);
-  }
 
-  // Hacky way to right align buttons outside of flex-box system
-  // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
-  .title + [class*="button"]:last-child,
-  .button + [class*="button"]:last-child,
-  [class*="button"].pull-right {
-    position: absolute;
-    top: 5px; // Offsets the bar's vertical padding
-    right: $bar-side-spacing;
+    &.pull-right { 
+      margin-left: $bar-side-spacing; 
+    }
+    &.pull-left { 
+      margin-right: $bar-side-spacing; 
+    }
   }
 
-  // Override standard button active states
-  .button:active,
-  .button.active,
-  .button-prev:active,
-  .button-prev.active,
-  .button-next:active,
-  .button-next.active,
-  .button-primary:active,
-  .button-primary.active {
+  // Link button (Buttons that look like links)
+  .button-link {
+    padding: 0;
+    margin-top: 0;
+    font-size: 16px;
     color: $primary-color;
+    line-height: $bar-base-height;
     background-color: transparent;
-    opacity: .3;
-  }
+    border: none;
 
-  // Primary button in bars
-  .button-primary {
-    font-weight: $font-weight;
-  }
-
-
-  // Directional buttons in nav bars
-  // --------------------------------------------------
-
-  .button-prev:before,
-  .button-prev:after,
-  .button-next:before,
-  .button-next:after {
-    position: absolute;
-    display: block;
-    width: 15px;
-    height: 3px;
-    background-color: $primary-color;
-    content: '';
-  }
-
-  // Prev/next button base styles
-  .button-prev {
-    padding-left: $button-directional-padding;
-    margin-left: $button-directional-margin;
-  }
-  .button-next {
-    padding-right: $button-directional-padding;
-    margin-right: $button-directional-margin;
-  }
-
-  // Position the chevrons horizontally
-  .button-prev:before,
-  .button-prev:after {
-    left: 0;
-  }
-  .button-next:before,
-  .button-next:after {
-    right: 0;
-  }
-
-  // Position the chevrons vertically
-  .button-prev:before, 
-  .button-next:before {
-    top: 16px;
-  }
-  .button-prev:after, 
-  .button-next:after {
-    top: 25px;
-  }
-
-  // Rotate the chevrons
-  .button-prev:before,
-  .button-next:after {
-    @include transform(rotate(-45deg));
-  } 
-  .button-prev:after,
-  .button-next:before {
-    @include transform(rotate(45deg));
+    &:active,
+    &.active {
+      color: darken($primary-color, 10%);
+    }
   }
 }
 
+
 // Block buttons in all bars
 // --------------------------------------------------
 
 // Add proper padding
 [class*="bar"] .button-block {
   padding: 7px 0;
-  margin-top: 1px;
+  margin-top: 4px;
+  margin-bottom: 5px;
   font-size: 16px; // Scale down font size to fit in bar.
 }
 
-// Button overrides
-// --------------------------------------------------
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  width: 100%;
-}
 
 // Block level buttons in popovers
 // --------------------------------------------------
 
 // Positioning and giving darker border to look sharp against dark popover
-.popover .button-block {
-  margin-bottom: 5px;
-}
+.popover {
+  .button-block {
+    margin-bottom: 5px;
+  }
 
-// Remove extra margin on bottom of last button
-.popover .button-block:last-child {
-  margin-bottom: 0;
+  // Remove extra margin on bottom of last button
+  .button-block:last-child {
+    margin-bottom: 0;
+  }
+  // Line the button text up with content's text
+  .bar-nav .button-link {
+    &.pull-left {
+      margin-left: 5px;
+    }
+    &.pull-right {
+      margin-right: 5px;
+    }
+  }
 }
diff --git a/lib/sass/cards.scss b/lib/sass/cards.scss
new file mode 100644
index 0000000..e2639c7
--- /dev/null
+++ b/lib/sass/cards.scss
@@ -0,0 +1,12 @@
+//
+// Cards
+// --------------------------------------------------
+
+.card {
+  width: auto;
+  overflow: hidden;
+  margin: $bar-side-spacing;
+  background-color: $card-bg;
+  border: $border-default;
+  border-radius: $border-radius;
+}
diff --git a/lib/sass/chevrons.scss b/lib/sass/chevrons.scss
index eab740d..43e33bb 100644
--- a/lib/sass/chevrons.scss
+++ b/lib/sass/chevrons.scss
@@ -26,4 +26,4 @@
     top: 8px;
     @include transform(rotate(-45deg));
   }
-}
\ No newline at end of file
+}
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index 59bddee..a6051c3 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -30,26 +30,22 @@ input[type="tel"],
 input[type="color"],
 .input-group {
   width: 100%;
-  height: 40px;
-  padding: 10px 15px;
+  height: 35px;
+  padding: 0 10px;
   margin-bottom: 10px;
   line-height: $line-height-default;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .2);
+  border: $border-default;
   border-radius: 3px;
   outline: none;
   -webkit-appearance: none;
 }
 
-// Fully round search input
+// Rounded search input
 input[type=search] {
-  height: 34px;
   padding: 0 10px;
   font-size: 16px;
-  text-align: center;
-  border-radius: 6px;
-  border-width: 0;
-  background-color: rgba(0,0,0,.1);
+  border-radius: 20px;
   box-sizing: border-box; // Override content-box in normalize
 }
 input[type=search]:focus {
@@ -87,30 +83,31 @@ select {
 .input-group input {
   margin-bottom: 0;
   background-color: transparent;
-  border: 0;
+  border-bottom: $border-default;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
   border-radius: 0;
   @include box-shadow(none);
-  @include hairline(single, #c8c7cc, 15px);
 }
 
 // Remove bottom border on last input to avoid double bottom border
 .input-group input:last-child {
-  background-image: none;
+  border-bottom: 0;
 }
 
 // Input groups with labels
 // --------------------------------------------------
 
-
 // To use labels with input groups, wrap a label and an input in an .input-row
 .input-row {
   overflow: hidden;
-  @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
+  border-bottom: $border-default;
 }
 
 // Remove bottom border on last input-row to avoid double bottom border
 .input-row:last-child {
-  background-image: none;
+  border-bottom: 0;
 }
 
 // Labels get floated left with a set percentage width
@@ -128,7 +125,7 @@ select {
   width: 65%;
   padding-left: 0;
   margin-bottom: 0;
-  background-image: none;
+  border: 0;
 }
 
 
@@ -139,4 +136,4 @@ select {
 [class*="bar-"] input[type=search] {
   height: 29px;
   margin: 2px 0;
-}
\ No newline at end of file
+}
diff --git a/lib/sass/mixins.scss b/lib/sass/mixins.scss
index 2b8967e..67b0f4a 100644
--- a/lib/sass/mixins.scss
+++ b/lib/sass/mixins.scss
@@ -24,6 +24,19 @@
           box-shadow: $shadow;
 }
 
+// Gradients
+@mixin gradient($color-form, $color-to) {
+  background: $color-form; // Old browsers
+  background: -moz-linear-gradient(top, $color-form 0%, $color-to 100%); // FF3.6+
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$color-form), color-stop(100%,$color-to)); // Chrome,Safari4+
+  background: -webkit-linear-gradient(top, $color-form 0%, $color-to 100%); // Chrome10+,Safari5.1+
+  background: -o-linear-gradient(top, $color-form 0%, $color-to 100%); // Opera 11.10+
+  background: -ms-linear-gradient(top, $color-form 0%, $color-to 100%); // IE10+
+  background: linear-gradient(to bottom, $color-form 0%, $color-to 100%); // W3C
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); // IE6-9
+
+}
+
 
 // Transforms
 // --------------------------------------------------
diff --git a/lib/sass/modals.scss b/lib/sass/modals.scss
index f05162c..2331ebc 100644
--- a/lib/sass/modals.scss
+++ b/lib/sass/modals.scss
@@ -13,7 +13,6 @@
   background-color: #fff;  
   @include transform(translate3d(0, 100%, 0));
   @include transition(-webkit-transform .25s, opacity .25s);
-  @include transition-timing-function($timing-fuction);
 
   // Active modal
   &.active {
@@ -21,6 +20,5 @@
     height: 100%;
     @include transform(translate3d(0, 0, 0));
     @include transition(-webkit-transform .25s);
-    @include transition-timing-function($timing-fuction);
   }
-}
\ No newline at end of file
+}
diff --git a/lib/sass/normalize.scss b/lib/sass/normalize.scss
index 80e778e..55a18a2 100644
--- a/lib/sass/normalize.scss
+++ b/lib/sass/normalize.scss
@@ -2,7 +2,7 @@
 
 // ==========================================================================
 // HTML5 display definitions
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Correct `block` display not defined in IE 8/9.
@@ -55,7 +55,7 @@ template {
 
 // ==========================================================================
 // Base
-// ========================================================================== */
+// ==========================================================================
 
 //
 // 1. Set default font family to sans-serif.
@@ -79,7 +79,7 @@ body {
 
 // ==========================================================================
 // Links
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Remove the gray background color from active links in IE 10.
@@ -108,7 +108,7 @@ a:hover {
 
 // ==========================================================================
 // Typography
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Address variable `h1` font-size and margin within `section` and `article`
@@ -222,7 +222,7 @@ sub {
 
 // ==========================================================================
 // Embedded content
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Remove border when inside `a` element in IE 8/9.
@@ -242,7 +242,7 @@ svg:not(:root) {
 
 // ==========================================================================
 // Figures
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Address margin not present in IE 8/9 and Safari 5.
@@ -254,7 +254,7 @@ figure {
 
 // ==========================================================================
 // Forms
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Define consistent border, margin, and padding.
@@ -394,7 +394,7 @@ textarea {
 
 // ==========================================================================
 // Tables
-// ========================================================================== */
+// ==========================================================================
 
 //
 // Remove most spacing between table cells.
@@ -403,4 +403,4 @@ textarea {
 table {
     border-collapse: collapse;
     border-spacing: 0;
-}
\ No newline at end of file
+}
diff --git a/lib/sass/popovers.scss b/lib/sass/popovers.scss
index b61e5e4..36e8743 100644
--- a/lib/sass/popovers.scss
+++ b/lib/sass/popovers.scss
@@ -11,11 +11,10 @@
   width: 280px;
   margin-left: -140px;
   background-color: $chrome-color;
-  border-radius: 12px;
+  border-radius: $border-radius;
   opacity: 0;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
   @include transform(translate3d(0, -15px, 0));
-  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
   // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
   &:after {
@@ -51,4 +50,4 @@
   left: 0;
   z-index: 10;
   background-color: rgba(0,0,0,.15);
-}
\ No newline at end of file
+}
diff --git a/lib/sass/push.scss b/lib/sass/push.scss
index 0e72124..c0e7077 100644
--- a/lib/sass/push.scss
+++ b/lib/sass/push.scss
@@ -8,34 +8,21 @@
   &.fade {
     left: 0;
     opacity: 0;
-    @include transition(opacity .2s ease-in-out);
 
     &.in {
       opacity: 1;
     }
   }
 
-  // Slide animation iOS7
+  // Slide animation
   &.slide {
     z-index: 2;
     @include transition(-webkit-transform .4s);
     @include transform(translate3d(0, 0, 0));
-    @include transition-timing-function ($timing-fuction);
-
-    // Adding the overlay
-    &.sliding-in,
-    &.right:not([class*="sliding-in"]) {
-      @include animation-name(fadeOverlay);
-      @include animation-duration(.4s);
-    }
-
-    &.right:not([class*="sliding-in"]) {
-      @include animation-direction(reverse);
-    }
 
     &.left {
       z-index: 1;
-      @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
+      @include transform(translate3d(-100%, 0, 0));
     }
 
     &.right {
@@ -44,9 +31,3 @@
     }
   }
 }
-
-// Overlay animation for the slide transition
-@-webkit-keyframes fadeOverlay {
-  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
-  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
-}
\ No newline at end of file
diff --git a/lib/sass/ratchet.scss b/lib/sass/ratchet.scss
index 2973e0c..9836b4f 100644
--- a/lib/sass/ratchet.scss
+++ b/lib/sass/ratchet.scss
@@ -11,6 +11,7 @@
 
 // Components
 @import "bars.scss";
+@import "cards.scss";
 @import "table-views.scss";
 @import "forms.scss";
 @import "buttons.scss";
@@ -18,7 +19,6 @@
 @import "badges.scss";
 @import "segmented-controllers.scss";
 @import "popovers.scss";
-@import "alerts.scss";
 
 // Javascript components
 @import "modals.scss";
diff --git a/lib/sass/ratchicons.scss b/lib/sass/ratchicons.scss
index 8f1b436..85ef09e 100644
--- a/lib/sass/ratchicons.scss
+++ b/lib/sass/ratchicons.scss
@@ -7,32 +7,31 @@
   src: url("ratchicons/ratchicons.eot");
   src: url("ratchicons/ratchicons.eot?#iefix") format("embedded-opentype"),
        url("ratchicons/ratchicons.woff") format("woff"),
-       url("ratchicons/ratchicons.ttf")  format("truetype"),
+       url("ratchicons/ratchicons.ttf") format("truetype"),
        url("ratchicons/ratchicons.svg#svgFontName") format("svg");
   font-weight: normal;
   font-style: normal;
 }
 .icon {
   display: inline-block;
-  font-family: "Ratchicons", sans-serif;
+  font-family: Ratchicons;
   font-size: 24px;
   text-decoration: none;
   line-height: 1;
   cursor: default;
   -webkit-font-smoothing: antialiased;
-
-  &.icon-down:before { content: '\f00b'}
-  &.icon-download:before { content: '\f005'}
-  &.icon-left:before { content: '\f00c'}
-  &.icon-list:before { content: '\f008'}
-  &.icon-pages:before { content: '\f000'}
-  &.icon-refresh:before { content: '\f009'}
-  &.icon-right:before { content: '\f00d'}
-  &.icon-search:before { content: '\f007'}
-  &.icon-share:before { content: '\f00a'}
-  &.icon-sound:before { content: '\f001'}
-  &.icon-sound2:before { content: '\f002'}
-  &.icon-sound3:before { content: '\f003'}
-  &.icon-sound4:before { content: '\f004'}
-  &.icon-up:before { content: '\f00e'}
-}
\ No newline at end of file
+}
+.icon-down:before { content: '\f00b'}
+.icon-download:before { content: '\f005'}
+.icon-left:before { content: '\f00c'}
+.icon-list:before { content: '\f008'}
+.icon-pages:before { content: '\f000'}
+.icon-refresh:before { content: '\f009'}
+.icon-right:before { content: '\f00d'}
+.icon-search:before { content: '\f007'}
+.icon-share:before { content: '\f00a'}
+.icon-sound:before { content: '\f001'}
+.icon-sound2:before { content: '\f002'}
+.icon-sound3:before { content: '\f003'}
+.icon-sound4:before { content: '\f004'}
+.icon-up:before { content: '\f00e'}
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index e3083b9..c9f7680 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -3,35 +3,33 @@
 // --------------------------------------------------
 
 .segmented-controller {
-  display: -webkit-box;
-  display: box;
+  display: table;
   padding: 0;
-  margin: 0 0 10px 0;
   overflow: hidden;
   font-size: 12px;
   font-weight: $font-weight-light;
   list-style: none;
-  background-color: transparent;
-  border: 1px solid $primary-color;
+  background-color: $chrome-color;
+  border: 1px solid #ccc;
   border-radius: 4px;
-  @include box-orient(horizontal);
 
   // Section within controller
   li {
+    display: table-cell;
     overflow: hidden;
+    width: 1%;
     text-align: center;
     white-space: nowrap;
-    border-left: 1px solid $primary-color;
-    @include box-flex(1);
-    @include transition(background-color .1s linear);
+    border-left: 1px solid #ccc;
     
     // Link that fills each section
     > a {
       display: block;
-      padding: 6px 16px 7px;
+      padding-top: 6px;
+      padding-bottom: 7px;
       overflow: hidden;
       line-height: 1;
-      color: $primary-color;
+      color: #333;
       text-overflow: ellipsis;
     }
 
@@ -42,14 +40,81 @@
 
     // Active state of segmented controller
     &:active {
-      background-color: rgba(213,233,255,1);
+      background-color: #eee;
     }
 
     // Selected segment of controller
+    &.selected {
+      background-color: #ccc;
+    }
+  }
+}
+
+// Other segmented controller types
+// --------------------------------------------------
+
+// Primary
+.segmented-controller-primary {
+  border: 1px solid $primary-color;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $primary-color;
+    }
+    &:active {
+      background-color: lighten($primary-color, 35%);
+    }
     &.selected {
       background-color: $primary-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Positive
+.segmented-controller-positive {
+  border: 1px solid $positive-color;
 
-      // Set color of links to white
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $positive-color;
+    }
+    &:active {
+      background-color: lighten($positive-color, 35%);
+    }
+    &.selected {
+      background-color: $positive-color;
+      
+      > a {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// Negative
+.segmented-controller-negative {
+  border: 1px solid $negative-color;
+
+  li {
+    border-color: inherit;
+    
+    > a {
+      color: $negative-color;
+    }
+    &:active {
+      background-color: lighten($negative-color, 35%);
+    }
+    &.selected {
+      background-color: $negative-color;
+      
       > a {
         color: #fff;
       }
@@ -71,15 +136,5 @@
 
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
-  margin: 3px 0;
-  @include box-flex(1);
-}
-.bar-nav .segmented-controller {
-  margin-bottom: 4px;
+  margin: 8px auto 0;
 }
-
-// Add margins between segmented controllers and buttons
-[class*="bar-"] .segmented-controller + [class*="button"],
-[class*="bar-"] [class*="button"] + .segmented-controller {
-  margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons
-}
\ No newline at end of file
diff --git a/lib/sass/sliders.scss b/lib/sass/sliders.scss
index abaa98c..fc29ac6 100644
--- a/lib/sass/sliders.scss
+++ b/lib/sass/sliders.scss
@@ -35,4 +35,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/lib/sass/table-views.scss b/lib/sass/table-views.scss
index 2f560e5..66fc21b 100644
--- a/lib/sass/table-views.scss
+++ b/lib/sass/table-views.scss
@@ -12,14 +12,12 @@
   .table-view-cell {
     position: relative;
     padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
-    @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
-
+    border-bottom: $border-default;
 
     // Remove the border from the last table view item
-    &:last-child {
-      background-image: none;
+    &:last-child { 
+      border-bottom: 0;
     }
-
     // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
     > a:not([class*="button"]) {
       position: relative;
@@ -32,30 +30,11 @@
         background-color: #eee;
       }
     }
-
     p {
       margin: 0;
     }
   }
 
-
-  // Inset table views
-  // --------------------------------------------------
-
-  &.inset {
-    width: auto;
-    margin-right: 10px;
-    margin-left: 10px;
-    border: 1px solid rgba(0, 0, 0, .15);
-    border-radius: 6px;
-
-    // Remove border from last standard list items to avoid double border at top/bottom of table views
-    li:last-child {
-      background-image: none;
-    }
-  }
-
-
   // Table view dividers
   // --------------------------------------------------
 
@@ -67,18 +46,19 @@
     margin-left: 0;
     color: #999;
     font-weight: $font-weight;
+    border-top: $border-default;
+    border-bottom: $border-default;
     background-color: #fafafa;
-    @include hairline(double, #c8c7cc, 0);  // Double (top and bottom) grey border with no offset.
 
     // Rounding first divider on inset lists and remove border on the top
     &:first-child {
       top: 0;
-      border-radius: 6px 6px 0 0;
+      border-radius: $border-radius $border-radius 0 0;
     }
 
     // Rounding last divider on inset table views
     &:last-child {
-      border-radius: 0 0 6px 6px;
+      border-radius: 0 0 $border-radius $border-radius;
     }
   }
 
@@ -96,10 +76,12 @@
   }
 
   // Position chevrons/badges vertically centered on the right in table view items
-  .chevron,
-  [class*="badge"] {
+  .chevron {
     margin-top: -10px; // Half height of chevron
   }
+  [class*="badge"] {
+    margin-top: -9px; // Aligned just right
+  }
 
   // Push badge over if there's a sibling chevron
   .chevron + [class*="badge"] {
@@ -111,7 +93,7 @@
     left: auto;
     margin-top: -12px; // Half height of button
   }
-
+  
   .toggle {
     margin-top: -15px; // Half height of toggle
   }
@@ -136,6 +118,14 @@
   }
 }
 
+// Table views in cards
+// --------------------------------------------------
+
+.card .table-view li:last-child {
+  border: 0;
+}
+
+
 // Table views in popovers
 // --------------------------------------------------
 
@@ -147,6 +137,6 @@
   margin-left: 0;
   overflow: auto;
   background-color: #fff;
-  border-radius: 12px;
+  border-radius: $border-radius;
   -webkit-overflow-scrolling: touch;
-}
\ No newline at end of file
+}
diff --git a/lib/sass/theme-android.scss b/lib/sass/theme-android.scss
new file mode 100644
index 0000000..4d9da26
--- /dev/null
+++ b/lib/sass/theme-android.scss
@@ -0,0 +1,409 @@
+@import "mixins.scss";
+
+//
+// Android theme
+// The visual and interaction styles for Android
+//
+// --------------------------------------------------
+
+
+// Variables
+// --------------------------------------------------
+
+// Type (Change to Roboto)
+$font-family-default: "Helvetica Neue", Helvetica, sans-serif;
+$font-size-default: 17px;
+$font-weight: 500;
+$font-weight-light: 400;
+$line-height-default: 21px;
+
+// Colors
+// Main theme colors
+$primary-color:  #33b5e5;
+$chrome-color:   #111;
+
+// Action colors
+$default-color:  #fff;
+$positive-color: #81c700;
+$negative-color: #f20754;
+
+// Bars
+$bar-base-height:  50px;
+$bar-tab-height:   70px;
+
+// Borders
+$border-default: 1px solid #565656;
+$border-radius: 0;
+
+
+// Base
+// --------------------------------------------------
+
+.content {
+  @include gradient($chrome-color,lighten($chrome-color, 10%));
+}
+
+// Bars
+// --------------------------------------------------
+
+[class*="bar-"] {
+  height: $bar-base-height;
+  background-color: $chrome-color;
+  border-bottom: $border-default;
+
+  // Modifier class to dock any bar below .bar-nav
+  &.bar-header-secondary {
+    top: $bar-base-height + 1;
+  }
+}
+.bar-tab {
+  height: $bar-tab-height;
+  border-top: $border-default;
+  border-bottom: 0;
+}
+// Left aligned text in the .bar-nav 
+.title {
+  position: static;
+  padding-left: 10px;
+  line-height: $bar-base-height;
+  color: $default-color;
+  text-align: left;
+}
+
+
+// Nav bar in popovers
+// --------------------------------------------------
+
+.popover .bar-nav {
+  border-bottom: $border-default;
+}
+
+
+// Table views
+// --------------------------------------------------
+
+.table-view {
+  .table-view-cell {
+    border-bottom: $border-default;
+  
+    // Remove the border from the last table view item
+    &:last-child {
+      background-image: none;
+    }
+  }
+
+  // Table view dividers
+  .table-view-divider {
+    border-top: 0;
+    border-bottom: 0;
+  }
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+
+// Forms
+// --------------------------------------------------
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;  border: 1px solid rgba(0, 0, 0, .2);
+}
+
+// Rounded search input
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0,0,0,.1);
+  border: 0;
+  border-radius: 6px;
+}
+input[type=search]:focus {
+  text-align: left;
+}
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+// Input groups (cluster multiple inputs together into a single group)
+// -------------------------------------------------------------------
+.input-group {
+  padding: 0;
+}
+.input-group input {
+  border: 0;
+}
+// Remove bottom border on last input to avoid double bottom border
+.input-group input:last-child {
+  background-image: none;
+}
+
+// Input groups with labels
+// --------------------------------------------------
+
+// To use labels with input groups, wrap a label and an input in an .input-row
+.input-row {
+  border-bottom: 0;
+}
+// Remove bottom border on last input-row to avoid double bottom border
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+
+// Buttons
+// --------------------------------------------------
+
+[class*="button"] {
+  border: $border-default;
+  color: $default-color;
+  background-color: $chrome-color;
+  border-radius: 3px;
+
+  // Active & filled button styles
+  &:active,
+  &.active {
+    color: #fff;
+    background-color: $default-color;
+  }
+}
+[class*="bar-"] {
+  [class*="button"] {
+    padding-top: 9px;
+    padding-bottom: 9px;
+  }
+  .button-link {
+    padding: 0;
+    color: $primary-color;
+    line-height: $bar-base-height;
+
+    &:active,
+    &.active {
+      color: darken($primary-color, 10%);
+    }
+  }
+}
+
+
+// Other button types
+// --------------------------------------------------
+
+// Primary button (Default color is blue)
+.button-primary {
+  color: #fff;
+  border: 1px solid $primary-color;
+  background-color: $primary-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($primary-color, 10%);
+    background-color: darken($primary-color, 10%);
+  }
+}
+
+// Positive button (Default color is green)
+.button-positive {
+  color: #fff;
+  border: 1px solid $positive-color;
+  background-color: $positive-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($positive-color, 10%);
+    background-color: darken($positive-color, 10%);
+  }
+}
+
+// Negative button (Default color is red)
+.button-negative {
+  color: #fff;
+  border: 1px solid $negative-color;
+  background-color: $negative-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($negative-color, 10%);
+    background-color: darken($negative-color, 10%);
+  }
+}
+
+// Outlined buttons 
+.button-outlined {
+  background-color: transparent;
+
+  &.button-primary {
+    color: $primary-color;
+  }
+  &.button-positive {
+    color: $positive-color;
+  }
+  &.button-negative {
+    color: $negative-color;
+  }
+  // Active states
+  &.button-primary:active,
+  &.button-positive:active,
+  &.button-negative:active {
+    color: #fff;
+  }
+}
+
+// Link button (Buttons that look like links)
+.button-link {
+  color: $primary-color;
+  background-color: transparent;
+  border: none;
+
+  &:active,
+  &.active {
+    color: darken($primary-color, 10%);
+    background-color: transparent;
+  }
+}
+
+// Buttons in nav bars
+// --------------------------------------------------
+
+.bar-nav {
+  .button-link {
+    color: $primary-color;
+
+    &:active {
+      color: $primary-color;
+      opacity: .6;
+    }
+  }
+}
+
+
+//
+// Badges
+// --------------------------------------------------
+
+[class*="badge"] {
+  &.badge-inverted {
+    color: $default-color;
+  }
+}
+
+
+// Badge modifiers
+// --------------------------------------------------
+
+// Main badge
+.badge-primary {
+  color: #fff;
+  background-color: $primary-color;
+
+  &.badge-inverted {
+    color: $primary-color;
+  }
+}
+
+// Positive badge
+.badge-positive {
+  color: #fff;
+  background-color: $positive-color;
+
+  &.badge-inverted {
+    color: $positive-color;
+  }
+}
+
+// Negative badge
+.badge-negative {
+  color: #fff;
+  background-color: $negative-color;
+
+  &.badge-inverted {
+    color: $negative-color;
+  }
+}
+
+
+//
+// Segmented controllers
+// --------------------------------------------------
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid $primary-color;
+  border-radius: 3px;
+
+  li {
+    border-left: 1px solid $primary-color;
+    
+    // Link that fills each section
+    > a {
+      padding-top: 9px;
+      padding-bottom: 10px;
+      color: $primary-color;
+    }
+
+    // Selected segment of controller
+    &.selected {
+      background-color: $primary-color;
+    }
+  }
+}
+
+
+//
+// Popovers
+// --------------------------------------------------
+
+.popover {
+  border-radius: 12px;
+
+  &:after {
+    border-bottom: 15px solid $chrome-color;
+  }
+}
+
+
+//
+// Modal styles
+// --------------------------------------------------
+
+//
+// Toggles styles
+// --------------------------------------------------
+.toggle {
+  // Sliding handle
+  .toggle-handle {
+    border: $border-default;
+  }
+  &:active .toggle-handle {
+    width: 35px;
+  }
+  // Active state for toggle
+  &.active {
+    border: 2px solid $positive-color;
+    background-color: $positive-color;
+
+    .toggle-handle {
+      border-color: $positive-color;
+    }
+  }
+}
diff --git a/lib/sass/theme-ios.scss b/lib/sass/theme-ios.scss
new file mode 100644
index 0000000..db9883c
--- /dev/null
+++ b/lib/sass/theme-ios.scss
@@ -0,0 +1,465 @@
+@import "mixins.scss";
+
+//
+// iOS theme
+// The visual and interaction styles from iOS
+//
+// --------------------------------------------------
+
+
+// Variables
+// --------------------------------------------------
+
+// Colors
+// Main theme colors
+$primary-color:  #007aff;
+$chrome-color:   rgba(247,247,247,.98);
+
+// Action colors
+$default-color:  #929292;
+$positive-color: #4cd964;
+$negative-color: #dd524d;
+
+// Bars
+$bar-base-height:  44px;
+$bar-tab-height:   50px;
+
+// iOS style transitions
+$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
+
+
+// Base
+// --------------------------------------------------
+
+.content {
+  background-color: #efeff4;
+}
+
+
+// Bars
+// --------------------------------------------------
+
+[class*="bar-"] {
+  border-bottom: 0;
+  background-color: $chrome-color;
+  @include box-shadow(0 0 1px rgba(0,0,0,.85));
+
+  // Modifier class to dock any bar below .bar-nav
+  &.bar-header-secondary {
+    top: $bar-base-height;
+  }
+
+  // Modifier class to dock any bar above a standard bar
+  &.bar-footer-secondary {
+    bottom: $bar-base-height;
+  }
+
+  // Modifier class to dock any bar above a .bar-tab
+  &.bar-footer-secondary-tab {
+    bottom: $bar-tab-height;
+  }
+}
+.bar-tab {
+  border-top: 0;
+  @include box-shadow(0 0 -1px rgba(0,0,0,.85));
+}
+
+
+// Nav bar in popovers
+// --------------------------------------------------
+
+.popover .bar-nav {
+  border-bottom: 1px solid rgba(0,0,0,.15);
+}
+
+
+// Table views
+// --------------------------------------------------
+
+.table-view {
+  .table-view-cell {
+    border-bottom: 0;
+    @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
+  
+    // Remove the border from the last table view item
+    &:last-child {
+      background-image: none;
+    }
+  }
+  // Table view dividers
+  // --------------------------------------------------
+
+  .table-view-divider {
+    border-top: 0;
+    border-bottom: 0;
+    @include hairline(double, #c8c7cc, 0);  // Double (top and bottom) grey border with no offset.
+  }
+}
+
+.popover .table-view {
+  border-radius: 12px;
+}
+
+.card .table-view li:last-child {
+  background-image: none;
+}
+
+
+// Forms
+// --------------------------------------------------
+
+select,
+textarea,
+input[type="text"],
+input[type=search],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="tel"],
+input[type="color"],
+.input-group {
+  height: 40px;
+  padding: 10px 15px;  border: 1px solid rgba(0, 0, 0, .2);
+}
+
+// Rounded search input
+input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0,0,0,.1);
+  border: 0;
+  border-radius: 6px;
+}
+input[type=search]:focus {
+  text-align: left;
+}
+select,
+textarea,
+.input-group {
+  height: auto;
+}
+
+// Input groups (cluster multiple inputs together into a single group)
+// -------------------------------------------------------------------
+.input-group {
+  padding: 0;
+}
+.input-group input {
+  border: 0;
+  @include hairline(single, #c8c7cc, 15px);
+}
+// Remove bottom border on last input to avoid double bottom border
+.input-group input:last-child {
+  background-image: none;
+}
+
+// Input groups with labels
+// --------------------------------------------------
+
+// To use labels with input groups, wrap a label and an input in an .input-row
+.input-row {
+  border-bottom: 0;
+  @include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
+}
+// Remove bottom border on last input-row to avoid double bottom border
+.input-row:last-child,
+.input-row label + input {
+  background-image: none;
+}
+
+
+// Buttons
+// --------------------------------------------------
+
+[class*="button"] {
+  border: 1px solid $default-color;
+  color: $default-color;
+  background-color: $chrome-color;
+  @include transition(all);
+  @include transition-duration(.2s);
+  @include transition-timing-function(linear);
+
+  // Active & filled button styles
+  &:active,
+  &.active {
+    color: #fff;
+    background-color: $default-color;
+  }
+}
+
+
+// Other button types
+// --------------------------------------------------
+
+// Primary button (Default color is blue)
+.button-primary {
+  color: #fff;
+  border: 1px solid $primary-color;
+  background-color: $primary-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($primary-color, 10%);
+    background-color: darken($primary-color, 10%);
+  }
+}
+
+// Positive button (Default color is green)
+.button-positive {
+  color: #fff;
+  border: 1px solid $positive-color;
+  background-color: $positive-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($positive-color, 10%);
+    background-color: darken($positive-color, 10%);
+  }
+}
+
+// Negative button (Default color is red)
+.button-negative {
+  color: #fff;
+  border: 1px solid $negative-color;
+  background-color: $negative-color;
+
+  &:active,
+  &.active {
+    border: 1px solid darken($negative-color, 10%);
+    background-color: darken($negative-color, 10%);
+  }
+}
+
+// Outlined buttons 
+.button-outlined {
+  background-color: transparent;
+
+  &.button-primary {
+    color: $primary-color;
+  }
+  &.button-positive {
+    color: $positive-color;
+  }
+  &.button-negative {
+    color: $negative-color;
+  }
+  // Active states
+  &.button-primary:active,
+  &.button-positive:active,
+  &.button-negative:active {
+    color: #fff;
+  }
+}
+
+// Link button (Buttons that look like links)
+.button-link {
+  color: $primary-color;
+  background-color: transparent;
+  border: none;
+
+  &:active,
+  &.active {
+    color: darken($primary-color, 10%);
+    background-color: transparent;
+  }
+}
+
+// Buttons in nav bars
+// --------------------------------------------------
+
+.bar-nav {
+  .button-link {
+    color: $primary-color;
+
+    &:active {
+      color: $primary-color;
+      opacity: .6;
+    }
+  }
+}
+
+
+//
+// Badges
+// --------------------------------------------------
+
+[class*="badge"] {
+  &.badge-inverted {
+    color: $default-color;
+  }
+}
+
+
+// Badge modifiers
+// --------------------------------------------------
+
+// Main badge
+.badge-primary {
+  color: #fff;
+  background-color: $primary-color;
+
+  &.badge-inverted {
+    color: $primary-color;
+  }
+}
+
+// Positive badge
+.badge-positive {
+  color: #fff;
+  background-color: $positive-color;
+
+  &.badge-inverted {
+    color: $positive-color;
+  }
+}
+
+// Negative badge
+.badge-negative {
+  color: #fff;
+  background-color: $negative-color;
+
+  &.badge-inverted {
+    color: $negative-color;
+  }
+}
+
+
+//
+// Segmented controllers
+// --------------------------------------------------
+
+.segmented-controller {
+  background-color: transparent;
+  border: 1px solid $primary-color;
+
+  li {
+    border-left: 1px solid $primary-color;
+    @include transition(background-color .1s linear);
+    
+    // Link that fills each section
+    > a {
+      color: $primary-color;
+    }
+
+    // Selected segment of controller
+    &.selected {
+      background-color: $primary-color;
+    }
+  }
+}
+
+
+//
+// Popovers
+// --------------------------------------------------
+
+.popover {
+  border-radius: 12px;
+  @include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
+
+  &:after {
+    border-bottom: 15px solid $chrome-color;
+  }
+}
+
+
+//
+// Modal styles
+// --------------------------------------------------
+
+.modal {
+  @include transition-timing-function($timing-fuction);
+
+  // Active modal
+  &.active {
+    @include transition-timing-function($timing-fuction);
+  }
+}
+
+//
+// Toggles styles
+// --------------------------------------------------
+.toggle {
+  width: 47px;
+  border: 2px solid #e6e6e6;
+  @include box-shadow(inset 0 0 0 0 #e1e1e1);
+  @include transition-property(box-shadow, border);
+  @include transition-duration(.2s);
+
+  // Sliding handle
+  .toggle-handle {
+    border: 1px solid rgba(0, 0, 0, .2);
+    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
+    @include transition-property(-webkit-transform, border, width);
+  }
+  &:before {
+    display: none;
+  }
+  &:active .toggle-handle {
+    width: 35px;
+  }
+  // Active state for toggle
+  &.active {
+    border: 2px solid $positive-color;
+    background-color: transparent;
+    @include box-shadow(inset 0 0 0 13px $positive-color);
+
+    .toggle-handle {
+      @include transform(translate3d(17px,0,0)); 
+    }
+
+    // When the handle and the container is active
+    &:active .toggle-handle,
+    .toggle-handle:active {
+      @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
+    }
+
+    .toggle-handle {
+      border-color: $positive-color;
+    }
+  }
+}
+
+
+//
+// Push styles
+// --------------------------------------------------
+.content {
+  
+  // Fade animation 
+  &.fade {
+    @include transition(opacity .2s ease-in-out);
+  }
+  // Slide animation
+  &.slide {
+    @include transition-timing-function ($timing-fuction);
+
+    // Adding the overlay
+    &.sliding-in,
+    &.right:not([class*="sliding-in"]) {
+      @include animation-name(fadeOverlay);
+      @include animation-duration(.4s);
+    }
+
+    &.right:not([class*="sliding-in"]) {
+      @include animation-direction(reverse);
+    }
+
+    &.left {
+      @include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect
+    }
+  }
+}
+
+// Overlay animation for the slide transition
+@-webkit-keyframes fadeOverlay {
+  from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
+  to   { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); }
+}
diff --git a/lib/sass/toggles.scss b/lib/sass/toggles.scss
index 25b827f..165e34a 100644
--- a/lib/sass/toggles.scss
+++ b/lib/sass/toggles.scss
@@ -3,14 +3,14 @@
 // --------------------------------------------------
 
 .toggle {
+  display: block;
   position: relative;
-  width: 47px;
+  width: 74px;
   height: 30px;
   background-color: #fff;
-  border: 2px solid #e6e6e6;
+  border: 2px solid #ddd;
   border-radius: 20px;
-  @include box-shadow(inset 0 0 0 0 #e1e1e1);
-  @include transition-property(box-shadow, border);
+  @include transition-property(background-color, border);
   @include transition-duration(.2s);
 
   // Sliding handle
@@ -22,30 +22,38 @@
     width: 28px;
     height: 28px;
     background-color: #fff;
-    border: 1px solid rgba(0, 0, 0, .2);
+    border: 1px solid #ddd;
     border-radius: 100px;
-    @include box-shadow(0 3px 3px rgba(0,0,0,.08));
     @include transition-property(-webkit-transform, border, width);
     @include transition-duration(.2s);
   }
-
-  &:active .toggle-handle {
-    width: 35px;
+  &:before {
+    position: absolute;
+    top: 3px;
+    right: 11px;
+    color: #999;
+    text-transform: uppercase;
+    content: "Off";
   }
 
   // Active state for toggle
   &.active {
     border: 2px solid $positive-color;
-    @include box-shadow(inset 0 0 0 13px $positive-color);
+    background-color: $positive-color;
 
     .toggle-handle {
       border-color: $positive-color;
-      @include transform(translate3d(17px,0,0)); 
+      @include transform(translate3d(44px,0,0)); 
     }
-    // Handle when the handle and the container is active
-    &:active .toggle-handle,
-    .toggle-handle:active {
-      @include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
+    &:before {
+      right: auto;
+      left: 15px;
+      color: #fff;
+      content: "On";
     }
   }
-}
\ No newline at end of file
+  // Hide the checkbox
+  input[type="checkbox"] {
+    display: none;
+  }
+}
diff --git a/lib/sass/variables.scss b/lib/sass/variables.scss
index 6c92e48..b6531fe 100644
--- a/lib/sass/variables.scss
+++ b/lib/sass/variables.scss
@@ -16,35 +16,39 @@ $line-height-default: 21px;
 // --------------------------------------------------
 
 // Main theme colors
-$primary-color: #007aff;
-$chrome-color: rgba(247,247,247,.98);
+$primary-color: #428bca;
+$chrome-color:  #fff;
 
 // Action colors
-$default-color:  #929292;
-$positive-color: #4cd964;
-$negative-color: #dd524d;
+$default-color:  #fff;
+$positive-color: #5cb85c;
+$negative-color: #d9534f;
 
 
 // Bars
 // --------------------------------------------------
+
 $bar-base-height:  44px;
 $bar-tab-height:   50px;
 $bar-side-spacing: 10px;
 
+// Cards
+// --------------------------------------------------
+
+$card-bg: #fff;
 
 // Buttons
 // --------------------------------------------------
-$button-directional-padding: 20px;
-$button-directional-margin: -($bar-side-spacing/2);
-$button-font-size: 12px;
 
+$button-font-size: 12px;
 
 // Transitions
 // --------------------------------------------------
+
 $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
 
-// Misc
+// Borders
 // --------------------------------------------------
 
-// Hairline dividers (.5px tall for retina devices.)
-$hairline: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"); // Thanks to @madrobby
+$border-default: 1px solid #ddd;
+$border-radius: 6px;
diff --git a/package.json b/package.json
index 6160654..9c69e72 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,7 @@
 {
   "name": "ratchet",
+  "description": "Prototype iPhone apps with simple HTML, CSS, and JS components.",
   "version": "2.0.0",
-  "dependencies": {},
-  "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-contrib-concat": "~0.3.0",
-    "grunt-contrib-jshint": "~0.6.4",
-    "grunt-contrib-nodeunit": "~0.2.2",
-    "grunt-contrib-sass": "~0.5.0",
-    "grunt-contrib-watch": "~0.5.3",
-    "grunt-jekyll": "~0.4.0"
-  },
   "keywords": [
     "ratchet",
     "css",
@@ -31,5 +22,14 @@
       "type": "MIT",
       "url": "http://www.opensource.org/licenses/MIT"
     }
-  ]
+  ],
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-concat": "~0.3.0",
+    "grunt-contrib-jshint": "~0.7.0",
+    "grunt-contrib-nodeunit": "~0.2.2",
+    "grunt-contrib-sass": "~0.6.0",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-jekyll": "~0.4.0"
+  }
 }