Fixes #91 - Updates to polish page from review 29800606

static/poland/css/main.css

Index: static/poland/css/main.css
===================================================================
new file mode 100644
--- /dev/null
+++ b/static/poland/css/main.css
@@ -0,0 +1,877 @@
+body
+{
+  font-family: "Source Sans Pro", Arial, sans-serif;
+  margin: 0;
+  /* Start below fixed navbar */
+  padding-top: 4em;
+  line-height: 1.5;
+}
+
+#content,
+#blog
+{
+  padding-bottom: 2em;
+}
+
+a img
+{
+  border: none;
+}
+
+a:link, a:visited
+{
+  color: #555;
+}
+
+button
+{
+  cursor: pointer;
+}
+
+code, pre
+{
+  font-family: monospace;
+}
+
+pre
+{
+  background: #ececec;
+  padding: 1em;
+  overflow: auto;
+}
+
+.sprite
+{
+  display: inline-block;
+  font-size: 0px; /* fix for IE6 height bug */
+  background-image: url(../img/sprite-main.png);
+  background-repeat: no-repeat;
+}
+
+.toc
+{
+  display: inline-block;
+  border: 1px solid #aaa;
+  background: #fff;
+  padding: 16px 20px;
+}
+
+.toc ul
+{
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.toc ul ul
+{
+  padding-left: 40px;
+}
+
+.toc li
+{
+  margin: 4px 0;
+}
+
+#social-list ul
+{
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+div.animation[started="false"]:before
+{
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPBAMAAADJ%2BIh5AAAAFVBMVEUAgAAAgAD%2F%2F%2F%2Fr9uvY7Ni%2B376h0aGeNpcsAAAAAXRSTlNtc%2BXFgwAAADVJREFUeF5dzVEKACAMAlC7QW6t%2F7r%2FIYOBEPr1GOgw2AHiduaHkwKXwBK4BYZdylrpy4K%2BP%2Fu5C1CVKVSzAAAAAElFTkSuQmCC);
+  padding-left: 0px;
+  padding-right: 3px;
+}
+
+html[dir="rtl"] div.animation[started="false"]:before
+{
+  padding-left: 3px;
+  padding-right: 0px;
+}
+
+div.animation[started="false"]
+{
+  cursor: pointer;
+}
+
+div.animation[started="true"]
+{
+  box-sizing: initial;
+  -moz-user-select: none;
+}
+
+.animation img
+{
+  max-width: none;
+}
+
+.alert
+{
+  display: block;
+  padding: 15px;
+  margin: 15px 0;
+  background-color: #fff;
+  border: 1px solid #a1a1a1;
+}
+
+[dir="ltr"] .alert
+{
+  border-left: 5px solid #d14841;
+}
+
+[dir="rtl"] .alert
+{
+  border-right: 5px solid #d14841;
+}
+
+/******************************************************************************
+ * .section
+ *****************************************************************************/
+
+.section
+{
+  padding: 2em 0;
+}
+
+/******************************************************************************
+ * .content
+ *****************************************************************************/
+
+.content h1,
+.content .h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5
+{
+  font-weight: bold;
+  margin: 32px 0 16px 0;
+  margin: 2rem 0 1rem 0;
+  line-height: 1.4;
+}
+
+.content h1,
+.content .h1 { font-size: 1.4em; }
+.content h2 { font-size: 1.3em; }
+.content h3 { font-size: 1.2em; }
+.content h4 { font-size: 1.1em; }
+.content h5 { font-size: 1em; }
+
+@media(min-width: 576px)
+{
+  .content h1,
+  .content .h1 { font-size: 1.6em; }
+  .content h2 { font-size: 1.4em; }
+  .content h3 { font-size: 1.3em; }
+  .content h4 { font-size: 1.2em; }
+  .content h5 { font-size: 1.1em; }
+}
+
+@media(min-width: 768px)
+{
+  .content h1,
+  .content .h1
+  {
+    font-size: 2.4em;
+    line-height: 1.3;
+  }
+
+  .content h2 { font-size: 1.6em; }
+}
+
+.content a,
+.content a:visited
+{
+  color: #c70d2c;
+}
+
+/* Buttons
+ ******************************************************************************/
+
+.button
+{
+  padding: 0.5em 2em;
+  border: none;
+  text-align: center;
+}
+
+.button:hover,
+.button:active,
+.button:focus
+{
+  text-decoration: none;
+}
+
+@media(max-width: 767px)
+{
+  .button
+  {
+    display: block;
+    width: 100%;
+  }
+}
+
+.button.primary
+{
+  color: #fff !important;
+  background-color: #c70d2c !important;
+  box-shadow: 0px 2px 5px #95989A;
+}
+
+.button.primary:hover
+{
+  background-color: #E00F32 !important;
+}
+
+.button.primary:active
+{
+  background-color: #AD102A !important;
+}
+
+.button.accent,
+.button.accent:visited
+{
+  background: #077CA6 !important;
+  color: #fff !important;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+
+.button.accent:hover,
+.button.accent:active,
+.button.accent:focus
+{
+  box-shadow: inset 0 0 0 3px #005D80;
+}
+
+/*******************************************************************************
+ * .fg-* utilities
+ ******************************************************************************/
+
+.fg-accent
+{
+  color: #077CA6;
+}
+
+.bg-secondary
+{
+  color: #000;
+  background-color: #F4F4F4;
+}
+
+/*******************************************************************************
+ * #navbar
+ ******************************************************************************/
+
+ #navbar
+{
+  min-height: 4em;
+  background-color: #c70d2c;
+  position: fixed;
+  z-index: 2;
+  width: 100%;
+  top: 0;
+  transition: top 0.2s ease-in-out;
+}
+
+@media(max-width: 991px)
+{
+  #navbar
+  {
+    overflow: auto;
+  }
+}
+
+#navbar li
+{
+  list-style-type: none;
+}
+
+#navbar .container
+{
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* #navbar #navbar-logo
+ ******************************************************************************/
+
+#navbar-logo
+{
+  /* padding is visible in hover background-color change */
+  padding: 0em 1em;
+  color: #fff;
+}
+
+#navbar-logo:hover,
+#navbar-logo:active,
+#navbar-logo:focus
+{
+  background-color: #AE0013;
+  text-decoration: none;
+}
+
+#navbar-logo,
+#navbar-logo > *
+{
+  float: left;
+}
+
+[dir="rtl"] #navbar-logo,
+[dir="rtl"] #navbar-logo > *
+{
+  float: right;
+}
+
+#navbar-logo img
+{
+  height: 4em;
+  padding: 0.5em 0em;
+  margin: 0em 1em 0em 0em;
+}
+
+[dir="rtl"] #navbar-logo > img
+{
+  margin: 0em  0em 0em 1em;
+}
+
+#navbar-logo > span
+{
+  /* full-height: 2.91 * 1.375 = ~4em */
+  line-height: 2.91em;
+  font-size: 1.375em;
+}
+
+/* #navbar #navbar-menu-toggle
+ ******************************************************************************/
+
+#navbar-menu-toggle
+{
+  float: right;
+  padding: 1em;
+}
+
+[dir="rtl"] #navbar-menu-toggle
+{
+  float: left;
+}
+
+/* show on mobile */
+#navbar-menu-toggle,
+#navbar-menu-toggle > img
+{
+  display: block;
+}
+
+/* hide on desktop */
+@media(min-width: 992px)
+{
+  #navbar-menu-toggle
+  {
+    display: none;
+  }
+}
+
+#navbar-menu-toggle > img
+{
+  /* plus 2em padding = 4em */
+  height: 2em;
+}
+
+#navbar-menu-toggle:hover,
+#navbar-menu-toggle:active,
+#navbar-menu-toggle:focus
+{
+  background-color: #AE0013;
+}
+
+/* #navbar #navbar-menu
+ ******************************************************************************/
+
+#navbar-menu a
+{
+  display: block;
+  color: #fff;
+  text-decoration: none;
+}
+
+/* #navbar #navbar-menu #navbar-locale-menu
+ ******************************************************************************/
+
+/* caret */
+#navbar-locale-selected:after
+{
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin: 0em 0em 0em 0.255em;
+  vertical-align: .255em;
+  content: "";
+  border-top: .3em solid;
+  border-right: .3em solid transparent;
+  border-left: .3em solid transparent;
+}
+
+[dir="rtl"] #navbar-locale-selected:after
+{
+  margin: 0em 0.255em 0em 0em;
+}
+
+#navbar-locale-menu
+{
+  display: none;
+}
+
+#navbar-locale-menu.visible
+{
+  display: block;
+}
+
+#navbar-locale-menu > li > a
+{
+  padding: 0.75em 1em;
+}
+
+#navbar-locale-menu > li > a:hover,
+#navbar-locale-menu > li > a:active,
+#navbar-locale-menu > li > a:focus
+{
+  background-color: #434343;
+}
+
+/* #navbar #navbar-menu (desktop)
+ ******************************************************************************/
+
+@media(min-width: 992px)
+{
+  #navbar-menu
+  {
+    float: right;
+  }
+
+  [dir="rtl"] #navbar-menu
+  {
+    float: left;
+  }
+
+  #navbar-menu > li,
+  #navbar-menu > li > a
+  {
+    display: inline-block;
+  }
+
+  #navbar-menu > li > a
+  {
+    padding: 0em 1em;
+    line-height: 4em;
+  }
+
+  #navbar-menu > li > a:hover,
+  #navbar-menu > li > a:active,
+  #navbar-menu > li > a:focus
+  {
+    background-color: #AE0013;
+  }
+
+  /* #navbar #navbar-menu #navbar-locale-menu
+   ****************************************************************************/
+
+  #navbar-locale-menubar
+  {
+    position: relative;
+  }
+
+  #navbar-locale-menu
+  {
+    position: absolute;
+    min-width: 16em;
+    max-height: 20em;
+    max-height: 50vh;
+    top: 100%;
+    right: 0px;
+    overflow: auto;
+    z-index: 9001;
+    background-color: #292929;
+  }
+
+  [dir="rtl"] #navbar-locale-menu
+  {
+    right: auto;
+    left: 0px;
+  }
+}
+
+/* #navbar #navbar-menu (mobile)
+ ******************************************************************************/
+
+@media(max-width: 991px)
+{
+  #navbar-menu
+  {
+    display: none;
+    float: left;
+    clear: both;
+    width: 100%;
+    background-color: #292929;
+    overflow-y: scroll;
+    max-height: 416px;
+    max-height: 80vh;
+  }
+
+  #navbar-menu.visible
+  {
+    display: block;
+  }
+
+  #navbar-menu li a
+  {
+    padding: 0.75em 1em;
+  }
+
+  #navbar-menu li a:hover,
+  #navbar-menu li a:active,
+  #navbar-menu li a:focus
+  {
+    background-color: #434343;
+  }
+}
+
+/*******************************************************************************
+ * #footer
+ ******************************************************************************/
+
+#footer
+{
+  overflow: auto;
+  padding: 2em 0em;
+  color: #ececec;
+  background-color: #292929;
+  font-size: 0.9em;
+}
+
+/* #footer body
+ ******************************************************************************/
+
+#footer h5
+{
+  margin-top: 1em;
+  margin-bottom: 1.5em;
+}
+
+#footer h5:after
+{
+  content: "";
+  display: block;
+  width: 1.25em;
+  height: 0.125em;
+  margin-top: 0.5em;
+  background-color: #ececec;
+}
+
+#footer ul
+{
+  padding: 0em;
+  list-style-type: none;
+}
+
+#footer a
+{
+  color: #ececec;
+}
+
+#footer a:hover,
+#footer a:active,
+#footer a:focus
+{
+  color: #fff;
+  text-decoration: underline;
+}
+
+/* #footer #social-list
+ ******************************************************************************/
+
+#social-list ul
+{
+  /* negative margin canceled out by li margin below */
+  margin: 0em -0.375em;
+}
+
+#social-list li
+{
+  float: left;
+  margin: 0em 0.375em;
+}
+
+[dir="rtl"] #social-list li
+{
+  float: right;
+}
+
+#social-list img
+{
+  height: 2em;
+}
+
+@media(min-width: 1200px)
+{
+  #social-list img
+  {
+    height: 3em;
+  }
+}
+
+/* #footer #footer-legal
+ ******************************************************************************/
+
+#footer-legal
+{
+  margin-top: 1em;
+}
+
+@media(min-width: 1200px)
+{
+  #footer-legal
+  {
+    margin-top: 2em;
+  }
+}
+
+/* #footer #footer-legal #legal-list
+ ******************************************************************************/
+
+#legal-list li
+{
+  float: left;
+}
+
+[dir="rtl"] #legal-list li
+{
+  float: right;
+}
+
+#legal-list li:after
+{
+  margin: 0em 0.375em;
+}
+
+/* IE9+ only */
+#legal-list li::after
+{
+  content: "|"
+}
+
+#legal-list li:last-of-type::after
+{
+  content: none;
+}
+
+
+/* hide all footer links except #social-list on ~mobile */
+@media(max-width: 767px)
+{
+  #footer .column
+  {
+    display: none;
+  }
+
+  /* overriding display:none above */
+  #footer #social-list
+  {
+    display: block;
+  }
+}
+
+/* Video
+ ****************************************************************************/
+
+.video-parent
+{
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 1px solid #c9c9c9;
+  box-shadow: 1px 1px 0 0 #dbdbdb;
+  overflow: hidden;
+}
+
+.video-parent.has-iframe::before
+{
+  display: block;
+  content: "";
+  padding-top: 56.25%;
+}
+
+.video-parent iframe
+{
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.video-link
+{
+  display: block;
+  position: relative;
+}
+
+.video-thumbnail
+{
+  width: 100%;
+  transition: opacity 0.8s;
+  opacity: 0.2;
+}
+
+.hide-disclaimer .video-thumbnail
+{
+  opacity: 1;
+}
+
+.video-disclaimer
+{
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 1em;
+  background-color: #fff;
+  font-size: 0.9em;
+  text-align: center;
+  transition: opacity 0.8s;
+}
+
+.hide-disclaimer .video-disclaimer
+{
+  visibility: hidden;
+  opacity: 0;
+}
+
+.video-play
+{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80px;
+  margin-top: -60px;
+  margin-left: -40px;
+}
+
+.hide-disclaimer .video-play
+{
+  margin-top: -40px;
+}
+
+/******************************************************************************
+ * .item-group
+ *****************************************************************************/
+
+.item-group
+{
+  text-align: center;
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+.item-group img
+{
+  height: 5em;
+  width: auto;
+}
+
+.item-group h2
+{
+  text-transform: uppercase;
+}
+
+@media (max-width: 575px)
+{
+  .item-group .column
+  {
+    margin-bottom: 3em;
+  }
+
+  .item-group .column:last-of-type
+  {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: 576px) and (max-width: 1023px)
+{
+  .item-group
+  {
+    text-align: left;
+  }
+
+  [dir="rtl"] .item-group
+  {
+    text-align: right;
+  }
+
+  .item-group .column
+  {
+    position: relative;
+    width: auto;
+    padding: 0 3em 2em 10.5em;
+    min-height: 7em; /* Height of image plus 2em bottom padding */
+  }
+
+  [dir="rtl"] .item-group .column
+  {
+    padding: 0 10.5em 2em 3em;
+  }
+
+  .item-group .column:last-of-type
+  {
+    padding-bottom: 0;
+    min-height: 6em; /* Height of image */
+  }
+
+  .item-group img
+  {
+    position: absolute;
+    left: 3em;
+    top: 0.5em;
+  }
+
+  [dir="rtl"] .item-group img
+  {
+    left: auto;
+    right: 3em;
+  }
+
+  .item-group h2
+  {
+    margin: 0;
+  }
+}
+
+/* Horizontal List
+ ******************************************************************************/
+
+.horizontal-list
+{
+  display: inline;
+  list-style: none;
+}
+
+.horizontal-list,
+.content .horizontal-list
+{
+  padding: 0;
+}
+
+.horizontal-list li
+{
+  display: inline;
+  list-style: none;
+}