add correct padding to content with bars

dist/ratchet.css

@@ -280,10 +280,6 @@ strong {
   padding-top: 44px;
 }
 
-.bar-tab ~ .content {
-  padding-bottom: 50px;
-}
-
 .bar-header-secondary ~ .content {
   padding-top: 88px;
 }
@@ -296,6 +292,14 @@ strong {
   padding-bottom: 88px;
 }
 
+.bar-tab ~ .content {
+  padding-bottom: 50px;
+}
+
+.bar-footer-secondary-tab ~ .content {
+  padding-bottom: 94px;
+}
+
 .container {
   padding-right: 15px;
   padding-left: 15px;

docs/dist/ratchet.css

@@ -280,10 +280,6 @@ strong {
   padding-top: 44px;
 }
 
-.bar-tab ~ .content {
-  padding-bottom: 50px;
-}
-
 .bar-header-secondary ~ .content {
   padding-top: 88px;
 }
@@ -296,6 +292,14 @@ strong {
   padding-bottom: 88px;
 }
 
+.bar-tab ~ .content {
+  padding-bottom: 50px;
+}
+
+.bar-footer-secondary-tab ~ .content {
+  padding-bottom: 94px;
+}
+
 .container {
   padding-right: 15px;
   padding-left: 15px;

sass/base.scss

@@ -51,17 +51,16 @@ strong {
           transform: translateZ(0px);
 }
 
-// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
+// Pad top/bottom of content so it doesn't hide behind bars.
 // Note: For these to work, content must come after both bars in the markup
 .bar-nav ~ .content {
   padding-top: $bar-base-height;
 }
-.bar-tab ~ .content {
-  padding-bottom: $bar-tab-height;
-}
 .bar-header-secondary ~ .content {
   padding-top: $bar-base-height*2;
 }
+
+// Footer bar padding
 .bar-footer ~ .content {
   padding-bottom: $bar-base-height;
 }
@@ -69,6 +68,14 @@ strong {
   padding-bottom: $bar-base-height*2;
 }
 
+// Tab bar padding
+.bar-tab ~ .content {
+  padding-bottom: $bar-tab-height;
+}
+.bar-footer-secondary-tab ~ .content {
+  padding-bottom: $bar-tab-height+$bar-base-height;
+}
+
 // Utility classes
 .container {
   padding-right: 15px;