Noissue - Merged index_page into master

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,630 +1,323 @@
-#content,
-#blog
+/******************************************************************************
+ * Temparary styles
+ *****************************************************************************/
+
+.avoid-wrap {display: inline-block;}
+.small {font-size: smaller;}
+
+/******************************************************************************
+ * Browser-based styles
+ *****************************************************************************/
+
+.show-on-msie { display: none; }
+.msie .show-on-msie { display: inherit; }
+.msie .hide-on-msie { display: none; }
+
+.show-on-maxthon { display: none; }
+.maxthon .show-on-maxthon { display: inherit; }
+.maxthon .hide-on-maxthon { display: none; }
+
+/******************************************************************************
+ * #hero-download
+ *****************************************************************************/
+
+#hero-download
 {
-  padding-top: 5em;
+  padding: 3em 1em;
 }
 
-#key-facts h1
+@media (min-width: 576px) and (max-width: 1023px)
+{
+  /* add spacing left/right on tablets */
+  #hero-download
+  {
+    padding-left: 3em;
+    padding-right: 3em;
+  }
+}
+
+@media (max-width: 575px)
 {
-  font-size: 16px;
+  /* disable avoid-wrap inside h1 on mobile */
+  #hero-download h1 .avoid-wrap
+  {
+    display: inline;
+  }
+}
+
+@media (max-width: 1023px)
+{
+  /* force hero unit columns to break on large tablets */
+  #hero-download .column
+  {
+    width: 100%;
+  }
+}
+
+@media (min-width: 1024px)
+{
+  #hero-download
+  {
+    padding-top: 6em;
+    padding-bottom: 6em;
+  }
 }
 
-#content .sprite
+#hero-download h1
+{
+  /* Spacing is provided by the hero-download section */
+  margin-top: 0;
+}
+
+@media (min-width: 576px)
 {
-  background-image: url(../img/sprite-index.png);
+  /* force break without <br> on large screens */
+  #hero-download h1 .avoid-wrap:first-of-type
+  {
+    display: block;
+  }
+}
+
+#hero-download-video
+{
+  /* add space above on phones & tablets */
+  margin-top: 2em;
+  /* prevent default full-width on small tablets */
+  max-width: 550px;
+}
+
+#hero-download-video
+{
+  /* provide a little space between thumbnail and border + shadow */
+  padding: 1em 1em 0 1em;
 }
 
-#abb-banner
+@media (min-width: 1024px)
+{
+  #hero-download-video
+  {
+    /* keep aligned-top despite padding below */
+    margin-top: -1em;
+  }
+}
+
+#hero-download-video.has-iframe
+{
+  /* remove space around thumbnail when thumbnail is replaced by video */
+  padding: 0;
+}
+
+/** Hide the video border + shadow only when the thumbnail alone is showing */
+#hero-download-video.hide-disclaimer:not(.has-iframe)
 {
-  background-color: #ffffff;
-  display: none;
-  padding: 50px 40px 40px 40px;
-  margin-bottom: 30px;
+  border-color: transparent;
+  /* there is no box-shadow-color property :( */
+  box-shadow: 1px 1px 0 0 transparent;
+}
+
+/* The thumbnail is taller than the video. But it's hard to see because of the
+ * reflection and whitespace at the bottom. As a result, I am cutting out the
+ * whitespace and reflection when I show the disclaimer so that the section
+ * doesn't visibly resize when the thumbnail is replaced by the a iframe.
+ */
+
+
+/******************************************************************************
+ * #media
+ *****************************************************************************/
+
+#media-section
+{
+  clear: both;
   text-align: center;
 }
 
-#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
+#media-header
 {
-  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
-{
-  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
-{
-  display: block;
+  margin-bottom: 1em;
 }
 
-#content.ua-android #adblock-browser-notification,
-#content.ua-ios #adblock-browser-notification
-{
-  display: none;
-}
-
-#main, #home-video
+#media-header h2
 {
-  display: inline-block;
-  vertical-align: top; /* Fix for https://bugzil.la/1320660 */
-}
-
-#maxthon-instruction, #edge-teaser
-{
-  max-width: 540px;
-  background: #ffffff;
-  padding: 10px;
-  border: 1px solid #c9c9c9;
-  box-shadow: 1px 1px 0 0 #dbdbdb;
+  font-size: 1em;
+  font-weight: normal;
+  text-transform: uppercase;
 }
 
-#maxthon-instruction,
-html[lang^="zh_"] #content.maxthon #home-video,
-#content.maxthon #feature-free,
-#content.maxthon #terms-message,
-#feature-maxthon
+#media-header h2,
+#media-list
 {
-  display: none;
+  margin: 0;
 }
 
-#home-video
-{
-  max-width: 520px;
-}
-
-html[lang^="zh_"] #content.maxthon #maxthon-instruction
-{
-  display: inline-block;
-  padding: 0px;
-}
-
-#content.maxthon #feature-maxthon
+#media-list li
 {
   display: inline-block;
 }
 
-#summary h1, #summary h2
-{
-  font-weight: normal;
-  margin: 0;
-}
-
-#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
+#media-list img
 {
-  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;
+  max-width: 10em;
+  max-height: 3em;
+  margin: 0 1em 1em;
 }
 
-.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;
-}
-
-#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.safari.ua-ios .install-button,
-#content.yandex-browser.ua-yandex-browser .install-button,
-#content.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
-{
-  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.safari.ua-ios .install-button:hover,
-#content.yandex-browser.ua-yandex-browser .install-button:hover,
-#content.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
+#media-list a
 {
-  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.safari.ua-ios .install-button:active,
-#content.yandex-browser.ua-yandex-browser .install-button:active,
-#content.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
-{
-  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.ua-ios #install-ios-safari,
-#content.safari:not(.ua-ios) #install-safari,
-#content.yandex-browser #install-yandex-browser,
-#content.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;
-}
-
-#content.android #information-android
-{
+  position: relative;
   display: block;
 }
 
-#content.firefox #platform-firefox
-{
-  background-position: -108px -68px;
-}
-
-#platform-chrome
-{
-  background-position: -88px -89px;
-}
-
-#content.chrome #platform-chrome
-{
-  background-position: -88px -68px;
-}
-
-#platform-android
-{
-  background-position: -68px -89px;
-}
-
-#content.android #platform-android
+#media-list a:hover img
 {
-  background-position: -68px -68px;
-}
-
-#platform-opera
-{
-  background-position: -68px -131px;
-}
-
-#content.opera #platform-opera
-{
-  background-position: -68px -110px;
-}
-
-#platform-internet-explorer
-{
-  background-position: -108px -131px;
-}
-
-#content.internet-explorer #platform-internet-explorer
-{
-  background-position: -108px -110px;
+  opacity: 0.3;
 }
 
-#platform-safari
-{
-  background-position: -88px -131px;
-}
-
-#content.safari #platform-safari
-{
-  background-position: -88px -110px;
-}
-
-#platform-yandex-browser
-{
-  background-position: -128px -89px;
-}
-
-#content.yandex-browser #platform-yandex-browser
-{
-  background-position: -128px -68px;
-}
-
-#platform-maxthon
+#media-list a:hover:after
 {
-  background-position: -128px -130px;
-}
-
-#content.maxthon #platform-maxthon
-{
-  background-position: -128px -109px;
-}
-
-#platform-edge
-{
-  background-position: -68px -171px;
-}
-
-#content.edge #platform-edge
-{
-  background-position: -68px -151px;
-}
-
-#content h3.subscribe-header
-{
-  font-size: 18px;
-  margin-bottom: 0px;
-}
-
-#other-platform > div,
-#content.edge #home-video,
-#edge-teaser
-{
-  display: none;
+  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),
+                    url(../img/external-icon.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1em;
 }
 
-.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,
-html[lang^="zh_"] #maxthon-notification
+@media (min-width: 1024px)
 {
-  display: block;
-}
+  #media
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-header,
+  #media-list
+  {
+    display: table-cell;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  #media-header
+  {
+    margin-bottom: 0;
+  }
+
+  #media-header small
+  {
+    display: none;
+  }
+
+  #media-list { direction: rtl; }
+  [dir="rtl"] #media-list { direction: ltr; }
 
-#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,
-/* 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
-{
-  display: none;
-}
+  @supports (display: flex)
+  {
+    #media-list
+    {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
 
-#key-facts
-{
-  box-sizing: content-box;
+  #media-list
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-list li
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #media-list img
+  {
+    margin: 0 2em;
+  }
 }
 
-#key-facts section
+/******************************************************************************
+ * #abb-cross-promotion
+ *****************************************************************************/
+
+#abb-cross-promotion
 {
-  display: inline-block;
+  padding: 3em 0;
 }
 
-#key-facts section h1
+#abb-cross-promotion h2
 {
-  margin: 0px;
+  margin-top: 0;
+  margin-bottom: 1.5em;
 }
 
-#key-facts section .sprite
+#abb-cross-promotion h2,
+#abb-cross-promotion h3
 {
-  position: absolute;
-  width: 67px;
-  height: 67px;
-  margin-top: 0px;
-  margin-left: -80px;
-  margin-right: 0px;
-  border: none;
+  text-transform: uppercase;
 }
 
-html[dir="rtl"] #key-facts section .sprite
+#abb-logo
 {
-  margin-right: -80px;
-  margin-left: 0px;
+  max-width: 10em;
+}
+
+#abb-app-store-badges
+{
+  margin-top: 2em;
 }
 
-
-#facts-open-source
+#abb-app-store-badges img
 {
-  background-position: -68px 0px;
+  width: 200px;
 }
 
-#facts-downloads
+@media (max-width: 575px)
 {
-  background-position: 0px 0px;
-}
-
-#facts-privacy
-{
-  background-position: 0px -68px;
+  #abb-app-store-badges a:first-of-type
+  {
+    margin-bottom: 0.5em;
+  }
 }
 
-#key-facts
+@media (min-width: 576px)
 {
-  margin-bottom: 40px;
+  #abb-app-store-badges .one-half
+  {
+    width: 50%;
+  }
+
+  #abb-cross-promotion figure,
+  #abb-app-store-badges
+  {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
 }
 
-#key-facts section p
-{
-  margin-bottom: 0px;
-  font-size: 14px;
-}
-
-#key-facts section a
-{
-  font-size: 14px;
-}
+/******************************************************************************
+ * #footnote
+ *****************************************************************************/
 
 #footnote
 {
-  margin-top: 20px;
-  text-align: start;
+  padding-top: 3em;
+  padding-bottom: 2em;
+  font-size: 13px;
   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;
-}