Fixes #5 - Update home page hero unit

static/css/index.css

-#content
+/******************************************************************************
+ * Temparary styles
+ *****************************************************************************/
+
+.avoid-wrap {display: inline-block;}
+.small {font-size: smaller;}
+.maxthon-only {display: none;}
+.maxthon .maxthon-only {display: block;}
+
+/******************************************************************************
+ * #hero-download
+ *****************************************************************************/
+
+#hero-download
 {
-  padding-top: 5em;
-  margin: 0 auto;
+  padding-top: 2em;
+  padding-bottom: 2em;
 }
 
-#key-facts h1
+@media(min-width: 768px)
 {
-  font-size: 16px;
+  #hero-download
+  {
+    padding-top: 6em;
+    padding-bottom: 6em;
+  }
 }
 
-#content .sprite
+#hero-download h1
 {
-  background-image: url(../img/sprite-index.png);
+  line-height: 1.1;
 }
 
-#abb-banner
+#hero-download-tos
 {
-  background-color: #ffffff;
-  display: none;
-  padding: 50px 40px 40px 40px;
-  margin-bottom: 30px;
-  text-align: center;
+  font-size: 10px;
 }
 
-#abb-banner h2
-{
-  font-size: 28px;
-  font-weight: bold;
-  color: #333333;
-  margin: 0px;
-}
-
-#abb-banner img
-{
-  margin: 30px 0px 40px 0px;
-  width: 40%;
-  min-width: 200px;
-}
-
-#abb-banner a
-{
-  display: none;
-  padding: 20px;
-  background-color: #2f8ecb;
-  text-decoration: none;
-  font-size: 24px;
-  font-weight: bold;
-  color: #ffffff;
-  border-radius: 5px;
-}
-
-.ua-android #content,
-.ua-ios #content
-{
-  margin-top: 0px;
-}
-
-.ua-android #abb-banner,
-.ua-ios #abb-banner,
-.ua-android #abb-android-download,
-.ua-ios #abb-ios-download
+#hero-download-button
 {
   display: block;
 }
 
-#main, #video-container
+@media(min-width: 768px)
+{
+  #hero-download-button
+  {
+    display: inline-block;
+    min-width: 350px;
+  }
+}
+
+#hero-download-video
+{
+  display: none;
+}
+
+@media(min-width: 768px)
+{
+  #hero-download-video
+  {
+    display: block;
+  }
+}
+
+/******************************************************************************
+ * #video-container
+ *****************************************************************************/
+
+video-container
 {
   display: inline-block;
   vertical-align: top; /* Fix for https://bugzil.la/1320660 */
 }
 
-#video-container, #maxthon-instruction, #edge-teaser
+#video-container
 {
   background: #ffffff;
   padding: 10px;
   border: 1px solid #c9c9c9;
   box-shadow: 1px 1px 0 0 #dbdbdb;
 }
 
-#maxthon-instruction,
-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%;
   max-width: 520px;
 }
 
 #video
 {
@@ skipping 52 matching lines @@
   margin-top: -40px;
   margin-left: -40px;
 }
 
 .no-js #video-play,
 .show-disclaimer #video-play
 {
   margin-top: -60px;
 }
 
-html[lang^="zh_"] .maxthon #maxthon-instruction
+@media(max-width: 767)
 {
-  display: inline-block;
-  padding: 0px;
-}
+  #video-container
+  {
+    margin-bottom: 20px;
+  }
 
-.maxthon #feature-maxthon
-{
-  display: inline-block;
-}
+  #video-disclaimer
+  {
+    margin: 10px;
+  }
 
-#summary h1, #summary h2
-{
-  font-weight: normal;
-  margin: 0;
-}
+  .no-js #video-disclaimer,
+  .show-disclaimer #video-disclaimer
+  {
+    position: relative;
+  }
 
-#summary h1
-{
-  font-size: 60px;
-  line-height: 50px;
-  margin-bottom: 8px;
-}
-
-#summary h2
-{
-  font-size: 22px;
-  color: #d50215;
-}
-
-#summary ul
-{
-  list-style-type: none;
-  margin: 10px 0px 16px 0px;
-  padding-left: 40px;
-  padding-right: 0px;
-  color: #333333;
-}
-
-html[dir="rtl"] #summary ul
-{
-  padding-right: 40px;
-  padding-left: 0px;
-}
-
-#summary li
-{
-  margin-bottom: 5px;
-  line-height: 24px;
-}
-
-#summary li.emphasized
-{
-  font-weight: bold;
-}
-
-#summary li .sprite
-{
-  position: absolute;
-  width: 12px;
-  height: 11px;
-  margin-top: 4px;
-  margin-left: -17px;
-  margin-right: 0px;
-  background-image: url(../img/sprite-main.png);
-  background-repeat: no-repeat;
-  background-position: -166px 0px;
-}
-
-.license-note
-{
-  display: none;
-  font-weight: normal;
-}
-
-html[dir="rtl"] #summary li .sprite
-{
-  margin-right: -17px;
-  margin-left: 0px;
-}
-
-#terms-message,
-#terms-message a
-{
-  font-size: 12px;
-}
-
-/* This cannot be just .install-button because a:link will have a higher
-   specificity otherwise (overrides text color) */
-#install .install-button
-{
-  display: none;
-  position: relative;
-  width: 305px;
-  height: 50px;
-  color: #fff;
-  font-size: 20px;
-  text-decoration: none;
-  text-align: center;
-  line-height: 50px;
-  background: #c4c4c4;
-  background: -webkit-linear-gradient(top, #c4c4c4, #9e9e9e);
-  background: -moz-linear-gradient(top, #c4c4c4, #9e9e9e);
-  background: -ms-linear-gradient(top, #c4c4c4, #9e9e9e);
-  background: -o-linear-gradient(top, #c4c4c4, #9e9e9e);
-  background: linear-gradient(top, #c4c4c4, #9e9e9e);
-  box-shadow: 0 1px 0 0 #6b6b6b, 0 2px 0 0 #757575;
-  text-shadow: 2px 2px 2px #7a7a7a;
-  border: none;
-  border-radius: 3px;
-  bottom: 6px;
-  -webkit-transition: box-shadow 0.3s ease;
-  -moz-transition: box-shadow 0.3s ease;
-  -ms-transition: box-shadow 0.3s ease;
-  -o-transition: box-shadow 0.3s ease;
-  transition: box-shadow 0.3s ease;
-}
-
-.install-button:hover
-{
-  box-shadow: 0px 2px 7px #6f6f6f, 0 1px 0 0 #6f6f6f;
-}
-
-.install-button:active
-{
-  background: #a2a2a2;
-  background: -webkit-linear-gradient(bottom, #cacaca, #a2a2a2);
-  background: -moz-linear-gradient(bottom, #cacaca, #a2a2a2);
-  background: -ms-linear-gradient(bottom, #cacaca, #a2a2a2);
-  background: -o-linear-gradient(bottom, #cacaca, #a2a2a2);
-  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;
-}
-
-.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 */
-.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;
-}
-
-.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 */
-.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;
-}
-
-.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 */
-.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;
-}
-
-.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;
-  vertical-align: bottom;
-}
-
-html[dir="rtl"] #install ul
-{
-  margin: 0 5px 0 0;
-}
-
-#other-platform li
-{
-  display: inline-block;
-  margin: 0 3px;
-  font-size: 0;
-}
-
-#other-platform li a
-{
-  width: 19px;
-  height: 20px;
-}
-
-#platform-firefox
-{
-  background-position: -108px -89px;
-}
-
-#information-android
-{
-  display: none;
-}
-
-.android #information-android
-{
-  display: block;
-}
-
-.firefox #platform-firefox
-{
-  background-position: -108px -68px;
-}
-
-#platform-chrome
-{
-  background-position: -88px -89px;
-}
-
-.chrome #platform-chrome
-{
-  background-position: -88px -68px;
-}
-
-#platform-android
-{
-  background-position: -68px -89px;
-}
-
-.android #platform-android
-{
-  background-position: -68px -68px;
-}
-
-#platform-opera
-{
-  background-position: -68px -131px;
-}
-
-.opera #platform-opera
-{
-  background-position: -68px -110px;
-}
-
-#platform-internet-explorer
-{
-  background-position: -108px -131px;
-}
-
-.internet-explorer #platform-internet-explorer
-{
-  background-position: -108px -110px;
-}
-
-#platform-safari
-{
-  background-position: -88px -131px;
-}
-
-.safari #platform-safari
-{
-  background-position: -88px -110px;
-}
-
-#platform-yandex-browser
-{
-  background-position: -128px -89px;
-}
-
-.yandex-browser #platform-yandex-browser
-{
-  background-position: -128px -68px;
-}
-
-#platform-maxthon
-{
-  background-position: -128px -130px;
-}
-
-.maxthon #platform-maxthon
-{
-  background-position: -128px -109px;
-}
-
-#platform-edge
-{
-  background-position: -68px -171px;
-}
-
-.edge #platform-edge
-{
-  background-position: -68px -151px;
-}
-
-#content h3.subscribe-header
-{
-  font-size: 18px;
-  margin-bottom: 0px;
-}
-
-#other-platform > div,
-.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;
-}
-
-.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;
-}
-
-.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 */
-.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
-{
-  display: inline-block;
-}
-
-#key-facts section h1
-{
-  margin: 0px;
-}
-
-#key-facts section .sprite
-{
-  position: absolute;
-  width: 67px;
-  height: 67px;
-  margin-top: 0px;
-  margin-left: -80px;
-  margin-right: 0px;
-  border: none;
-}
-
-html[dir="rtl"] #key-facts section .sprite
-{
-  margin-right: -80px;
-  margin-left: 0px;
-}
-
-
-#facts-open-source
-{
-  background-position: -68px 0px;
-}
-
-#facts-downloads
-{
-  background-position: 0px 0px;
-}
-
-#facts-privacy
-{
-  background-position: 0px -68px;
-}
-
-#key-facts
-{
-  margin-bottom: 40px;
-}
-
-#key-facts section p
-{
-  margin-bottom: 0px;
-  font-size: 14px;
-}
-
-#key-facts section a
-{
-  font-size: 14px;
-}
-
-#footnote
-{
-  margin-top: 20px;
-  text-align: start;
-  color: #7d7d7d;
-}
-
-#footnote,
-#footnote li,
-#footnote a,
-#footnote strong
-{
-  font-size: 11px;
-}
-
-#footnote li
-{
-  padding-bottom: 5px;
-}
-
-#footnote li:first-child
-{
-  padding-top: 5px;
-}
-
-#footnote ul
-{
-  margin: 0px;
-  padding: 0px 30px;
-}
-
-.notice
-{
-  padding: 20px;
-  line-height: 1.4;
-  color: #000;
-  background-color: #fff;
-  border: 2px solid #a1a1a1;
-}
-
-#ready-for-windows-notice
-{
-  margin-bottom: 30px;
+  #video-play
+  {
+    margin-top: -40px;
+  }
 }
 
 /******************************************************************************
  * #media
  *****************************************************************************/
 
 #media-section { clear: both; }
 
 #media-header h2,
 #media-list
@@ skipping 18 matching lines @@
   display: inline-block;
 }
 
 #media-list img
 {
   max-width: 10em;
   max-height: 3em;
   margin: 0 1em 1em;
 }
 
-#media-list a 
+#media-list a
 {
   position: relative;
   display: block;
 }
 
 #media-list a:hover img
 {
   opacity: 0.3;
 }
 
 #media-list a:hover:after
 {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   height: 1em;
   width: 1em;
   padding: 1em;
   margin-left: -1em;
   margin-top: -1em;
   border-radius: 50%;
   background-color: #000;
   background-image: url(../img/external-icon.png);
-  background-image: linear-gradient(transparent, transparent), 
+  background-image: linear-gradient(transparent, transparent),
                     url(../img/external-icon.svg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 1em;
 }
 
-@media (min-width: 768px)
+@media (min-width: 992px)
 {
   #media-header small
-  { 
-    display: none; 
+  {
+    display: none;
   }
 
   #media-list
   {
     display: table;
     width: 100%;
   }
 
   #media-list li
   {
     display: table-cell;
     vertical-align: middle;
   }
 
   #media-list img
   {
-    margin: 0 2em;  
+    margin: 0 2em;
   }
 }
 
-@media (min-width: 992px)
+@media (min-width: 768px)
 {
   #media {
     display: table;
     width: 100%;
   }
 
   #media-header,
   #media-list
   {
     display: table-cell;
@@ skipping 43 matching lines @@
 
 @media (min-width: 768px) /* tablet-breakpoint */
 {
   #abb-notification figure,
   #abb-app-store-badges
   {
     padding-left: 2em;
     padding-right: 2em;
   }
 }
+
+/******************************************************************************
+ * #footnote
+ *****************************************************************************/
+
+#footnote
+{
+  margin-top: 20px;
+  text-align: start;
+  color: #7d7d7d;
+}
+
+#footnote,
+#footnote li,
+#footnote a,
+#footnote strong
+{
+  font-size: 11px;
+}
+
+#footnote li
+{
+  padding-bottom: 5px;
+}
+
+#footnote li:first-child
+{
+  padding-top: 5px;
+}
+
+#footnote ul
+{
+  margin: 0px;
+  padding: 0px 30px;
+}
+
+@media(max-width: 767px)
+{
+  #footnote
+  {
+    padding: 0px 20px;
+  }
+}