diff --git a/components.html b/components.html
index 1f3b600..0db6eb2 100644
--- a/components.html
+++ b/components.html
@@ -76,8 +76,8 @@ base_url: "../"
       <p class="component-description">Buttons in a title bar are left or right aligned and should be used for actions.</p>
 
       <div class="component-example component-example-fullbleed">
-        <header class="bar-nav pull-left">
-          <a class="button">
+        <header class="bar-nav">
+          <a class="button pull-left">
             Left
           </a>
           <a class="button pull-right">
@@ -186,7 +186,7 @@ base_url: "../"
 
       <div class="component-example component-example-fullbleed">
         <nav class="bar-tab">
-          <a class="tab-item active" href="#">
+          <a class="tab-item selected" href="#">
             <span class="icon icon-share"></span>
             <div class="tab-label">Label</div>
           </a>
@@ -211,7 +211,7 @@ base_url: "../"
 
 {% highlight html %}
 <nav class="bar-tab">
-  <a class="tab-item active" href="#">
+  <a class="tab-item selected" href="#">
     <span class="icon icon-share"></span>
     <div class="tab-label">Label</div>
   </a>
@@ -555,6 +555,7 @@ base_url: "../"
       <a class="button-primary">Button</a>
       <a class="button-positive">Button</a>
       <a class="button-negative">Button</a>
+      <a class="button-link">Button</a>
     </div>
 
 {% highlight html %}
@@ -562,6 +563,7 @@ base_url: "../"
 <a class="button-primary">Button</a>
 <a class="button-positive">Button</a>
 <a class="button-negative">Button</a>
+<a class="button-link">Button</a>
 {% endhighlight %}
 
   </article>
@@ -637,17 +639,9 @@ base_url: "../"
         </li>
       </ul>
       <div class="card">
-        <ul class="table-view">
-          <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
-            Item 1
-          </li>
-          <li id="item2mobile" class="table-view-cell segmented-controller-item">
-            Item 2
-          </li>
-          <li id="item3mobile" class="table-view-cell segmented-controller-item">
-            Item 3
-          </li>
-        </ul>
+        <p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
+        <p id="item2mobile" class="segmented-controller-item">Item 2</p>
+        <p id="item3mobile" class="segmented-controller-item">Item 3</p>
       </div>
     </div>
 
@@ -664,17 +658,10 @@ base_url: "../"
   </li>
 </ul>
 <div class="card">
-  <ul class="table-view">
-    <li id="item1mobile" class="table-view-cell segmented-controller-item selected">
-      Item 1
-    </li>
-    <li id="item2mobile" class="table-view-cell segmented-controller-item">
-      Item 2
-    </li>
-    <li id="item3mobile" class="table-view-cell segmented-controller-item">
-      Item 3
-    </li>
-  </ul>
+  <p id="item1mobile" class="segmented-controller-item selected">Item 1</p>
+  <p id="item2mobile" class="segmented-controller-item">Item 2</p>
+  <p id="item3mobile" class="segmented-controller-item">Item 3</p>
+</div>
 </div>
 {% endhighlight %}
 
@@ -908,7 +895,7 @@ document
           </a>
         </header>
         
-        <div class="content content-padded">
+        <div class="content">
           <p>The contents of my modal</p>
         </div>
       </div>
@@ -924,7 +911,7 @@ document
     </a>
   </header>
   
-  <div class="content content-padded">
+  <div class="content">
     <p>The contents of my modal</p>
   </div>
 </div>
diff --git a/dist/ratchet.css b/dist/ratchet.css
index a0babc1..170da68 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -262,10 +262,6 @@ strong {
   transform: translateZ(0px);
 }
 
-.content-padded {
-  padding: 10px;
-}
-
 .bar-nav ~ .content {
   padding-top: 44px;
 }
@@ -370,8 +366,8 @@ strong {
   height: 24px;
   margin-top: -2px;
 }
-.tab-item.active .tab-label,
-.tab-item.active .icon, .tab-item:active .tab-label,
+.tab-item.selected .tab-label,
+.tab-item.selected .icon, .tab-item:active .tab-label,
 .tab-item:active .icon {
   color: #428bca;
 }
@@ -608,7 +604,7 @@ select {
 
 [class*="bar-"] input[type=search] {
   height: 29px;
-  margin: 2px 0;
+  margin: 6px 0;
 }
 
 [class*="button"] {
@@ -838,6 +834,7 @@ input[type="button"] {
 }
 
 .segmented-controller {
+  position: relative;
   display: table;
   padding: 0;
   overflow: hidden;
@@ -940,7 +937,8 @@ input[type="button"] {
 }
 
 [class*="bar-"] .segmented-controller {
-  margin: 8px auto 0;
+  top: 8px;
+  margin: 0 auto;
 }
 
 .popover {
diff --git a/docs-assets/css/docs.css b/docs-assets/css/docs.css
index 33af056..3eb4aed 100644
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@@ -8,1290 +8,1297 @@
  * =====================================================
  */
 
-.platform-ios {
-  @-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);
-    }
+html,
+body {
+  width: 100%;
+  height: 100%;
 }
 
+body {
+  position: relative !important;
+  font: 14px/1.5 "adelle-sans",sans-serif;
+  color: #333;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-size-adjust: 100%;
 }
-.platform-ios .content {
-  background-color: #efeff4;
-}
-.platform-ios [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);
-}
-.platform-ios [class*="bar-"].bar-header-secondary {
-  top: 44px;
-}
-.platform-ios [class*="bar-"].bar-footer-secondary {
-  bottom: 44px;
-}
-.platform-ios [class*="bar-"].bar-footer-secondary-tab {
-  bottom: 50px;
-}
-.platform-ios .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);
-}
-.platform-ios .tab-item.active .tab-label,
-.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label,
-.platform-ios .tab-item:active .icon {
-  color: #007aff;
-}
-.platform-ios .popover .bar-nav {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-}
-.platform-ios .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;
+
+.docs-header {
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
 }
-.platform-ios .table-view .table-view-cell:last-child {
-  background-image: none;
+
+.docs-nav {
+  position: relative;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
-.platform-ios .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;
+.docs-nav .icon,
+.docs-nav .version {
+  position: absolute;
+  color: #fff;
+  opacity: .4;
+  -webkit-transition: opacity 0.2s linear;
+  transition: opacity 0.2s linear;
 }
-.platform-ios .popover .table-view {
-  border-radius: 12px;
+.docs-nav .icon:hover,
+.docs-nav .version:hover {
+  opacity: 1;
 }
-.platform-ios .card .table-view li:last-child {
-  background-image: none;
+.docs-nav .icon {
+  top: 18px;
+  right: 0;
+  cursor: pointer;
 }
-.platform-ios select,
-.platform-ios textarea,
-.platform-ios input[type="text"],
-.platform-ios input[type=search],
-.platform-ios input[type="password"],
-.platform-ios input[type="datetime"],
-.platform-ios input[type="datetime-local"],
-.platform-ios input[type="date"],
-.platform-ios input[type="month"],
-.platform-ios input[type="time"],
-.platform-ios input[type="week"],
-.platform-ios input[type="number"],
-.platform-ios input[type="email"],
-.platform-ios input[type="url"],
-.platform-ios input[type="tel"],
-.platform-ios input[type="color"],
-.platform-ios .input-group {
-  height: 40px;
-  padding: 10px 15px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+.docs-nav .version {
+  top: 21px;
+  left: 0;
 }
-.platform-ios input[type=search] {
-  height: 34px;
+
+.docs-nav,
+.docs-header-content {
   text-align: center;
-  background-color: rgba(0, 0, 0, 0.1);
-  border: 0;
-  border-radius: 6px;
-}
-.platform-ios input[type=search]:focus {
-  text-align: left;
-}
-.platform-ios select,
-.platform-ios textarea,
-.platform-ios .input-group {
-  height: auto;
-}
-.platform-ios .input-group {
-  padding: 0;
-}
-.platform-ios .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;
 }
-.platform-ios .input-group input:last-child {
-  background-image: none;
+
+.docs-header-content {
+  padding-top: 50px;
+  padding-bottom: 50px;
 }
-.platform-ios .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;
+.docs-header-content .button {
+  padding: 15px 30px 16px;
+  font-size: 18px;
+  color: #00d1fe;
+  border-color: #00d1fe;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
 }
-.platform-ios .input-row:last-child,
-.platform-ios .input-row label + input {
-  background-image: none;
+.docs-header-content .button:hover {
+  color: #63e3ff;
+  border-color: #63e3ff;
 }
-.platform-ios [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;
+.docs-header-content .button:active {
+  opacity: .5;
+  background-color: transparent;
 }
-.platform-ios [class*="button"]:active, .platform-ios [class*="button"].active {
+.docs-header-content .button-primary {
+  margin-left: 10px;
   color: #fff;
-  background-color: #929292;
+  border-color: #00d1fe;
+  background-color: #00d1fe;
 }
-.platform-ios .button-primary {
+.docs-header-content .button-primary:hover {
   color: #fff;
-  border: 1px solid #007aff;
-  background-color: #007aff;
+  border-color: #63e3ff;
+  background-color: #63e3ff;
 }
-.platform-ios .button-primary:active, .platform-ios .button-primary.active {
-  border: 1px solid #0062cc;
-  background-color: #0062cc;
+.docs-header-content .button-primary:active {
+  background-color: #63e3ff;
 }
-.platform-ios .button-positive {
+
+.docs-title,
+.docs-subtitle {
   color: #fff;
-  border: 1px solid #4cd964;
-  background-color: #4cd964;
 }
-.platform-ios .button-positive:active, .platform-ios .button-positive.active {
-  border: 1px solid #2ac845;
-  background-color: #2ac845;
+
+.docs-title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 6px;
 }
-.platform-ios .button-negative {
+
+.docs-subtitle {
+  max-width: 750px;
+  margin: 0 auto 20px;
+  font-size: 24px;
+  font-weight: 100;
+  line-height: 34px;
+}
+
+.docs-sub-content {
+  padding-top: 50px;
   color: #fff;
-  border: 1px solid #dd524d;
-  background-color: #dd524d;
+  text-align: center;
 }
-.platform-ios .button-negative:active, .platform-ios .button-negative.active {
-  border: 1px solid #cf2d28;
-  background-color: #cf2d28;
+.docs-sub-content .page-title,
+.docs-sub-content .page-description {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 300;
 }
-.platform-ios .button-outlined {
-  background-color: transparent;
+.docs-sub-content .page-title {
+  font-size: 40px;
 }
-.platform-ios .button-outlined.button-primary {
-  color: #007aff;
+.docs-sub-content .page-description {
+  font-size: 24px;
+  opacity: .7;
 }
-.platform-ios .button-outlined.button-positive {
-  color: #4cd964;
+
+.docs-section {
+  padding-top: 80px;
+  padding-bottom: 80px;
 }
-.platform-ios .button-outlined.button-negative {
-  color: #dd524d;
+
+.section-header {
+  text-align: center;
 }
-.platform-ios .button-outlined.button-primary:active, .platform-ios .button-outlined.button-positive:active, .platform-ios .button-outlined.button-negative:active {
-  color: #fff;
-}
-.platform-ios .button-link {
-  color: #007aff;
-  background-color: transparent;
-  border: none;
-}
-.platform-ios .button-link:active, .platform-ios .button-link.active {
-  color: #0062cc;
-  background-color: transparent;
+.section-header:after {
+  display: block;
+  content: '';
+  width: 200px;
+  margin: 50px auto 80px;
+  border-bottom: 1px solid #eee;
 }
-.platform-ios .bar-nav .button-link {
-  color: #007aff;
+
+.section-heading,
+.section-lead {
+  margin-top: 0;
+  margin-bottom: 0;
 }
-.platform-ios .bar-nav .button-link:active {
-  color: #007aff;
-  opacity: .6;
+
+.section-heading {
+  font-size: 55px;
+  font-weight: 300;
 }
-.platform-ios [class*="badge"].badge-inverted {
-  color: #929292;
+
+.section-lead {
+  font-size: 24px;
+  color: #777;
+  font-weight: 100;
 }
-.platform-ios .badge-primary {
-  color: #fff;
-  background-color: #007aff;
+
+.social {
+  padding: 20px 0 20px;
+  margin: 0;
+  list-style: none;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+  background-color: #f9f9f9;
 }
-.platform-ios .badge-primary.badge-inverted {
-  color: #007aff;
+.social li {
+  height: 20px;
+  display: inline-block;
+  vertical-align: top;
 }
-.platform-ios .badge-positive {
-  color: #fff;
-  background-color: #4cd964;
+.social [class*="button"] {
+  padding: 0;
+  border: 0;
 }
-.platform-ios .badge-positive.badge-inverted {
-  color: #4cd964;
+.social iframe {
+  background-color: transparent;
 }
-.platform-ios .badge-negative {
-  color: #fff;
-  background-color: #dd524d;
+
+.docs-benefits {
+  padding-bottom: 0;
+  text-align: center;
 }
-.platform-ios .badge-negative.badge-inverted {
-  color: #dd524d;
+
+.benefit-icon {
+  display: block;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 30px;
+  border: 1px solid #eee;
+  border-radius: 40px;
 }
-.platform-ios .segmented-controller {
-  color: #929292;
-  background-color: transparent;
-  border: 1px solid #929292;
+.benefit-icon .icon {
+  color: #14b9d6;
+  font-size: 32px;
+  line-height: 80px;
 }
-.platform-ios .segmented-controller li {
-  border-color: #929292;
-  -webkit-transition: background-color 0.1s linear;
-  transition: background-color 0.1s linear;
+
+.benefit-heading {
+  font-weight: 500;
+  font-size: 24px;
+  margin-top: 5px;
+  margin-bottom: 10px;
 }
-.platform-ios .segmented-controller li:active {
-  background-color: #ebebeb;
+
+.benefit-text {
+  margin-top: 0;
+  margin-bottom: 100px;
+  font-size: 18px;
+  color: #777;
 }
-.platform-ios .segmented-controller li.selected {
-  background-color: #929292;
+
+.docs-contribute {
+  padding-top: 50px;
+  padding-bottom: 50px;
+  color: #fff;
+  text-align: center;
+  background-color: #00d1fe;
 }
-.platform-ios .segmented-controller li.selected > a {
+.docs-contribute .link {
+  display: inline-block;
+  margin-top: 5px;
   color: #fff;
+  text-decoration: underline;
 }
-.platform-ios .segmented-controller-primary {
-  border: 1px solid #007aff;
+
+.contribute-heading,
+.contribute-text {
+  margin-top: 0;
 }
-.platform-ios .segmented-controller-primary li {
-  border-color: inherit;
+
+.contribute-heading {
+  margin-bottom: 5px;
+  font-size: 18px;
+  font-weight: 500;
 }
-.platform-ios .segmented-controller-primary li > a {
-  color: #007aff;
+
+.contribute-text {
+  margin-bottom: 0;
+  color: rgba(255, 255, 255, 0.85);
 }
-.platform-ios .segmented-controller-primary li:active {
-  background-color: #b3d7ff;
+
+.docs-footer {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: rgba(255, 255, 255, 0.7);
+  text-align: center;
+  background-color: #254456;
 }
-.platform-ios .segmented-controller-primary li.selected {
-  background-color: #007aff;
+.docs-footer .footer-content {
+  opacity: .7;
 }
-.platform-ios .segmented-controller-primary li.selected > a {
+.docs-footer .footer-content a {
   color: #fff;
 }
-.platform-ios .segmented-controller-positive {
-  border: 1px solid #4cd964;
+
+.platform-toggle {
+  padding-top: 15px;
+  padding-bottom: 90px;
 }
-.platform-ios .segmented-controller-positive li {
-  border-color: inherit;
+.platform-toggle.fixed {
+  position: fixed;
+  top: 0;
+  bottom: auto;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
+  -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
 }
-.platform-ios .segmented-controller-positive li > a {
-  color: #4cd964;
+.platform-toggle .segmented-controller {
+  max-width: 300px;
+  margin: 0 auto;
+  border-color: #00d1fe;
+  background-color: transparent;
 }
-.platform-ios .segmented-controller-positive li:active {
-  background-color: #dff8e3;
+.platform-toggle .segmented-controller li {
+  cursor: pointer;
+  border-color: #00d1fe;
 }
-.platform-ios .segmented-controller-positive li.selected {
-  background-color: #4cd964;
+.platform-toggle .segmented-controller li a {
+  color: #00d1fe;
 }
-.platform-ios .segmented-controller-positive li.selected > a {
-  color: #fff;
+.platform-toggle .segmented-controller li:active {
+  background-color: rgba(0, 209, 254, 0.3);
 }
-.platform-ios .segmented-controller-negative {
-  border: 1px solid #dd524d;
+.platform-toggle .segmented-controller li.selected {
+  background-color: #00d1fe;
 }
-.platform-ios .segmented-controller-negative li {
-  border-color: inherit;
+.platform-toggle .segmented-controller li.selected a {
+  color: #fff;
 }
-.platform-ios .segmented-controller-negative li > a {
-  color: #dd524d;
+
+.component {
+  padding: 50px 15px;
+  margin-left: -15px;
+  margin-right: -15px;
+  border-bottom: 1px solid #ddd;
 }
-.platform-ios .segmented-controller-negative li:active {
-  background-color: #fae4e3;
+
+.component-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 300;
 }
-.platform-ios .segmented-controller-negative li.selected {
-  background-color: #dd524d;
+
+.component-description {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  font-size: 16px;
 }
-.platform-ios .segmented-controller-negative li.selected > a {
-  color: #fff;
+
+.component-example {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 17px;
+  line-height: 21px;
 }
-.platform-ios .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;
+
+.component-example,
+.component-example [class*="bar"],
+.component-example .content {
+  position: relative;
 }
-.platform-ios .popover:after {
-  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
+
+.component-example-fullbleed,
+.highlight {
+  margin-left: -15px;
+  margin-right: -15px;
 }
-.platform-ios .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);
+
+.component-example .table-view.inset {
+  margin-left: 0;
+  margin-right: 0;
 }
-.platform-ios .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);
+
+.component-example .bar-header-secondary {
+  top: 0;
 }
-.platform-ios .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;
+
+.bar-nav ~ .content {
+  padding: 0;
 }
-.platform-ios .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;
+
+.highlight pre {
+  margin-top: 15px;
+  padding: 15px;
+  font-size: 13px;
+  overflow-x: auto;
+  color: #777;
+  background-color: #fafafa;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  white-space: pre;
+  word-wrap: normal;
 }
-.platform-ios .toggle:before {
+
+.device {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 17px;
+  line-height: 21px;
   display: none;
 }
-.platform-ios .toggle:active .toggle-handle {
-  width: 35px;
+
+hr {
+  height: 0;
+  margin: 10px 0 30px;
+  border: solid #ddd;
+  border-width: 1px 0 0;
+  clear: both;
 }
-.platform-ios .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;
+
+.column-group {
+  *zoom: 1;
 }
-.platform-ios .toggle.active .toggle-handle {
-  -webkit-transform: translate3d(17px, 0, 0);
-  transform: translate3d(17px, 0, 0);
+
+.column-group:before,
+.column-group:after {
+  display: table;
+  line-height: 0;
+  content: "";
 }
-.platform-ios .toggle.active:active .toggle-handle,
-.platform-ios .toggle.active .toggle-handle:active {
-  -webkit-transform: translate3d(10px, 0, 0) !important;
-  transform: translate3d(10px, 0, 0) !important;
+
+.column-group:after {
+  clear: both;
 }
-.platform-ios .toggle.active .toggle-handle {
-  border-color: #4cd964;
+
+.clear {
+  display: block;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  clear: both;
 }
-.platform-ios .content.fade {
-  -webkit-transition: opacity 0.2s ease-in-out;
-  transition: opacity 0.2s ease-in-out;
+
+@media screen and (min-width: 768px) {
+  .docs-header-content {
+    padding-top: 100px;
+    padding-bottom: 130px;
+  }
+
+  .docs-subtitle {
+    margin-bottom: 30px;
+    font-size: 41px;
+    line-height: 60px;
+  }
+
+  .device {
+    position: relative;
+    top: 50px;
+    display: block;
+    width: 395px;
+    height: 813px;
+    margin-left: -13px;
+    font-family: "Helvetica Neue", sans-serif;
+    background-image: url("../img/iphone.png");
+    background-size: 100%;
+    background-repeat: no-repeat;
+  }
+  .device.device-fixed {
+    position: fixed;
+    right: auto;
+  }
+
+  .device .device-content {
+    position: absolute;
+    top: 117px;
+    left: 37px;
+    width: 320px;
+    height: 569px;
+    overflow: hidden;
+    font-size: 17px;
+    line-height: 21px;
+    background-color: #fff;
+  }
+
+  .device .content,
+  .device [class*="bar"],
+  .device .modal {
+    position: absolute;
+  }
+
+  .device .content {
+    top: 44px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .component,
+  .component-example-fullbleed,
+  .highlight {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .component {
+    padding-left: 0;
+    padding-right: 0;
+    opacity: .5;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+  }
+  .component.active {
+    opacity: 1;
+  }
+
+  .component-example {
+    display: none;
+  }
+
+  .highlight pre {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    border-radius: 3px;
+  }
+
+  .popover {
+    position: absolute;
+    display: block;
+    top: 72px;
+    opacity: 1;
+  }
+
+  .slider li img {
+    width: 100%;
+  }
+
+  .slider .slide-text {
+    position: absolute;
+    top: 45%;
+    left: 0;
+    width: 100%;
+    color: #fff;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 300;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  }
 }
-.platform-ios .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);
+.container {
+  margin-left: auto;
+  margin-right: auto;
 }
-.platform-ios .content.slide.sliding-in, .platform-ios .content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-name: fadeOverlay;
-  animation-name: fadeOverlay;
-  -webkit-animation-duration: 0.4s;
-  animation-duration: 0.4s;
+
+.column-group {
+  width: auto;
 }
-.platform-ios .content.slide.right:not([class*="sliding-in"]) {
-  -webkit-animation-direction: reverse;
-  animation-direction: reverse;
+
+.column {
+  padding-left: 15px;
+  padding-right: 15px;
+  float: left;
 }
-.platform-ios .content.slide.left {
-  -webkit-transform: translate3d(-20%, 0, 0);
-  transform: translate3d(-20%, 0, 0);
+.column.pull-right {
+  float: right;
 }
 
-.platform-android .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 );
-}
-.platform-android [class*="bar-"] {
-  height: 50px;
-  background-color: #111111;
-  border-bottom: 1px solid #565656;
+.column .column-group {
+  margin-left: -15px;
+  margin-right: -15px;
 }
-.platform-android [class*="bar-"].bar-header-secondary {
-  top: 51px;
+
+.units-1 {
+  width: 50%;
 }
-.platform-android .bar-tab {
-  height: 70px;
-  border-top: 1px solid #565656;
-  border-bottom: 0;
+
+.units-2 {
+  width: 100%;
 }
-.platform-android .title {
-  position: static;
-  padding-left: 10px;
-  line-height: 50px;
-  color: white;
-  text-align: left;
+
+.offset-1 {
+  margin-left: 50%;
 }
-.platform-android .popover .bar-nav {
-  border-bottom: 1px solid #565656;
+
+@media screen and (min-width: 768px) {
+  .container {
+    padding: 0;
+    max-width: 940px;
+  }
+
+  .column {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .column .column-group {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+
+  .units-1 {
+    width: 50%;
+  }
+
+  .units-2 {
+    width: 100%;
+  }
+
+  .lg-units-1 {
+    width: 8.333%;
+  }
+
+  .lg-units-2 {
+    width: 16.666%;
+  }
+
+  .lg-units-3 {
+    width: 25%;
+  }
+
+  .lg-units-4 {
+    width: 33.333%;
+  }
+
+  .lg-units-5 {
+    width: 41.666%;
+  }
+
+  .lg-units-6 {
+    width: 50%;
+  }
+
+  .lg-units-7 {
+    width: 58.333%;
+  }
+
+  .lg-units-8 {
+    width: 66.666%;
+  }
+
+  .lg-units-9 {
+    width: 75%;
+  }
+
+  .lg-units-10 {
+    width: 83.333%;
+  }
+
+  .lg-units-11 {
+    width: 91.666%;
+  }
+
+  .lg-units-12 {
+    width: 100%;
+  }
+
+  .lg-offset-1 {
+    margin-left: 8.333%;
+  }
+
+  .lg-offset-2 {
+    margin-left: 16.666%;
+  }
+
+  .lg-offset-3 {
+    margin-left: 25%;
+  }
+
+  .lg-offset-4 {
+    margin-left: 33.333%;
+  }
+
+  .lg-offset-5 {
+    margin-left: 41.666%;
+  }
+
+  .lg-offset-6 {
+    margin-left: 50%;
+  }
+
+  .lg-offset-7 {
+    margin-left: 58.333%;
+  }
+
+  .lg-offset-8 {
+    margin-left: 66.666%;
+  }
+
+  .lg-offset-9 {
+    margin-left: 75%;
+  }
+
+  .lg-offset-10 {
+    margin-left: 83.333%;
+  }
+
+  .lg-offset-11 {
+    margin-left: 91.666%;
+  }
 }
-.platform-android .table-view .table-view-cell {
-  border-bottom: 1px solid #565656;
+@media screen and (min-width: 1200px) {
+  .container {
+    max-width: 1170px;
+  }
+
+  .column {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  .column .column-group {
+    margin-left: -30px;
+    margin-right: -30px;
+  }
 }
-.platform-android .table-view .table-view-cell:last-child {
+.platform-ios {
+  @-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);
+    }
+}
+
+}
+.platform-ios .content {
+  background-color: #efeff4;
+}
+.platform-ios [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);
+}
+.platform-ios [class*="bar-"].bar-header-secondary {
+  top: 44px;
+}
+.platform-ios [class*="bar-"].bar-footer-secondary {
+  bottom: 44px;
+}
+.platform-ios [class*="bar-"].bar-footer-secondary-tab {
+  bottom: 50px;
+}
+.platform-ios .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);
+}
+.platform-ios .tab-item.active .tab-label,
+.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label,
+.platform-ios .tab-item:active .icon {
+  color: #007aff;
+}
+.platform-ios .popover .bar-nav {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+.platform-ios .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;
+}
+.platform-ios .table-view .table-view-cell:last-child {
   background-image: none;
 }
-.platform-android .table-view .table-view-divider {
+.platform-ios .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;
 }
-.platform-android .popover .table-view {
+.platform-ios .popover .table-view {
   border-radius: 12px;
 }
-.platform-android select,
-.platform-android textarea,
-.platform-android input[type="text"],
-.platform-android input[type=search],
-.platform-android input[type="password"],
-.platform-android input[type="datetime"],
-.platform-android input[type="datetime-local"],
-.platform-android input[type="date"],
-.platform-android input[type="month"],
-.platform-android input[type="time"],
-.platform-android input[type="week"],
-.platform-android input[type="number"],
-.platform-android input[type="email"],
-.platform-android input[type="url"],
-.platform-android input[type="tel"],
-.platform-android input[type="color"],
-.platform-android .input-group {
+.platform-ios .card .table-view li:last-child {
+  background-image: none;
+}
+.platform-ios select,
+.platform-ios textarea,
+.platform-ios input[type="text"],
+.platform-ios input[type=search],
+.platform-ios input[type="password"],
+.platform-ios input[type="datetime"],
+.platform-ios input[type="datetime-local"],
+.platform-ios input[type="date"],
+.platform-ios input[type="month"],
+.platform-ios input[type="time"],
+.platform-ios input[type="week"],
+.platform-ios input[type="number"],
+.platform-ios input[type="email"],
+.platform-ios input[type="url"],
+.platform-ios input[type="tel"],
+.platform-ios input[type="color"],
+.platform-ios .input-group {
   height: 40px;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
-.platform-android input[type=search] {
+.platform-ios input[type=search] {
   height: 34px;
   text-align: center;
   background-color: rgba(0, 0, 0, 0.1);
   border: 0;
   border-radius: 6px;
 }
-.platform-android input[type=search]:focus {
+.platform-ios input[type=search]:focus {
   text-align: left;
 }
-.platform-android select,
-.platform-android textarea,
-.platform-android .input-group {
+.platform-ios select,
+.platform-ios textarea,
+.platform-ios .input-group {
   height: auto;
 }
-.platform-android .input-group {
+.platform-ios .input-group {
   padding: 0;
 }
-.platform-android .input-group input {
+.platform-ios .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;
 }
-.platform-android .input-group input:last-child {
+.platform-ios .input-group input:last-child {
   background-image: none;
 }
-.platform-android .input-row {
+.platform-ios .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;
 }
-.platform-android .input-row:last-child,
-.platform-android .input-row label + input {
-  background-image: none;
+.platform-ios .input-row:last-child,
+.platform-ios .input-row label + input {
+  background-image: none;
 }
-.platform-android [class*="button"] {
-  border: 1px solid #565656;
-  color: white;
-  background-color: #111111;
-  border-radius: 3px;
+.platform-ios [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;
 }
-.platform-android [class*="button"]:active, .platform-android [class*="button"].active {
+.platform-ios [class*="button"]:active, .platform-ios [class*="button"].active {
   color: #fff;
-  background-color: white;
-}
-.platform-android [class*="bar-"] [class*="button"] {
-  padding-top: 9px;
-  padding-bottom: 9px;
-}
-.platform-android [class*="bar-"] .button-link {
-  padding: 0;
-  color: #33b5e5;
-  line-height: 50px;
-}
-.platform-android [class*="bar-"] .button-link:active, .platform-android [class*="bar-"] .button-link.active {
-  color: #1a9bcb;
+  background-color: #929292;
 }
-.platform-android .button-primary {
+.platform-ios .button-primary {
   color: #fff;
-  border: 1px solid #33b5e5;
-  background-color: #33b5e5;
+  border: 1px solid #007aff;
+  background-color: #007aff;
 }
-.platform-android .button-primary:active, .platform-android .button-primary.active {
-  border: 1px solid #1a9bcb;
-  background-color: #1a9bcb;
+.platform-ios .button-primary:active, .platform-ios .button-primary.active {
+  border: 1px solid #0062cc;
+  background-color: #0062cc;
 }
-.platform-android .button-positive {
+.platform-ios .button-positive {
   color: #fff;
-  border: 1px solid #81c700;
-  background-color: #81c700;
+  border: 1px solid #4cd964;
+  background-color: #4cd964;
 }
-.platform-android .button-positive:active, .platform-android .button-positive.active {
-  border: 1px solid #609400;
-  background-color: #609400;
+.platform-ios .button-positive:active, .platform-ios .button-positive.active {
+  border: 1px solid #2ac845;
+  background-color: #2ac845;
 }
-.platform-android .button-negative {
+.platform-ios .button-negative {
   color: #fff;
-  border: 1px solid #f20754;
-  background-color: #f20754;
+  border: 1px solid #dd524d;
+  background-color: #dd524d;
 }
-.platform-android .button-negative:active, .platform-android .button-negative.active {
-  border: 1px solid #c00643;
-  background-color: #c00643;
+.platform-ios .button-negative:active, .platform-ios .button-negative.active {
+  border: 1px solid #cf2d28;
+  background-color: #cf2d28;
 }
-.platform-android .button-outlined {
+.platform-ios .button-outlined {
   background-color: transparent;
 }
-.platform-android .button-outlined.button-primary {
-  color: #33b5e5;
+.platform-ios .button-outlined.button-primary {
+  color: #007aff;
 }
-.platform-android .button-outlined.button-positive {
-  color: #81c700;
+.platform-ios .button-outlined.button-positive {
+  color: #4cd964;
 }
-.platform-android .button-outlined.button-negative {
-  color: #f20754;
+.platform-ios .button-outlined.button-negative {
+  color: #dd524d;
 }
-.platform-android .button-outlined.button-primary:active, .platform-android .button-outlined.button-positive:active, .platform-android .button-outlined.button-negative:active {
+.platform-ios .button-outlined.button-primary:active, .platform-ios .button-outlined.button-positive:active, .platform-ios .button-outlined.button-negative:active {
   color: #fff;
 }
-.platform-android .button-link {
-  color: #33b5e5;
+.platform-ios .button-link {
+  color: #007aff;
   background-color: transparent;
   border: none;
 }
-.platform-android .button-link:active, .platform-android .button-link.active {
-  color: #1a9bcb;
+.platform-ios .button-link:active, .platform-ios .button-link.active {
+  color: #0062cc;
   background-color: transparent;
 }
-.platform-android .bar-nav .button-link {
-  color: #33b5e5;
+.platform-ios .bar-nav .button-link {
+  color: #007aff;
 }
-.platform-android .bar-nav .button-link:active {
-  color: #33b5e5;
+.platform-ios .bar-nav .button-link:active {
+  color: #007aff;
   opacity: .6;
 }
-.platform-android [class*="badge"].badge-inverted {
-  color: white;
+.platform-ios [class*="badge"].badge-inverted {
+  color: #929292;
 }
-.platform-android .badge-primary {
+.platform-ios .badge-primary {
   color: #fff;
-  background-color: #33b5e5;
+  background-color: #007aff;
 }
-.platform-android .badge-primary.badge-inverted {
-  color: #33b5e5;
+.platform-ios .badge-primary.badge-inverted {
+  color: #007aff;
 }
-.platform-android .badge-positive {
+.platform-ios .badge-positive {
   color: #fff;
-  background-color: #81c700;
+  background-color: #4cd964;
 }
-.platform-android .badge-positive.badge-inverted {
-  color: #81c700;
+.platform-ios .badge-positive.badge-inverted {
+  color: #4cd964;
 }
-.platform-android .badge-negative {
+.platform-ios .badge-negative {
   color: #fff;
-  background-color: #f20754;
+  background-color: #dd524d;
 }
-.platform-android .badge-negative.badge-inverted {
-  color: #f20754;
+.platform-ios .badge-negative.badge-inverted {
+  color: #dd524d;
 }
-.platform-android .segmented-controller {
+.platform-ios .segmented-controller {
+  color: #929292;
   background-color: transparent;
-  border: 1px solid #33b5e5;
-  border-radius: 3px;
+  border: 1px solid #929292;
 }
-.platform-android .segmented-controller li {
-  border-left: 1px solid #33b5e5;
+.platform-ios .segmented-controller li {
+  border-color: #929292;
+  -webkit-transition: background-color 0.1s linear;
+  transition: background-color 0.1s linear;
 }
-.platform-android .segmented-controller li > a {
-  padding-top: 9px;
-  padding-bottom: 10px;
-  color: #33b5e5;
+.platform-ios .segmented-controller li:active {
+  background-color: #ebebeb;
 }
-.platform-android .segmented-controller li.selected {
-  background-color: #33b5e5;
+.platform-ios .segmented-controller li.selected {
+  background-color: #929292;
 }
-.platform-android .popover {
-  border-radius: 12px;
+.platform-ios .segmented-controller li.selected > a {
+  color: #fff;
 }
-.platform-android .popover:after {
-  border-bottom: 15px solid #111111;
+.platform-ios .segmented-controller-primary {
+  border: 1px solid #007aff;
 }
-.platform-android .toggle .toggle-handle {
-  border: 1px solid #565656;
+.platform-ios .segmented-controller-primary li {
+  border-color: inherit;
 }
-.platform-android .toggle:active .toggle-handle {
-  width: 35px;
+.platform-ios .segmented-controller-primary li > a {
+  color: #007aff;
 }
-.platform-android .toggle.active {
-  border: 2px solid #81c700;
-  background-color: #81c700;
+.platform-ios .segmented-controller-primary li:active {
+  background-color: #b3d7ff;
 }
-.platform-android .toggle.active .toggle-handle {
-  border-color: #81c700;
+.platform-ios .segmented-controller-primary li.selected {
+  background-color: #007aff;
 }
-
-html,
-body {
-  width: 100%;
-  height: 100%;
+.platform-ios .segmented-controller-primary li.selected > a {
+  color: #fff;
 }
-
-body {
-  position: relative !important;
-  font: 14px/1.5 "adelle-sans",sans-serif;
-  color: #333;
-  background-color: #fff;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-size-adjust: 100%;
+.platform-ios .segmented-controller-positive {
+  border: 1px solid #4cd964;
 }
-
-.docs-header {
-  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
+.platform-ios .segmented-controller-positive li {
+  border-color: inherit;
 }
-
-.docs-nav {
-  position: relative;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+.platform-ios .segmented-controller-positive li > a {
+  color: #4cd964;
 }
-.docs-nav .icon,
-.docs-nav .version {
-  position: absolute;
-  color: #fff;
-  opacity: .4;
-  -webkit-transition: opacity 0.2s linear;
-  transition: opacity 0.2s linear;
+.platform-ios .segmented-controller-positive li:active {
+  background-color: #dff8e3;
 }
-.docs-nav .icon:hover,
-.docs-nav .version:hover {
-  opacity: 1;
+.platform-ios .segmented-controller-positive li.selected {
+  background-color: #4cd964;
 }
-.docs-nav .icon {
-  top: 18px;
-  right: 0;
-  cursor: pointer;
+.platform-ios .segmented-controller-positive li.selected > a {
+  color: #fff;
 }
-.docs-nav .version {
-  top: 21px;
-  left: 0;
+.platform-ios .segmented-controller-negative {
+  border: 1px solid #dd524d;
 }
-
-.docs-nav,
-.docs-header-content {
-  text-align: center;
+.platform-ios .segmented-controller-negative li {
+  border-color: inherit;
 }
-
-.docs-header-content {
-  padding-top: 50px;
-  padding-bottom: 50px;
+.platform-ios .segmented-controller-negative li > a {
+  color: #dd524d;
 }
-.docs-header-content .button {
-  padding: 15px 30px 16px;
-  font-size: 18px;
-  color: #00d1fe;
-  border-color: #00d1fe;
-  -webkit-transition: all 0.2s linear;
-  transition: all 0.2s linear;
+.platform-ios .segmented-controller-negative li:active {
+  background-color: #fae4e3;
 }
-.docs-header-content .button:hover {
-  color: #63e3ff;
-  border-color: #63e3ff;
-}
-.docs-header-content .button:active {
-  opacity: .5;
-  background-color: transparent;
-}
-.docs-header-content .button-primary {
-  margin-left: 10px;
-  color: #fff;
-  border-color: #00d1fe;
-  background-color: #00d1fe;
+.platform-ios .segmented-controller-negative li.selected {
+  background-color: #dd524d;
 }
-.docs-header-content .button-primary:hover {
+.platform-ios .segmented-controller-negative li.selected > a {
   color: #fff;
-  border-color: #63e3ff;
-  background-color: #63e3ff;
 }
-.docs-header-content .button-primary:active {
-  background-color: #63e3ff;
-}
-
-.docs-title,
-.docs-subtitle {
-  color: #fff;
+.platform-ios .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;
 }
-
-.docs-title {
-  margin: 0;
-  font-size: 22px;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 6px;
+.platform-ios .popover:after {
+  border-bottom: 15px solid rgba(247, 247, 247, 0.98);
 }
-
-.docs-subtitle {
-  max-width: 750px;
-  margin: 0 auto 20px;
-  font-size: 24px;
-  font-weight: 100;
-  line-height: 34px;
+.platform-ios .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);
 }
-
-.docs-sub-content {
-  padding-top: 50px;
-  color: #fff;
-  text-align: center;
+.platform-ios .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);
 }
-.docs-sub-content .page-title,
-.docs-sub-content .page-description {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 300;
+.platform-ios .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;
 }
-.docs-sub-content .page-title {
-  font-size: 40px;
+.platform-ios .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;
 }
-.docs-sub-content .page-description {
-  font-size: 24px;
-  opacity: .7;
+.platform-ios .toggle:before {
+  display: none;
 }
-
-.docs-section {
-  padding-top: 80px;
-  padding-bottom: 80px;
+.platform-ios .toggle:active .toggle-handle {
+  width: 35px;
 }
-
-.section-header {
-  text-align: center;
+.platform-ios .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;
 }
-.section-header:after {
-  display: block;
-  content: '';
-  width: 200px;
-  margin: 50px auto 80px;
-  border-bottom: 1px solid #eee;
+.platform-ios .toggle.active .toggle-handle {
+  -webkit-transform: translate3d(17px, 0, 0);
+  transform: translate3d(17px, 0, 0);
 }
-
-.section-heading,
-.section-lead {
-  margin-top: 0;
-  margin-bottom: 0;
+.platform-ios .toggle.active:active .toggle-handle,
+.platform-ios .toggle.active .toggle-handle:active {
+  -webkit-transform: translate3d(10px, 0, 0) !important;
+  transform: translate3d(10px, 0, 0) !important;
 }
-
-.section-heading {
-  font-size: 55px;
-  font-weight: 300;
+.platform-ios .toggle.active .toggle-handle {
+  border-color: #4cd964;
 }
-
-.section-lead {
-  font-size: 24px;
-  color: #777;
-  font-weight: 100;
+.platform-ios .content.fade {
+  -webkit-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
-
-.social {
-  padding: 20px 0 20px;
-  margin: 0;
-  list-style: none;
-  text-align: center;
-  border-bottom: 1px solid #eee;
-  background-color: #f9f9f9;
+.platform-ios .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);
 }
-.social li {
-  height: 20px;
-  display: inline-block;
-  vertical-align: top;
+.platform-ios .content.slide.sliding-in, .platform-ios .content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-name: fadeOverlay;
+  animation-name: fadeOverlay;
+  -webkit-animation-duration: 0.4s;
+  animation-duration: 0.4s;
 }
-.social [class*="button"] {
-  padding: 0;
-  border: 0;
+.platform-ios .content.slide.right:not([class*="sliding-in"]) {
+  -webkit-animation-direction: reverse;
+  animation-direction: reverse;
 }
-.social iframe {
-  background-color: transparent;
+.platform-ios .content.slide.left {
+  -webkit-transform: translate3d(-20%, 0, 0);
+  transform: translate3d(-20%, 0, 0);
 }
-
-.docs-benefits {
-  padding-bottom: 0;
-  text-align: center;
+.platform-ios .device .device-content {
+  background-color: #efeff4;
 }
 
-.benefit-icon {
-  display: block;
-  width: 80px;
-  height: 80px;
-  margin: 0 auto 30px;
-  border: 1px solid #eee;
-  border-radius: 40px;
+.platform-android .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 );
 }
-.benefit-icon .icon {
-  color: #14b9d6;
-  font-size: 32px;
-  line-height: 80px;
+.platform-android [class*="bar-"] {
+  height: 50px;
+  background-color: #111111;
+  border-bottom: 1px solid #565656;
 }
-
-.benefit-heading {
-  font-weight: 500;
-  font-size: 24px;
-  margin-top: 5px;
-  margin-bottom: 10px;
+.platform-android [class*="bar-"].bar-header-secondary {
+  top: 51px;
 }
-
-.benefit-text {
-  margin-top: 0;
-  margin-bottom: 100px;
-  font-size: 18px;
-  color: #777;
+.platform-android .bar-tab {
+  height: 70px;
+  border-top: 1px solid #565656;
+  border-bottom: 0;
 }
-
-.docs-contribute {
-  padding-top: 50px;
-  padding-bottom: 50px;
-  color: #fff;
-  text-align: center;
-  background-color: #00d1fe;
+.platform-android .title {
+  position: static;
+  padding-left: 10px;
+  line-height: 50px;
+  color: white;
+  text-align: left;
 }
-.docs-contribute .link {
-  display: inline-block;
-  margin-top: 5px;
-  color: #fff;
-  text-decoration: underline;
+.platform-android .popover .bar-nav {
+  border-bottom: 1px solid #565656;
 }
-
-.contribute-heading,
-.contribute-text {
-  margin-top: 0;
+.platform-android .table-view .table-view-cell {
+  border-bottom: 1px solid #565656;
 }
-
-.contribute-heading {
-  margin-bottom: 5px;
-  font-size: 18px;
-  font-weight: 500;
+.platform-android .table-view .table-view-cell:last-child {
+  background-image: none;
 }
-
-.contribute-text {
-  margin-bottom: 0;
-  color: rgba(255, 255, 255, 0.85);
+.platform-android .table-view .table-view-divider {
+  border-top: 0;
+  border-bottom: 0;
 }
-
-.docs-footer {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: rgba(255, 255, 255, 0.7);
-  text-align: center;
-  background-color: #254456;
+.platform-android .popover .table-view {
+  border-radius: 12px;
 }
-.docs-footer .footer-content {
-  opacity: .7;
+.platform-android select,
+.platform-android textarea,
+.platform-android input[type="text"],
+.platform-android input[type=search],
+.platform-android input[type="password"],
+.platform-android input[type="datetime"],
+.platform-android input[type="datetime-local"],
+.platform-android input[type="date"],
+.platform-android input[type="month"],
+.platform-android input[type="time"],
+.platform-android input[type="week"],
+.platform-android input[type="number"],
+.platform-android input[type="email"],
+.platform-android input[type="url"],
+.platform-android input[type="tel"],
+.platform-android input[type="color"],
+.platform-android .input-group {
+  height: 40px;
+  padding: 10px 15px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
 }
-.docs-footer .footer-content a {
+.platform-android input[type=search] {
+  height: 34px;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  border: 0;
+  border-radius: 6px;
+}
+.platform-android input[type=search]:focus {
+  text-align: left;
+}
+.platform-android select,
+.platform-android textarea,
+.platform-android .input-group {
+  height: auto;
+}
+.platform-android .input-group {
+  padding: 0;
+}
+.platform-android .input-group input {
+  border: 0;
+}
+.platform-android .input-group input:last-child {
+  background-image: none;
+}
+.platform-android .input-row {
+  border-bottom: 0;
+}
+.platform-android .input-row:last-child,
+.platform-android .input-row label + input {
+  background-image: none;
+}
+.platform-android [class*="button"] {
+  border: 1px solid #565656;
+  color: white;
+  background-color: #111111;
+  border-radius: 3px;
+}
+.platform-android [class*="button"]:active, .platform-android [class*="button"].active {
   color: #fff;
+  background-color: white;
 }
-
-.platform-toggle {
-  padding-top: 15px;
-  padding-bottom: 90px;
+.platform-android [class*="bar-"] [class*="button"] {
+  padding-top: 9px;
+  padding-bottom: 9px;
 }
-.platform-toggle.fixed {
-  position: fixed;
-  top: 0;
-  bottom: auto;
-  left: 0;
-  right: 0;
-  z-index: 3;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
-  -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
-  transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+.platform-android [class*="bar-"] .button-link {
+  padding: 0;
+  color: #33b5e5;
+  line-height: 50px;
 }
-.platform-toggle .segmented-controller {
-  max-width: 300px;
-  margin: 0 auto;
-  border-color: #00d1fe;
-  background-color: transparent;
+.platform-android [class*="bar-"] .button-link:active, .platform-android [class*="bar-"] .button-link.active {
+  color: #1a9bcb;
 }
-.platform-toggle .segmented-controller li {
-  cursor: pointer;
-  border-color: #00d1fe;
+.platform-android .button-primary {
+  color: #fff;
+  border: 1px solid #33b5e5;
+  background-color: #33b5e5;
 }
-.platform-toggle .segmented-controller li a {
-  color: #00d1fe;
+.platform-android .button-primary:active, .platform-android .button-primary.active {
+  border: 1px solid #1a9bcb;
+  background-color: #1a9bcb;
 }
-.platform-toggle .segmented-controller li:active {
-  background-color: rgba(0, 209, 254, 0.3);
+.platform-android .button-positive {
+  color: #fff;
+  border: 1px solid #81c700;
+  background-color: #81c700;
 }
-.platform-toggle .segmented-controller li.selected {
-  background-color: #00d1fe;
+.platform-android .button-positive:active, .platform-android .button-positive.active {
+  border: 1px solid #609400;
+  background-color: #609400;
 }
-.platform-toggle .segmented-controller li.selected a {
+.platform-android .button-negative {
   color: #fff;
+  border: 1px solid #f20754;
+  background-color: #f20754;
 }
-
-.component {
-  padding: 50px 15px;
-  margin-left: -15px;
-  margin-right: -15px;
-  border-bottom: 1px solid #ddd;
+.platform-android .button-negative:active, .platform-android .button-negative.active {
+  border: 1px solid #c00643;
+  background-color: #c00643;
 }
-
-.component-title {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 300;
+.platform-android .button-outlined {
+  background-color: transparent;
 }
-
-.component-description {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  font-size: 16px;
+.platform-android .button-outlined.button-primary {
+  color: #33b5e5;
 }
-
-.component-example {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 17px;
-  line-height: 21px;
+.platform-android .button-outlined.button-positive {
+  color: #81c700;
 }
-
-.component-example,
-.component-example [class*="bar"],
-.component-example .content {
-  position: relative;
+.platform-android .button-outlined.button-negative {
+  color: #f20754;
 }
-
-.component-example-fullbleed,
-.highlight {
-  margin-left: -15px;
-  margin-right: -15px;
+.platform-android .button-outlined.button-primary:active, .platform-android .button-outlined.button-positive:active, .platform-android .button-outlined.button-negative:active {
+  color: #fff;
 }
-
-.component-example .table-view.inset {
-  margin-left: 0;
-  margin-right: 0;
+.platform-android .button-link {
+  color: #33b5e5;
+  background-color: transparent;
+  border: none;
 }
-
-.component-example .bar-header-secondary {
-  top: 0;
+.platform-android .button-link:active, .platform-android .button-link.active {
+  color: #1a9bcb;
+  background-color: transparent;
 }
-
-.bar-nav ~ .content {
-  padding: 0;
+.platform-android .bar-nav .button-link {
+  color: #33b5e5;
 }
-
-.highlight pre {
-  margin-top: 15px;
-  padding: 15px;
-  font-size: 13px;
-  overflow-x: auto;
-  color: #777;
-  background-color: #fafafa;
-  border-top: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-  white-space: pre;
-  word-wrap: normal;
+.platform-android .bar-nav .button-link:active {
+  color: #33b5e5;
+  opacity: .6;
 }
-
-.device {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 17px;
-  line-height: 21px;
-  display: none;
+.platform-android [class*="badge"].badge-inverted {
+  color: white;
 }
-
-hr {
-  height: 0;
-  margin: 10px 0 30px;
-  border: solid #ddd;
-  border-width: 1px 0 0;
-  clear: both;
+.platform-android .badge-primary {
+  color: #fff;
+  background-color: #33b5e5;
 }
-
-.column-group {
-  *zoom: 1;
+.platform-android .badge-primary.badge-inverted {
+  color: #33b5e5;
 }
-
-.column-group:before,
-.column-group:after {
-  display: table;
-  line-height: 0;
-  content: "";
+.platform-android .badge-positive {
+  color: #fff;
+  background-color: #81c700;
 }
-
-.column-group:after {
-  clear: both;
+.platform-android .badge-positive.badge-inverted {
+  color: #81c700;
 }
-
-.clear {
-  display: block;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  clear: both;
+.platform-android .badge-negative {
+  color: #fff;
+  background-color: #f20754;
 }
-
-@media screen and (min-width: 768px) {
-  .docs-header-content {
-    padding-top: 100px;
-    padding-bottom: 130px;
-  }
-
-  .docs-subtitle {
-    margin-bottom: 30px;
-    font-size: 41px;
-    line-height: 60px;
-  }
-
-  .device {
-    position: relative;
-    top: 50px;
-    display: block;
-    width: 395px;
-    height: 813px;
-    margin-left: -13px;
-    font-family: "Helvetica Neue", sans-serif;
-    background-image: url("../img/iphone.png");
-    background-size: 100%;
-    background-repeat: no-repeat;
-  }
-  .device.device-fixed {
-    position: fixed;
-    right: auto;
-  }
-
-  .device .device-content {
-    position: absolute;
-    top: 117px;
-    left: 37px;
-    width: 320px;
-    height: 569px;
-    overflow: hidden;
-    font-size: 17px;
-    line-height: 21px;
-    background-color: #efeff4;
-  }
-
-  .device .content,
-  .device [class*="bar"],
-  .device .modal {
-    position: absolute;
-  }
-
-  .device .content {
-    top: 44px;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  .component,
-  .component-example-fullbleed,
-  .highlight {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .component {
-    padding-left: 0;
-    padding-right: 0;
-    opacity: .5;
-    -webkit-transition: opacity 0.2s ease-in-out;
-    transition: opacity 0.2s ease-in-out;
-  }
-  .component.active {
-    opacity: 1;
-  }
-
-  .component-example {
-    display: none;
-  }
-
-  .highlight pre {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-    border-radius: 3px;
-  }
-
-  .popover {
-    position: absolute;
-    display: block;
-    top: 72px;
-    opacity: 1;
-  }
-
-  .slider li img {
-    width: 100%;
-  }
-
-  .slider .slide-text {
-    position: absolute;
-    top: 45%;
-    left: 0;
-    width: 100%;
-    color: #fff;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 300;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  }
+.platform-android .badge-negative.badge-inverted {
+  color: #f20754;
 }
-.container {
-  margin-left: auto;
-  margin-right: auto;
+.platform-android .segmented-controller {
+  background-color: transparent;
+  border: 1px solid #33b5e5;
+  border-radius: 3px;
 }
-
-.column-group {
-  width: auto;
+.platform-android .segmented-controller li {
+  border-left: 1px solid #33b5e5;
 }
-
-.column {
-  padding-left: 15px;
-  padding-right: 15px;
-  float: left;
+.platform-android .segmented-controller li > a {
+  padding-top: 9px;
+  padding-bottom: 10px;
+  color: #33b5e5;
 }
-.column.pull-right {
-  float: right;
+.platform-android .segmented-controller li.selected {
+  background-color: #33b5e5;
 }
-
-.column .column-group {
-  margin-left: -15px;
-  margin-right: -15px;
+.platform-android .popover {
+  border-radius: 12px;
 }
-
-.units-1 {
-  width: 50%;
+.platform-android .popover:after {
+  border-bottom: 15px solid #111111;
 }
-
-.units-2 {
-  width: 100%;
+.platform-android .toggle .toggle-handle {
+  border: 1px solid #565656;
 }
-
-.offset-1 {
-  margin-left: 50%;
+.platform-android .toggle:active .toggle-handle {
+  width: 35px;
 }
-
-@media screen and (min-width: 768px) {
-  .container {
-    padding: 0;
-    max-width: 940px;
-  }
-
-  .column {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  .column .column-group {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-
-  .units-1 {
-    width: 50%;
-  }
-
-  .units-2 {
-    width: 100%;
-  }
-
-  .lg-units-1 {
-    width: 8.333%;
-  }
-
-  .lg-units-2 {
-    width: 16.666%;
-  }
-
-  .lg-units-3 {
-    width: 25%;
-  }
-
-  .lg-units-4 {
-    width: 33.333%;
-  }
-
-  .lg-units-5 {
-    width: 41.666%;
-  }
-
-  .lg-units-6 {
-    width: 50%;
-  }
-
-  .lg-units-7 {
-    width: 58.333%;
-  }
-
-  .lg-units-8 {
-    width: 66.666%;
-  }
-
-  .lg-units-9 {
-    width: 75%;
-  }
-
-  .lg-units-10 {
-    width: 83.333%;
-  }
-
-  .lg-units-11 {
-    width: 91.666%;
-  }
-
-  .lg-units-12 {
-    width: 100%;
-  }
-
-  .lg-offset-1 {
-    margin-left: 8.333%;
-  }
-
-  .lg-offset-2 {
-    margin-left: 16.666%;
-  }
-
-  .lg-offset-3 {
-    margin-left: 25%;
-  }
-
-  .lg-offset-4 {
-    margin-left: 33.333%;
-  }
-
-  .lg-offset-5 {
-    margin-left: 41.666%;
-  }
-
-  .lg-offset-6 {
-    margin-left: 50%;
-  }
-
-  .lg-offset-7 {
-    margin-left: 58.333%;
-  }
-
-  .lg-offset-8 {
-    margin-left: 66.666%;
-  }
-
-  .lg-offset-9 {
-    margin-left: 75%;
-  }
-
-  .lg-offset-10 {
-    margin-left: 83.333%;
-  }
-
-  .lg-offset-11 {
-    margin-left: 91.666%;
-  }
+.platform-android .toggle.active {
+  border: 2px solid #81c700;
+  background-color: #81c700;
 }
-@media screen and (min-width: 1200px) {
-  .container {
-    max-width: 1170px;
-  }
-
-  .column {
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-
-  .column .column-group {
-    margin-left: -30px;
-    margin-right: -30px;
-  }
+.platform-android .toggle.active .toggle-handle {
+  border-color: #81c700;
 }
+.platform-android .device .device-content {
+  background-color: #000;
+  background-image: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
+}
+
 @-webkit-keyframes fadeOverlay {
   from {
     -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0);
diff --git a/examples/app-classic/checkout.html b/examples/app-classic/checkout.html
deleted file mode 100644
index 8c24726..0000000
--- a/examples/app-classic/checkout.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-  <header class="bar-nav">
-    <a class="button-prev" href="choose-theater.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Buy tickets</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search for movies">
-    </form>
-  </nav>
-
-  <div class="content">
-    <div class="form-wrapper">
-      <form>
-        <div class="input-group">
-          <div class="input-row">
-            <input type="text" placeholder="Fullname">
-          </div>
-          <div class="input-row">
-            <input type="email" placeholder="Email">
-          </div>
-        </div>
-
-        <div class="input-group">
-          <div class="input-row">
-            <input type="text" placeholder="Name on card">
-          </div>
-          <div class="input-row">
-            <input type="text" placeholder="Credit card number">
-          </div>
-          <div class="input-row">
-            <input type="text" placeholder="Security code">
-          </div>
-        </div>
-
-        <a class="button-positive button-block button-filled">Checkout</a>
-      </form>
-    </div>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-classic/choose-movie.html b/examples/app-classic/choose-movie.html
deleted file mode 100644
index 8efeca7..0000000
--- a/examples/app-classic/choose-movie.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <a class="button-prev" href="theaters.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Choose a movie</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search for movies">
-    </form>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Recommended movies</li>
-      <li class="table-view-cell">
-        <strong>Argo</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Skyfall: 007</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Wreck-it Ralph</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell table-view-divider">Top movies</li>
-      <li class="table-view-cell">
-        <strong>Movie 4</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 5</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 6</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 7</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 8</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 9</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 10</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 11</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 12</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-    </ul>
-
-  </div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-classic/choose-theater.html b/examples/app-classic/choose-theater.html
deleted file mode 100644
index 089698b..0000000
--- a/examples/app-classic/choose-theater.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <a class="button-prev" href="index.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Argo</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search theaters">
-    </form>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Theaters nearby</li>
-      <li class="table-view-cell">
-        <strong>Metreon 16</strong>
-        <p>1.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 5</strong>
-        <p>3.5 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Regal 42</strong>
-        <p>7.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Shorline theater</strong>
-        <p>12.5 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 16</strong>
-        <p>12.2 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>BW3 16</strong>
-        <p>13.4 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>MC Hammer 16</strong>
-        <p>14.1 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 3</strong>
-        <p>14.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 2</strong>
-        <p>14.7 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 10</strong>
-        <p>15 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-    </ul>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-classic/css/app.css b/examples/app-classic/css/app.css
deleted file mode 100644
index 6b33597..0000000
--- a/examples/app-classic/css/app.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.slider {
-  margin-bottom: 0;
-  height: 150px;
-}
-
-.slider li img {
-  width: 100%;
-}
-
-.form-wrapper {
-  padding: 10px 0;
-}
-
-.form-wrapper [class*="button"] {
-  margin: 0 10px;
-}
\ No newline at end of file
diff --git a/examples/app-classic/img/argo.png b/examples/app-classic/img/argo.png
deleted file mode 100644
index 743b3e7..0000000
Binary files a/examples/app-classic/img/argo.png and /dev/null differ
diff --git a/examples/app-classic/img/ralph.png b/examples/app-classic/img/ralph.png
deleted file mode 100644
index 34707de..0000000
Binary files a/examples/app-classic/img/ralph.png and /dev/null differ
diff --git a/examples/app-classic/img/skyfall.png b/examples/app-classic/img/skyfall.png
deleted file mode 100644
index 0527e19..0000000
Binary files a/examples/app-classic/img/skyfall.png and /dev/null differ
diff --git a/examples/app-classic/index.html b/examples/app-classic/index.html
deleted file mode 100644
index 1266646..0000000
--- a/examples/app-classic/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Movie finder</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search">
-    </form>
-  </nav>
-
-  <div class="content">
-
-    <div class="slider">
-      <ul>
-        <li>
-          <img src="img/argo.png">
-        </li>
-        <li>
-           <img src="img/skyfall.png">
-        </li>
-        <li>
-           <img src="img/ralph.png">
-        </li>
-      </ul>
-    </div>
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Recommended movies</li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Argo</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Skyfall: 007</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Wreck-it Ralph</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell table-view-divider">Top movies</li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 4</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 5</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 6</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 7</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 8</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 9</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 10</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 11</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-theater.html" data-transition="slide-in">
-          <strong>Movie 12</strong>
-          <p>Lorem ipsum dolor sit amet</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-    </ul>
-
-  </div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-classic/settings.html b/examples/app-classic/settings.html
deleted file mode 100644
index 82c98e1..0000000
--- a/examples/app-classic/settings.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Settings</h1>
-  </header>
-
-  <div class="content">
-    <div class="form-wrapper">
-      <form>
-    	  <div class="input-group">
-    	    <div class="input-row">
-    	      <label>Full name</label>
-    	      <input type="text" placeholder="Mister Ratchet">
-    	    </div>
-    	    <div class="input-row">
-    	      <label>Email</label>
-    	      <input type="email" placeholder="ratchetframework@gmail.com">
-    	    </div>
-    	    <div class="input-row">
-    	      <label>Username</label>
-    	      <input type="text" placeholder="goRatchet">
-    	    </div>
-    	  </div>
-        <a class="button-block button-negative button-filled">Delete Account</a>
-    	</form>
-    </div>
-	
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-classic/theaters.html b/examples/app-classic/theaters.html
deleted file mode 100644
index 42b4505..0000000
--- a/examples/app-classic/theaters.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="../../dist/ratchet-theme.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Find a theater</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search">
-    </form>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Theaters nearby</li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Metreon 16</strong>
-          <p>1.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 5</strong>
-          <p>3.5 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Regal 42</strong>
-          <p>7.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Shorline theater</strong>
-          <p>12.5 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 16</strong>
-          <p>12.2 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>BW3 16</strong>
-          <p>13.4 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>MC Hammer 16</strong>
-          <p>14.1 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 3</strong>
-          <p>14.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 2</strong>
-          <p>14.7 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 10</strong>
-          <p>15 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-    </ul>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-default/checkout.html b/examples/app-default/checkout.html
deleted file mode 100644
index 5e9ce77..0000000
--- a/examples/app-default/checkout.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-  <header class="bar-nav">
-    <a class="button-prev" href="choose-theater.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Buy tickets</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search for movies">
-    </form>
-  </nav>
-
-  <nav class="bar-tab">
-    <ul class="tab-inner">
-      <li class="tab-item active">
-        <a href="index.html" data-transition="fade">
-          <span class="icon icon-share"></span>
-          <div class="tab-label">Movies</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="theaters.html" data-transition="fade">
-          <span class="icon icon-pages"></span>
-          <div class="tab-label">Theaters</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="settings.html" data-transition="fade">
-          <span class="icon icon-sound"></span>
-          <div class="tab-label">Settings</div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="content">
-    <div class="form-wrapper">
-      <form>
-        <div class="input-group">
-          <div class="input-row">
-            <input type="text" placeholder="Fullname">
-          </div>
-          <div class="input-row">
-            <input type="email" placeholder="Email">
-          </div>
-        </div>
-
-        <div class="input-group">
-          <div class="input-row">
-            <input type="text" placeholder="Name on card">
-          </div>
-          <div class="input-row">
-            <input type="text" placeholder="Credit card number">
-          </div>
-          <div class="input-row">
-            <input type="text" placeholder="Security code">
-          </div>
-        </div>
-
-        <a class="button-positive button-block button-filled">Checkout</a>
-      </form>
-    </div>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-default/choose-movie.html b/examples/app-default/choose-movie.html
deleted file mode 100644
index 62aaff2..0000000
--- a/examples/app-default/choose-movie.html
+++ /dev/null
@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <a class="button-prev" href="theaters.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Choose a movie</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search for movies">
-    </form>
-  </nav>
-
-  <nav class="bar-tab">
-    <ul class="tab-inner">
-      <li class="tab-item">
-        <a href="index.html" data-transition="fade">
-          <span class="icon icon-share"></span>
-          <div class="tab-label">Movies</div>
-        </a>
-      </li>
-      <li class="tab-item active">
-        <a href="theaters.html" data-transition="fade">
-          <span class="icon icon-pages"></span>
-          <div class="tab-label">Theaters</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="settings.html" data-transition="fade">
-          <span class="icon icon-sound"></span>
-          <div class="tab-label">Settings</div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Recommended movies</li>
-      <li class="table-view-cell">
-        <strong>Argo</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Skyfall: 007</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Wreck-it Ralph</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell table-view-divider">Top movies</li>
-      <li class="table-view-cell">
-        <strong>Movie 4</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 5</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 6</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 7</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 8</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 9</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 10</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 11</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Movie 12</strong>
-        <p>Lorem ipsum dolor sit amet</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-    </ul>
-
-  </div>
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-default/choose-theater.html b/examples/app-default/choose-theater.html
index e7c8cb0..d0d54d4 100644
--- a/examples/app-default/choose-theater.html
+++ b/examples/app-default/choose-theater.html
@@ -18,97 +18,88 @@
   </head>
   <body>
 
-  <header class="bar-nav">
-    <a class="button-prev" href="index.html" data-transition="slide-out">
-      Back
-    </a>
-    <h1 class="title">Argo</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search theaters">
-    </form>
-  </nav>
+    <header class="bar-nav">
+      <a class="button pull-left" href="index.html" data-transition="slide-out">
+        Back
+      </a>
+      <h1 class="title">Argo</h1>
+    </header>
+    
+    <nav class="bar-standard bar-header-secondary">
+      <form>
+        <input type="search" placeholder="Search theaters">
+      </form>
+    </nav>
 
-  <nav class="bar-tab">
-    <ul class="tab-inner">
-      <li class="tab-item active">
-        <a href="index.html" data-transition="fade">
-          <span class="icon icon-share"></span>
-          <div class="tab-label">Movies</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="theaters.html" data-transition="fade">
-          <span class="icon icon-pages"></span>
-          <div class="tab-label">Theaters</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="settings.html" data-transition="fade">
-          <span class="icon icon-sound"></span>
-          <div class="tab-label">Settings</div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Theaters nearby</li>
-      <li class="table-view-cell">
-        <strong>Metreon 16</strong>
-        <p>1.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 5</strong>
-        <p>3.5 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Regal 42</strong>
-        <p>7.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>Shorline theater</strong>
-        <p>12.5 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 16</strong>
-        <p>12.2 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>BW3 16</strong>
-        <p>13.4 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>MC Hammer 16</strong>
-        <p>14.1 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 3</strong>
-        <p>14.3 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 2</strong>
-        <p>14.7 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-      <li class="table-view-cell">
-        <strong>AMC 10</strong>
-        <p>15 miles away</p>
-        <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
-      </li>
-    </ul>
-  </div>
+    <nav class="bar-tab">
+      <a class="tab-item selected" href="index.html" data-transition="fade">
+        <span class="icon icon-share"></span>
+        <div class="tab-label">Movies</div>
+      </a>
+      <a class="tab-item" href="#" data-transition="fade">
+        <span class="icon icon-pages"></span>
+        <div class="tab-label">Theaters</div>
+      </a>
+      <a class="tab-item" href="#" data-transition="fade">
+        <span class="icon icon-sound"></span>
+        <div class="tab-label">Settings</div>
+      </a>
+    </nav>
 
+    <div class="content">
+      <ul class="table-view">
+        <li class="table-view-cell table-view-divider">Theaters nearby</li>
+        <li class="table-view-cell">
+          <strong>Metreon 16</strong>
+          <p>1.3 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>AMC 5</strong>
+          <p>3.5 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>Regal 42</strong>
+          <p>7.3 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>Shorline theater</strong>
+          <p>12.5 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>AMC 16</strong>
+          <p>12.2 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>BW3 16</strong>
+          <p>13.4 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>MC Hammer 16</strong>
+          <p>14.1 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>AMC 3</strong>
+          <p>14.3 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>AMC 2</strong>
+          <p>14.7 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+        <li class="table-view-cell">
+          <strong>AMC 10</strong>
+          <p>15 miles away</p>
+          <a class="button-positive" href="checkout.html" data-transition="slide-in">Buy Tickets</a>
+        </li>
+      </ul>
+    </div>
   </body>
 </html>
\ No newline at end of file
diff --git a/examples/app-default/index.html b/examples/app-default/index.html
index b1f9e16..3d4e163 100644
--- a/examples/app-default/index.html
+++ b/examples/app-default/index.html
@@ -17,10 +17,10 @@
 
   </head>
   <body>
-
     <header class="bar-nav">
       <h1 class="title">Movie finder</h1>
     </header>
+    
     <nav class="bar-standard bar-header-secondary">
       <form>
         <input type="search" placeholder="Search">
@@ -28,26 +28,18 @@
     </nav>
 
     <nav class="bar-tab">
-      <ul class="tab-inner">
-        <li class="tab-item active">
-          <a href="index.html" data-transition="fade">
-            <span class="icon icon-share"></span>
-            <div class="tab-label">Movies</div>
-          </a>
-        </li>
-        <li class="tab-item">
-          <a href="theaters.html" data-transition="fade">
-            <span class="icon icon-pages"></span>
-            <div class="tab-label">Theaters</div>
-          </a>
-        </li>
-        <li class="tab-item">
-          <a href="settings.html" data-transition="fade">
-            <span class="icon icon-sound"></span>
-            <div class="tab-label">Settings</div>
-          </a>
-        </li>
-      </ul>
+      <a class="tab-item selected" href="index.html" data-transition="fade">
+        <span class="icon icon-share"></span>
+        <div class="tab-label">Movies</div>
+      </a>
+      <a class="tab-item" href="#" data-transition="fade">
+        <span class="icon icon-pages"></span>
+        <div class="tab-label">Theaters</div>
+      </a>
+      <a class="tab-item" href="#" data-transition="fade">
+        <span class="icon icon-sound"></span>
+        <div class="tab-label">Settings</div>
+      </a>
     </nav>
 
     <div class="content">
@@ -65,11 +57,6 @@
         </ul>
       </div>
 
-      <div id="myAlert2" class="alert alert-positive alert-inline">
-        <a href="#myAlert2" class="icon icon-share close"></a>
-        <strong>This</strong> is an inline alert.
-      </div>
-
       <ul class="table-view">
         <li class="table-view-cell table-view-divider">Recommended movies</li>
         <li class="table-view-cell">
@@ -159,6 +146,5 @@
         </li>
       </ul>
     </div>
-
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/examples/app-default/settings.html b/examples/app-default/settings.html
deleted file mode 100644
index ab3e2db..0000000
--- a/examples/app-default/settings.html
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Settings</h1>
-  </header>
-
-  <nav class="bar-tab">
-    <ul class="tab-inner">
-      <li class="tab-item">
-        <a href="index.html" data-transition="fade">
-          <span class="icon icon-share"></span>
-          <div class="tab-label">Movies</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="theaters.html" data-transition="fade">
-          <span class="icon icon-pages"></span>
-          <div class="tab-label">Theaters</div>
-        </a>
-      </li>
-      <li class="tab-item active">
-        <a href="settings.html" data-transition="fade">
-          <span class="icon icon-sound"></span>
-          <div class="tab-label">Settings</div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="content">
-    <div class="form-wrapper">
-      <form>
-    	  <div class="input-group">
-    	    <div class="input-row">
-    	      <label>Full name</label>
-    	      <input type="text" placeholder="Mister Ratchet">
-    	    </div>
-    	    <div class="input-row">
-    	      <label>Email</label>
-    	      <input type="email" placeholder="ratchetframework@gmail.com">
-    	    </div>
-    	    <div class="input-row">
-    	      <label>Username</label>
-    	      <input type="text" placeholder="goRatchet">
-    	    </div>
-    	  </div>
-        <a class="button-block button-negative button-filled">Delete Account</a>
-    	</form>
-    </div>
-	
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/examples/app-default/theaters.html b/examples/app-default/theaters.html
deleted file mode 100644
index 1a60f63..0000000
--- a/examples/app-default/theaters.html
+++ /dev/null
@@ -1,131 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Movie finder</title>
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../dist/touch-icons/apple-touch-icon-114x114.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../dist/touch-icons/apple-touch-icon-72x72.png">
-    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../dist/touch-icons/apple-touch-icon-57x57.png">
-
-    <link rel="stylesheet" href="../../dist/ratchet.css">
-    <link rel="stylesheet" href="css/app.css">
-    <script src="../../dist/ratchet.js"></script>
-
-  </head>
-  <body>
-
-  <header class="bar-nav">
-    <h1 class="title">Find a theater</h1>
-  </header>
-  <nav class="bar-standard bar-header-secondary">
-    <form>
-      <input type="search" placeholder="Search">
-    </form>
-  </nav>
-
-  <nav class="bar-tab">
-    <ul class="tab-inner">
-      <li class="tab-item">
-        <a href="index.html" data-transition="fade">
-          <span class="icon icon-share"></span>
-          <div class="tab-label">Movies</div>
-        </a>
-      </li>
-      <li class="tab-item active">
-        <a href="theaters.html" data-transition="fade">
-          <span class="icon icon-pages"></span>
-          <div class="tab-label">Theaters</div>
-        </a>
-      </li>
-      <li class="tab-item">
-        <a href="settings.html" data-transition="fade">
-          <span class="icon icon-sound"></span>
-          <div class="tab-label">Settings</div>
-        </a>
-      </li>
-    </ul>
-  </nav>
-
-  <div class="content">
-
-    <ul class="table-view">
-      <li class="table-view-cell table-view-divider">Theaters nearby</li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Metreon 16</strong>
-          <p>1.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 5</strong>
-          <p>3.5 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Regal 42</strong>
-          <p>7.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>Shorline theater</strong>
-          <p>12.5 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 16</strong>
-          <p>12.2 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>BW3 16</strong>
-          <p>13.4 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>MC Hammer 16</strong>
-          <p>14.1 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 3</strong>
-          <p>14.3 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 2</strong>
-          <p>14.7 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li class="table-view-cell">
-        <a href="choose-movie.html" data-transition="slide-in">
-          <strong>AMC 10</strong>
-          <p>15 miles away</p>
-          <span class="chevron"></span>
-        </a>
-      </li>
-    </ul>
-  </div>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index 843a8ef..a83fb75 100644
--- a/lib/sass/bars.scss
+++ b/lib/sass/bars.scss
@@ -113,7 +113,7 @@
   }
 
   // Active states for the tab bar
-  &.active,
+  &.selected,
   &:active {
     .tab-label,
     .icon {
diff --git a/lib/sass/base.scss b/lib/sass/base.scss
index 884256f..846c335 100644
--- a/lib/sass/base.scss
+++ b/lib/sass/base.scss
@@ -47,11 +47,6 @@ strong {
           transform: translateZ(0px);
 }
 
-// Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed
-.content-padded {
-  padding: 10px;
-}
-
 // 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 {
diff --git a/lib/sass/docs.scss b/lib/sass/docs.scss
index eb43484..ccbd165 100644
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@@ -1,14 +1,6 @@
 @import "variables.scss";
 @import "mixins.scss";
 
-// Devices
-.platform-ios {
-  @import "theme-ios.scss";
-}
-.platform-android {
-  @import "theme-android.scss";
-}
-
 //
 // Documentation
 // --------------------------------------------------
@@ -302,7 +294,7 @@ body {
     bottom: auto;
     left: 0;
     right: 0;
-    z-index: 3;
+    z-index: 20;
     padding-top: 8px;
     padding-bottom: 8px;
     background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
@@ -480,7 +472,7 @@ hr {
     overflow: hidden;
     font-size: $font-size-default;
     line-height: $line-height-default;
-    background-color: #efeff4;
+    background-color: #fff;
   }
   .device .content,
   .device [class*="bar"],
@@ -642,6 +634,23 @@ hr {
   }
 }
 
+// Devices
+.platform-ios {
+  @import "theme-ios.scss";
+
+  .device .device-content {
+    background-color: #efeff4;
+  }
+}
+.platform-android {
+  @import "theme-android.scss";
+
+  .device .device-content {
+    background-color: #000;
+    background-image: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%);
+  }
+}
+
 // Animations
 @-webkit-keyframes fadeOverlay {
   from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); }
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index a6051c3..ab322d0 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -135,5 +135,5 @@ select {
 // Position/size search bar within the bar
 [class*="bar-"] input[type=search] {
   height: 29px;
-  margin: 2px 0;
+  margin: 6px 0;
 }
diff --git a/lib/sass/segmented-controllers.scss b/lib/sass/segmented-controllers.scss
index c9f7680..9fdc921 100644
--- a/lib/sass/segmented-controllers.scss
+++ b/lib/sass/segmented-controllers.scss
@@ -3,6 +3,7 @@
 // --------------------------------------------------
 
 .segmented-controller {
+  position: relative;
   display: table;
   padding: 0;
   overflow: hidden;
@@ -136,5 +137,6 @@
 
 // Remove standard segmented bottom margin
 [class*="bar-"] .segmented-controller {
-  margin: 8px auto 0;
+  top: 8px;
+  margin: 0 auto;
 }