Fixes #91 - Updates to polish page from review 29800606

static/poland/css/index.css

+/******************************************************************************
+ * 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: 3em 1em;
+}
+
+@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)
+{
+  /* 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;
+  }
+}
+
+#hero-download h1
+{
+  /* Spacing is provided by the hero-download section */
+  margin-top: 0;
+}
+
+@media (min-width: 576px)
+{
+  /* force break without <br> on large screens */
+  #hero-download h1 .avoid-wrap:first-of-type
+  {
+    display: block;
+  }
+}
+
+#hero-download-tos
+{
+  margin-bottom: 0.5em;
+}
+
+#hero-download-alternate
+{
+  font-size: smaller;
+}
+
+#hero-download-button
+{
+  display: inline-block;
+  min-width: 250px;
+  /* stretch full-width <= small tablets */
+  width: 100%;
+  /* 0.2em taller than normal buttons */
+  padding-top: 0.8em;
+  padding-bottom: 0.8em;
+  color: #fff;
+  background-color: #3D9C4F;
+}
+
+#hero-download-button:hover,
+#hero-download-button:focus
+{
+  background-color: #258333;
+}
+
+@media (min-width: 576px)
+{
+  #hero-download-button
+  {
+    /* force auto-width >= small tablets */
+    width: auto;
+  }
+}
+
+#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;
+}
+
+@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)
+{
+  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;
+}
+
+#media-header
+{
+  margin-bottom: 1em;
+}
+
+#media-header h2
+{
+  font-size: 1em;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+#media-header h2,
+#media-list
+{
+  margin: 0;
+}
+
+#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.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),
+                    url(../img/external-icon.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1em;
+}
+
+@media (min-width: 1024px)
+{
+  #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; }
+
+  @supports (display: flex)
+  {
+    #media-list
+    {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  #media-list
+  {
+    display: table;
+    width: 100%;
+  }
+
+  #media-list li
+  {
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  #media-list img
+  {
+    margin: 0 2em;
+  }
+}
+
+/******************************************************************************
+ * #abb-cross-promotion
+ *****************************************************************************/
+
+#abb-cross-promotion
+{
+  padding: 3em 0;
+}
+
+#abb-cross-promotion h2
+{
+  margin-top: 0;
+  margin-bottom: 1.5em;
+}
+
+#abb-cross-promotion h2,
+#abb-cross-promotion h3
+{
+  text-transform: uppercase;
+}
+
+#abb-logo
+{
+  max-width: 10em;
+}
+
+#abb-app-store-badges
+{
+  margin-top: 2em;
+}
+
+#abb-app-store-badges img
+{
+  height: 60px;
+}
+
+@media (max-width: 575px)
+{
+  #abb-app-store-badges a:first-of-type
+  {
+    margin-bottom: 0.5em;
+  }
+}
+
+@media (min-width: 576px)
+{
+  #abb-app-store-badges .one-half
+  {
+    width: 50%;
+  }
+
+  #abb-cross-promotion figure,
+  #abb-app-store-badges
+  {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+}
+
+/******************************************************************************
+ * #footnote
+ *****************************************************************************/
+
+#footnote
+{
+  padding-top: 3em;
+  padding-bottom: 2em;
+  font-size: 13px;
+  color: #7d7d7d;
+}