tab coloring on support page and hover states in share column on work page

frontend/templates/work.html

@@ -222,10 +222,10 @@ jQuery(document).ready(function(){
                 <h3 class="jsmod-title"><span>Share</span></h3>
                 <div class="jsmod-content">
                     <ul class="social menu">
-                        <li class="facebook first"><a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2F{{ request.META.HTTP_HOST|urlencode:"" }}{{ request.path|urlencode:"" }}"><span>Facebook</span></a></li>
+                        <a href="https://www.facebook.com/sharer.php?u=http%3A%2F%2F{{ request.META.HTTP_HOST|urlencode:"" }}{{ request.path|urlencode:"" }}"><li class="facebook first"><span>Facebook</span></li></a>
-                        <li class="twitter"><a href="https://twitter.com/intent/tweet?url=http%3A%2F%2F{{ request.META.HTTP_HOST|urlencode:"" }}{{ request.path|urlencode:"" }}&text=I'm%20ungluing%20{{ work.title|urlencode }}%20at%20%40unglueit"><span>Twitter</span></a></li>
+                        <a href="https://twitter.com/intent/tweet?url=http%3A%2F%2F{{ request.META.HTTP_HOST|urlencode:"" }}{{ request.path|urlencode:"" }}&text=I'm%20ungluing%20{{ work.title|urlencode }}%20at%20%40unglueit"><li class="twitter"><span>Twitter</span></li></a>
-                        <li class="lasts email"><a href="#"<span>Email</span></a></li>
+                        <a href="#"><li class="email"><span>Email</span></li></a>
-                        <li><a href="#" id="embed"><span>Embed</span></a></li>
+                        <a href="#" id="embed"><li class="embed"><span>Embed</span></li></a>
                         <div id="widgetcode">Copy/paste this into your site:<br /><textarea rows="7" cols="22">&lt;iframe src="{{base_url}}/api/widget/{{work.editions.all.0.isbn_13}}/" width="152" height="325" frameborder="0"&gt;&lt;/iframe&gt;</textarea></div>
                     </ul>
                 </div>

static/css/campaign.css

@@ -192,9 +192,6 @@ ul.tabs li a:hover, ul.tabs li.active a {
 #js-rightcol .jsmodule {
   margin-bottom: 10px;
 }
-#js-rightcol .jsmod-content {
-  padding-left: 10px;
-}
 .js-rightcol-pad {
   border: 1px solid #d6dde0;
   -moz-border-radius: 10px 10px 10px 10px;
@@ -228,14 +225,56 @@ ul.social li {
   height: 28px;
   line-height: 28px;
 }
+ul.social li a {
+  padding-left: 10px;
+}
 ul.social li.facebook {
-  background: url("/static/images/icons/facebook.png") left center no-repeat;
+  background: url("/static/images/icons/facebook.png") 10px center no-repeat;
+}
+ul.social li.facebook span {
+  padding-left: 10px;
+}
+ul.social li.facebook:hover {
+  background: #8dc63f url("/static/images/icons/facebook-hover.png") 10px center no-repeat;
+}
+ul.social li.facebook:hover span {
+  color: #fff;
 }
 ul.social li.twitter {
-  background: url("/static/images/icons/twitter.png") left center no-repeat;
+  background: url("/static/images/icons/twitter.png") 10px center no-repeat;
+}
+ul.social li.twitter span {
+  padding-left: 10px;
+}
+ul.social li.twitter:hover {
+  background: #8dc63f url("/static/images/icons/twitter-hover.png") 10px center no-repeat;
+}
+ul.social li.twitter:hover span {
+  color: #fff;
 }
 ul.social li.email {
-  background: url("/static/images/icons/email.png") left center no-repeat;
+  background: url("/static/images/icons/email.png") 10px center no-repeat;
+}
+ul.social li.email span {
+  padding-left: 10px;
+}
+ul.social li.email:hover {
+  background: #8dc63f url("/static/images/icons/email-hover.png") 10px center no-repeat;
+}
+ul.social li.email:hover span {
+  color: #fff;
+}
+ul.social li.embed {
+  background: url("/static/images/icons/embed.png") 10px center no-repeat;
+}
+ul.social li.embed span {
+  padding-left: 10px;
+}
+ul.social li.embed:hover {
+  background: #8dc63f url("/static/images/icons/embed-hover.png") 10px center no-repeat;
+}
+ul.social li.embed:hover span {
+  color: #fff;
 }
 #widgetcode {
   display: none;

static/css/supporter_layout.css

@@ -175,7 +175,7 @@ a.my-setting.active {
   width: 100%;
 }
 #tabs.wantto {
-  border-bottom: 4px solid #bacfd6;
+  border-bottom: 4px solid #d6dde0;
 }
 #tabs.wantto ul.tabs li.tabs3.active a {
   background: #d6dde0;
@@ -189,7 +189,7 @@ a.my-setting.active {
   color: #fff;
 }
 #tabs.unglued {
-  border-bottom: 4px solid #a7d26a;
+  border-bottom: 4px solid #8dc63f;
 }
 #tabs.unglued ul.tabs li.tabs1.active a {
   background: #8dc63f;

static/less/campaign.less

@@ -5,6 +5,22 @@
 	border: solid 5px #EDF3F4;
 }
 
+.shareclass(@sharewhere) {
+	background:url("@{image-base}icons/@{sharewhere}.png") 10px center no-repeat;
+		
+	span {
+		padding-left:10px;
+	}
+		
+	&:hover {
+	background:@green url("@{image-base}icons/@{sharewhere}-hover.png") 10px center no-repeat;
+			
+	span {
+		color: #fff;
+		}
+	}
+}
+
 #js-page-wrap {
 	overflow:hidden;
 }
@@ -205,11 +221,7 @@ ul.tabs {
 
 	.jsmodule {
 		margin-bottom:10px;
-	}
+	}	
-	
-	.jsmod-content {
-		padding-left:10px;
-	}
 }
 
 .js-rightcol-pad {
@@ -245,18 +257,27 @@ div.content-block-content {
 ul.social li {
 	padding:5px 0 5px 30px;
 	.height(28px);
-
+	
-	&.facebook {
+	a {
-		background:url("@{image-base}icons/facebook.png") left center no-repeat;
+		padding-left: 10px;
 	}
 
+	&.facebook {
+		.shareclass("facebook");
+	}
+	
 	&.twitter {
-		background:url("@{image-base}icons/twitter.png") left center no-repeat;
+		.shareclass("twitter");
 	}
 	
 	&.email {
-		background:url("@{image-base}icons/email.png") left center no-repeat;
+		.shareclass("email");
 	}
+	
+	&.embed {
+		.shareclass("embed");
+	}
+	
 }
 
 #widgetcode {

static/less/supporter_layout.less

@@ -200,7 +200,7 @@ a.my-setting.active {
     width: 100%;
 
 	&.wantto {
-		border-bottom: 4px solid #bacfd6;
+		border-bottom: 4px solid @blue-grey;
 		
 		ul.tabs li.tabs3.active a {
 			background: @blue-grey;
@@ -218,7 +218,7 @@ a.my-setting.active {
 	}
 
 	&.unglued {
-		border-bottom: 4px solid #a7d26a;
+		border-bottom: 4px solid @green;
 
 		ul.tabs li.tabs1.active a {
 			background: @green;