--- a/integration/css/edition.css	Thu Oct 25 16:55:24 2012 +0200
+++ b/integration/css/edition.css	Thu Oct 25 18:52:44 2012 +0200
@@ -550,7 +550,7 @@
 
 .video{
     width: 460px;
-    height: 345px;
+    height: 300px;
     position: relative;
     margin-bottom: 8px;
     background: #333333;
@@ -572,3 +572,171 @@
 a.publier-button.disable:hover{
     background-color: none;
 }
+
+.widget {
+    position: relative;
+}
+
+/* Styles from Metadataplayer */
+
+/* Slider Widget */
+
+.Ldt-Slider {
+    border: none; border-radius: 0; padding: 0; margin: 0; background: #B6B8B8;
+}
+
+.Ldt-Slider .ui-slider-handle {
+    border-radius: 8px; top: -2px; background: #fc00ff; 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: -20px;
+    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 #b6b8b8;
+  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: #b6b8b8;
+}
+
+.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-Time {
+  float: left;
+  margin: 5px;
+  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