Fixes #9 - Update cross-promotional section

static/css/index.css

 #content
 {
   padding-top: 5em;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
 
@@ skipping 45 matching lines @@
 }
 
 #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
 {
   background: #ffffff;
   padding: 10px;
@@ skipping 600 matching lines @@
   line-height: 1.4;
   color: #000;
   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);

[juliandoucette, 2018/02/20 09:23:33]

NIT: I think that we should request that this background slowly fades into the
background color behind on large desktops to avoid a hard edge.

[ire, 2018/02/20 11:16:47]

I like this idea but according to the prototype, the section immediately above
this has it's own background image -
https://eyeogmbh.invisionapp.com/share/KPFB1POXB#/screens/273054427_ABP_Home_...
. Not sure how we could blend those together as they are light versus dark. 

[juliandoucette, 2018/02/20 14:06:18]

Acknowledged. I meant left/right not top/bottom.

+  }
+}
+
+#abb-notification h2,
+#abb-notification h3
+{
+  text-transform: uppercase;

[ire, 2018/02/06 16:31:14]

All of the headings should be uppercase, but I think I should change that in a
separate issue so I can properly test all the cases. 

[juliandoucette, 2018/02/20 09:23:34]

Acknowledged.

+}
+
+#abb-notification a
+{
+  color: inherit;
+}
+
+.abb-logo

[juliandoucette, 2018/02/20 09:23:34]

NIT: Why classname? I don't think that this applies to anything else? / I don't
think that we want multiple of these on a page?

[ire, 2018/02/20 11:16:47]

Agreed. Done.

+{
+  max-width: 10em;
+}
+
+#abb-app-store-badges img
+{
+  width: 100%;
+  max-width: 200px;

[juliandoucette, 2018/02/20 09:23:33]

Why max width instead of width here?

[ire, 2018/02/20 11:16:47]

My intention was to allow more fluidity, but in practice the images stick to
200px so I will change to just using width.

Done.

+}
+
+#abb-notification figure,

[juliandoucette, 2018/02/20 09:23:34]

I think that 2em is too much on small phones. Perhaps this should be >= tablet
only?

[ire, 2018/02/20 11:16:47]

Done.

+#abb-app-store-badges
+{
+  padding-left: 2em;
+  padding-right: 2em;
+}