first run page redesign

chrome/skin/firstRun.css

 /*
  * This file is part of Adblock Plus <http://adblockplus.org/>,
  * Copyright (C) 2006-2013 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
  *
  * You should have received a copy of the GNU General Public License
  * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@font-face {
+  font-family: 'CreteRound';
+  font-style: normal;
+  src: url(fonts/CreteRound-Regular.otf);

[Wladimir Palant, 2013/10/02 13:21:39]

Do we really need a custom font for the first-run page? I'm not even asking
about whether adding 50 kB to the download size is really worth it, the
attribution requirement of its license is something that we have to comply with
- and we currently don't have a place for third-party licenses in either Firefox
or Chrome.

+  src: local ('Ø'), 
+  /*local ('Ø') forces using no local font called CreteRound*/
+  url(fonts/CreteRound-Regular.otf) format('otf'); 
+}
+
+@font-face {
+  font-family: 'CreteRound';
+  font-style: italic;
+  src: url(fonts/CreteRound-Italic.otf);
+  src: local ('Ø'),
+  /*local ('Ø') forces using no local font called CreteRound*/
+  url(fonts/CreteRound-Italic.otf) format('otf'); 
+}
+
+*
+{
+  margin: 0;
+  padding: 0;
+}

[Wladimir Palant, 2013/10/02 13:21:39]

I generally consider wildcard CSS rules like this one bad style, you never know
what they will apply to and what kind of unexpected effects they will cause.
What's wrong with setting a margin and padding on the elements where you
actually need it? It doesn't look like there are too many.

+
 body
 {
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 14px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 15px;
   line-height: 140%;
-  color: #000000;
+  color: #7f776b;
   background-color: #f8f6f2;
+  background-image: url(background-main.png);
+}
+
+a, a:link, a:visited
+{
+  color: #5a84b3;
+  text-decoration: underline;
+}
+
+a:hover
+{
+  text-decoration: none;
+}
+
+button
+{
+  cursor: pointer;
+}
+
+li
+{
+  list-style-type: none;
+}
+
+header
+{
+  height: 200px;

[Wladimir Palant, 2013/10/02 13:21:39]

Why the hardcoded height? We don't have to support IE here yet and modern
browsers are generally capable of working without any hardcoded sizes.

Or is that only an alternative way of writing |margin-bottom: 100px|?

   background-image: url(background.png);
-  margin: 0 auto;
-  padding: 0;
-  max-width: 900px;
-}
-
-a:link, a:visited
-{
-  color: #7d7d7d;
-}
-
-button, .arrow
-{
+  background-repeat: repeat-x;
+  width: 100%;
+  padding: 40px 0 0 0;
+}
+
+header h1
+{
+  font-size: 24px;
+  font-weight: normal;
+  margin: 0 auto;
+  color: #57ab5b;
+  text-align: center;
+  margin: 21px auto;

[Wladimir Palant, 2013/10/02 13:21:39]

This overrides the margin property three lines above.

+  padding: 16px 0 14px 0;
+  border: 1px #57ab5b;
+  border-style: dashed none;
+  /* border parallel fix - 957px is the value 
+   * closest to 960px(page width) which makes 
+   * the dashed border parallel
+   */
+  max-width: 957px;
+}
+
+strong
+{
+  font-weight: 600;

[Wladimir Palant, 2013/10/02 13:21:39]

Aren't you duplicating browser defaults here? At least in Firefox that tag
defaults to |font-weight: bold| which is equivalent to |font-weight: 700| - I
doubt that there is any visible difference.

+}
+
+h1,h2,h3
+{
+ font-family: CreteRound, Helvetica, Arial, sans-serif;
+}
+
+h2 
+{
+  font-size: 26px;
+  font-weight: lighter;
+  color: #968d81;
+  line-height: 28px;
+  text-align: center;
+
+}
+
+h3 
+{
+  font-size: 22px;
+  color: #7F776B;
+  font-weight: normal;
+  margin: 0 0 10px 0;
+  line-height: 24px;
+}
+
+h4 
+{
+  font-size: 15px;
+  color: #7f776b;
+  font-weight: normal;
+  text-align: center;
+}
+
+section
+{
+  margin: 0 auto;
+  margin-bottom: 30px;
+  max-width: 760px;
+  background-image: url(background.png);
+  padding: 40px 100px;
+}
+
+section > p
+{
+  margin: 15px 0 0 0;
+}
+
+
+#logo
+{
+  margin: 0 auto;
+  height: 100px;
+  width: 99px;
+  display: block;
+  background-image: url(abp-icon-big.png);
+  background-repeat: no-repeat;
+}
+
+#can-do-more
+{
+  max-width: 960px; 
+  padding: 40px 0px 0px 0px;
+}
+
+#can-do-more > h2
+{
+  margin: 0 100px;
+}
+
+.fade
+{
+  opacity: 0;
+}
+
+.hide
+{
+  display: none;
+}
+
+#can-do-more-overview
+{
+  max-width: 760px;
+  min-height: 140px;
+  margin: 30px 100px 0 100px;
+  font-size: 0px;
+  /* hides appearing spacings because of 
+   * using display: inline-block*/
   cursor: pointer;
-}
-
-header, p
-{
-  margin: 15px 0 5px;
-}
-
-#content
-{
-  padding: 0 90px;
-}
-
-header
-{
-  padding-left: 148px;
-  background-image: url(abp-icon-big.png);
-  background-position: 0% 50%;
-  background-repeat: no-repeat;
-  min-height: 128px;
-  vertical-align: middle;
-  line-height: 1;
-
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-box-pack: center;
-
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  -moz-box-pack: center;
-
-  display: -o-box;
-  -o-box-orient: vertical;
-  -o-box-pack: center;
-
-  display: -ms-box;
-  -ms-box-orient: vertical;
-  -ms-box-pack: center;
-
-  display: box;
-  box-orient: vertical;
-  box-pack: center;
-}
-
-header h1
-{
-  font-size: 40px;
-  font-weight: normal;
-  margin: 0;
-}
-
-#dataCorruptionWarning
-{
-  font-size: 200%;
-  line-height: 140%;
-  margin: 20px;
-  padding: 20px;
-  border: 3px solid red;
-  border-radius: 10px;
+  transition: opacity 0.5s ease-in-out;
+  -moz-transition: opacity 0.5s ease-in-out;
+  -webkit-transition: opacity 0.5s ease-in-out;
+}
+
+#can-do-more-overview > li:hover
+{
+  background-image: url("background-main.png");
+  text-decoration: none;
+}
+
+#can-do-more-overview > li
+{
+  width: 230px;
+  height: 115px;

[Wladimir Palant, 2013/10/02 13:21:39]

I guess we are hardcoding the size of the text here and ignoring the fact that
translations might have a different size? Can this be avoided?

+  display: inline-block;
+  border-right: 1px dashed #c7c6c2;
+  padding: 20px 10px 0 10px;
+  vertical-align: top;
+  text-decoration: underline;
+  -webkit-backface-visibility: hidden;
+  /* hides the 1px movement chrome bug 
+   * which appears while transition. 
+   */
+}
+
+#can-do-more-overview > li > div

[Wladimir Palant, 2013/10/02 13:21:39]

Seeing this makes me think that the HTML source is missing a few classes. E.g.,
<div class="feature-malware-image"> should probably be <div class="feature-image
feature-malware-image">

+{
+  width: 59px;
+  height: 59px;
+  display: block;
+  margin: 0 auto;
+}
+
+#can-do-more-overview > li > h4
+{
+  margin: 15px 0 0 0;
+}
+
+#can-do-more #feature-first
+{
+  border-left: 1px dashed #c7c6c2;
+}
+
+.feature-malware-image
+{
+  background-image: url(features/malware.png);
+  background-repeat: no-repeat;
+}
+
+.feature-social-image
+{
+  background-image: url(features/social.png);
+  background-repeat: no-repeat;
+}
+
+.feature-tracking-image
+{
+  background-image: url(features/tracking.png);
+  background-repeat: no-repeat;
+}
+
+#can-do-more-expanded
+{
+  margin: 30px 100px 0 100px;
+  transition: opacity 0.5s ease-in-out;
+  -moz-transition: opacity 0.5s ease-in-out;
+  -webkit-transition: opacity 0.5s ease-in-out;
 }
 
 #features
 {
   display: block;
   border-spacing: 10px;
   margin: 0px;
   padding: 0px;
-  padding-bottom: 120px;
-  white-space: nowrap;
-}
-
-#features-title
-{
-  font-size: 22px;
-  color: #cc0000;
-  margin: 30px 0px 20px;
-}
-
-#features-title::after
-{
-  content: ":";
 }
 
 .feature:not([hidden])
 {
   display: block;
-  position: relative;
   list-style-type: none;
+  padding: 30px 0;
   padding-bottom: 20px;
+  border-top: 1px dashed #c0bebb;
 }
 
 .feature-image, .feature-description
 {
   display: inline-block;
   *display: inline; /* IE6 inline-block fix */
   *zoom: 1;
   vertical-align: top;
 }
 
 .feature-description
 {
-  width: 550px;
-  margin: 0px 10px;
-}
-
-.feature-title
-{
-  color: black;
-  font-weight: bold;
-  font-size: 120%;
-}
-
-.feature-title::after
-{
-  content: ":";
-}
-
-.feature-text
-{
-  margin: 7px 0px;
-  white-space: normal;
+  margin: 0px 0px 0 20px;
+  width: 625px;
+  max-width: 85%;
+}
+
+.feature-description-textblock
+{
+  width: 480px;
+  max-width: 100%; 
+  margin: 0 40px 0 0;
+  display: inline-block;
+}
+
+.feature-description-textblock > span
+{
+  margin: 15px 0 0 0;
 }
 
 .feature-image
 {
-  width: 57px;
-  height: 57px;
-}
-
-#feature-malware .feature-image
-{
-  background-image: url(features/malware.png);
-}
-
-#feature-social .feature-image
-{
-  background-image: url(features/social.png);
-}
-
-#feature-tracking .feature-image
-{
-  background-image: url(features/tracking.png);
-}
-
-.feature button
-{
+  width: 59px;
+  height: 59px;
+  margin: 8px 0 10px 20px;
+}
+
+#activate-features
+{
+  width: 100%;
+  background-image: url("background-candomore.png");
+  margin: 30px 0 0 0;
+  padding: 14px 0 14px 0;
   cursor: pointer;
-  position: relative;
-  top: 0px;
-  padding: 5px 10px;
-  *padding: 2px 3px;
-  font-weight: none;
-  font-size: inherit;
-  color: white;
-  text-shadow: 2px 2px 2px #327d14;
-  border: none;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 0 #486c15, 0 2px 0 0 #517422;
-  background-color: #62c52b;
-  background: -webkit-linear-gradient(top, #62c52b, #4f9d22);
-  background: -moz-linear-gradient(top, #62c52b, #4f9d22);
-  background: -o-linear-gradient(top, #62c52b, #4f9d22);
-  background: -ms-linear-gradient(top, #62c52b, #4f9d22);
-  background: linear-gradient(top, #62c52b, #4f9d22);
-  -webkit-transition: box-shadow 0.3s ease;
-  -moz-transition: box-shadow 0.3s ease;
-  -o-transition: box-shadow 0.3s ease;
-  -ms-transition: box-shadow 0.3s ease;
-  transition: box-shadow 0.3s ease;
-}
-
-.feature button:hover
-{
-  box-shadow: 0px 2px 7px #486c15, 0 1px 0 0 #486c15;
-}
-
-.feature button:active
-{
-  top: 3px;
-  top: 0px\9;
-  box-shadow: 0px 0px 7px #486c15;
-  background-color: #4f9d22;
-  background: -webkit-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -moz-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -o-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: -ms-linear-gradient(bottom, #62c52b, #4f9d22);
-  background: linear-gradient(bottom, #62c52b, #4f9d22);
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  -ms-transition: none;
-  transition: none;
-  *zoom: 1;
-}
-
-.feature button.disable
-{
-  text-shadow: 2px 2px 2px #9d4f22;
-  box-shadow: 0 1px 0 0 #9d4f22, 0 2px 0 0 #999;
-  background-color: #c5622b;
-  background: -webkit-linear-gradient(top, #c5622b, #9d4f22);
-  background: -moz-linear-gradient(top, #c5622b, #9d4f22);
-  background: -o-linear-gradient(top, #c5622b, #9d4f22);
-  background: -ms-linear-gradient(top, #c5622b, #9d4f22);
-  background: linear-gradient(top, #c5622b, #9d4f22);
-}
-
-.feature button.disable:hover
-{
-  box-shadow: 0px 2px 7px #9d4f22, 0 1px 0 0 #9d4f22;
-}
-
-.feature button.disable:active
-{
-  top: 3px;
-  top: 0px\9;
-  box-shadow: 0px 0px 7px #9d4f22;
-  background-color: #9d4f22;
-  background: -webkit-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -moz-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -o-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: -ms-linear-gradient(bottom, #c5622b, #9d4f22);
-  background: linear-gradient(bottom, #c5622b, #9d4f22);
-  -webkit-transition: none;
-  -moz-transition: none;
-  -o-transition: none;
-  -ms-transition: none;
-  transition: none;
-  *zoom: 1;
-}
-
-#shade
-{
-  -webkit-transition: opacity 0.2s ease;
-  -moz-transition: opacity 0.2s ease;
-  -o-transition: opacity 0.2s ease;
-  -ms-transition: opacity 0.2s ease;
-  transition: opacity 0.2s ease;
-  opacity: 0.0;
-  position: fixed;
-  margin-left: 10px;
-  bottom: 70px;
-  z-index: 100;
+  text-align: center;
+  white-space: nowrap;
+}
+
+#activate-features-label
+{
+  display: inline-block;
+  width: 86%;
+  color: #fff;
+  font-size: 22px;
+  text-align: center;
+  font-style: italic;
+  font-family: CreteRound, Helvetica, Arial, sans-serif;
+  -moz-transition: opacity 0.5s ease-in-out;
+  transition: opacity 0.5s ease-in-out;
+}
+
+#can-do-more.expanded #label-show-expanded
+{
+  display: block;
+}
+
+#can-do-more.expanded #label-show-overview
+{
+  display: none;
+}
+
+#label-show-expanded
+{
+  display: none;
+}
+
+#label-show-overview
+{
+  display: block;
+}
+
+#activate-features-label:hover
+{
+  color: #1f6822;
+}
+
+#can-do-more.expanded .arrow
+{
+  background-image: url("arrow-up.png");
 }
 
 .arrow
 {
-  width: 0;
-  height: 0;
-  border: 30px solid transparent;
-  border-top-color: #000;
-}
-
-footer
-{
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 70px 0 0;
-  text-align: center;
-  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -moz-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -o-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: -ms-linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-  background: linear-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50px);
-}
-
-footer h1
-{
-  margin: 0;
-  font-size: 18px;
-  color: #666;
-  position: fixed;
-  bottom: 70px;
-  left: 0;
-  right: 0;
-  -webkit-transition: opacity .3s ease;
-  -moz-transition: opacity .3s ease;
-  -o-transition: opacity .3s ease;
-  -ms-transition: opacity .3s ease;
-  transition: opacity .3s ease;
-  opacity: 1;
+  width: 29px;
+  height: 22px;
+  vertical-align: bottom;
+  display: inline-block;
+  background-image: url("arrow-down.png");
+}
+
+#share
+{
+  background-image: url(background-share.png);
+  padding: 50px 100px 40px 100px; 
+  max-width: 760px;
+  text-align: center;
+  font-family: CreteRound, Helvetica, Arial, sans-serif;
+}
+
+#share h2
+{
+  color: #fff;
+  margin: 0 0 30px 0;
+}
+
+#share h2 > a
+{
+  color: #fff;
+}
+
+#share h2 > a:hover
+{
+  color: #2e5075;
+}
+
+#share span
+{
+  color: #bed1e6;
+  text-align: center;
+  line-height: 34px;
+  font-size: 22px;
+  display: block;
+}
+
+#donate:hover, .share-buttons a:hover
+{
+  -moz-box-shadow: 0px 0px 0px 2px #8ca7c4;
+  -webkit-box-shadow: 0px 0px 0px 2px #8ca7c4;
+  box-shadow: 0px 0px 0px 2px #8ca7c4;
+  border-radius: 30px;
+} 
+
+#donate-block span, #share-block span
+{
+  margin: 13px 20px 10px 20px;
+}
+
+#donate-block, #share-block
+{
+  min-width: 250px;
+  display: inline-block;
+  vertical-align: top;
+  padding: 20px 0 0 0;
+}
+
+#donate-block
+{
+  border: 1px dashed #37506d;
+  border-style: none dashed;
+  width: 50%;  
+}
+
+#share-block
+{
+  border-right: 1px dashed #37506d;
+  width: 49%;
+}
+
+.share-buttons
+{
+  margin: 6px 0 0 0;
+  cursor: pointer;
+  vertical-align: top;
+  /* because inline block creates 
+   * space if not captured with 
+   * font-size and line-height 0px
+   */
+  font-size: 0px;
+  line-height: 0px;
+}
+
+.share-buttons > a
+{
+  width: 50px;
+  height: 50px;
+  margin: 0 8px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+html[lang^="zh_"] #share-chinese,
+html:not([lang^="zh_"]) #share-general
+{
+  display: block;
+}
+
+html[lang^="zh_"] #share-general,
+html:not([lang^="zh_"]) #share-chinese
+{
+  display: none;
+}
+
+#share-chinese > a
+{
+  border-bottom: 2px solid transparent;
+}
+
+#share-chinese > a:hover
+{
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 0;
+  border-bottom: 2px solid #8CA7C4;
+}
+
+#share-facebook
+{
+  background-image: url(social/facebook.png);
+  background-repeat: no-repeat;
+}
+
+#share-twitter
+{
+  background-image: url(social/twitter.png);
+  background-repeat: no-repeat;
+}
+
+#share-gplus
+{
+  background-image: url(social/googleplus.png);
+  background-repeat: no-repeat;
+}
+
+#share-renren
+{
+  background-image: url(social/renren.png);
+  background-repeat: no-repeat;
+}
+
+#share-weibo
+{
+  background-image: url(social/weibo.png);
+  background-repeat: no-repeat;
+}
+
+#dataCorruptionWarning
+{
+  font-size: 160%;
+  border: 3px dashed red;
+  text-align: center;
 }
 
 #social ul
 {
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
 }
 
@@ skipping 25 matching lines @@
   bottom: 0px;
 }
 
 .share-button
 {
   display: inline-block;
   width: 82px;
   height: 82px;
 }
 
-#share-facebook
-{
-  background-image: url(social/facebook.png);
-}
-
-#share-twitter
-{
-  background-image: url(social/twitter.png);
-}
-
-#share-gplus
-{
-  background-image: url(social/gplus.png);
-}
-
 #glass-pane, #share-popup
 {
   visibility: hidden;
   opacity: 0;
   -webkit-transition-property: opacity, visibility;
   -moz-transition-property: opacity, visibility;
   -o-transition-property: opacity, visibility;
   -ms-transition-property: opacity, visibility;
   transition-property: opacity, visibility;
 }
 
 #glass-pane
 {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: rgba(0, 0, 0, 0.5) url(ajax-loader.gif) no-repeat 50% 50%;
   z-index: 101;
-
   -webkit-transition-duration: 0.2s;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -ms-transition-duration: 0.2s;
   transition-duration: 0.2s;
 }
 
 #share-popup
 {
   position: absolute;
@@ skipping 18 matching lines @@
   -webkit-transition-duration: 0.15s;
   -moz-transition-duration: 0.15s;
   -o-transition-duration: 0.15s;
   -ms-transition-duration: 0.15s;
   transition-duration: 0.15s;
 }
 
 .toggle
 {
   cursor: pointer;
-  position: absolute;
+  position: relative;
   display: inline-block;
-  top: 50%;
+  vertical-align: top;
   height: 22px;
-  margin: -21px 0px 7px 0px;
+  margin: 32px 0px 7px 0px;
   border-radius: 9999px;
-  box-shadow: 0 0 0 1px #999;
+  border: 1px solid #999;
   overflow: hidden;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
 }
 
+.toggle:hover
+{
+  -moz-box-shadow: 0px 0px 3px 0px #968d81;
+  -webkit-box-shadow: 0px 3px 0px 0px #968d81;
+  box-shadow: 0px 0px 3px 0px #968d81;
+}
+
 .toggle:active
 {
   cursor: wait;
 }
 
 .toggle-on, .toggle-off
 {
   min-width: 42px;
   height: 100%;
   font-size: 11px;
   font-weight: 500;
   text-align: center;
-  line-height: 25px;
+  line-height: 23px;
+  border-radius: 9999px;
+  -moz-border-radius: 9999px;
+  -webkit-border-radius: 9999px;
 }
 
 .toggle-on
 {
   padding: 0px 30px 0px 10px;
   color: rgba(255,255,255, 0.8);
   text-shadow: 1px 1px rgba(0,0,0,0.2);
   box-shadow: inset 2px 2px 6px rgba(0,0,0,0.2);
   background: rgb(69,163,31);
 }
@@ skipping 10 matching lines @@
 }
 
 .toggle-blob
 {
   position: absolute;
   top: 0px;
   right: 0px;
   height: 100%;
   width: 22px;
   border-radius: 50px;
-  box-shadow: 1px 1px 2px #888;
   background: #cfcfcf;
   background: -moz-linear-gradient(bottom,  #cfcfcf 0%, #f5f5f5 100%);
   background: -webkit-linear-gradient(bottom,  #cfcfcf 0%,#f5f5f5 100%);
   background: linear-gradient(to top,  #cfcfcf 0%,#f5f5f5 100%);
+  box-shadow: 1px 1px 2px #888;
 }
 
 .off .toggle-on
 {
   margin-top: -22px;
 }
 
 .off .toggle-blob
 {
   left: 0px;
   right: auto;
 }
 
-/* Adjust font size on smaller screens */
-@media (max-height: 800px)
+#donate
 {
-  body
-  {
-    font-size: 19px;
-  }
+  height: 21px;
+  display: inline-block;
+  margin: 15px 0px 2px 0px;
+  font-size: 16px;
+  color: #003366;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 5px 18px;
+  text-decoration: none;
+  border-radius: 20px;
+  border: 1px solid #FF9933;
+  overflow: hidden;
+  font-family: arial, sans-serif;
+  background-image: url(donate.png);
+  background-repeat: repeat-x;
 }
 
-@media (max-height: 750px)
+footer
 {
-  body
-  {
-    font-size: 17px;
-  }
+  margin: 0 auto 30px;
+  max-width: 960px;
+  text-align: center;
 }
-
-@media (max-height: 700px)
-{
-  body
-  {
-    font-size: 16px;
-  }
-}