Fixes #9 - Update cross-promotional section

static/css/index.css

 #content
 {
   padding-top: 5em;
+  margin: 0 auto;
 }
 
 #key-facts h1
 {
   font-size: 16px;
 }
 
 #content .sprite
 {
   background-image: url(../img/sprite-index.png);
@@ skipping 28 matching lines @@
   display: none;
   padding: 20px;
   background-color: #2f8ecb;
   text-decoration: none;
   font-size: 24px;
   font-weight: bold;
   color: #ffffff;
   border-radius: 5px;
 }
 
-#content.ua-android,
-#content.ua-ios
+.ua-android #content,
+.ua-ios #content
 {
   margin-top: 0px;
 }
 
-#content.ua-android #abb-banner,
-#content.ua-ios #abb-banner,
-#content.ua-android #abb-android-download,
-#content.ua-ios #abb-ios-download
+.ua-android #abb-banner,
+.ua-ios #abb-banner,
+.ua-android #abb-android-download,
+.ua-ios #abb-ios-download
 {
   display: block;
 }
 
 #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;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
 #maxthon-instruction,
-html[lang^="zh_"] #content.maxthon #video,
-#content.maxthon #feature-free,
-#content.maxthon #terms-message,
+html[lang^="zh_"] .maxthon #video,
+.maxthon #feature-free,
+.maxthon #terms-message,
 #feature-maxthon
 {
   display: none;
 }
 
 #video-container
 {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ skipping 57 matching lines @@
   margin-top: -40px;
   margin-left: -40px;
 }
 
 .no-js #video-play,
 .show-disclaimer #video-play
 {
   margin-top: -60px;
 }
 
-html[lang^="zh_"] #content.maxthon #maxthon-instruction
+html[lang^="zh_"] .maxthon #maxthon-instruction
 {
   display: inline-block;
   padding: 0px;
 }
 
-#content.maxthon #feature-maxthon
+.maxthon #feature-maxthon
 {
   display: inline-block;
 }
 
 #summary h1, #summary h2
 {
   font-weight: normal;
   margin: 0;
 }
 
@@ skipping 113 matching lines @@
   background: linear-gradient(bottom, #cacaca, #a2a2a2);
   box-shadow: 0px 0px 7px #6f6f6f;
   -webkit-transition: none;
   -moz-transition: none;
   -ms-transition: none;
   -o-transition: none;
   transition: none;
   bottom: 4px;
 }
 
-#content.android .install-button,
-#content.firefox.ua-firefox .install-button,
-#content.chrome.ua-chrome .install-button,
-#content.opera.ua-opera .install-button,
-#content.internet-explorer.ua-internet-explorer .install-button,
-#content.safari.ua-safari .install-button,
-#content.yandex-browser.ua-yandex-browser .install-button,
-#content.edge.ua-edge .install-button,
+.android .install-button,
+.firefox.ua-firefox .install-button,
+.chrome.ua-chrome .install-button,
+.opera.ua-opera .install-button,
+.internet-explorer.ua-internet-explorer .install-button,
+.safari.ua-safari .install-button,
+.yandex-browser.ua-yandex-browser .install-button,
+.edge.ua-edge .install-button,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button,
-#content.chrome_ua-chrome .install-button,
-#content.opera_ua-opera .install-button,
-#content.internet-explorer_ua-internet-explorer .install-button,
-#content.safari_ua-safari .install-button,
-#content.yandex-browser_ua-yandex-browser .install-button,
-#content.edge_ua-edge .install-button
+.firefox_ua-firefox .install-button,
+.chrome_ua-chrome .install-button,
+.opera_ua-opera .install-button,
+.internet-explorer_ua-internet-explorer .install-button,
+.safari_ua-safari .install-button,
+.yandex-browser_ua-yandex-browser .install-button,
+.edge_ua-edge .install-button
 {
   background: #62c52b;
   background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
   background: -moz-linear-gradient(top, #62c52b, #4f9d22);
   background: -ms-linear-gradient(top, #62c52b, #4f9d22);
   background: -o-linear-gradient(top, #62c52b, #4f9d22);
   background: linear-gradient(top, #62c52b, #4f9d22);
   box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
   text-shadow: 2px 2px 2px #327d14;
 }
 
-#content.android .install-button:hover,
-#content.firefox.ua-firefox .install-button:hover,
-#content.chrome.ua-chrome .install-button:hover,
-#content.opera.ua-opera .install-button:hover,
-#content.internet-explorer.ua-internet-explorer .install-button:hover,
-#content.safari.ua-safari .install-button:hover,
-#content.yandex-browser.ua-yandex-browser .install-button:hover,
-#content.edge.ua-edge .install-button:hover,
+.android .install-button:hover,
+.firefox.ua-firefox .install-button:hover,
+.chrome.ua-chrome .install-button:hover,
+.opera.ua-opera .install-button:hover,
+.internet-explorer.ua-internet-explorer .install-button:hover,
+.safari.ua-safari .install-button:hover,
+.yandex-browser.ua-yandex-browser .install-button:hover,
+.edge.ua-edge .install-button:hover,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button:hover,
-#content.chrome_ua-chrome .install-button:hover,
-#content.opera_ua-opera .install-button:hover,
-#content.internet-explorer_ua-internet-explorer .install-button:hover,
-#content.safari_ua-safari .install-button:hover,
-#content.yandex-browser_ua-yandex-browser .install-button:hover,
-#content.edge_ua-edge .install-button:hover
+.firefox_ua-firefox .install-button:hover,
+.chrome_ua-chrome .install-button:hover,
+.opera_ua-opera .install-button:hover,
+.internet-explorer_ua-internet-explorer .install-button:hover,
+.safari_ua-safari .install-button:hover,
+.yandex-browser_ua-yandex-browser .install-button:hover,
+.edge_ua-edge .install-button:hover
 {
   box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
 }
 
-#content.android .install-button:active,
-#content.firefox.ua-firefox .install-button:active,
-#content.chrome.ua-chrome .install-button:active,
-#content.opera.ua-opera .install-button:active,
-#content.internet-explorer.ua-internet-explorer .install-button:active,
-#content.safari.ua-safari .install-button:active,
-#content.yandex-browser.ua-yandex-browser .install-button:active,
-#content.edge.ua-edge .install-button:active,
+.android .install-button:active,
+.firefox.ua-firefox .install-button:active,
+.chrome.ua-chrome .install-button:active,
+.opera.ua-opera .install-button:active,
+.internet-explorer.ua-internet-explorer .install-button:active,
+.safari.ua-safari .install-button:active,
+.yandex-browser.ua-yandex-browser .install-button:active,
+.edge.ua-edge .install-button:active,
 /* IE6 fixes */
-#content.firefox_ua-firefox .install-button:active,
-#content.chrome_ua-chrome .install-button:active,
-#content.opera_ua-opera .install-button:active,
-#content.internet-explorer_ua-internet-explorer .install-button:active,
-#content.safari_ua-safari .install-button:active,
-#content.yandex-browser_ua-yandex-browser .install-button:active,
-#content.edge_ua-edge .install-button:active
+.firefox_ua-firefox .install-button:active,
+.chrome_ua-chrome .install-button:active,
+.opera_ua-opera .install-button:active,
+.internet-explorer_ua-internet-explorer .install-button:active,
+.safari_ua-safari .install-button:active,
+.yandex-browser_ua-yandex-browser .install-button:active,
+.edge_ua-edge .install-button:active
 {
   background: #4f9d22;
   background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
   background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
   background: linear-gradient(bottom, #62c52b, #4f9d22);
   box-shadow: 0px 0px 7px #486c15;
 }
 
-#content.firefox #install-firefox, #content.chrome #install-chrome,
-#content.opera #install-opera, #content.android #install-android,
-#content.internet-explorer #install-internet-explorer,
-#content.safari #install-safari,
-#content.yandex-browser #install-yandex-browser,
-#content.edge #install-edge
+.firefox #install-firefox, .chrome #install-chrome,
+.opera #install-opera, .android #install-android,
+.internet-explorer #install-internet-explorer,
+.safari #install-safari,
+.yandex-browser #install-yandex-browser,
+.edge #install-edge
 {
   display: inline-block;
 }
 
 #other-platform ul
 {
   list-style: none;
   display: inline-block;
   margin: 0px;
   padding: 0;
@@ skipping 21 matching lines @@
 #platform-firefox
 {
   background-position: -108px -89px;
 }
 
 #information-android
 {
   display: none;
 }
 
-#content.android #information-android
+.android #information-android
 {
   display: block;
 }
 
-#content.firefox #platform-firefox
+.firefox #platform-firefox
 {
   background-position: -108px -68px;
 }
 
 #platform-chrome
 {
   background-position: -88px -89px;
 }
 
-#content.chrome #platform-chrome
+.chrome #platform-chrome
 {
   background-position: -88px -68px;
 }
 
 #platform-android
 {
   background-position: -68px -89px;
 }
 
-#content.android #platform-android
+.android #platform-android
 {
   background-position: -68px -68px;
 }
 
 #platform-opera
 {
   background-position: -68px -131px;
 }
 
-#content.opera #platform-opera
+.opera #platform-opera
 {
   background-position: -68px -110px;
 }
 
 #platform-internet-explorer
 {
   background-position: -108px -131px;
 }
 
-#content.internet-explorer #platform-internet-explorer
+.internet-explorer #platform-internet-explorer
 {
   background-position: -108px -110px;
 }
 
 #platform-safari
 {
   background-position: -88px -131px;
 }
 
-#content.safari #platform-safari
+.safari #platform-safari
 {
   background-position: -88px -110px;
 }
 
 #platform-yandex-browser
 {
   background-position: -128px -89px;
 }
 
-#content.yandex-browser #platform-yandex-browser
+.yandex-browser #platform-yandex-browser
 {
   background-position: -128px -68px;
 }
 
 #platform-maxthon
 {
   background-position: -128px -130px;
 }
 
-#content.maxthon #platform-maxthon
+.maxthon #platform-maxthon
 {
   background-position: -128px -109px;
 }
 
 #platform-edge
 {
   background-position: -68px -171px;
 }
 
-#content.edge #platform-edge
+.edge #platform-edge
 {
   background-position: -68px -151px;
 }
 
 #content h3.subscribe-header
 {
   font-size: 18px;
   margin-bottom: 0px;
 }
 
 #other-platform > div,
-#content.edge #video,
+.edge #video,
 #edge-teaser
 {
   display: none;
 }
 
 .warning-platform,
 .disclaimer,
 #maxthon-notification
 {
   display: none;
   color: #D00;
   text-align: center;
   border: 1px solid #D00;
   padding: 5px;
   border-radius: 5px;
 }
 
 .disclaimer
 {
   font-size: 14px;
   color: #000;
   text-align: left;
 }
 
-#content.ua-firefox .warning-platform.firefox,
-#content.ua-chrome .warning-platform.chrome,
-#content.ua-android .warning-platform.android,
-#content.ua-opera .warning-platform.opera,
-#content.ua-internet-explorer .warning-platform.internet-explorer,
-#content.ua-safari .warning-platform.safari,
-#content.ua-yandex-browser .warning-platform.yandex-browser,
-#content.ua-maxthon .warning-platform.maxthon,
+.ua-firefox .warning-platform.firefox,
+.ua-chrome .warning-platform.chrome,
+.ua-android .warning-platform.android,
+.ua-opera .warning-platform.opera,
+.ua-internet-explorer .warning-platform.internet-explorer,
+.ua-safari .warning-platform.safari,
+.ua-yandex-browser .warning-platform.yandex-browser,
+.ua-maxthon .warning-platform.maxthon,
 html[lang^="zh_"] #maxthon-notification
 {
   display: block;
 }
 
-#content.firefox.ua-firefox .warning-platform.firefox,
-#content.chrome.ua-chrome .warning-platform.chrome,
-#content.android.ua-android .warning-platform.android,
-#content.opera.ua-opera .warning-platform.opera,
-#content.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari.ua-safari .warning-platform.safari,
-#content.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon.ua-maxthon .warning-platform.maxthon,
-#content.ua-maxthon #maxthon-notification,
-#content.maxthon #maxthon-notification,
+.firefox.ua-firefox .warning-platform.firefox,
+.chrome.ua-chrome .warning-platform.chrome,
+.android.ua-android .warning-platform.android,
+.opera.ua-opera .warning-platform.opera,
+.internet-explorer.ua-internet-explorer .warning-platform.internet-explorer,
+.safari.ua-safari .warning-platform.safari,
+.yandex-browser.ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon.ua-maxthon .warning-platform.maxthon,
+.ua-maxthon #maxthon-notification,
+.maxthon #maxthon-notification,
 /* IE6 fixes */
-#content.firefox_ua-firefox .warning-platform.firefox,
-#content.chrome_ua-chrome .warning-platform.chrome,
-#content.opera_ua-opera .warning-platform.opera,
-#content.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
-#content.safari_ua-safari .warning-platform.safari,
-#content.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
-#content.maxthon_ua-maxthon .warning-platform.maxthon
+.firefox_ua-firefox .warning-platform.firefox,
+.chrome_ua-chrome .warning-platform.chrome,
+.opera_ua-opera .warning-platform.opera,
+.internet-explorer_ua-internet-explorer .warning-platform.internet-explorer,
+.safari_ua-safari .warning-platform.safari,
+.yandex-browser_ua-yandex-browser .warning-platform.yandex-browser,
+.maxthon_ua-maxthon .warning-platform.maxthon
 {
   display: none;
 }
 
 #key-facts
 {
   box-sizing: content-box;
 }
 
 #key-facts section
@@ skipping 94 matching lines @@
   background-color: #fff;
   border: 2px solid #a1a1a1;
 }
 
 #ready-for-windows-notice
 {
   margin-bottom: 30px;
 }
 
 /******************************************************************************
+ * #media
+ *****************************************************************************/
+
+#media-section { clear: both; }
+
+#media-header h2,
+#media-list
+{
+  margin: 0;
+}
+
+#media-header
+{
+  margin-bottom: 2em;
+}
+
+#media-header h2
+{
+  font-size: 1em;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+#media-list li
+{
+  display: inline-block;
+}
+
+#media-list img
+{
+  max-width: 10em;
+  max-height: 3em;
+  margin: 0 1em 1em;
+}
+
+#media-list a 
+{
+  position: relative;
+  display: block;
+}
+
+#media-list a:hover img
+{
+  opacity: 0.5;
+}
+
+#media-list a:hover:after
+{
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-image: url(../img/external-icon.png);
+  background-image: url(../img/external-icon.svg, none);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1em;
+}
+
+@media (min-width: 768px)
+{
+  #media-header small
+  { 
+    display: none; 
+  }
+
+  #media-list
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-list li
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #media-list img
+  {
+    margin: 0 2em;  
+  }
+}
+
+@media (min-width: 992px)
+{
+  #media {
+    display: table;
+    width: 100%;
+  }
+
+  #media-header,
+  #media-list
+  {
+    display: table-cell;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  #media-header
+  {
+    margin-bottom: 0;
+  }
+
+  #media-list { direction: rtl; }
+  [dir="rtl"] #media-list { direction: ltr; }
+
+  @supports (display: flex)
+  {
+    #media-list
+    {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+}
+
+/******************************************************************************
  * #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.

+#abb-logo
 {
   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;
-}
+  width: 200px;
+}
+
+@media (min-width: 768px) /* tablet-breakpoint */
+{
+  #abb-notification figure,
+  #abb-app-store-badges
+  {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+}