diff --git a/dist/android-theme.css b/dist/android-theme.css
index edc3942..cece392 100644
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@@ -45,12 +45,14 @@ a:active {
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .btn:active, .btn.active {
   color: #222222;
   border: 0;
   background-color: #999999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
@@ -90,6 +92,7 @@ a:active {
 .btn-outlined {
   border: 1px solid #999999;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-outlined.btn-primary {
@@ -119,10 +122,12 @@ a:active {
 .btn-outlined:active {
   border: 1px solid #999999;
   background-color: #999999;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -130,11 +135,13 @@ a:active {
   color: #33b5e5;
   background-color: transparent;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-link:active, .btn-link.active {
   color: #1a9bcb;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -157,6 +164,7 @@ a:active {
   height: 50px;
   background-color: #dddddd;
   border-bottom: 1px solid #b1b1b1;
+  -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
   box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
 }
 .bar.bar-header-secondary {
@@ -177,6 +185,7 @@ a:active {
 }
 .bar-tab .tab-item.active {
   color: #33b5e5;
+  -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
   box-shadow: inset 0 -2px 0 #33b5e5;
 }
 .bar-tab .tab-item:active {
@@ -319,6 +328,7 @@ input[type="color"],
   height: 40px;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
@@ -340,6 +350,7 @@ textarea,
 .input-group input {
   border: 0;
   border-bottom: 1px solid #d9d9d9;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -361,6 +372,7 @@ textarea,
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .segmented-control .control-item {
@@ -368,6 +380,7 @@ textarea,
   padding-bottom: 10px;
   color: #222222;
   border-left: 1px solid #999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .segmented-control .control-item:first-child {
@@ -420,6 +433,7 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
@@ -437,6 +451,10 @@ textarea,
   transform: scale(1);
 }
 
+.backdrop {
+  background-color: none;
+}
+
 .popover .bar {
   border-radius: 0;
 }
@@ -463,6 +481,7 @@ textarea,
   border: 1px solid #b5b5b5;
   border-radius: 2px;
   background-color: #bebebe;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 .toggle:before {
diff --git a/dist/ratchet.css b/dist/ratchet.css
index eee5025..259f9e8 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -350,7 +350,13 @@ p {
   color: #777;
 }
 
-.container > h1, .container > h2, .container > h3, .container > h4, .container > h5, .container > h6, .container > p {
+.container > h1,
+.container > h2,
+.container > h3,
+.container > h4,
+.container > h5,
+.container > h6,
+.container > p {
   margin-left: 0;
   margin-right: 0;
 }
@@ -362,7 +368,7 @@ p {
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 1.15;
+  line-height: 1;
   color: #333;
   text-align: center;
   vertical-align: top;
@@ -526,14 +532,7 @@ input[type="button"] {
   text-align: center;
   white-space: nowrap;
 }
-
-> a:not(.btn) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.title a {
+.title .title a {
   color: inherit;
 }
 
@@ -549,8 +548,8 @@ input[type="button"] {
 }
 .bar-tab .tab-item {
   display: table-cell;
-  height: 50px;
   width: 1%;
+  height: 50px;
   vertical-align: middle;
   color: #929292;
   text-align: center;
@@ -572,7 +571,7 @@ input[type="button"] {
 .bar .btn {
   position: relative;
   z-index: 20;
-  padding: 6px 12px;
+  padding: 6px 12px 7px;
   margin-top: 8px;
   font-weight: 400;
 }
@@ -708,8 +707,8 @@ input[type="button"] {
   border-radius: 0 0 6px 6px;
 }
 
-.card .table-view li:last-child {
-  border: 0;
+.card .table-view-cell:last-child {
+  border-bottom: 0;
 }
 
 .table-view {
@@ -1010,6 +1009,7 @@ select {
   background-color: white;
   border-radius: 6px;
   opacity: 0;
+  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
   -ms-transform: translate3d(0, -15px, 0);
@@ -1047,7 +1047,7 @@ select {
   bottom: 0;
   left: 0;
   z-index: 15;
-  background-color: none;
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .popover .btn-block {
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 30059d3..8dd60dc 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -1235,12 +1235,14 @@ hr {
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .platform-android .btn:active, .platform-android .btn.active {
   color: #222222;
   border: 0;
   background-color: #999999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .platform-android .btn-primary {
@@ -1276,6 +1278,7 @@ hr {
 .platform-android .btn-outlined {
   border: 1px solid #999999;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .btn-outlined.btn-primary {
@@ -1305,21 +1308,25 @@ hr {
 .platform-android .btn-outlined:active {
   border: 1px solid #999999;
   background-color: #999999;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
   color: #fff;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .btn-link {
   color: #33b5e5;
   background-color: transparent;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .btn-link:active, .platform-android .btn-link.active {
   color: #1a9bcb;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .btn-block {
@@ -1339,6 +1346,7 @@ hr {
   height: 50px;
   background-color: #dddddd;
   border-bottom: 1px solid #b1b1b1;
+  -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
   box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
 }
 .platform-android .bar.bar-header-secondary {
@@ -1358,6 +1366,7 @@ hr {
 }
 .platform-android .bar-tab .tab-item.active {
   color: #33b5e5;
+  -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
   box-shadow: inset 0 -2px 0 #33b5e5;
 }
 .platform-android .bar-tab .tab-item:active {
@@ -1488,6 +1497,7 @@ hr {
   height: 40px;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 .platform-android input[type="search"] {
@@ -1505,6 +1515,7 @@ hr {
 .platform-android .input-group input {
   border: 0;
   border-bottom: 1px solid #d9d9d9;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .platform-android .input-group input:last-child {
@@ -1522,6 +1533,7 @@ hr {
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .platform-android .segmented-control .control-item {
@@ -1529,6 +1541,7 @@ hr {
   padding-bottom: 10px;
   color: #222222;
   border-left: 1px solid #999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .platform-android .segmented-control .control-item:first-child {
@@ -1577,6 +1590,7 @@ hr {
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
@@ -1593,6 +1607,9 @@ hr {
   -ms-transform: scale(1);
   transform: scale(1);
 }
+.platform-android .backdrop {
+  background-color: none;
+}
 .platform-android .popover .bar {
   border-radius: 0;
 }
@@ -1617,6 +1634,7 @@ hr {
   border: 1px solid #b5b5b5;
   border-radius: 2px;
   background-color: #bebebe;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 .platform-android .toggle:before {
diff --git a/docs/dist/android-theme.css b/docs/dist/android-theme.css
index edc3942..cece392 100644
--- a/docs/dist/android-theme.css
+++ b/docs/dist/android-theme.css
@@ -45,12 +45,14 @@ a:active {
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .btn:active, .btn.active {
   color: #222222;
   border: 0;
   background-color: #999999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
@@ -90,6 +92,7 @@ a:active {
 .btn-outlined {
   border: 1px solid #999999;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-outlined.btn-primary {
@@ -119,10 +122,12 @@ a:active {
 .btn-outlined:active {
   border: 1px solid #999999;
   background-color: #999999;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
   color: #fff;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -130,11 +135,13 @@ a:active {
   color: #33b5e5;
   background-color: transparent;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 .btn-link:active, .btn-link.active {
   color: #1a9bcb;
   background-color: transparent;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -157,6 +164,7 @@ a:active {
   height: 50px;
   background-color: #dddddd;
   border-bottom: 1px solid #b1b1b1;
+  -webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
   box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
 }
 .bar.bar-header-secondary {
@@ -177,6 +185,7 @@ a:active {
 }
 .bar-tab .tab-item.active {
   color: #33b5e5;
+  -webkit-box-shadow: inset 0 -2px 0 #33b5e5;
   box-shadow: inset 0 -2px 0 #33b5e5;
 }
 .bar-tab .tab-item:active {
@@ -319,6 +328,7 @@ input[type="color"],
   height: 40px;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 }
 
@@ -340,6 +350,7 @@ textarea,
 .input-group input {
   border: 0;
   border-bottom: 1px solid #d9d9d9;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
 
@@ -361,6 +372,7 @@ textarea,
   background-color: #cecece;
   border: 0;
   border-radius: 2px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
 .segmented-control .control-item {
@@ -368,6 +380,7 @@ textarea,
   padding-bottom: 10px;
   color: #222222;
   border-left: 1px solid #999;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .segmented-control .control-item:first-child {
@@ -420,6 +433,7 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   -webkit-transform: scale(0.75);
   -ms-transform: scale(0.75);
@@ -437,6 +451,10 @@ textarea,
   transform: scale(1);
 }
 
+.backdrop {
+  background-color: none;
+}
+
 .popover .bar {
   border-radius: 0;
 }
@@ -463,6 +481,7 @@ textarea,
   border: 1px solid #b5b5b5;
   border-radius: 2px;
   background-color: #bebebe;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
 }
 .toggle:before {
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index eee5025..259f9e8 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -350,7 +350,13 @@ p {
   color: #777;
 }
 
-.container > h1, .container > h2, .container > h3, .container > h4, .container > h5, .container > h6, .container > p {
+.container > h1,
+.container > h2,
+.container > h3,
+.container > h4,
+.container > h5,
+.container > h6,
+.container > p {
   margin-left: 0;
   margin-right: 0;
 }
@@ -362,7 +368,7 @@ p {
   margin: 0;
   font-size: 12px;
   font-weight: 400;
-  line-height: 1.15;
+  line-height: 1;
   color: #333;
   text-align: center;
   vertical-align: top;
@@ -526,14 +532,7 @@ input[type="button"] {
   text-align: center;
   white-space: nowrap;
 }
-
-> a:not(.btn) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.title a {
+.title .title a {
   color: inherit;
 }
 
@@ -549,8 +548,8 @@ input[type="button"] {
 }
 .bar-tab .tab-item {
   display: table-cell;
-  height: 50px;
   width: 1%;
+  height: 50px;
   vertical-align: middle;
   color: #929292;
   text-align: center;
@@ -572,7 +571,7 @@ input[type="button"] {
 .bar .btn {
   position: relative;
   z-index: 20;
-  padding: 6px 12px;
+  padding: 6px 12px 7px;
   margin-top: 8px;
   font-weight: 400;
 }
@@ -708,8 +707,8 @@ input[type="button"] {
   border-radius: 0 0 6px 6px;
 }
 
-.card .table-view li:last-child {
-  border: 0;
+.card .table-view-cell:last-child {
+  border-bottom: 0;
 }
 
 .table-view {
@@ -1010,6 +1009,7 @@ select {
   background-color: white;
   border-radius: 6px;
   opacity: 0;
+  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
   -webkit-transform: translate3d(0, -15px, 0);
   -ms-transform: translate3d(0, -15px, 0);
@@ -1047,7 +1047,7 @@ select {
   bottom: 0;
   left: 0;
   z-index: 15;
-  background-color: none;
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .popover .btn-block {
diff --git a/docs/examples/app-ios-mail/inbox.html b/docs/examples/app-ios-mail/inbox.html
index bc8dc9c..1db9934 100644
--- a/docs/examples/app-ios-mail/inbox.html
+++ b/docs/examples/app-ios-mail/inbox.html
@@ -18,11 +18,6 @@
       <a class="icon icon-refresh pull-right"></a>
       <h1 class="title">All inboxes</h1>
     </header>
-    
-    <div class="bar bar-footer">
-      <a class="icon icon-compose pull-right" href="#composeModal"></a>
-      <small class="updated-text">Updated just now</small>
-    </div>
 
     <div class="content">
 
@@ -89,27 +84,5 @@
         </li>
       </ul>
     </div><!-- /.content -->
-
-    <!-- Compose modal -->
-    <div id="composeModal" class="modal">
-      <header class="bar bar-nav">
-        <a class="btn btn-link pull-right" href="#composeModal">
-          <strong>Send</strong>
-        </a>
-        <a class="btn btn-link pull-left" href="#composeModal">
-          Cancel
-        </a>
-        <h1 class="title">New message</h1>
-      </header>
-      
-      <div class="content">
-        <form class="input-group">
-          <input type="text" placeholder="To:">
-          <input type="email" placeholder="From:">
-          <input type="text" placeholder="Subject:">
-          <textarea rows="20"></textarea>
-        </form>
-      </div>
-    </div><!-- /.modal -->
   </body>
 </html>
diff --git a/sass/badges.scss b/sass/badges.scss
index 31f0a43..8b5143d 100644
--- a/sass/badges.scss
+++ b/sass/badges.scss
@@ -11,6 +11,7 @@
   background-color: rgba(0,0,0,.15);
   border-radius: 100px;
 
+  // Inverted badges have no background.
   &.badge-inverted {
     padding: 0 5px 0 0;
     background-color: transparent;
diff --git a/sass/bars.scss b/sass/bars.scss
index 26d145a..0bd11c1 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -19,7 +19,7 @@
     top: $bar-base-height;
   }
 
-  // Modifier class to dock any bar to bottom of viewport
+  // Modifier class to dock any bar to the bottom of the viewport
   &.bar-footer {
     bottom: 0;
   }
@@ -44,7 +44,9 @@
   top: 0;
 }
 
-// Centered text in the .bar-nav 
+// Centered text in the .bar-nav
+//
+// We position the absolutely to make sure the title is always centered
 .title {
   position: absolute;
   display: block;
@@ -60,24 +62,18 @@
   color: #000;
   text-align: center;
   white-space: nowrap;
-}
-
-> a:not(.btn) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
 
-//Retain specified title color
-.title a {
-  color: inherit;
+  // Retain specified title color
+  .title a {
+    color: inherit;
+  }
 }
 
 
 // Tab bar
 // --------------------------------------------------
 
-// Bar docked to bottom used for primary app navigation
+// Bar docked to bottom and used for primary app navigation
 .bar-tab {
   display: table;
   bottom: 0;
@@ -91,8 +87,8 @@
   // Navigational tab
   .tab-item {
     display: table-cell;
-    height: $bar-tab-height;
     width: 1%;
+    height: $bar-tab-height;
     vertical-align: middle;
     color: #929292;
     text-align: center;
@@ -110,7 +106,7 @@
       height: 24px;
       padding: 0;
 
-      // Make the label smaller if it's used with an icon
+      // Make the text smaller if it's used with an icon
       ~ .tab-label {
         display: block;
         font-size: 11px;
@@ -126,10 +122,11 @@
 .bar .btn {
   position: relative;
   z-index: 20; // Position the buttons on top of .title
-  padding: 6px 12px;
+  padding: 6px 12px 7px;
   margin-top: 8px;
   font-weight: $font-weight-light;
 
+  // Give buttons that are floated left and right side margin
   &.pull-right { 
     margin-left: $bar-side-spacing; 
   }
@@ -154,6 +151,7 @@
 }
 
 // Bars with block buttons
+//
 // Add proper padding
 .bar .btn-block {
   padding: 7px 0 6px;
@@ -164,7 +162,7 @@
 
 // Nav buttons (Only applicable within bars)
 //
-// Buttons inside bar that sit closer against the viewport.
+// Buttons inside bars that sit closer against the viewport.
 .bar .btn-nav {
   &.pull-left {
     margin-left: -5px;
@@ -194,7 +192,7 @@
     font-size: 24px;
   }
 
-  // Handle the larger icons in btns.
+  // Vertical center the larger icons in btns.
   .btn .icon {
     top: 2px;
     padding: 0;
@@ -204,6 +202,7 @@
   .title .icon {
     padding: 0;
 
+    // Specific postioning of the caret icon within a title. Used with popover.js.
     &.icon-caret {
       top: 4px;
       margin-left: -5px;
@@ -225,7 +224,7 @@
 // Bars with segmented controls
 // --------------------------------------------------
 
-// Remove standard segmented bottom margin
+// Position the control correctly inside a bar.
 .bar .segmented-control {
   top: 8px;
   margin: 0 auto;
diff --git a/sass/base.scss b/sass/base.scss
index 22cf319..a6df6b4 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -5,6 +5,7 @@
 // Use box sizing on all the things!
 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
 
+// We fix position the body and scroll `.content`.
 body {
   position: fixed;
   top: 0;
@@ -22,7 +23,7 @@ body {
 a {
   color: $primary-color;
   text-decoration: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links 
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links in webkit browsers. 
 
   &:active {
     color: darken($primary-color, 10%);
diff --git a/sass/buttons.scss b/sass/buttons.scss
index 1fb50f3..a2c6d32 100644
--- a/sass/buttons.scss
+++ b/sass/buttons.scss
@@ -9,7 +9,7 @@
   margin: 0;
   font-size: $button-font-size;
   font-weight: $font-weight-light;
-  line-height: 1.15; // Center button text on the phone.
+  line-height: 1; // Center button text on the phone.
   color: #333;
   text-align: center;
   vertical-align: top;
diff --git a/sass/cards.scss b/sass/cards.scss
index 882216e..9454313 100644
--- a/sass/cards.scss
+++ b/sass/cards.scss
@@ -36,6 +36,7 @@
     border-radius: 0 0 $border-radius $border-radius;
   }
 }
-.card .table-view li:last-child {
-  border: 0;
-}
\ No newline at end of file
+// Remove the bottom border from last table cell
+.card .table-view-cell:last-child {
+  border-bottom: 0;
+}
diff --git a/sass/forms.scss b/sass/forms.scss
index 27cd695..7cc3925 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -74,7 +74,7 @@ select {
   width: auto;
   height: auto;
   padding: 0;
-  border-left: 0;
+  border-left: 0; // Side borders are removed because the form is full width.
   border-right: 0;
   border-radius: 0;
 }
@@ -97,6 +97,7 @@ select {
   border-bottom: 0;
 }
 
+
 // Input groups with labels
 // --------------------------------------------------
 
diff --git a/sass/mixins.scss b/sass/mixins.scss
index 441bbe1..c48bbc8 100644
--- a/sass/mixins.scss
+++ b/sass/mixins.scss
@@ -6,12 +6,6 @@
 // General
 // --------------------------------------------------
 
-// Box orient
-@mixin box-orient($orient) {
-  -webkit-box-orient: $orient;
-          box-orient: $orient;
-}
-
 // Box shadow
 @mixin box-shadow($shadow...) {
   -webkit-box-shadow: $shadow;
diff --git a/sass/popovers.scss b/sass/popovers.scss
index e6daade..0d1b459 100644
--- a/sass/popovers.scss
+++ b/sass/popovers.scss
@@ -13,7 +13,7 @@
   background-color: $chrome-color;
   border-radius: $border-radius;
   opacity: 0;
-  box-shadow: 0 0 15px rgba(0, 0, 0, .1);
+  @include box-shadow(0 0 15px rgba(0, 0, 0, .1));
   @include transform(translate3d(0, -15px, 0));
   @include transition(all .25s linear);
 
@@ -39,6 +39,7 @@
     @include transform(translate3d(0, 0, 0));
   }
 
+  // Give correct spacing to the content if there is a bar inside the popover.
   .bar ~ .table-view {
     padding-top: $bar-base-height;
   }
@@ -54,7 +55,7 @@
   bottom: 0;
   left: 0;
   z-index: 15;
-  background-color: none;
+  background-color: rgba(0,0,0,0.3);
 }
 
 // Block level buttons in popovers
diff --git a/sass/segmented-controls.scss b/sass/segmented-controls.scss
index ed6143c..70b6aab 100644
--- a/sass/segmented-controls.scss
+++ b/sass/segmented-controls.scss
@@ -100,6 +100,7 @@
   }
 }
 
+// This is used to by the js to show and hide content tide to the segmented control.
 .control-content {
   display: none;
 
diff --git a/sass/theme-android.scss b/sass/theme-android.scss
index 3f44d9d..49eaab4 100644
--- a/sass/theme-android.scss
+++ b/sass/theme-android.scss
@@ -84,7 +84,7 @@ a {
   background-color: #cecece;
   border: 0;
   border-radius: $border-radius;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25);
+  @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25));
 
   // Active & filled button styles
   &:active,
@@ -92,7 +92,7 @@ a {
     color: $text-color;
     border: 0;
     background-color: $default-color;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
+    @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
   }
 }
 
@@ -146,7 +146,8 @@ a {
 .btn-outlined {
   border: 1px solid $default-color;
   background-color: transparent;
-  box-shadow: none;
+  @include box-shadow(none);
+
 
   &.btn-primary {
     border: 1px solid $primary-color;
@@ -179,13 +180,13 @@ a {
   &:active {
     border: 1px solid $default-color;
     background-color: $default-color;
-    box-shadow: none;
+    @include box-shadow(none);
   }
   &.btn-primary:active,
   &.btn-positive:active,
   &.btn-negative:active {
     color: #fff;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 }
 
@@ -194,13 +195,13 @@ a {
   color: $primary-color;
   background-color: transparent;
   border: none;
-  box-shadow: none;
+  @include box-shadow(none);
 
   &:active,
   &.active {
     color: darken($primary-color, 10%);
     background-color: transparent;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 }
 
@@ -234,7 +235,7 @@ a {
   height: $bar-base-height;
   background-color: $chrome-color;
   border-bottom: $border-default;
-  box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07);
+  @include box-shadow(inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07));
 
   // Modifier class to dock any bar below .bar-nav
   &.bar-header-secondary {
@@ -261,7 +262,7 @@ a {
     // Active states for the tab bar
     &.active {
       color: $primary-color;
-      box-shadow: inset 0 -2px 0 $primary-color;
+      @include box-shadow(inset 0 -2px 0 $primary-color);
     }
     //Pressed state
     &:active {
@@ -457,7 +458,7 @@ input[type="color"],
   height: 40px;
   padding: 10px 15px;
   border: 1px solid rgba(0, 0, 0, .2);
-  box-shadow: 0 1px 1px rgba(0,0,0,.1);
+  @include box-shadow(0 1px 1px rgba(0,0,0,.1));
 }
 
 input[type="search"] {
@@ -479,7 +480,7 @@ textarea,
 .input-group input {
   border: 0;
   border-bottom: 1px solid #d9d9d9;
-  box-shadow: none;
+  @include box-shadow(none);
 }
 // Remove bottom border on last input to avoid double bottom border
 .input-group input:last-child {
@@ -508,14 +509,14 @@ textarea,
   background-color: #cecece;
   border: 0;
   border-radius: $border-radius;
-  box-shadow: 0 1px 1px rgba(0,0,0,.25);
+  @include box-shadow(0 1px 1px rgba(0,0,0,.25));
 
   .control-item {
     padding-top: 10px;
     padding-bottom: 10px;
     color: $text-color;
     border-left: 1px solid #999;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
+    @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
 
     // Remove border-left and shadow from first section
     &:first-child {
@@ -592,7 +593,7 @@ textarea,
   margin-left: 0;
   border: 1px solid #9b9b9b;
   border-radius: 0;
-  box-shadow: 0 0 3px rgba(0,0,0,.2);
+  @include box-shadow(0 0 3px rgba(0,0,0,.2));
   @include transform(scale(.75));
   @include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
 
@@ -604,6 +605,11 @@ textarea,
   }
 }
 
+// Remove the popover's backdrop
+.backdrop {
+  background-color: none;
+}
+
 // Popovers with bars
 .popover {
   .bar {
@@ -641,7 +647,7 @@ textarea,
     border: 1px solid #b5b5b5;
     border-radius: 2px;
     background-color: #bebebe;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1);
+    @include box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1));
   }
   &:before {
     top: 1px;
diff --git a/sass/type.scss b/sass/type.scss
index 887b77f..949f20c 100644
--- a/sass/type.scss
+++ b/sass/type.scss
@@ -22,8 +22,14 @@ p {
 
 // Take on the container's side spacing
 .container {
-  > h1, > h2, > h3, > h4, > h5, > h6, > p {
+  > h1, 
+  > h2, 
+  > h3, 
+  > h4, 
+  > h5, 
+  > h6, 
+  > p {
     margin-left: 0;
     margin-right: 0;
   }
-}
\ No newline at end of file
+}