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;
+}
 
 body
 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Segoe UI, Arial, Helvetica, sans-serif;
   font-size: 14px;
   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;
+  font-style: italic;
+}
+
+button, .arrow

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

.arrow doesn't exist anymore.

+{
+  cursor: pointer;
+}
+
+li
+{
+  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;
-  padding: 0;
-  max-width: 900px;
-}
-
-a:link, a:visited
-{
-  color: #7d7d7d;
-}
-
-button, .arrow
-{
-  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;
+  display: block;
+  color: #464746;
+  text-align: center;
+  margin: 30px 0 0 0;
+
+}
+
+strong
+{
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 30px;
+  font-weight: lighter;
+  color: #968d81;
+  line-height: 30px;
+
+}
+
+h3 {
+  font-size: 24px;
+  color: #4d4d4d;
   font-weight: normal;
-  margin: 0;
-}
-
-#dataCorruptionWarning
-{
-  font-size: 200%;
-  line-height: 140%;
-  margin: 20px;
-  padding: 20px;
-  border: 3px solid red;
-  border-radius: 10px;
+  margin: 0 0 10px 0;
+  line-height: 30px;
+}
+
+h4 {
+  font-size: 16px;
+  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;
+}
+
+#can-do-more
+{
+  max-width: 960px !important; 
+  padding: 40px 0px 0px 0px  !important;
+}
+
+#can-do-more > h2
+{
+  margin: 0 100px;
+}
+
+
+#can-do-more > ul
+{
+  max-width: 760px;
+  height: 140px;
+  margin: 40px 100px 0 100px;
+}
+
+#can-do-more > ul > li
+{
+  width: 250px;
+  height: 115px;
+  float: left;
+  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
+{
+  width: 59px;
+  height: 59px;
+  display: block;
+  margin: 0 auto;
+}
+
+#can-do-more > ul > li > h4
+{
+  margin: 10px 0 0 0;
+}
+
+#can-do-more #feature-first
+{
+  border-left: 1px dashed #c7c6c2;
+}
+
+#can-do-more-expanded
+{
+  margin: 40px 100px 0 100px;
+  display: none;
 }
 
 #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;
+  max-width: 624px;
+}
+
+.feature-description-textblock
+{
+  max-width: 478px;
+  margin: 0 40px 0 0;
+  float: left;

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

Please avoid floats if possible.

+}
+
+.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);
+  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;
@@ skipping 69 matching lines @@
   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;
-}
-
-.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;
+#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;
+  cursor: pointer;
+  color: #fff;
+  font-size: 24px;
+  font-style: italic;
+  text-decoration: underline;
   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;
-}
+}
+
+#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;
+}
+
+#share h2
+{
+  color: #fff;
+  margin: 10px 8px 10px 0;
+  text-align: left;
+  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;
+  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;
+}
+
+#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.

 
 #social ul
 {
   list-style: none;
   display: inline-block;
   padding: 0;
   margin: 0;
 }
 
 #social:hover h1
@@ skipping 24 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;
 }
@@ skipping 36 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: absolute;
+  position: relative;
   display: inline-block;
   top: 50%;
   height: 22px;
-  margin: -21px 0px 7px 0px;
+  margin: 40px 0px 7px 0px;
   border-radius: 9999px;
-  box-shadow: 0 0 0 1px #999;
+  /*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: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;
 }
 
 .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%);
 }
 
 .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;
+  font-size: 16px;
+  line-height: 24px;
+  color: #003366 !important;
+  cursor: pointer;
+  font-weight: bold;
+  padding: 3px 16px;
+  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;
+    /*font-size: 19px;*/
   }
 }
 
 @media (max-height: 750px)
 {
   body
   {
-    font-size: 17px;
+    /*font-size: 17px;*/
   }
 }
 
-@media (max-height: 700px)
+@media screen and (max-width: 700px)
 {
   body
   {
-    font-size: 16px;
+
   }
 }