--- a/web/static/res/css/style_1024.css Tue Jan 15 17:17:14 2013 +0100
+++ b/web/static/res/css/style_1024.css Wed Jan 16 08:26:00 2013 +0100
@@ -3,9 +3,8 @@
/*----------------------------------------------*/
/* 1- Mentions */
-/* 2- Color codes */
-/* 3- Reset */
-/* 4- Base styles */
+/* 2- Reset */
+/* 3- Base styles */
/* 5- Video */
/* 6- Controls */
/* 7- Sidebar */
@@ -13,25 +12,20 @@
/* 9- Footer */
/*----------------------------------------------*/
-/* 1- Mentions */
+/* 1- Mentions */
/*----------------------------------------------*/
/* @client : The End */
/* @date : octobre 2012 */
/*----------------------------------------------*/
-/* 2- Color codes */
-/*----------------------------------------------*/
-
-/*----------------------------------------------*/
-/* 3- Reset */
+/* 2- Reset */
/*----------------------------------------------*/
html,body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,button,textarea,select,figure,p,blockquote,th,td {
margin:0;
padding:0;
}
-
/* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using `em` units */
/* 2. Prevents iOS text size adjust after orientation change, without disabling user zoom.*/
html {
@@ -44,6 +38,14 @@
font-weight: normal;
font-style: normal;
}
+a,
+a:link,
+a:visited,
+a:active,
+a:hover,
+a:focus {
+ text-decoration: none;
+}
li {
list-style: none;
}
@@ -74,7 +76,6 @@
vertical-align: middle;
font-size: 100%;
}
-
/* 1. Removes default vertical scrollbar in IE 6/7/8/9 */
/* 2. Improves readability and alignment in all browsers */
/* 2. Allow only vertical resizing of textareas */
@@ -83,21 +84,18 @@
vertical-align: top; /* 2 */
resize: vertical; /* 3 */
}
-
fieldset, img, button {
border: 0;
}
-img, table, td, blockquote, code, pre, textarea, input, object, embed/*, video */ {
+img, table, td, blockquote, code, pre, textarea, input, object, embed /*, video */ {
max-width: 100%;
}
-
/* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3 */
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1;
}
-
/* Prevents `sub` and `sup` affecting `line-height` in all browsers */
sub,
sup {
@@ -117,80 +115,125 @@
header, footer, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure, figcaption, time, dialog {
display: block;
}
-
+dl,
+menu,
+ol,
+ul {
+ margin: 1em 0;
+}
+/*----------------------------------------------*/
+/* 3- Base styles */
/*----------------------------------------------*/
-/* 4- Base styles */
-/*----------------------------------------------*/
+@font-face {
+ font-family: "arial_blackregular";
+ src: url('../font/arial_black-webfont.eot');
+ src: url('../font/arial_black-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../font/arial_black-webfont.woff') format('woff'),
+ url('../font/arial_black-webfont.ttf') format('truetype'),
+ url('../font/arial_black-webfont.svg#arial_blackregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+@font-face {
+ font-family: "arialbold";
+ src: url('../font/arial_bold-webfont.eot');
+ src: url('../font/arial_bold-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../font/arial_bold-webfont.woff') format('woff'),
+ url('../font/arial_bold-webfont.ttf') format('truetype'),
+ url('../font/arial_bold-webfont.svg#arialbold') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "arialregular";
+ src: url('../font/arial-webfont.eot');
+ src: url('../font/arial-webfont.eot?#iefix') format('embedded-opentype'),
+ url('../font/arial-webfont.woff') format('woff'),
+ url('../font/arial-webfont.ttf') format('truetype')
+ url('../font/arial-webfont.svg#arialregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+html {
+ overflow: hidden;
+ /* reset de metanav France */
+ padding-top: 0 !important;
+ background-position: 0 0 !important;
+}
body {
- background-color: black;
+ background-color: #000000;
font-size: 1em;
line-height: 1;
}
-h1 {
- font-family: "Arial Black", sans-serif;
+
+#content h1 {
+ margin: 1em 0;
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
font-size: 43px;
color: #ffffff;
text-transform: uppercase;
}
-h2 {
- font-family: Arial, sans-serif;
+#content h2 {
+ margin: 1em 0;
+ font-family: Helvetica, Arial,"arialregular", sans-serif;
font-size: 24px;
- color: #bfbfbf;
+ color: #9b9a9a;
text-transform: uppercase;
}
-h3 {
-
+#content h3 {
+ margin: 1em 0;
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ font-size: 18px;
+ color: #ffffff;
+ text-transform: uppercase;
}
-h4 {
-
+#content h4 {
+ margin: 1em 0;
+ font-family: "Arial Bold", "arialbold", sans-serif;
+ font-size: 14px;
+ color: #ffffff;
}
h5 {
+ margin: 1em 0;
+ font-family: Helvetica, Arial,"arialregular", sans-serif;
+ font-size: 16px;
+ color: #ffffff;
}
h6 {
}
-p,
-pre {
+#content p,
+#content pre {
margin: 1em 0;
- font-family: Arial, sans-serif;
+ font-family: Arial, "arialregular", Helvetica, sans-serif;
+ font-size: 14px;
+ /* font-size: 0.875em; 14px/16px*/
color: #ffffff;
}
-dl,
-menu,
-ol,
-ul {
- margin: 1em 0;
-}
b,
strong,
.bold {
font-weight: bold;
}
-.uppercase{
- text-transform:uppercase;
- }
-a,
-a:link,
-a:visited,
-a:active {
- text-decoration: none;
- }
-a:hover,
-a:focus {
- }
-
+/* if the image is too large to div it decreases image */
+footer img,
+#bottom img,
+#content #bgimage {
+ min-width: 100%;
+}
+
/* Clearfix: contain floats For modern browsers */
/* 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class */
/* 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements */
-
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
@@ -199,11 +242,19 @@
.clearfix:after {
clear: both;
}
-
/* For IE 6/7 only. Include this rule to trigger hasLayout and contain floats */
.clearfix {
*zoom: 1;
}
+
+.box_transparance {
+ opacity :1;
+}
+
+#content .uppercase{
+ text-transform:uppercase;
+ }
+
.txt_hidden {
text-indent: -9999em;
}
@@ -217,6 +268,7 @@
a.link_img:focus {
opacity: 1;
}
+
.floatL {
float: left;
}
@@ -224,38 +276,69 @@
float: right;
}
-.big_link {
- font-family: "Arial Black", sans-serif;
+#content .big_link {
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
font-size: 21px;
text-align: center;
- padding: 14px 0 16px 0;
- margin: 0;
-
+ margin: 14px 0 16px 0;
+ text-transform: uppercase;
+}
+.metanav {
+ z-index: 1000;
+ position: fixed !important;
+}
+.text_lowercase {
+ text-transform: none;
+}
+#content .marginBottom {
+ margin-bottom: 40px ;
+}
+#content .header_txt p {
+/*font-family: "Arial Bold", "arialbold", sans-serif;*/
}
/*----------------------------------------------*/
-/* site takes all the space of the browser */
+/* site takes all the space of the browser */
/*----------------------------------------------*/
html, body {
height: 100%;
+ width: 100%;
}
#content{
- width: 98%;
+ width: 100%; /* a changer pour 100% et tester le footer*/
min-height: 100%;
- position: relative;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
margin: 0 auto;
+ padding-top: 28px;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
+
+/* exception index : width: 98%; margin left and margin right have 1% */
+#content.smallMargin{
+ width: 98%; /* le footer adapte sa largeur */
+}
+#content.hugeMargin {
+ width: 76.5625%;
+}
+
+/* exception index for footer position:absolute; */
#content #content_top {
+ height: 100%;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 70px; /* height of <footer> + some margin */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
- height: 100%;
}
footer {
- position: absolute;
+ position: absolute; /* ou position fixe pas de differance ??? */
bottom: 0;
left: 0;
width: 100%;
@@ -266,27 +349,31 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
+
#content.full_screen {
- width: 100%;
+/* width: 100%; */
+ height: 100%;
+}
+.full_hightScreen {
height: 100%;
}
-#content.full_hightScreen {
- height: 100%;
+.pointer {
+ cursor: pointer;
}
/*----------------------------------------------*/
-/* elements takes the full height of "content_top" */
+/* A block centered vertically in a container class="container_vcentering" of fixed height */
/*----------------------------------------------*/
.container_vcentering {
- text-align:center;
+ text-align: center; /* centrage horizontal */
}
.box_vcentering {
vertical-align: middle;
display: inline-block;
- line-height: 1;
+ line-height: 1; /* on rétablit le line-height */
text-align: center;
}
/*----------------------------------------------*/
-/* elements is positioned in the middle of the window */
+/* elements takes the full height of "content_top" */
/*----------------------------------------------*/
.strut {
display:inline-block;
@@ -295,11 +382,14 @@
}
.fullScreen_vcentering {
margin: auto;
- display:inline-block;
- vertical-align:middle;
+ display: inline-block;
+ vertical-align: middle;
width: 100%;
padding: 0;
}
+/*----------------------------------------------*/
+/* if video is too small .fullScreen_vcentering enlarges */
+/*----------------------------------------------*/
.fullScreen_vcentering #video,
.fullScreen_vcentering video {
max-width: 100%;
@@ -307,7 +397,7 @@
}
/*----------------------------------------------*/
-/* 4- Main HP */
+/* 5- Main HP index.html */
/*----------------------------------------------*/
section a,
section a:link,
@@ -319,27 +409,66 @@
section a:focus {
color: #bfbfbf;
}
+
#title_hp {
- text-align : center;
+ text-align : left;
padding: 11px 0 11px 0;
- margin-left: -13px; /* 53px */
+ margin-left: -53px; /* decalage du titre à gauche 53px */
}
#title_hp h1 {
- margin: 0 0 5px 0;
+ margin: 1px 0 5px 0;
+ padding-left: 40px;
font-size: 43px;
+ letter-spacing: 1px;
}
-#title_hp .h2_exeption{
- margin-left: -170px; /* 86px */
+#title_hp h2 {
+ margin: 0;
+ padding-left: 35px;
+ text-shadow: #000000 0 0 0px;
+ font-weight: lighter;
+ letter-spacing: 1px;
}
-.h2_exeption {
- font-size: 25px;
+#title_hp .h2_exeption {
+ padding-left: 0;
+ font-size: 25px;
+ letter-spacing: 1px;
}
#main {
- display: block;
+ display: block;
+ width: 100%;
+ position: relative;
+}
+#bottom a{
+ color: #ffffff;
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
+}
+#bottom a:hover,
+#bottom a:focus {
+ color: #9b9a9a;
+}
+#bd_noir {
+ position: absolute;
+ z-index: 111;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ opacity: 0;
+ background-color: #000000;
+}
+#mosaic {
+ position: relative;
+ display: block;
+ z-index: 1;
margin: 0 auto;
}
/*----------------------------------------------*/
-/* 9- Footer HP */
+/* Footer HP */
/*----------------------------------------------*/
footer a,
@@ -347,6 +476,10 @@
footer a:visited,
footer a:active {
color: #bfbfbf;
+ -webkit-transition: all 0.3s ease-in-out;
+ -moz-transition: all 0.3s ease-in-out;
+ -o-transition: all 0.3s ease-in-out;
+ transition: all 0.3s ease-in-out;
}
footer a:hover,
footer a:focus {
@@ -355,7 +488,7 @@
footer ul {
margin: 0;
- font-family: "Arial Bold", sans-serif;
+ font-family: Arial, "arialregular", Helvetica, sans-serif;
font-size: 9px;
color: #b9b9b9;
text-transform: uppercase;
@@ -366,41 +499,63 @@
footer ul li a{
display: inline-block;
}
-img{
- min-width: 100%;
-}
-footer #logo_partners>li {
+
+footer .logo_partners>li {
display: inline-block;
padding-right: 22px;
}
-footer #logo_partners li a{
- padding-top: 10px;
+footer .logo_partners li a{
+ margin-top: 10px;
height: 28px;
line-height: 28px;
- text-align:bottom;
+ text-align: bottom;
+}
+footer .logo_partners li a img {
+ vertical-align:bottom;
+ opacity: 1;
}
-footer #logo_partners li a img {
- vertical-align:bottom;
+footer .logo_partners li a:hover img,
+footer .logo_partners li a:focus img {
+ opacity: 0.7;
}
-footer #logo_partners li:first-child li a{
+footer .logo_partners li:first-child li a{
width: 39px;
}
-footer #logo_partners li:first-child li+li a{
+footer .logo_partners li:first-child li+li a{
width: 40px;
padding-left: 18px;
}
-footer #logo_partners li+li li a{
+footer .logo_partners li+li li a{
width: 42px;
}
-footer #logo_partners li+li li+li a{
+footer .logo_partners li+li li+li a{
width: 62px;
padding-left: 16px;
}
-footer #logo_partners li+li li+li+li a{
+footer .logo_partners li+li li+li+li a{
width: 56px;
- padding-left: 16px;
+}
+footer .logo_partners .logo_bg a,
+footer .logo_partners .logo_bg a:link,
+footer .logo_partners .logo_bg a:visited,
+footer .logo_partners .logo_bg a:active {
+ background: transparent url(../img/footer/fInter.png) no-repeat top left;
+ background-position: 0 0;
+ cursor: pointer;
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ transition: none;
+}
+footer .logo_partners ul:first-child .logo_bg a{
+ width: 28px;
+ height: 28px;
}
+footer .logo_partners .logo_bg a:hover,
+footer .logo_partners .logo_bg a:focus {
+ background-position: 0 -28px;
+}
footer #socialMedia {
margin-top: 24px;
}
@@ -408,131 +563,355 @@
display: inline-block;
vertical-align: middle;
}
-footer #socialMedia li+li a{
- width: 20px;
- height: 20px;
+footer #socialMedia .socialLogo a{
+ width: 19px;
+ height: 19px;
}
footer #socialMedia li+li {
padding-left: 22px;
}
+footer #socialMedia li a img {
+ opacity: 1;
+}
+footer #socialMedia li a:hover img,
+footer #socialMedia li a:focus img {
+ opacity: 0.7;
+
+}
+footer #socialMedia li.license a img {
+ opacity: 0.7;
+
+}
+footer #socialMedia li.license a:hover img,
+footer #socialMedia li.license a:focus img {
+ opacity: 1;
+
+}
+/*----------------------------------------------*/
+/* PopUP */
/*----------------------------------------------*/
-/* 5- Video Page */
-/*----------------------------------------------*/
-.link_prev{
+#blanket {
+ background-color: #000000;
+ opacity: 0.8;
+ position:absolute;
+ z-index: 500;
+ top:28px;
+ bottom:0px;
+ right:0px;
+ left:0px;
+ width: 100%;
+ height: 100%;
+}
+#popUpDiv {
+ position: absolute;
+ width: 71.875%;
+ height: 63.59%;
+ z-index: 501;
+}
+#popUpTitle {
+ text-align: center;
+ margin: 0.7em 0 1.4em 0;
+}
+#popUpTxtScroll {
+ overflow: auto;
+ height: 85%;
+}
+#popUpDiv h3{
display: inline-block;
- width: 17px;
- height: 20px;
- margin-left: 6px;
- vertical-align: baseline;
+ margin: 0 1em;
+}
+#popUpDiv h4{
+ margin: 1.1em 0;
+ color: #acacac;
+}
+#popUpDiv p{
+ color: #acacac;
+ line-height: 1.3em;
+}
+#popUpDiv p:first-child,
+#popUpDiv p:last-child {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+#popUpTxtScroll p,
+#popUpTxtScroll h4 {
+ margin-right: 7%;
+}
+#popUpClose {
+ display: block;
+ float: right;
+ width: 14px;
+ height: 14px;
+}
+a#popUpClose,
+a#popUpClose:link,
+a#popUpClose:visited,
+a#popUpClose:active {
+ opacity: 0.5;
+}
+a#popUpClose:hover,
+a#popUpClose:focus {
+ opacity: 1;
+}
+/*----------------------------------------------*/
+/* 6- Page inter-choice */
+/*----------------------------------------------*/
+#content .big_txt p{
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ font-size: 51px;
+ text-align: center;
+ text-transform: uppercase;
+}
+#inter_choice .big_txt p{
+ margin: 2.1372em 0; /*109px 0*/
}
-#title_vp {
- padding: 19px 0 5px 0;
+#inter_choice .big_txt p:first-child,
+#choice .big_txt p:first-child, {
+ margin-top: 1.2156em; /* 62px */
+}
+/*----------------------------------------------*/
+/* 6- Page choice / Transition */
+/*----------------------------------------------*/
+#choice .big_txt p{
+ margin: 0.4901em 0; /*25px 0;*/
+}
+#bg_mosaic,
+#bg_img {
+ z-index: 5;
+}
+#transition .big_txt p{
+ margin: 0.3529em 0; /*18px 0;*/
+}
+#transition .big_txt p.margin_exeption{
+ margin: 0.9215em 0; /*47px 0;*/
}
-#title_vp h1{
- display: inline-block;
- margin-left: 12px;
- font-size: 27px;
+.positionAbs {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 6;
+ padding-top: 28px;
+}
+.blue a,
+.blue a:link,
+.blue a:visited,
+.blue a:active {
+ color: #010cfe;
+ -webkit-transition: color 0.6s linear;
+ -moz-transition: color 0.6s linear;
+ -o-transition: color 0.6s linear;
+ transition: color 0.6s linear;
+}
+.blue a:hover,
+.blue a:focus {
+ color: #ffffff;
+}
+.whiteN a,
+.whiteN a:link,
+.whiteN a:visited,
+.whiteN a:active {
+ color: #ffffff;
+ -webkit-transition: color 0.6s linear;
+ -moz-transition: color 0.6s linear;
+ -o-transition: color 0.6s linear;
+ transition: color 0.6s linear;
}
+.red a,
+.red a:link,
+.red a:visited,
+.red a:active {
+ color: #fe0000;
+ -webkit-transition: color 0.6s linear;
+ -moz-transition: color 0.6s linear;
+ -o-transition: color 0.6s linear;
+ transition: color 0.6s linear;
+}
+.whiteN a:hover,
+.whiteN a:focus,
+.red a:hover,
+.red a:focus {
+ color: #000000;
+}
+/*----------------------------------------------*/
+/* 7- Page Transition */
+/*----------------------------------------------*/
+#theEnd {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: #000000;
+ z-index: 11;
+ text-align: center;
+}
+#theEnd h1 {
+ font-size: 80px;
+ text-align: center;
+ display: inline-block;
+ vertical-align: middle;
+}
+.display {
+ display: none;
+ }
+.white a,
+.white a:link,
+.white a:visited,
+.white a:active {
+ color: #ffffff;
+ -webkit-transition: color 0.6s linear;
+ -moz-transition: color 0.6s linear;
+ -o-transition: color 0.6s linear;
+ transition: color 0.6s linear;
+}
+.white a:hover,
+.white a:focus {
+ color: #2d2d2a;
+}
+/*----------------------------------------------*/
+/* 9- Partage */
+/*----------------------------------------------*/
+#title_sp h1 {
+ margin: 1em 0 0.3617em 0;
+ font-size: 47px;
+}
+#bottom #socialMedia {
+ margin-top: 24px;
+}
+#bottom #socialMedia li{
+ display: inline;
+}
+#bottom #socialMedia li a{
+ display: inline-block;
+ vertical-align: middle;
+ width: 28px;
+ height: 28px;
+}
+#bottom #socialMedia li a:hover img,
+#bottom #socialMedia li a:focus img {
+ opacity: 0.7;
+}
+#bottom #socialMedia li+li {
+ padding-left: 44px;
+}
+#imgMiddle img{
+ margin: 0 auto;
+ display: block;
+}
+.btnReturn {
+ position: absolute;
+ top: 28px;
+ left: 0;
+ padding: 25px 18px;
+ z-index: 999;
+}
+/*----------------------------------------------*/
+/* Credit */
+/*----------------------------------------------*/
+#credit {
+ text-align: center;
+ margin : 25px 0;
+}
+.overflow {
+ overflow-y: scroll;
+}
+#credit .gris {
+ color: #9b9a9a;;
+}
+/*----------------------------------------------*/
+/* Menu sous-niveau - Bonus */
+/*----------------------------------------------*/
+#menuBonus p{
+ font-size: 80px;
+}
+#menuBonus .big_txt p{
+ margin: 0.9215em 0; /*47px 0;*/
+}
+#content .big_txt p.margin_huge {
+ margin: 2.4em 0 0.3529em 0; /*47px 0;*/
+}
+#content p.black{
+ color: #000000;
+}
+/* Portraits sous-niveau - Bonus */
+#content .small_txt p{
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ font-size: 24px;
+ line-height: 1.2;
+ text-align: center;
+ text-transform: uppercase;
+}
+.col_big {
+ width: 45%;
+ /*width: 33.333333%; */
+ display: inline-block;
+}
+.col_middle {
+ width: 30%;
+ display: inline-block;
+}
+.col_small {
+ width: 25%;
+ display: inline-block;
+}
+#intPortrait .white a:hover,
+#intPortrait .white a:hover {
+ color: #7e7878;
+ }
+#playerAudio p {
+ display: inline-block;
+ margin: 0;
+}
+#playerAudio p.time {
+ font-family: Arial, "arialregular", Helvetica, sans-serif;
+ font-size: 11px;
+ margin-right: 30px;
+
+}
+.boxAudio {
+ text-align: left;
+ display: block;
+ width: 670px;
+ margin: 0 auto;
+/* margin: 3% auto;
+ margin: 1.8% 0;*/
+}
+.boxAudio p{
+ vertical-align: middle;
+}
+#playerAudio p.gris {
+ color: #B9B9B9;
+}
+#playerAudio .big_txt p+p{
+ margin: 0.24505em 0; /*25px 0;*/
+}
+.hidden {
+ display: none;
+}
+audio {
+ display: none;
+ width: 0;
+ height: 0
+}
/*----------------------------------------------*/
/* Video */
/*----------------------------------------------*/
-video.small_video{
+video.small_video,
+#video.small_video video{
min-width: 100%;
}
-.float_sequence {
- white-space: nowrap;
- overflow: hidden;
-}
-.float_sequence ul{
- margin: 0;
- padding: 7px 36px;
-}
-.float_sequence li {
- display: inline;
-}
-.float_sequence li a {
- display: inline-block;
-}
-#title_sequence {
- width: 100%;
- margin-bottom: 9px;
-
- font-family: "Arial Black", sans-serif;
- font-size: 16px;
- color: #777777;
-}
-#title_sequence a,
-#title_sequence a:link,
-#title_sequence a:visited,
-#title_sequence a:active{
- font-family: "Arial Black", sans-serif;
- font-size: 16px;
- color: #777777;
-}
-#title_sequence a:hover,
-#title_sequence a:focus {
- color: #ffffff;
-}
-#title_sequence .here a{
- color: #ffffff;
-}
-#tag_container {
- margin: 9px 0;
+#main video {
+ margin: 0 auto;
+ display: block;
}
-#tag_sequence {
- width: 78%;
- float: left;
-
- font-family: "Arial Bold", sans-serif;
- font-size: 13px;
-}
-#tag_sequence ul {
- padding: 7px 6px;
-}
-/*----------------------------------------------*/
-/* Search/Tag */
-/*----------------------------------------------*/
-input {
- font-family: Arial, sans-serif;
- font-size: 13px;
- color: #000000;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-input[name="tag"],
-input[name="search"] {
- width: 158px;
- height: 24px;
- background-color: #808080;
- border: none;
- border-radius: 7px 0 0 7px;
- margin-right: 5px;
- padding:0 8px;
-}
-input[type="submit"] {
- width: 33px;
- height: 24px;
- background-color: #636363;
- border: none;
- font-family: "Arial Bold", sans-serif;
- font-weight: bold;
- font-size: 15px;
-}
-input[type="submit"]:hover,
-input[type="submit"]:focus{
- background-color: #ffffff;
-}
-input:focus {
-/* outline: medium;
- border: 1px solid rgba(255,255,255, 0.5);
-*/ }
-#form_tag,
-#form_search {
- float: right;
- margin-left: 13px;
+#topEmpty,
+#bottomEmpty {
+ display: block;
+/* min-height: 40px; */
}
/*----------------------------------------------*/
/* Video Controls */
@@ -548,10 +927,29 @@
right: 0;
height: 66px;
}
-.container_hcentering {
+#controlbarPlay {
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ right: 0;
+ height: 50px;
+}
+#controlbar .container_hcentering {
margin: 0 auto;
width: 580px;
}
+#controlbarPlay .container_hcentering {
+ margin: 0 auto;
+ width: 20px;
+}
+#controlbarPlay {
+ position: absolute;
+ bottom: 0px;
+ left: 0;
+ right: 0;
+ height: 50px;
+}
+
#progressContainer {
width: 240px;
display: inline-block;
@@ -586,14 +984,14 @@
top: 0;
left: 0;
margin: 0;
- width: 40px; /* to change with JS */
+ width: 0; /* to change with JS */
background-color: #ffffff;
}
#stateBar {
position: absolute;
z-index: 3;
top: -6px;
- left: 32px; /* to change with JS */
+ left: 0; /* to change with JS */
width: 16px;
height: 16px;
@@ -604,34 +1002,34 @@
-webkit-box-shadow: 0 0 5px 3px #000000;
box-shadow: 0 0 5px 3px #000000;
}
- background-position: -72px 0;
-}
footer #progressTime{
margin: 10px 0;
width: 240px;
font-size: 11px;
}
-.txt_white {
+#content .txt_white {
color: #ffffff;
}
.btn {
+ background: transparent url(../img/footer/controls.png) no-repeat top left;
text-indent: -99999px;
- background: transparent url(../img/footer/controls.png) no-repeat top left;
cursor: pointer;
}
#btnSDHD {
- background-position: 0 0;
+ background-position: 0 -12px;
width: 55px;
height: 12px;
}
+
#btnSDHD:hover,
- #btnSDHD:focus {
- background-position: 0 -12px;
- width: 55px;
- height: 12px;
+#btnSDHD:focus {
+ background-position: 0 -24px !important;
}
-#btnBck {
+#btnBck,
+#btnBck:link,
+#btnBck:visited,
+#btnBck:active {
background-position: -55px 0;
width: 16px;
height: 16px;
@@ -647,11 +1045,30 @@
height: 18px;
margin-right: 30px;
}
+#controlbarPlay #btnPlayPause{
+ margin-right: 0;
+}
+.btnPlayPause {
+ background: transparent url(../img/footer/controlPlayPause.png) no-repeat top left;
+ text-indent: -99999px;
+ cursor: pointer;
+
+ background-position: 0 0;
+ width: 24px;
+ height: 30px;
+ margin-right: 10px;
+ text-align: left;
+}
+/*
#btnPlayPause:hover,
#btnPlayPause:focus {
- background-position: -77px -22px;
+ background-position: -77px -17px;
}
-#btnFwd {
+*/
+#btnFwd,
+#btnFwd:link,
+#btnFwd:visited,
+#btnFwd:active {
background-position: -93px 0;
width: 16px;
height: 16px;
@@ -666,6 +1083,7 @@
width: 21px;
height: 21px;
margin-right: 30px;
+ padding-bottom: 1px;
}
#btnInfo:hover,
#btnInfo:focus {
@@ -675,13 +1093,129 @@
background-position: -130px 0;
width: 21px;
height: 21px;
+ padding-bottom: 1px;
}
#btnChoice:hover,
#btnChoice:focus {
background-position: -130px -21px;
}
+
/*----------------------------------------------*/
-/* 5- HP level2 */
+/* NIV2- Video Page */
+/*----------------------------------------------*/
+.link_prev{
+ display: inline-block;
+ width: 17px;
+ height: 20px;
+ margin-left: 6px;
+ vertical-align: baseline;
+}
+#title_vp {
+ padding: 19px 0 5px 0;
+}
+#title_vp h1{
+ display: inline-block;
+ margin-left: 12px;
+ font-size: 27px;
+}
+/*----------------------------------------------*/
+/* NIV2- Video */
+/*----------------------------------------------*/
+.float_sequence {
+ white-space: nowrap;
+ overflow: hidden;
+}
+.float_sequence ul{
+ margin: 0;
+ padding: 7px 36px;
+}
+.float_sequence li {
+ display: inline;
+}
+.float_sequence li a {
+ display: inline-block;
+}
+#title_sequence {
+ width: 100%;
+ margin-bottom: 9px;
+
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ font-size: 16px;
+ color: #777777;
+}
+#title_sequence a,
+#title_sequence a:link,
+#title_sequence a:visited,
+#title_sequence a:active{
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ font-size: 16px;
+ color: #777777;
+}
+#title_sequence a:hover,
+#title_sequence a:focus {
+ color: #ffffff;
+}
+#title_sequence .here a{
+ color: #ffffff;
+}
+#tag_container {
+ margin: 9px 0;
+}
+#tag_sequence {
+ width: 78%;
+ float: left;
+
+ font-family: "Arial Bold", "arialbold", sans-serif;
+ font-size: 13px;
+}
+#tag_sequence ul {
+ padding: 7px 6px;
+}
+/*----------------------------------------------*/
+/* NIV2- Search/Tag */
+/*----------------------------------------------*/
+input {
+ font-family: Arial,"arialregular", sans-serif;
+ font-size: 13px;
+ color: #000000;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+input[name="tag"],
+input[name="search"] {
+ width: 158px;
+ height: 24px;
+ background-color: #808080;
+ border: none;
+ border-radius: 7px 0 0 7px;
+ margin-right: 5px;
+ padding:0 8px;
+}
+input[type="submit"] {
+ width: 33px;
+ height: 24px;
+ background-color: #636363;
+ border: none;
+ font-family: "Arial Bold", "arialbold", sans-serif;
+ font-weight: bold;
+ font-size: 15px;
+}
+input[type="submit"]:hover,
+input[type="submit"]:focus{
+ background-color: #ffffff;
+}
+input:focus {
+/* outline: medium;
+ border: 1px solid rgba(255,255,255, 0.5);
+*/ }
+#form_tag,
+#form_search {
+ float: right;
+ margin-left: 13px;
+}
+/*----------------------------------------------*/
+/* NIV2- HP level2 */
/*----------------------------------------------*/
#header_hpn2 {
margin: 25px 0 9px 0;
@@ -725,105 +1259,244 @@
right: 0;
}
/*----------------------------------------------*/
-/* 6- Page choice */
+/* Resize for screen (max-width: 525px) and smartphone */
/*----------------------------------------------*/
-.big_txt p{
- font-family: "Arial Black", sans-serif;
- font-size: 51px;
- text-align: center;
- text-transform: uppercase;
-}
-.inter_choice .big_txt p{
- margin: 109px 0;
-}
-.choix .big_txt p{
- margin: 25px 0;
-}
-#partage .big_txt p{
- margin: 18px 0;
-}
-#partage .big_txt p.margin_exeption{
- margin: 47px 0;
-}
-.inter_choice .big_txt p:first-child,
-.choice .big_txt p:first-child, {
- margin-top: 62px;
-}
-.choix .big_txt p:last-child {
- margin-bottom: 52px;
-}
-.box_transparance {
- opacity :1;
-}
-.pointer {
- cursor: pointer;
-}
-#bg_mosaic,
-#bg_img {
- z-index: 5;
-}
-#choix,
-#partage {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 6;
+ /* la taille du texte choix (plus petit) */
+
+@media only screen and (max-width: 900px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 39px;
+ }
+}
+@media only screen and (max-width: 700px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 28px;
+ }
+ #theEnd h1 {
+ font-size: 50px;
+ }
+}
+@media only screen and (max-width: 756px) {
+
+ footer {
+ height: 120px; /* height of <footer> */
+ }
}
-.blue a,
-.blue a:link,
-.blue a:visited,
-.blue a:active {
- color: #010cfe;
-}
-.blue a:hover,
-.blue a:focus {
- color: #ffffff;
-}
-.white a,
-.white a:link,
-.white a:visited,
-.white a:active {
- color: #ffffff;
-}
-.red a,
-.red a:link,
-.red a:visited,
-.red a:active {
- color: #fe0000;
-}
-.white a:hover,
-.white a:focus,
-.red a:hover,
-.red a:focus {
- color: #000000;
+
+@media only screen and (max-width: 480px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 22px;
+ }
+ #theEnd h1 {
+ font-size: 40px;
+ }
+ /* la taille du texte (plus petit) */
+ footer ul {
+ font-size: 8px;
+ }
+ footer .logo_partners {
+ margin-bottom: 12px;
+ }
+ /* la taille des icones (plus petites) */
+ footer .logo_partners li a{
+ height: 25px;
+ line-height: 25px;
+ }
+ footer .logo_partners li:first-child li a{
+ width: 35px;
+ }
+ footer .logo_partners li:first-child li+li a{
+ width: 36px;
+ padding-left: 15px;
+ }
+ footer .logo_partners li+li li a{
+ width: 39px;
+ }
+ footer .logo_partners li+li li+li a{
+ width: 56px;
+ padding-left: 13px;
+ }
+ footer .logo_partners li+li li+li+li a{
+ width: 50px;
+ padding-left: 13px;
+ }
+ footer #socialMedia .socialLogo a{
+ width: 18px;
+ height: 18px;
+ }
+
+ body#mobilhp {
+ height: 100%;
+ }
+ #mobilhp #content{
+ padding: 0;
+ width: 90%;
+ }
+ #mobilhp #content_top{
+ padding: 0;
+ }
+ #mobilhp header{
+ height: 27%;
+ text-align: center;
+ }
+ #mobilhp #bottom{
+ height: 43%;
+ text-align: center;
+ }
+ #mobilhp footer {
+ height: 30%;
+ }
+ #content h3 {
+ font-size: 14px;
+ }
+ #content p,
+ #content h4 {
+ font-size: 12px;
+ }
+ /* pas de padding pour le dernier elem */
+ #mobilhp footer .logo_partners > li:last-child {
+ padding-right: 0;
+ }
+ /* un nouveau elem sur mobile*/
+ #mobilhp .txt_bold {
+ font-family: "Arial Black", "arial_blackregular", sans-serif;
+ /*text-align: left;*/
+ text-align: center;
+ text-transform: uppercase;
+ font-size: 14px; /* 43px */
+ line-height: 1.1;
+ }
+ /* changement de la taille de titre */
+ #title_hp {
+ padding: 0;
+ margin-left: -20px ; /* decalage du titre à gauche 32 / 53px */
+ }
+ #mobilhp #title_hp {
+ padding: 0;
+ display: inline-block;
+ vertical-align: bottom;
+ }
+ #title_hp h1 {
+ margin: 1px 0 5px 0;
+ padding-left: 1.142857em; /* 32px 40px / -20% */
+ font-size: 28px; /* 43px */
+ }
+ #title_hp h2 {
+ padding-left: 2em; /* 30px 35px / -20% */
+ font-size: 15px; /* 24px */
+ }
+ #title_hp .h2_exeption {
+ font-size: 16px; /* 25px / -20% */
+ }
+ #popUpClose {
+ width: 10px;
+ height: 10px;
+ }
+ #mobilhp #blanket {
+ top: 0;
+ }
}
-/*----------------------------------------------*/
-/* 7- Page Transition */
-/*----------------------------------------------*/
-#theEnd {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: #000000;
- z-index: 11;
- text-align: center;
+@media only screen and (max-width: 480px) and (orientation: landscape) {
+ #mobilhp header {
+ height: 38%;
+ }
+ #mobilhp #bottom {
+ height: 26%;
+ }
+ #mobilhp footer {
+ height: 36%;
+ }
+ #mobilhp #content{
+ width: 98%;
+ }
+ footer .logo_partners {
+ margin-bottom: 0;
+ }
+ #mobilhp footer .logo_partners > li:last-child {
+ padding-right: 22px;
+ }
+ footer #socialMedia {
+ margin-top: 10px;
+ }
+}
+/*
+
+ .logo_partners {
+ float: none;
+ }
+ footer #socialMedia {
+ margin-top: 34px;
+ }
+
+ .hiddenPhone {
+ display: none !important;
+ }
+@media only screen and (max-width: 850px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 41px;
+ }
+}
+@media only screen and (max-width: 740px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 30px;
+ }
}
-#theEnd h1 {
- font-size: 80px;
- text-align:center;
- display: inline-block;
- vertical-align: middle;
+@media only screen and (max-width: 550px) {
+ #choice .big_txt p,
+ #transitionTxt .big_txt p {
+ font-size: 20px;
+ }
+}
+@media only screen and (min-width: 1200px) {
+
+}*/
+
+
+/*
+display: none;
+float: none;
+
+@-o-viewport {
+ width: device-width;
+ max-zoom: 1.0;
+ min-zoom: 1.0;
+ user-zoom: fixed;
+}
+
+html {
+ position: relative;
+ overflow: hidden;
}
-#theEnd .strut {
- background: red;
+body {
+ position: relative;
+ overflow: hidden;
+
+@media only screen and (max-height: 650px) and (min-height: 501px){
+ #choice .big_txt p {
+ font-size: 40px;
+ }
+}
+@media only screen and (max-height: 500px) and (min-height: 351px){
+ #choice .big_txt p {
+ font-size: 30px;
+ }
}
-#theEnd.display {
- display: none;
- }
-.bg_smallimg {
- margin: 0 1.171875%;
+@media only screen and (max-height: 350px){
+ #choice .big_txt p {
+ font-size: 20px;
+ }
}
+*/
+
+
+@media only screen and (device-width: 768px) and (orientation: portrait) {
+ /* rules for iPad in landscape orientation */
+}
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+ /* iPhone, Android rules here */
+}
\ No newline at end of file