Relocated icon and redesigned icon popup

skin/popup.css

 body
 {
   min-width: 250px;
   margin: 0px;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: Segoe UI, Arial, sans-serif;
   font-size: 13px;
-  color: #7f776b;
+  color: #545454;
   background-color: #f8f6f2;
   background-image: url(background.png);
 }
 
 #clickhide-instructions,
 #clickhide-cancel,
 body.clickhide-active li
 {
   display: none;
 }
@@ skipping 91 matching lines @@
 footer
 {
   cursor: pointer;
   padding: 10px 35px;
   border-top: 1px solid #e1ddd8;
   background-image: url(background-main.png);
 }
 
 footer:hover
 {
-  background-image: url(background-main-hover.png);
+  background: -moz-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
+    url(background-main.png);
+  background: -webkit-linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),
+    url(background-main.png);
+  background: linear-gradient(top, rgba(70, 50, 0, 0.1), rgba(70, 50, 0, 0.1)),

[Wladimir Palant, 2013/12/17 14:11:14]

The standardized linear gradient syntax is actually different, see
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Cross-browse....
Should be:

background: linear-gradient(to bottom, ...)

+    url(background-main.png);
 }
 
 footer .icon
 {
   background-position: -50px -65px;
 }
 
 ul
 {
   margin: 0px;
   padding: 0px;
 }
 
 li
 {
   cursor: pointer;
   list-style-type: none;
   white-space: nowrap;
   border-top: 1px dashed #a5a4a1;
 }
 
-li:hover
-{
-  background-color: #ece7df;
-}
-
 li ul
 {
   margin-left: 35px;
 }
 
 li li
 {
   cursor: default;
   padding: 10px 15px;
 }
 
 .menu-item
 {
   padding: 10px 0px 10px 15px;
+}
+
+.menu-item:hover
+{
+  background-color: #ece7df;
 }
 
 .icon
 {
   display: inline-block;
   width: 15px;
   height: 15px;
   margin-right: 15px;
   vertical-align: top;
   background-image: url(popup.png);
 }
 
+#enabled-yes strong
+{
+  font-weight: normal;
+  color: #12610e;
+}
+
+#enabled-no strong
+{
+  font-weight: normal;
+  color: #ac0505;
+}
+
 #enabled .icon
 {
   background-position: -50px -1px ;
 }
 
 #enabled.off .icon
 {
   background-position: -50px -17px;
 }
 
-#enabled-off
-{
-  display: none;
-}
-
-#enabled.off #enabled-on
-{
-  display: none;
-}
-
-#enabled.off #enabled-off
+#enabled-no,
+#enabled.off #enabled-yes
+{
+  display: none;
+}
+
+#enabled.off #enabled-no
 {
   display: inline;
 }
 
 #clickhide .icon,
 #clickhide-cancel .icon
 {
   background-position: -50px -33px;
 }
 
@@ skipping 10 matching lines @@
 
 #stats strong
 {
   font-size: 15px;
   line-height: 140%;
 }
 
 #share
 {
   margin-top: 5px;
+  color: #949494;
 }
 
 #share-box
 {
   margin-top: 10px;
 }
 
 #share-box div[data-social]
 {
   cursor: pointer;
   display: inline-block;
-  width: 33px;
-  height: 33px;
-  margin-right: 10px;
-  background-image: url(popup.png);
+  width: 32px;
+  height: 32px;
+  margin: 3px 10px 3px 3px;
+  border-radius: 3px;
+  background-image: url(popup.png);
+}
+
+#share-box div[data-social]:hover
+{
+  margin: 0px 7px 0px 0px;
+  border: 3px solid #cdc6bd
 }
 
 #share-box div[data-social="facebook"]
 {
   background-position: -1px -1px;
 }
 
 #share-box div[data-social="twitter"]
 {
   background-position: -1px -34px;
@@ skipping 30 matching lines @@
 .collapsed .collapsable
 {
   display: none;
 }
 
 .checkbox
 {
   display: inline-block;
   width: 15px;
   height: 15px;
+  margin-right: 5px;
   vertical-align: middle;
   background-image: url(popup.png);
-}
-
-.checkbox
-{
   background-position: -34px -1px;
 }
 
+.checkbox:hover
+{
+  background-position: -34px -17px;
+}
+
 .checkbox[aria-checked="false"]
 {
   background-position: -34px -33px;
 }
 
-
-
-
+.checkbox[aria-checked="false"]:hover
+{
+  background-position: -34px -49px;
+}
+
+label
+{
+  vertical-align: middle;
+}