Fixes #9 - Update cross-promotional section

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -58,22 +58,16 @@
 #content.ua-android #abb-banner,
 #content.ua-ios #abb-banner,
 #content.ua-android #abb-android-download,
 #content.ua-ios #abb-ios-download
 {
   display: block;
 }
 
-#content.ua-android #adblock-browser-notification,
-#content.ua-ios #adblock-browser-notification
-{
-  display: none;
-}
-
 #main, #video-container
 {
   display: inline-block;
   vertical-align: top; /* Fix for https://bugzil.la/1320660 */
 }
 
 #video-container, #maxthon-instruction, #edge-teaser
 {
@@ -684,8 +678,67 @@
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }
+
+/******************************************************************************
+ * #abb-notification
+ *****************************************************************************/
+
+#abb-notification
+{
+  background-color: #ececec;
+  background-image: url(../img/abb-notification-bg-mobile.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+@media (min-width: 768px) /* tablet-breakpoint */
+{
+  #abb-notification
+  {
+    background-image: url(../img/abb-notification-bg-tablet.png);
+  }
+}
+
+@media (min-width: 992px) /* desktop-breakpoint */
+{
+  #abb-notification
+  {
+    background-image: url(../img/abb-notification-bg-desktop.png);
+  }
+}
+
+#abb-notification h2,
+#abb-notification h3
+{
+  text-transform: uppercase;
+}
+
+#abb-notification a
+{
+  color: inherit;
+}
+
+#abb-logo
+{
+  max-width: 10em;
+}
+
+#abb-app-store-badges img
+{
+  width: 200px;
+}
+
+@media (min-width: 768px) /* tablet-breakpoint */
+{
+  #abb-notification figure,
+  #abb-app-store-badges
+  {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+}