diff -r fa742e491ce1 -r 0c699d2767f8 integration/css/common.css
--- a/integration/css/common.css	Fri Nov 30 14:21:52 2012 +0100
+++ b/integration/css/common.css	Fri Nov 30 15:36:06 2012 +0100
@@ -209,17 +209,18 @@
 }
 /* popin */
 .popin{
-	padding-top: 12px;
+	margin-top: 12px;
 	position: absolute;
 	top: 0;
 	z-index: 10;
+    display: none;
 }
 .pointer{
 	position: absolute;
 	width: 20px;
 	height: 13px;
 	background: url(../img/popin-triangle.png);
-	top: 0;
+	top: -12px;
 }
 .popin-content{
 	padding: 8px;
@@ -242,11 +243,6 @@
     height: 20px;
 }
 /* popin - user */
-
-.popin {
-    display: none;
-}
-
 .user.popin{
 	top: 55px;
 	right: 0;
@@ -381,27 +377,31 @@
 	float: left;
 	margin-right: 20px;
 }
-
 .video-item h3{
 	font-size: 12px;
 }
-.video-item h3 strong{
-	font-weight: 600;
-}
-.video-item h3 span{
-	color: #de2500;
-}
 .video-item .screenshot{
 	display: inline-block;
 	margin-bottom: 8px;
+	background: #ffffff;
 }
-.video-item h3 a{
-	border-bottom: 1px solid #bababa;
-	display: inline-block;
-    line-height: 12px;
+.video-item .screenshot:hover {
+    opacity: .8; filter:alpha(opacity=80);
+} 
+.video-item a.author{
+    color: #7628DF; text-decoration: underline;
+}
+.video-item a.author:hover{
+    text-decoration: none;
 }
-.video-item h3 a:hover{
-	border-bottom: none;
+.video-item a.title{
+    color: #30036D; font-weight: 600; text-decoration: none;
+}
+.video-item a.title:hover{
+    text-decoration: underline;
+}
+.video-item .duration {
+    color: #C81000;
 }
 .pagination{
 	text-align: center;