integration/css/style.css
changeset 5 9560f52f0979
parent 3 338f10af79dd
--- a/integration/css/style.css	Tue Oct 23 18:40:16 2012 +0200
+++ b/integration/css/style.css	Wed Oct 24 14:49:53 2012 +0200
@@ -1,26 +1,33 @@
 /* fonts */
 @font-face {
-	font-family: 'OpenSans-Regular';
+	font-family: 'OpenSans';
+	font-weight: 400;
 	src: url('fonts/OpenSans-Regular.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Light';
+	font-family: 'OpenSans';
+	font-weight: 300;
 	src: url('fonts/OpenSans-Light.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Bold';
+	font-family: 'OpenSans';
+	font-weight: bold;
 	src: url('fonts/OpenSans-Bold.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Italic';
+	font-family: 'OpenSans';
+	font-style: italic;
 	src: url('fonts/OpenSans-Italic.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Semibold';
+	font-family: 'OpenSans';
+	font-weight: 600;
 	src: url('fonts/OpenSans-Semibold.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-SemiboldItalic';
+	font-family: 'OpenSans';
+	font-weight: 600px;
+	font-style: italic;
 	src: url('fonts/OpenSans-SemiboldItalic.ttf');
 }
 body{
@@ -36,7 +43,8 @@
 	background-color: #FFF;
 	width: 960px;
 	margin: 0 auto;
-	font-family: 'OpenSans-Regular';
+	font-family: 'OpenSans';
+	font-weight: 400;
 	color:#333333;
 	font-size: 13px;
   	height: 100%;
@@ -70,10 +78,10 @@
 	padding-top: 6px;
 }
 div.header h1 a span{
- 	font-family: 'OpenSans-Light';
  	font-size: 20px;
  	text-align: center;
  	padding: 0px 0 0 6px;
+ 	font-weight: 300;
 }
 div.header div.title-video-wrap{
 	width: 460px;
@@ -83,7 +91,7 @@
 	top: 10px;
 	left: 0;
 	font-size: 18px;
-	font-family: 'OpenSans-Bold';
+	font-weight: bold;
 	color: #30036d;
 	text-decoration: underline;
 	background-image: url(../img/pencil-icon.png);
@@ -146,7 +154,8 @@
 	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
 	line-height: 35px;
 	font-size: 16px;
-	font-family: 'OpenSans-SemiboldItalic';
+	font-weight: 600px;
+	font-style: italic;
 }
 div.col-middle-header a{
 	color: #30036d;
@@ -247,6 +256,12 @@
 
 /******* bloc ******/
 div.bloc-pvw{
+
+}
+div.bloc-segmentation{
+	display: none;
+}
+div.bloc-vide{
 	display: none;
 }
 
@@ -263,7 +278,7 @@
 }
 div.popin.segmentation h2{
 	font-size: 14px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	color:#de2500;
 	margin-bottom: 10px;
 }
@@ -286,7 +301,7 @@
 div.popin.segmentation form label{
 	display: block;
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	margin-bottom: 4px;
 }
 div.popin.segmentation form textarea{
@@ -307,7 +322,7 @@
 div.bloc-segmentation div.existant h2{
 	color: #30036d;
 	font-size: 14px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	padding-left: 8px;
 	margin-bottom: 8px;
 }
@@ -352,7 +367,33 @@
 
 
 
+div.bloc-vide{
 
+}
+div.bloc-vide div.tutorial{
+	padding: 0 10px;
+	color: #FFF;
+	font-weight: 600;
+	height: 316px;
+	background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333;
+}
+div.bloc-vide div.tutorial h2{
+	padding-top: 16px;
+	font-size: 18px;
+	margin-bottom: 20px;
+}
+div.bloc-vide div.tutorial ol{
+	padding-left: 22px;
+}
+div.bloc-vide div.tutorial ol li:first-child{
+	width: 324px;
+}
+div.bloc-vide div.tutorial ol li{
+	list-style: decimal;
+	font-size: 14px;
+	margin-bottom: 16px;
+	padding-left: 20px;
+}
 
 
 
@@ -374,7 +415,7 @@
 	margin-bottom: 12px;
 	color: #30036d;
 	font-size: 16px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 }
 div.col-left form input[type=text]{
 	width: 206px;
@@ -392,11 +433,11 @@
 }
 div.col-left form input[type=text]::-webkit-input-placeholder{
 	color: #b48aed;
-	font-family: 'OpenSans-Italic';
+	font-style: italic;
 }
 div.col-left form input[type=text]:-moz-placeholder { 
 	color: #b48aed;
-	font-family: 'OpenSans-Italic';
+	font-style: italic;
 }
 div.col-left form input[type=submit]{
 	position: absolute;
@@ -427,7 +468,7 @@
 div.col-right div.liste-segment h2{
  	text-align: right;
  	color: #30036D;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	font-size: 16px;
 	margin-bottom: 12px;
 	padding-top: 8px;
@@ -526,7 +567,7 @@
 div.user.popin.info div.popin-content h2{
 	color: #7628df;
 	font-size: 18px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	margin-bottom: 2px;
 }
 div.user.popin.info div.popin-content h3{
@@ -610,7 +651,6 @@
 div.popin.segmentation form input[type=submit],
 div.popin.segment-section a.reprendre-segment{
 	margin-top: 2px;
-	font-family: 'OpenSans-Regular';
 	display: block;
 	font-size: 12px;
 	border: 0;
@@ -669,14 +709,14 @@
 div.frise-description.popin h2{
 	color: #de2500;
 	font-size: 14px;
-	font-family: 'OpenSans-Bold';
+	font-weight: bold;
 }
 div.frise-description.popin table{
 	font-size: 12px;
 }
 div.frise-description.popin table th{
 	text-align: left;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 	min-width: 75px;
 }
@@ -762,7 +802,7 @@
 }
 ul.list-video li a span.video-info span.title-video{
 	font-size: 13px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	color: #30036d;
 	display: block;
 	margin-bottom: 1px;
@@ -774,7 +814,7 @@
 }
 ul.list-video li a span.video-info span.time-lenght{
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 }
 ul.list-video li a span.video-info span.time-lenght span{
@@ -805,7 +845,7 @@
 ul.list-video li span.duration{
 	color: #7628df;
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 
 }
@@ -838,3 +878,122 @@
 div.footer ul.links-right li img {
     vertical-align: middle;
 }
+
+/* home */
+div.header div.title-header{
+	width: 460px;
+	float: left;
+	height: 60px;
+}
+div.header div.title-header h2{
+	width: 100%;
+	text-align: center;
+	line-height: 60px;
+}
+div.header div.title-header h2 a{
+	color: #de2500;
+	font-size: 24px;
+	text-decoration: underline;
+	font-weight: bold;
+}
+div.header div.title-header h2 a:hover{
+	text-decoration: none;
+}
+div.content div.left-content, div.content div.right-content{
+	padding-top: 8px;
+	float: left;
+}
+div.content div.left-content h2,
+div.content div.right-content h2{
+	padding: 6px 0;
+	margin-bottom: 14px;
+	border-bottom: 1px solid #333333;
+	color: #30036d;
+	font-size: 18px;
+	font-weight: 600;
+}
+/* left-content */
+div.content div.left-content{
+	width: 630px;
+	margin-right: 20px;
+}
+div.left-content div.hashcut-video-wrap{
+	padding-left: 10px;
+	overflow: hidden;
+	margin-bottom: 16px;
+}
+div.hashcut-video-wrap div.news{
+	width: 300px;
+	float: left;
+	margin-right: 20px;
+}
+div.hashcut-video-wrap div.news:nth-child(2n+2){
+	margin-right: 0;
+}
+div.hashcut-video-wrap  h3{
+	font-size: 12px;
+}
+div.hashcut-video-wrap  h3 strong{
+	font-weight: 600;
+}
+div.hashcut-video-wrap  div.last h3 strong{
+	margin-bottom: 2px;
+	font-weight: 600;
+	display: block;
+}
+div.left-content div.hashcut-video-wrap h3 a{
+	border-bottom: 1px solid #bababa;
+	display: inline-block;
+    line-height: 12px;
+}
+div.left-content  div.hashcut-video-wrap  h3 a:hover{
+	border-bottom: none;
+}
+div.hashcut-video-wrap  h3 span{
+	color: #de2500;
+}
+div.hashcut-video-wrap  a.screenshot{
+	display: inline-block;
+	margin-bottom: 8px;
+}
+div.hashcut-video-wrap  div.last:nth-child(4n+4){
+	margin-right: 0;
+}
+div.hashcut-video-wrap  div.last{
+	width: 140px;
+	float: left;
+	margin: 0 20px 12px 0;
+}
+div.left-content div.pagination{
+	text-align: center;
+}
+div.left-content div.pagination a{
+	font-size: 14px;
+	color: #7628df;
+	text-decoration: underline;
+}
+div.left-content div.pagination a:hover{
+	text-decoration: none;
+}
+div.left-content div.pagination a.active{
+	color: #de2500;
+	text-decoration: none;
+}
+/* right-content */
+div.content div.right-content{
+	width: 310px;
+}
+div.right-content div.definition p{
+	font-size: 12px;
+	line-height: 14px;
+}
+div.right-content div.definition p strong{
+	font-weight: bold;
+}
+div.right-content div.definition p a{
+	color: #7628df;
+	text-decoration: underline;
+}
+div.right-content div.definition p a:hover{
+	text-decoration: none;
+}
\ No newline at end of file