derpin hard and moving changes over to the lib css

docs-assets/css/docs.css

@@ -229,32 +229,13 @@ hr {
   .iphone .modal {
     position: absolute;
   }
+
   .iphone .content {
     top: 44px;
     left: 0;
     right: 0;
     bottom: 0;
   }
-  .iphone .popover {
-    position: absolute;
-    display: block;
-    top: 72px;
-    opacity: 1;
-  }
-  .iphone .slider li img {
-    width: 100%;
-  }
-  .iphone .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,.5);
-  }
 
   .component,
   .component-example-fullbleed,
@@ -283,6 +264,29 @@ hr {
     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);
+  }
 }
 .container {
   margin-left: auto;

lib/sass/docs.scss

@@ -222,11 +222,12 @@ hr {
     background-color: #efeff4;
   }
   .iphone .content,
-  .iphone [class*="bar"] {
+  .iphone [class*="bar"],
+  .iphone .modal {
     position: absolute;
   }
   .iphone .content {
-    top: 0;
+    top: 44px;
     left: 0;
     right: 0;
     bottom: 0;
@@ -255,6 +256,28 @@ hr {
     border-right: 1px solid #ddd;
     border-radius: 3px;
   }
+
+  // Component overrides
+  .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,.5);
+  }
 }