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/>.
  */
-.clearfix

[Thomas Greiner, 2013/07/15 17:37:01]

Shouldn't be necessary anymore if you can get rid of all the floats.

-{
-  clear: both;
-}
-
-*

[Thomas Greiner, 2013/07/15 17:37:01]

Why do you need to apply that to every single element? Should be sufficient to
apply it to body.

You can probably also get rid of some of the !important below by removing this.

-{
-  margin: 0;
-  padding: 0;
+
+@font-face {
+  font-family: 'CreteRound';
+  font-style: normal;
+  src: url(fonts/CreteRound-Regular.otf);
+  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'); 
 }
 
 body
 {
-  font-family: Segoe UI, Arial, Helvetica, sans-serif;
-  font-size: 14px;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 15px;
   line-height: 140%;
   color: #7f776b;
   background-color: #f8f6f2;
   background-image: url(background-main.png);
+  margin: 0;
+  padding: 0;
 }
 
 a, a:link, a:visited
 {
   color: #5a84b3;
   text-decoration: underline;
-  font-style: italic;
-}
-
-button, .arrow

[Thomas Greiner, 2013/07/15 17:37:01]

.arrow doesn't exist anymore.

+}
+
+a:hover
+{
+  text-decoration: none;
+}
+
+button
 {
   cursor: pointer;
 }
 
+ul
+{
+  margin: 0;
+  padding: 0;
+}
+
 li
 {
+  margin: 0;
+  padding: 0;
   list-style-type: none;
-
 }
 
 header
 {
-  height: 200px;
   background-image: url(background.png);
   background-repeat: repeat-x;
   width: 100%;
   padding: 40px 0 0 0;
 }
 
 header h1
 {
   font-size: 24px;
   font-weight: normal;
-  margin: 0 auto;
-  display: block;
-  color: #464746;
-  text-align: center;
-  margin: 30px 0 0 0;
-
-}
-
-strong
-{
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 30px;
+  color: #57ab5b;
+  text-align: center;
+  margin: 21px auto;
+  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;
+}
+
+h1,h2,h3
+{
+ font-family: CreteRound, Helvetica, Arial, sans-serif;
+}
+
+h2 
+{
+  font-size: 26px;
   font-weight: lighter;
   color: #968d81;
-  line-height: 30px;
-
-}
-
-h3 {
-  font-size: 24px;
-  color: #4d4d4d;
+  line-height: 28px;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+h3 
+{
+  font-size: 22px;
+  color: #7F776B;
   font-weight: normal;
   margin: 0 0 10px 0;
-  line-height: 30px;
-}
-
-h4 {
-  font-size: 16px;
+  padding: 0;
+  line-height: 24px;
+}
+
+h4 
+{
+  font-size: 15px;
   color: #7f776b;
   font-weight: normal;
   text-align: center;
+  margin: 0;
+  padding: 0;
 }
 
 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 !important; 
-  padding: 40px 0px 0px 0px  !important;
+  max-width: 960px; 
+  padding: 40px 0px 0px 0px;
 }
 
 #can-do-more > h2
 {
   margin: 0 100px;
 }
 
-
-#can-do-more > ul
-{
+.fade
+{
+  opacity: 0;
+}
+
+.hide
+{
+  display: none;
+}
+
+#can-do-more-overview
+{
+  opacity: 1;
+  max-height: 10000px;
   max-width: 760px;
-  height: 140px;
-  margin: 40px 100px 0 100px;
-}
-
-#can-do-more > ul > li
-{
-  width: 250px;
+  margin: 30px 100px 0 100px;
+  font-size: 0px;
+  /* hides appearing spacings because of 
+   * using display: inline-block*/
+  cursor: pointer;
+  transition: opacity 0.3s step-end;

[Wladimir Palant, 2013/10/05 09:15:59]

Shouldn't it be ease-in-out rather than step-end here?

+  -moz-transition: opacity 0.3s ease-in-out;
+  -webkit-transition: opacity 0.3s ease-in-out;
+}
+
+#can-do-more.expanded > #can-do-more-overview, #can-do-more.expanded > #can-do-more-overview li, #can-do-more.expanded > #can-do-more-overview div, #can-do-more.expanded > #can-do-more-overview h4
+{
+  opacity: 0;
+  max-height: 0px;
+  width: 0;
+  margin: 0;
+  padding: 0;
+  transition: none;
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;

[Wladimir Palant, 2013/10/05 09:15:59]

We don't set -o-transition above, we shouldn't need it here either (Presto
engine is dead and current releases won't be running on it).

+}
+
+#can-do-more-overview > li:hover
+{
+  background-image: url("background-main.png");
+  text-decoration: none;
+}
+
+#can-do-more-overview > li
+{
+  width: 230px;
   height: 115px;
-  float: left;
+  display: inline-block;
   border-right: 1px dashed #c7c6c2;
-  padding: 20px 0 0 0;
-}
-
-#can-do-more > ul > h3
-{
-  margin: 20px 0 0 0;
-}
-
-#can-do-more > ul > li > img
+  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
 {
   width: 59px;
   height: 59px;
   display: block;
   margin: 0 auto;
 }
 
-#can-do-more > ul > li > h4
-{
-  margin: 10px 0 0 0;
+#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: 40px 100px 0 100px;
-  display: none;
-}
-
-#features
-{
-  display: block;
+  opacity: 0;
+  max-height: 0;
+}
+
+#can-do-more.expanded > #can-do-more-expanded
+{
+  opacity: 1;
+  max-height: 10000px;
+  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;
+  transition-delay: 0.2s;
+  -webkit-transition-delay: 0.2s;

[Wladimir Palant, 2013/10/05 09:15:59]

-moz-transition-delay seems to be missing here. Then again, Firefox supports
unprefixed transition and transition-delay properties as of Firefox 16 - which
is the lowest version we are supporting already. So I guess dropping
-moz-transition is the better course of action.

+}
+
+#features, .feature:not([hidden]), .feature-image, .feature-description, .feature-description, .feature-description-textblock, .feature-description-textblock > span, .feature-image
+{
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  transition: none;
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+}
+
+
+#can-do-more.expanded #features,#can-do-more.expanded .feature:not([hidden]),#can-do-more.expanded .feature-image,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description,#can-do-more.expanded .feature-description-textblock,#can-do-more.expanded .feature-description-textblock > span,#can-do-more.expanded .feature-image
+{
+  width: auto;
+  height: auto;
+  margin: auto;
+  padding: auto;
+  transition-property: all;
+  -moz-transition-property: all;
+  -webkit-transition-property: all;
+  -o-transition-property: all;

[Wladimir Palant, 2013/10/05 09:15:59]

As above, -o-transition-property and -moz-transition-property shouldn't be
necessary.

+  transition-duration: 0.5s;
+  -webkit-transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+}
+
+#can-do-more.expanded #features
+{
   border-spacing: 10px;
   margin: 0px;
   padding: 0px;
 }
 
-.feature:not([hidden])
+#can-do-more.expanded .feature:not([hidden])
 {
   display: block;
   list-style-type: none;
   padding: 30px 0;
   padding-bottom: 20px;
   border-top: 1px dashed #c0bebb;
 }
 
-.feature-image, .feature-description
+#can-do-more.expanded .feature-image, #can-do-more.expanded .feature-description
 {
   display: inline-block;
   *display: inline; /* IE6 inline-block fix */
   *zoom: 1;
   vertical-align: top;
 }
 
-.feature-description
+#can-do-more.expanded .feature-description
 {
   margin: 0px 0px 0 20px;
-  max-width: 624px;
-}
-
-.feature-description-textblock
-{
-  max-width: 478px;
+  width: 625px;
+  max-width: 85%;
+}
+
+#can-do-more.expanded .feature-description-textblock
+{
+  width: 480px;
+  max-width: 100%; 
   margin: 0 40px 0 0;
-  float: left;

[Thomas Greiner, 2013/07/15 17:37:01]

Please avoid floats if possible.

-}
-
-.feature-description-textblock > span
+  display: inline-block;
+}
+
+#can-do-more.expanded .feature-description-textblock > span
 {
   margin: 15px 0 0 0;
 }
 
-.feature-image
+#can-do-more.expanded .feature-image
 {
   width: 59px;
   height: 59px;
   margin: 8px 0 10px 20px;
 }
 
-.feature button
-{
-  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;
-}
-
 #activate-features
 {
   width: 100%;
-  height: 36px;

[Thomas Greiner, 2013/07/15 17:37:01]

You should be able to avoid using fixed numbers for the height if you use
padding.

   background-image: url("background-candomore.png");
   margin: 30px 0 0 0;
-  padding: 14px 0 0 0;
+  padding: 14px 0 14px 0;
   cursor: pointer;
+  text-align: center;
+  white-space: nowrap;
+}
+
+#activate-features-label
+{
+  display: inline-block;
+  width: 86%;
   color: #fff;
-  font-size: 24px;
+  font-size: 22px;
+  text-align: center;
   font-style: italic;
-  text-decoration: underline;
-  text-align: center;
+  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

[Thomas Greiner, 2013/10/05 15:51:19]

This is a weird behavior. It's neither restricted to only the text nor to the
whole button due to the text being a block element. Please change it to:

#activate-features:hover a
{
  color: #1f6822;
  text-decoration: none;
}

+{
+  color: #1f6822;
+}
+
+#can-do-more.expanded .arrow
+{
+  background-image: url("arrow-up.png");
+}
+
+.arrow
+{
+  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 140px 40px 140px !important; 
-  max-width: 680px;
-}
-
-#share > #donate-block

[Thomas Greiner, 2013/07/15 17:37:01]

#donate-block should be unique even without |#share >|

-{
-  margin: 0 0 0 0;
-  float: left;
-}
-
-#share > #share-block

[Thomas Greiner, 2013/07/15 17:37:01]

#share-block should be unique even without |#share >|

-{
-  margin: 0 0 0 0;

[Thomas Greiner, 2013/07/15 17:37:01]

|margin: 0;| does the same.

-  float: left;
-  max-width: 480px;
+  padding: 50px 100px 40px 100px; 
+  max-width: 760px;
+  text-align: center;
+  font-family: CreteRound, Helvetica, Arial, sans-serif;
 }
 
 #share h2
 {
   color: #fff;
-  margin: 10px 8px 10px 0;
-  text-align: left;
+  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;
-  float: left;
-  vertical-align: middle;
-  line-height: 38px;
-}
-
-#share-buttons > a > img
-{
-  width: 56px;
-  height: 56px;
-}
-
-#share-buttons > a
-{
-  margin: 0 4px 0 0;
+}
+
+#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;
-} 
-
-#share-buttons
-{
-  width: auto;
-  margin: 3px 0 0 0;
-  min-height: 59px;
-  float: left;

[Thomas Greiner, 2013/07/15 17:37:01]

Please try to avoid floats.

-  cursor: pointer;
+  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: 200%;
-  line-height: 140%;
-  margin: 20px;
-  padding: 20px;
-  border: 3px solid red;
-  border-radius: 10px;
-}
-
-/*social */

[Thomas Greiner, 2013/07/15 17:37:01]

Code Style:
/* social */

May even be unnecessary.

+  font-size: 160%;
+  border: 3px dashed red;
+  text-align: center;
+}
 
 #social ul
 {
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
 }
 
 #social:hover h1
@@ skipping 44 matching lines @@
 
 #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 15 matching lines @@
 
 #share-popup.visible
 {
   -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: relative;
   display: inline-block;
-  top: 50%;
+  vertical-align: top;
   height: 22px;
-  margin: 40px 0px 7px 0px;
+  margin: 32px 0px 7px 0px;
   border-radius: 9999px;
-  /*box-shadow: 0 0 0 1px #999;*/

[Thomas Greiner, 2013/07/15 17:37:01]

Remove this comment.

   border: 1px solid #999;
   overflow: hidden;
   -moz-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  float: left;

[Thomas Greiner, 2013/07/15 17:37:01]

Please avoid using floats if possible.

+}
+
+.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: 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);
 }
 
 .toggle-off
 {
   padding: 0px 10px 0px 30px;
   color: rgba(0,0,0,0.6);
   text-shadow: 1px 1px rgba(255,255,255,0.2);
   background: #cfcfcf;
   background: -moz-linear-gradient(top,  #cfcfcf 0%, #f5f5f5 100%);
   background: -webkit-linear-gradient(top,  #cfcfcf 0%,#f5f5f5 100%);
   background: linear-gradient(to bottom,  #cfcfcf 0%,#f5f5f5 100%);
 }
 
-
 .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;
 }
 
 #donate
 {
-  height: 24px;
-  display: block;
-  float: left;

[Thomas Greiner, 2013/07/15 17:37:01]

Please avoid floats if possible.

-  margin: 15px 12px 10px 4px;
+  height: 21px;
+  display: inline-block;
+  margin: 15px 0px 2px 0px;
   font-size: 16px;
-  line-height: 24px;
-  color: #003366 !important;
+  color: #003366;
   cursor: pointer;
   font-weight: bold;
-  padding: 3px 16px;
+  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;
 }
 
-
-/* Adjust font size on smaller screens */

[Thomas Greiner, 2013/07/15 17:37:01]

Why do you keep this portion? You're not using it anyway.

-@media (max-height: 800px)
-{
-  body
-  {
-    /*font-size: 19px;*/
-  }
-}
-
-@media (max-height: 750px)
-{
-  body
-  {
-    /*font-size: 17px;*/
-  }
-}
-
-@media screen and (max-width: 700px)
-{
-  body
-  {
-
-  }
-}
+footer
+{
+  margin: 0 auto 30px;
+  max-width: 960px;
+  text-align: center;
+}