diff -r 47f9a2d63a0a -r 8540daf61fb0 integration/css/common.css
--- a/integration/css/common.css	Tue Nov 06 11:01:27 2012 +0100
+++ b/integration/css/common.css	Tue Nov 06 11:46:20 2012 +0100
@@ -83,7 +83,24 @@
 	height: 53px;
 	margin-bottom: 1px;
 }
-/* header */
+/* header - title-video-wrap */
+.title-video-wrap{
+	width: 460px;
+}
+.title-video-wrap a{
+	position: absolute;
+	top: 10px;
+	left: 0;
+	font-size: 18px;
+	font-weight: bold;
+	color: #30036d;
+	text-decoration: underline;
+	background-image: url(../img/pencil-icon.png);
+	background-repeat: no-repeat;
+	background-position: right 2px;
+	padding-right: 20px;
+	min-height: 20px;
+}
 .title-header{
 	width: 460px;
 	float: left;
@@ -358,4 +375,443 @@
 .pagination a.active{
 	color: #de2500;
 	text-decoration: none;
+}
+
+/* content */
+.left-content, 
+.right-content{
+	padding-top: 8px;
+	float: left;
+}
+.left-content h2,
+.right-content h2{
+	padding: 6px 0;
+	margin-bottom: 14px;
+	border-bottom: 1px solid #333333;
+	color: #30036d;
+	font-size: 18px;
+	font-weight: 600;
+}
+/* left-content */
+.left-content{
+	width: 630px;
+	margin-right: 20px;
+}
+/* right-content */
+.right-content{
+	width: 310px;
+}
+/* list-video */
+.list-video {
+	overflow: hidden;
+	overflow-y: auto;
+	height: 680px;
+}
+.item-video {
+	margin-bottom: 1px;
+	cursor: pointer;
+	padding: 5px 10px 5px 10px;
+	clear: both;
+	width: auto;
+	min-height: 62px;
+	display: block;
+}
+.item-video img{
+	float: left;
+	margin-right: 4px;
+	max-width: 80px;
+	max-height: 60px;
+	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{
+	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{
+	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;
+}
+.item-video .subtitle{
+	margin-bottom: 2px;
+	display: block;
+	color: #de2500;
+	font-size: 11px;
+}
+.item-video .duration{
+	color: #7628df;
+	font-size: 12px;
+	font-weight: 600;
+	display: block;
+}
+/* frise */
+.frise{
+	height: 22px;
+	position: relative;
+	border: 1px solid #333333;
+}
+
+.frise-overflow {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
+}
+.bloc-pvw .frise {
+   margin: 7px 5px 2px;
+}
+
+.aucun-segment{
+	font-weight: 600;
+	font-style: italic;
+	text-align: center;
+	line-height: 20px;
+	width: 100%;
+	z-index:0;
+	background: #CCCCCC;
+}
+.frise-segment{
+	height: 22px;
+	position: absolute;
+	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;
+}
+.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{
+	background-image: none;
+}
+.frise-segment.active {
+    background-image: url(../img/pinstripe-purple.png);
+    background-repeat: repeat;
+}
+.frise-indication{
+	height: 22px;
+	line-height: 22px;
+	display: inline-block;
+	position: absolute;
+	color: #FFF;
+	top:0;
+	left: 0px;
+	font-size: 10px;
+	width: 30px;
+	text-align: center;
+	background: url(../img/bg-indication.png) 15px 0 no-repeat;
+	margin-left: -15px;
+}
+.frise-position {
+    width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
+    z-index: 3; background: #FF00FC;
+}
+/* col-middle - bloc-segmentation - popin.segmentation */
+
+.pointer-padder {
+    left: 5px;
+    position: absolute;
+    right: 5px;
+    top: 0;
+}
+
+.pointer-padder .pointer {
+    top: 0; margin-left: -10px;
+}
+
+.segment-info {
+    padding-top: 12px;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+}
+
+/* popin - frise-description */
+
+.annotation-title {
+	color: #de2500;
+	font-size: 14px;
+	font-weight: bold;
+}
+.annotation-time {
+    color: #7628DF;
+}
+.mashup-description table{
+	font-size: 12px;
+}
+.mashup-description th{
+	text-align: left;
+	font-weight: 600;
+	display: block;
+	min-width: 75px;
+}
+.mashup-description td{
+	line-height: 15px;
+	padding-left: 2px;
+}
+.mashup-description th, 
+.mashup-description td, 
+.mashup-description h2{
+	padding-bottom: 8px;
+}
+.mashup-description .tools{
+	float: right;
+}
+
+.video {
+	background: #333333;
+	position: relative;
+}
+.video-wait  {
+    display: none;
+    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+    background-color: rgba(120, 120, 140, .6);
+    background-image: url(../img/reel.gif);
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: 3;
+}
+.widget {
+    position: relative; 
+}
+
+/* Styles from Metadataplayer */
+
+/* Slider Widget */
+
+.Ldt-Slider-Container {
+    background: #969696;
+    background: -moz-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+    background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
+    border-top: 1px solid #969696;
+    height: 4px;
+    position: relative; z-index: 5;
+}
+
+.Ldt-Slider {
+    border: none; border-radius: 0; padding: 0; height: 100%; background: #B6B8B8;
+}
+
+.Ldt-Slider .ui-slider-handle {
+    border-radius: 8px; top: -2px; background: #ff00fc; border: 1px solid #ffffff;
+}
+
+.Ldt-Slider .ui-slider-range {
+    background: #747474;
+}
+
+.Ldt-Slider-Time {
+    position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
+    font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px;
+    display: none; text-align: center; font-weight: bold;
+}
+
+/* Controller Widget */
+
+.Ldt-Ctrl {
+  font-size: 10px;
+  background:url('../img/player_gradient.png') repeat-x transparent ;
+  height: 25px;
+  border: 1px solid #969696;
+  position: relative;
+}
+
+.Ldt-Ctrl-Left {
+  float:left; width: 300px;
+}
+
+.Ldt-Ctrl-Right {
+  float: right;
+}
+
+.Ldt-Ctrl-button {
+  float: left;
+  width: 30px; height: 25px;
+  background: url('../img/player-sprites.png');
+  cursor: pointer;
+}
+
+.Ldt-Ctrl-spacer {
+    float: left; width: 1px; height: 25px; background: #969696;
+}
+
+.Ldt-Ctrl-Play {
+  margin: 0 15px;
+}
+
+.Ldt-Ctrl-Play-PlayState {
+  background-position: 0 0;
+}
+
+.Ldt-Ctrl-Play-PlayState:hover {
+  background-position: 0 -25px;
+}
+
+.Ldt-Ctrl-Play-PlayState:active {
+  background-position: 0 -50px;
+}
+
+.Ldt-Ctrl-Play-PauseState {
+  background-position: -30px 0;
+}
+
+.Ldt-Ctrl-Play-PauseState:hover {
+  background-position: -30px -25px;
+}
+
+.Ldt-Ctrl-Play-PauseState:active {
+  background-position: -30px -50px;
+}
+
+.Ldt-Ctrl-InOutBlock {
+    display: none;
+}
+
+.segment-mode .Ldt-Ctrl-InOutBlock {
+    display: block;
+}
+
+.Ldt-Ctrl-SetIn, .Ldt-Ctrl-SetOut {
+    margin: 0 2px;
+}
+
+.Ldt-Ctrl-SetIn {
+    background-position: -60px 0;
+}
+
+.Ldt-Ctrl-SetIn:hover {
+  background-position: -60px -25px;
+}
+
+.Ldt-Ctrl-SetIn:active {
+  background-position: -60px -50px;
+}
+
+.Ldt-Ctrl-SetOut {
+    background-position: -90px 0;
+}
+
+.Ldt-Ctrl-SetOut:hover {
+  background-position: -90px -25px;
+}
+
+.Ldt-Ctrl-SetOut:active {
+  background-position: -90px -50px;
+}
+
+.Ldt-Ctrl-Time {
+  float: left;
+  margin: 7px 5px 0;
+  font-size: 12px;
+  font-family: Arial, Verdana, sans-serif;
+}
+
+.Ldt-Ctrl-Time-Elapsed {
+  float: left;
+  color: #4a4a4a;
+}
+
+.Ldt-Ctrl-Time-Separator {
+  margin: 0 4px;      
+  float: left;
+}
+
+.Ldt-Ctrl-Time-Total {
+  float: left;
+  color: #b2b2b2; 
+}
+
+.Ldt-Ctrl-Sound {
+  margin: 0 2px;
+}
+
+.Ldt-Ctrl-Sound-Full {
+  background-position: -120px 0;
+}
+
+.Ldt-Ctrl-Sound-Full:hover {
+  background-position: -120px -25px;
+}
+
+.Ldt-Ctrl-Sound-Full:active {
+  background-position: -120px -50px;
+}
+
+.Ldt-Ctrl-Sound-Mute {
+  background-position: -150px 0;
+}
+
+.Ldt-Ctrl-Sound-Mute:hover {
+  background-position: -150px -25px;
+}
+
+.Ldt-Ctrl-Sound-Mute:active {
+  background-position: -150px -50px;
+}
+
+.Ldt-Ctrl-Sound-Half {
+  background-position: -180px 0;
+}
+
+.Ldt-Ctrl-Sound-Half:hover {
+  background-position: -180px -25px;
+}
+
+.Ldt-Ctrl-Sound-Half:active {
+  background-position: -180px -50px;
+}
+
+.Ldt-Ctrl-Volume-Control {
+    display: none;
+  position: absolute;
+  background:url('../img/player_gradient.png') repeat-x transparent ;
+  height: 25px;
+  width: 100px; top: 25px; right: -1px; z-index: 100;
+  padding: 0 2px;
+  border: 1px solid #b6b8b8;
+}
+
+.Ldt-Ctrl-Volume-Bar { 
+    height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
+}
+
+.Ldt-Ctrl-Volume-Control .ui-slider-handle {
+    width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px;
+    cursor: pointer;
+}
+
+.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
+     background: #F7268E;
 }
\ No newline at end of file