diff -r 1cb099921ca8 -r 47f9a2d63a0a integration/css/edition.css
--- a/integration/css/edition.css	Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/css/edition.css	Tue Nov 06 11:01:27 2012 +0100
@@ -23,6 +23,7 @@
 	background-repeat: no-repeat;
 	background-position: right 2px;
 	padding-right: 20px;
+	min-height: 20px;
 }
 .title-video-wrap a:hover{
 	text-decoration: none;
@@ -125,19 +126,12 @@
 /* frise */
 .frise{
 	height: 22px;
-	overflow: hidden;
 	position: relative;
 	border: 1px solid #333333;
 }
-.frise-segments,.frise-indications{
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-.frise-indications{
-	z-index: 2;
+
+.frise-overflow {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
 }
 .bloc-pvw .frise {
    margin: 7px 5px 2px;
@@ -170,6 +164,10 @@
 .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;
@@ -185,7 +183,8 @@
 	margin-left: -15px;
 }
 .frise-position {
-    width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC;
+    width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
+    z-index: 3; background: #FF00FC;
 }
 /* col-middle - bloc-segmentation */
 .bloc-segmentation{
@@ -334,6 +333,10 @@
 	padding: 0 10px;
 	color: #FFF;
 	font-weight: 600;
+	display: none;
+}
+.empty-mode .tutorial {
+    display: block;
 }
 .tutorial h2{
 	padding-top: 16px;
@@ -343,10 +346,10 @@
 .tutorial ol{
 	padding-left: 22px;
 }
-.tutorial ol li:first-child{
+.tutorial li:first-child{
 	width: 324px;
 }
-.tutorial ol li{
+.tutorial li{
 	list-style: decimal;
 	font-size: 14px;
 	margin-bottom: 16px;
@@ -359,51 +362,40 @@
 	min-height: 750px;
 	background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6;
 }
-.col-left form{
+.left-head {
 	background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe;
 	height: 70px;
 	padding-left: 10px;
 	margin-bottom: 1px;
 }
-.col-left form h2{
+.left-head h2{
 	padding-top: 8px;
 	margin-bottom: 12px;
 	color: #30036d;
 	font-size: 16px;
 	font-weight: 600;
 }
-.col-left input[type=text]{
-	width: 206px;
+.left-head input {
+	width: 222px;
 	font-size: 14px;
 	border: none;
 	height: 20px;
-	padding: 0 20px 0 4px;
+	padding: 0 4px;
 	-webkit-border-radius: 4px;
   	-moz-border-radius: 4px;
   	border-radius: 4px;
+	background: #FFF url(../img/zoom-icon.png) 214px 3px no-repeat;
 }
-.col-left form p{
-	position: relative;
-	width: 230px;
-}
-.col-left input[type=text]::-webkit-input-placeholder{
+
+.col-left input::-webkit-input-placeholder{
 	color: #b48aed;
 	font-style: italic;
 }
-.col-left input[type=text]:-moz-placeholder { 
+.col-left input:-moz-placeholder { 
 	color: #b48aed;
 	font-style: italic;
 }
-.col-left input[type=submit]{
-	position: absolute;
-	right: 2px;
-	width: 20px;
-	top: 0;
-	height: 20px;
-	border: none;
-	z-index: 2;
-	background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
-}
+
 .col-left .item-video:hover,
 .col-left .item-video.active{
 	background: url(../img/arrow-item-video-sprite.png) right center no-repeat;
@@ -611,7 +603,16 @@
     position: relative;
     background: #333333;
 }
-a.publier-button{
+.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;
+}
+.publier-button{
     position: absolute;
     width: 69px;
     height: 67px;
@@ -620,13 +621,13 @@
     top: 10px;
     z-index: 4;
 }
-a.publier-button:hover{
+.publier-button:hover{
     background-position: 0 -67px;
 }
-a.publier-button.disable{
+.publier-button.disable{
     background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
 }
-a.publier-button.disable:hover{
+.publier-button.disable:hover{
     background-color: none;
 }
 
@@ -644,6 +645,7 @@
     background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
     border-top: 1px solid #969696;
     height: 4px;
+    position: relative; z-index: 5;
 }
 
 .Ldt-Slider {
@@ -660,7 +662,7 @@
 
 .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;
+    font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px;
     display: none; text-align: center; font-weight: bold;
 }