--- a/integration/css/edition.css	Tue Oct 30 18:45:16 2012 +0100
+++ b/integration/css/edition.css	Wed Oct 31 21:16:02 2012 +0100
@@ -124,7 +124,6 @@
 
 /* frise */
 .frise{
-	width: 458px;
 	height: 22px;
 	overflow: hidden;
 	position: relative;
@@ -140,6 +139,10 @@
 .frise-indications{
 	z-index: 2;
 }
+.bloc-pvw .frise {
+   margin: 7px 5px 2px;
+}
+
 .aucun-segment{
 	font-weight: 600;
 	font-style: italic;
@@ -155,14 +158,14 @@
 	background-image: url(../img/border-right-segment.png);
 	background-repeat: repeat-y;
 	background-position: right top;
-	-moz-box-shadow: inset 0px 2px 2px 0px #333;
-  	-webkit-box-shadow: inset 0px 2px 2px 0px #333;
-  	box-shadow: inset 0px 2px 2px 0px #333;
+	-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 2px 2px 2px 0px #333;
-  	-webkit-box-shadow: inset 2px 2px 2px 0px #333;
-  	box-shadow: inset 2px 2px 2px 0px #333;
+	-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;
@@ -189,24 +192,17 @@
 	position: relative;
 }
 
-.bloc-segmentation .existant h2{
-	color: #30036d;
-	font-size: 14px;
-	font-weight: 600;
-    margin: 10px 8px 8px;
+/* col-middle - bloc-segmentation - popin.segmentation */
+
+.pointer-padder {
+    left: 5px;
+    position: absolute;
+    right: 5px;
+    top: 0;
 }
-.bloc-segmentation .segment{
-	width: 100%;
-	height: 8px;
-	background-color: #b6b8b8;
-	margin-bottom: 5px;
-	position: relative;
-}
-.bloc-segmentation .section{
-	background-color: #ff7f0e;
-	height: 6px;
-	border:1px solid #999999;
-	position: absolute;
+
+.pointer-padder .pointer {
+    top: 0; margin-left: -10px;
 }
 
 .segment-info {
@@ -216,14 +212,6 @@
     overflow: hidden;
 }
 
-/* col-middle - bloc-segmentation - popin.segmentation */
-.segment-info .pointer{
-    top: 0; margin-left: -10px;
-}
-
-.segmentation .pointer{
-	left: 230px;
-}
 .segmentation h2{
 	font-size: 14px;
 	font-weight: 600;
@@ -287,31 +275,60 @@
 .add-segment {
     float: right; margin: 4px 0;
 }
+.media-segments h2{
+    color: #30036d;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 10px 8px 2px;
+}
 
-.segment-section{
-	top: 8px; left: 15px;
+.media-segment {
+    height: 8px;
+    margin: 8px 6px 0;
+    background-color: #b6b8b8;
+    position: relative;
+}
+.media-section {
+    position: absolute;
+}
+.media-segment-section {
+    top: 0; height: 8px;
 }
-.segment-section h3{
+
+.media-current-section {
+    background: url(../img/pinstripe-purple.png);
+    top: -2px; height: 2px;
+}
+
+.media-current-section-inner {
+    background: url(../img/pinstripe-purple.png);
+    margin-top: 10px; height: 2px;
+}
+.media-segment .pointer{
+    margin-left: 140px
+}
+.media-segment-popin {
+    padding-top: 12px; overflow: hidden;
+    top: 2px; width: 300px; margin-left: -151px;
+    display: none;
+}
+.media-segment-popin h3{
 	padding: 0;
 	color: #de2500;
 	margin-bottom: 4px;
 	font-weight: 600;
 }
-.segment-section p{
+.media-segment-popin p{
+    margin-right: 155px;
 	font-size: 12px;
 }
-.segment-section p span{
+.media-segment-popin span{
 	color: #7628df;
 }
-
-.segment-section a.reprendre-segment{
+.reprendre-segment{
 	float: right;
 	display: block;
 }
-.segment-section .instant-description{
-	float: left;
-	margin-right: 16px;
-}
 /* col-middle - bloc-vide */
 .tutorial{
 	padding: 0 10px;
@@ -429,9 +446,6 @@
 
 /* popin - frise-description */
 
-.mashup-description img.pointer{
-	right: 36px;
-}
 .annotation-title {
 	color: #de2500;
 	font-size: 14px;
@@ -617,15 +631,23 @@
 }
 
 .widget {
-    position: relative;
+    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;
+}
+
 .Ldt-Slider {
-    border: none; border-radius: 0; padding: 0; margin: 0; background: #B6B8B8;
+    border: none; border-radius: 0; padding: 0; margin: 0 6px; height: 100%; background: #B6B8B8;
 }
 
 .Ldt-Slider .ui-slider-handle {
@@ -648,7 +670,7 @@
   font-size: 10px;
   background:url('../img/player_gradient.png') repeat-x transparent ;
   height: 25px;
-  border: 1px solid #b6b8b8;
+  border: 1px solid #969696;
   position: relative;
 }
 
@@ -668,7 +690,7 @@
 }
 
 .Ldt-Ctrl-spacer {
-    float: left; width: 1px; height: 25px; background: #b6b8b8;
+    float: left; width: 1px; height: 25px; background: #969696;
 }
 
 .Ldt-Ctrl-Play {
@@ -823,7 +845,7 @@
 /* Slice Widget */
 
 .Ldt-Slice {
-    border-radius: 0; border: none; padding: 0; margin: 12px 0 12px; background: #B6B8B8; height: 8px;
+    border-radius: 0; border: none; padding: 0; margin: 12px 6px; background: #B6B8B8; height: 8px;
 }
 
 .Ldt-Slice .ui-slider-handle {
@@ -835,10 +857,18 @@
     margin-left: -7px;
 }
 
+.ui-slider-handle.Ldt-Slice-left-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-left-handle.ui-state-active {
+    background-position: 0 -20px;
+}
+
 .ui-slider-handle.Ldt-Slice-right-handle {
     margin-left: 0; background-position: -7px 0;
 }
 
+.ui-slider-handle.Ldt-Slice-right-handle.ui-state-hover, .ui-slider-handle.Ldt-Slice-right-handle.ui-state-active {
+    background-position: -7px -20px;
+}
+
 .Ldt-Slice .ui-slider-range {
     background: url(../img/pinstripe-purple.png);
 }