Thumbnails was overwriting default style so hover and active didn't work. Moved them to the 'a' element instead.

apps/contacts/css/styles.css

@@ -1,5 +1,5 @@
-#contacts { padding-left:5px; padding-top: 5px; background: #fff; }
-#contacts li { padding-left:25px;background:url('../img/person.svg') no-repeat; }
+#contacts { padding-left:2px; padding-top: 5px; background: #fff; }
+#leftcontent a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; }
 #chooseaddressbook {margin-right: 170px; float: right;}
 #contacts_details_name { font-weight:bold;font-size:1.1em;margin-left:25%;}
 #contacts_details_photo { margin:.5em 0em .5em 25%; }

apps/contacts/js/interface.js

@@ -113,9 +113,9 @@ Contacts={
 			lazyupdate:function(){
 				//alert('lazyupdate');
 				$('#contacts li').live('inview', function(){
-					if (!$(this).attr('style')) {
+					if (!$(this).find('a').attr('style')) {
 						//alert($(this).data('id') + ' has background: ' + $(this).attr('style'));
-						$(this).css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
+						$(this).find('a').css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
 					}/* else {
 						alert($(this).data('id') + ' has style ' + $(this).attr('style').match('url'));
 					}*/
@@ -301,9 +301,9 @@ $(document).ready(function(){
 				// bottom part of element is visible
 			} else {
 				// whole part of element is visible
-				if (!$(this).attr('style')) {
+				if (!$(this).find('a').attr('style')) {
 					//alert($(this).data('id') + ' has background: ' + $(this).attr('style'));
-					$(this).css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
+					$(this).find('a').css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
 				}/* else {
 					alert($(this).data('id') + ' has style ' + $(this).attr('style').match('url'));
 				}*/