diff -r 265a5f1cc7cf -r 43ac4bd80e71 integration/css/edition.css
--- a/integration/css/edition.css	Wed Oct 24 18:50:26 2012 +0200
+++ b/integration/css/edition.css	Thu Oct 25 16:41:19 2012 +0200
@@ -1,18 +1,17 @@
-/* bloc */
-.bloc-pvw{
-	
+/* Block modes */
+
+.empty-mode .bloc-pvw,
+.empty-mode .bloc-segmentation,
+.segment-mode .bloc-pvw,
+.pvw-mode .bloc-segmentation {
+    display: none;
 }
-.bloc-segmentation{
-	display: none;
-}
-.bloc-vide{
-	display: none;
-}
+
 /* header - title-video-wrap */
-.header .title-video-wrap{
+.title-video-wrap{
 	width: 460px;
 }
-.header .title-video-wrap a{
+.title-video-wrap a{
 	position: absolute;
 	top: 10px;
 	left: 0;
@@ -25,46 +24,46 @@
 	background-position: right 2px;
 	padding-right: 20px;
 }
-.header .title-video-wrap a:hover{
+.title-video-wrap a:hover{
 	text-decoration: none;
 }
-.header .title-video-wrap p.time-length{
+.title-video-wrap p.time-length{
 	position: absolute;
 	top: 34px;
 	color: #333333;
 	font-size: 14px;
 }
-.header .title-video-wrap p.time-length span{
+.title-video-wrap p.time-length span{
 	color: #de2500;
 }
 /* popin - update-title */
-.update-title.popin{
+.update-title {
 	top: 34px;
 	left: 150px;
 }
-.update-title.popin .form-right, 
-.update-title.popin .form-left{
+.update-title .form-right, 
+.update-title .form-left{
 	float: left;
 }
-.update-title.popin textarea{
+.update-title textarea{
 	width: 200px;
 	height: 66px;
 	max-width: 530px;
 }
-.update-title.popin .form-left{
+.update-title .form-left{
 	margin-right: 12px;
 }
-.update-title.popin img.pointer{
+.update-title .pointer{
 	left: 110px;
 }
-.update-title.popin label{
+.update-title label{
 	display: block;
 	margin-bottom: 4px;
 }
-.update-title.popin input[type=text]{
+.update-title input[type=text]{
 	width: 200px;
 }
-.update-title.popin p.titre-wrap{
+.update-title p.titre-wrap{
 	margin-bottom: 6px;
 }
 /* col */
@@ -76,73 +75,58 @@
 /* col-middle */
 .col-middle{
 	width: 460px;
+	min-height: 1px;
 }
 .col-middle-header{
 	height: 35px;
-	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
+	font-size: 16px;
+	clear: both;
+}
+/* Tabs */
+.tab {
+	height: 35px;
 	line-height: 35px;
-	font-size: 16px;
-	font-weight: 600px;
-	font-style: italic;
+	color: #30036d;
+    padding: 0 10px;
+    width: 210px;
+    float: left;
+    background-position: 0 -35px;
 }
-.col-middle-header a{
-	color: #30036d;
-}
-.col-middle-header a:hover{
+.tab:hover{
 	color: #FF00FC;
 }
-.col-middle-header a.disable, 
-.col-middle-header a.disable:hover{
+.tab.disable, 
+.tab.disable:hover{
 	color: #796891;
 }
-.col-middle-header a.segmenter{
-	padding: 0 10px;
-	display: inline-block;
-	min-width: 210px;
-	height: 35px;
-	background: url(../img/bg-segmenter.png) repeat-x 0 0;
+.tab-segment {
+	background-image: url(../img/bg-segmenter.png);
 }
-.col-middle-header a.segmenter.disable,
-.col-middle-header a.previsualiser.disable,
-.col-middle-header.disable {
-	background-position:  0 -35px;
+.tab-pvw {
+	background-image: url(../img/bg-previsualiser.png); text-align: right;
 }
-.col-middle-header a.previsualiser{
-	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
-	float: right;
-	padding-right: 10px;
+
+.pvw-mode .tab-pvw, .segment-mode .tab-segment {
+    width: 250px; background-position: 0 0; font-weight: 600;
 }
-.col-middle .video{
-	width: 460px;
-	position: relative;
-	margin-bottom: 8px;
+
+.segment-mode .tab-pvw, .pvw-mode .tab-segment {
+    width: 170px; color: #796891;
 }
-.col-middle .video a.publier-button{
-	position: absolute;
-	width: 69px;
-	height: 67px;
-	background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
-	left: 382px;
-	top: 10px;
+
+.tab-media-title {
+    font-style: italic; font-weight: normal;
 }
-.col-middle .video a.publier-button:hover{
-	background-position: 0 -67px;
-}
-.col-middle .video a.publier-button.disable{
-	background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
-}
-.col-middle .video a.publier-button.disable:hover{
-	background-color: none;
-}
-.col-middle .frise{
+
+.frise{
 	width: 458px;
 	position: relative;
 	height: 22px;
 }
-.col-middle .frise .segment{
+.frise .segment{
 	height: 22px;
 }
-.col-middle .frise span.indication{
+.frise span.indication{
 	height: 22px;
 	line-height: 22px;
 }
@@ -183,16 +167,12 @@
 .bloc-segmentation{
 	position: relative;
 }
-.bloc-segmentation .existant{
-	margin-top: 190px;
 
-}
 .bloc-segmentation .existant h2{
 	color: #30036d;
 	font-size: 14px;
 	font-weight: 600;
-	padding-left: 8px;
-	margin-bottom: 8px;
+    margin: 10px 8px 8px;
 }
 .bloc-segmentation .segment{
 	width: 100%;
@@ -201,104 +181,114 @@
 	margin-bottom: 5px;
 	position: relative;
 }
-.bloc-segmentation .segment .section{
+.bloc-segmentation .section{
 	background-color: #ff7f0e;
 	height: 6px;
 	border:1px solid #999999;
 	position: absolute;
 }
-/* col-middle - bloc-segmentation - popin.segmentation */
-.popin.segmentation{
-	top: 376px;
-	width: 100%;
+
+.segment-info {
+    padding-top: 12px;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
 }
-.popin.segmentation img.pointer{
-	left: 222px	;
+
+/* col-middle - bloc-segmentation - popin.segmentation */
+.segment-info .pointer{
+    top: 0; margin-left: -10px;
 }
-.popin.segmentation h2{
+
+.segmentation .pointer{
+	left: 230px;
+}
+.segmentation h2{
 	font-size: 14px;
 	font-weight: 600;
 	color:#de2500;
 	margin-bottom: 10px;
 }
-.popin.segmentation h2 span{
+.segmentation h2 span{
 	color: #7628df;
 }
-.popin.segmentation form{
+.segmentation form{
 	overflow: hidden;
 }
-.popin.segmentation form .form-segment-left,
-.popin.segmentation form .form-segment-right{
+.form-segment-left,
+.form-segment-right{
 	float: left;
 }
-.popin.segmentation form .form-segment-left{
+.segmentation .form-segment-left{
 	width: 228px;
 }
-.popin.segmentation form p{
+.segmentation form p{
 	margin-bottom: 8px;
 }
-.popin.segmentation label{
+.segmentation label{
 	display: block;
 	font-size: 12px;
 	font-weight: 600;
 	margin-bottom: 4px;
 }
-.popin.segmentation textarea{
+.segmentation textarea{
 	width: 200px;
 	height: 66px;
 	max-width: 200px;
 	font-size: 12px;
 }
-.popin.segmentation input[type=text]{
+.segmentation input[type=text]{
 	font-size: 12px;
 	width: 200px;
 	height: 20px;
 }
-.bloc-segmentation .segment .popin.segment-section{
-	top: 8px;
+
+.add-segment {
+    float: right; margin: 4px 0;
 }
-.bloc-segmentation .segment .popin.segment-section h2{
+
+.segment-section{
+	top: 8px; left: 15px;
+}
+.segment-section h3{
 	padding: 0;
 	color: #de2500;
 	margin-bottom: 4px;
+	font-weight: 600;
 }
-.bloc-segmentation .segment .popin.segment-section p{
+.segment-section p{
 	font-size: 12px;
 }
-.bloc-segmentation .segment .popin.segment-section p span{
+.segment-section p span{
 	color: #7628df;
 }
 
-.bloc-segmentation .segment .popin.segment-section a.reprendre-segment{
+.segment-section a.reprendre-segment{
 	float: right;
 	display: block;
-	height: 20px;
-	line-height: 20px;
 }
-.bloc-segmentation .segment .popin.segment-section .instant-description{
+.segment-section .instant-description{
 	float: left;
 	margin-right: 16px;
 }
 /* col-middle - bloc-vide */
-.bloc-vide .tutorial{
+.tutorial{
 	padding: 0 10px;
 	color: #FFF;
 	font-weight: 600;
-	height: 316px;
-	background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333;
 }
-.bloc-vide .tutorial h2{
+.tutorial h2{
 	padding-top: 16px;
 	font-size: 18px;
 	margin-bottom: 20px;
 }
-.bloc-vide .tutorial ol{
+.tutorial ol{
 	padding-left: 22px;
 }
-.bloc-vide .tutorial ol li:first-child{
+.tutorial ol li:first-child{
 	width: 324px;
 }
-.bloc-vide .tutorial ol li{
+.tutorial ol li{
 	list-style: decimal;
 	font-size: 14px;
 	margin-bottom: 16px;
@@ -356,8 +346,8 @@
 	z-index: 2;
 	background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
 }
-.col-left .list-video li a:hover,
-.col-left  .list-video li a.active{
+.col-left .item-video:hover,
+.col-left .item-video.active{
 	background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
 }
 /* col-right */
@@ -378,125 +368,118 @@
 	margin-bottom: 12px;
 	padding-top: 8px;
 }
-.col-right .liste-segment  .frise{
+.col-right .frise{
 	width: 228px;
 	position: relative;
 	height: 20px;
 }
-.col-right .liste-segment .frise .segment{
+.col-right .frise .segment{
 	height: 20px;
 }
-.col-right .liste-segment .frise span.indication{
+.col-right .frise .indication{
 	height: 20px;
 	line-height: 20px;
 }
-.col-right .list-video > li{
-	position: relative;
-}
-.col-right .list-video > li > a:hover,
-.col-right  .list-video > li > a.active{
+
+.col-right .item-video:hover,
+.col-right .item-video.active{
 	background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
 }
-.col-right .list-video > li .tools{
-	position: absolute;
-	left: 94px;
-	top: 48px;
-}
+
 /* popin - frise-description */
-.frise-description.popin{
-	top: 26px;
-	left: 0;
-	width: 458px;
-}
-.frise-description.popin img.pointer{
+
+.mashup-description img.pointer{
 	right: 36px;
 }
-.frise-description.popin h2{
+.mashup-description h2{
 	color: #de2500;
 	font-size: 14px;
 	font-weight: bold;
 }
-.frise-description.popin table{
+.mashup-description table{
 	font-size: 12px;
 }
-.frise-description.popin th{
+.mashup-description th{
 	text-align: left;
 	font-weight: 600;
 	display: block;
 	min-width: 75px;
 }
-.frise-description.popin td{
+.mashup-description td{
 	line-height: 15px;
 	padding-left: 2px;
 }
-.frise-description.popin th, 
-.frise-description.popin td, 
-.frise-description.popin h2{
+.mashup-description th, 
+.mashup-description td, 
+.mashup-description h2{
 	padding-bottom: 8px;
 }
-.frise-description.popin .tools{
+.mashup-description .tools{
 	float: right;
 }
 /* tools */
+.tools {
+    height: 17px;
+}
 .tools li{
 	float: left;
 }
-.tools li a{
+.tools a{
 	display: block;
 	width: 17px;
 	height: 17px;
 	background: url(../img/tools-sprite.png) no-repeat 0 0;
 }
-.tools li a.edit{
+.tools a.edit{
 	background-position: 2px 0;
 }
-.tools li a.edit:hover{
+.tools a.edit:hover{
 	background-position: 2px -32px;
 }
-.tools li a.edit.disable:hover, 
-.tools li a.edit.disable{
+.tools a.edit.disable:hover, 
+.tools a.edit.disable{
 	background-position: 2px -16px;
 }
-.tools li a.bottom{
+.tools a.bottom{
 	background-position: -19px 0;
 }
-.tools li a.bottom:hover{
+.tools a.bottom:hover{
 	background-position: -19px -32px;
 }
-.tools li a.bottom.disable:hover, 
-.tools li a.bottom.disable{
+.tools a.bottom.disable:hover, 
+.tools a.bottom.disable{
 	background-position: -19px -16px;
 }
-.tools li a.top{
+.tools a.top{
 	background-position: -40px 0;
 }
-.tools li a.top:hover{
+.tools a.top:hover{
 	background-position: -40px -32px;
 }
-.tools li a.top.disable:hover, 
-.tools li a.top.disable{
+.tools a.top.disable:hover, 
+.tools a.top.disable{
 	background-position: -40px -16px;
 }
-.tools li a.delete{
+.tools a.delete{
 	background-position: -61px 0;
 }
-.tools li a.delete:hover{
+.tools a.delete:hover{
 	background-position: -61px -32px;
 }
-.tools li a.delete.disable:hover, 
-.tools li a.delete.disable{
+.tools a.delete.disable:hover, 
+.tools a.delete.disable{
 	background-position: -61px -16px;
 }
 /* list-video */
-.list-video{
+.list-video {
 	overflow: hidden;
 	overflow-y: auto;
-	max-height: 680px;
+	height: 680px;
 }
-.list-video > li{
+.item-video {
 	margin-bottom: 1px;
 }
-.list-video > li > a{
+.item-video{
 	padding: 5px 10px 5px 10px;
 	position: relative;
 	clear: both;
@@ -504,37 +487,37 @@
 	min-height: 62px;
 	display: block;
 }
-.list-video li a img{
+.item-video img{
 	float: left;
 }
-.list-video li a img{
+.item-video img{
 	margin-right: 4px;
 }
-.list-video li a span.video-info{
+.item-video .video-info{
 	display: block;
     margin-left: 88px;
 }
-.list-video li a .video-info .title-video{
+.item-video .title-video{
 	font-size: 13px;
 	font-weight: 600;
 	color: #30036d;
 	display: block;
 	margin-bottom: 1px;
 }
-.list-video li a span.video-info .author{
+.item-video .author{
 	font-size: 11px;
 	display: block;
 	margin-bottom: 1px;
 }
-.list-video li a .video-info .time-lenght{
+.item-video .time-length{
 	font-size: 12px;
 	font-weight: 600;
 	display: block;
 }
-.list-video li a .video-info .time-lenght span{
+.item-video .time-length span{
 	color: #de2500;
 }
-.list-video li a .number{
+.item-video .number{
 	color: #FFF;
 	font-size: 10px;
 	text-align: center;
@@ -550,15 +533,42 @@
   	top: 54px;
   	left: 78px;
 }
-.list-video li a .subtitle{
+.item-video .subtitle{
 	margin-bottom: 2px;
 	display: block;
 	color: #de2500;
 	font-size: 11px;
 }
-.list-video li .duration{
+.item-video .duration{
 	color: #7628df;
 	font-size: 12px;
 	font-weight: 600;
 	display: block;
-}
\ No newline at end of file
+}
+
+/* Video */
+
+.video{
+    width: 460px;
+    height: 345px;
+    position: relative;
+    margin-bottom: 8px;
+    background: #333333;
+}
+a.publier-button{
+    position: absolute;
+    width: 69px;
+    height: 67px;
+    background: url(../img/publier-button-sprite.png) 0 0 no-repeat;
+    left: 382px;
+    top: 10px;
+}
+a.publier-button:hover{
+    background-position: 0 -67px;
+}
+a.publier-button.disable{
+    background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
+}
+a.publier-button.disable:hover{
+    background-color: none;
+}