diff -r 40909e8d6855 -r 5a5024bc74e6 integration/css/common.css
--- a/integration/css/common.css	Fri Nov 09 18:56:29 2012 +0100
+++ b/integration/css/common.css	Fri Nov 16 19:23:20 2012 +0100
@@ -96,19 +96,24 @@
 }
 /* header - title-video-wrap */
 .title-video-wrap{
-	width: 460px;
+	width: 380px;
 }
-.title-video-wrap a{
-	position: absolute;
-	top: 10px;
+.title-video-wrap .title-video {
+	margin-top: 10px;
 	left: 0;
 	font-size: 18px;
 	font-weight: bold;
 	color: #30036d;
 	text-decoration: underline;
+}
+.title-video-wrap .title-video:hover {
+    text-decoration: none;
+}
+.title-video-wrap .open-popin {
+	color: #30036d;
 	background-image: url(../img/pencil-icon.png);
 	background-repeat: no-repeat;
-	background-position: right 2px;
+	background-position: right 6px;
 	padding-right: 20px;
 	min-height: 20px;
 }
@@ -149,6 +154,7 @@
 }
 /* header - profil-wrap */
 .header .profil-wrap{
+    float: right;
 	width: 250px;
 }
 .header .profil-wrap a{
@@ -419,12 +425,12 @@
 }
 .item-video {
 	margin-bottom: 1px;
-	cursor: pointer;
 	padding: 5px 10px 5px 10px;
 	clear: both;
 	width: auto;
 	min-height: 62px;
 	display: block;
+	position: relative;
 }
 .item-video img{
 	float: left;
@@ -434,48 +440,47 @@
 	box-shadow: 2px 2px 2px #333333;
 }
 .item-video .video-info{
-	display: block;
     margin-left: 88px;
 }
 .item-video .title-video{
 	font-size: 13px;
 	font-weight: 600;
 	color: #30036d;
-	display: block;
 	margin-bottom: 1px;
 }
-.item-video .author{
+.item-video .description{
 	font-size: 11px;
-	display: block;
 	margin-bottom: 1px;
 }
 .item-video .time-length{
 	font-size: 12px;
 	font-weight: 600;
-	display: block;
 }
 .item-video .time-length span{
 	color: #de2500;
 }
-.item-video .number{
+.item-video .media-count-wrap {
+    width: 30px;
+	text-align: center;
+	position: absolute;
+  	top: 45px;
+  	left: 75px;
+	height: 15px;
+	display: none;
+}
+.item-video .media-count{
 	color: #FFF;
 	font-size: 10px;
-	text-align: center;
-	width:15px;
-	height: 15px;
 	line-height: 15px;
 	background-color: #ff00fc;
-	position: absolute;
-	display: block;
 	-webkit-border-radius: 4px;
   	-moz-border-radius: 4px;
   	border-radius: 4px;
-  	top: 54px;
-  	left: 78px;
+  	padding: 0 3px;
+  	border: 1px solid #DE2500;
 }
 .item-video .subtitle{
 	margin-bottom: 2px;
-	display: block;
 	color: #de2500;
 	font-size: 11px;
 }
@@ -483,7 +488,6 @@
 	color: #7628df;
 	font-size: 12px;
 	font-weight: 600;
-	display: block;
 }
 /* frise */
 .frise{
@@ -492,6 +496,10 @@
 	border: 1px solid #333333;
 }
 
+.mashup-frise {
+    cursor: pointer;
+}
+
 .frise-overflow {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
 }
@@ -509,30 +517,31 @@
 	background: #CCCCCC;
 }
 .frise-segment{
-    cursor: pointer;
-	height: 22px;
 	position: absolute;
+	height: 100%;
+}
+.mashup-frise .frise-segment {
 	background-image: url(../img/border-right-segment.png);
 	background-repeat: repeat-y;
 	background-position: right top;
 	-moz-box-shadow: inset 0px 1px 1px 0px #666;
   	-webkit-box-shadow: inset 0px 1px 1px 0px #666;
-  	box-shadow: inset 0px 1px 1px 0px #666;
+  	box-shadow: inset 0px 1px 1px 0px #666;  
 }
-.frise-segment:first-child{
+.mashup-frise .frise-segment:first-child{
 	-moz-box-shadow: inset 1px 1px 1px 0px #666;
   	-webkit-box-shadow: inset 1px 1px 1px 0px #666;
   	box-shadow: inset 1px 1px 1px 0px #666;
 }
-.frise-segment:last-child{
+.mashup-frise .frise-segment:last-child{
 	background-image: none;
 }
-.frise-segment.active {
+.frise-segment.active, .mashup-frise .frise-segment.active {
     background-image: url(../img/pinstripe-purple.png);
     background-repeat: repeat;
 }
 .frise-indication{
-	height: 22px;
+	height: 100%;
 	line-height: 22px;
 	display: inline-block;
 	position: absolute;
@@ -544,6 +553,7 @@
 	text-align: center;
 	background: url(../img/bg-indication.png) 15px 0 no-repeat;
 	margin-left: -15px;
+	text-shadow: 1px 1px 1px #000000;
 }
 .frise-position {
     width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
@@ -617,6 +627,22 @@
     position: relative; 
 }
 
+.segment-tooltip-wrapper {
+    position: absolute; height: 0; width: 0;
+    top: 0; z-index: 7; display: none; left: 50%;
+}
+
+.segment-tooltip {
+	padding: 4px; border: 1px solid #867a97; background: url(../img/bg-jaune.png);
+    width: 130px; position: absolute; bottom: 14px; left: -70px;
+    font-size: 12px; font-weight: 600; text-align: center; color: #DE2500;
+}
+
+.segment-tooltip-tip {
+    position: absolute; top: -15px; left: -10px; background: url(../img/inv-triangle.png);
+    width: 20px; height: 13px;
+}
+
 /* Styles from Metadataplayer */
 
 /* Slider Widget */
@@ -824,4 +850,89 @@
 
 .Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
      background: #F7268E;
-}
\ No newline at end of file
+}
+
+/* Social Share Widget */
+
+.Ldt-Social {
+    float: right; margin-top: 10px;
+}
+
+.Ldt-Social a {
+   float: left; width: 24px; height: 24px; background: url(../img/socialbuttons.png);
+}
+
+.Ldt-Social-Url-Container {
+    float: left; width: 24px; height: 24px; position: relative;
+}
+
+a.Ldt-Social-Url {
+    margin: 0; background-position: -96px 0;
+}
+
+a.Ldt-Social-Url:hover {
+    background-position: -96px -24px;
+}
+
+.Ldt-Social-UrlPop {
+    position: absolute; left: 20px; top: -2px; background: url(../img/socialcopy.png);
+    padding: 3px 0 0 12px; width: 218px; height: 27px;
+    display: none;
+}
+
+.Ldt-Social-Input, .Ldt-Social-CopyBtn {
+    font-size: 11px; margin: 1px; border: 1px solid #ccc; height: 16px;
+    padding: 1px; border-radius: 2px; display: inline-block;
+}
+
+.Ldt-Social-Input:hover, .Ldt-Social-CopyBtn.hover {
+    border-color: #8080ff;
+}
+
+.Ldt-Social-Input {
+    width: 150px;
+}
+
+.Ldt-Social-CopyBtn {
+    font-weight: bold; width: 50px; text-align: center; background: #f0f0ff; line-height: 16px; width: 46px;
+}
+
+.Ldt-Social-CopyBtn.hover {
+    background: #ffe0a0;
+}
+
+.Ldt-Social-CopyBtn.active {
+    background: #ff8000;
+}
+
+a.Ldt-Social-Twitter {
+    background-position: 0 0;
+}
+
+a.Ldt-Social-Twitter:hover {
+    background-position: 0 -24px;
+}
+
+a.Ldt-Social-Fb {
+    background-position: -24px 0;
+}
+
+a.Ldt-Social-Fb:hover {
+    background-position: -24px -24px;
+}
+
+a.Ldt-Social-Gplus {
+    background-position: -48px 0;
+}
+
+a.Ldt-Social-Gplus:hover {
+    background-position: -48px -24px;
+}
+
+a.Ldt-Social-Mail {
+    background-position: -72px 0;
+}
+
+a.Ldt-Social-Mail:hover {
+    background-position: -72px -24px;
+}