Bonjour à tous. Comme vous le voyez, dans le cercle rouge que je vous ai fais, normallement, il y a un slider. Appellé 'paralax slider. Malheureusement, le slider ne s'affiche pas, et je galère à trouver pourquoi. Voici mon code html :

<!--********************************************* Mainmenu Start *********************************************-->
    <div id="menu_wrapper">
      <div id="menu_left"></div>
      <ul id="menu">
        <li><a href="index-2.html">Accueil</a></li>
        <li><a href="banner2.html">Second banner</a></li>
        <li><a href="post_list.html">post list</a></li>
        <li><a href="post.html">Post</a></li>
        <li><a href="post_game.html">Post with game</a></li>
        <li><a href="full_page.html">Full page</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contacte</a></li>
      </ul>
      <div id="menu_right"></div>
    </div>
    
    <!--********************************************* Mainmenu end *********************************************--> 
    
    <!--********************************************* Banner start *********************************************-->
    <div id="da-slider" class="da-slider">
      <div class="da-slide">
        <h2><a href="#" class="da-link">For gamer by gamers</a></h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
          Ut iaculis lorem vitae arcu elementum pellentesque. <br />
          Praesent pellentesque ornare neque id lobortis.</p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/3.png"  /></div>
      </div>
      <div class="da-slide">
        <h2><a href="#" class="da-link">TEKKEN TAG 2</a></h2>
        <p>Phasellus ac leo turpis. Morbi at pulvinar augue. <br />
          Aenean rhoncus ultrices volutpat. Vivamus eget enim ut orci iaculis condimentum sed a quam. </p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/2.png"  /></div>
      </div>
      <div class="da-slide">
        <h2><a href="#" class="da-link">WOW CATACLYSM</a></h2>
        <p>Etiam eu massa lectus. Nunc mi velit, commodo ut ullamcorper et, consectetur vel dolor. Etiam tincidunt convallis metus non suscipit.</p>
        <div class="da-img"><img alt="alt_example" src="images/paralax_banner/1.png"  /></div>
      </div>
      <div class="da-arrows"> <span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </div>
    </div>
    
    <!--********************************************* Banner end *********************************************-->

Merci d'avance !

Salut.

Il y a deja un probleme d'après moi..

C'est ton banner qui ne s'affiche pas ?

tu n'en ferme pas autant que tu en ouvre...

Je ne comprends pas bien ton code.

Il est mal indenté un TAB de plus par dent et un saut de ligne entre 2 div serait deja plus cool...

tu peux envoyer ton CSS ?

-
Edité par BoToine-1996 30 décembre 2017 à 22:23:06

J'ai carrément upload le site en ligne à cette adresse : http://quebecdominion.cluster1.easy-hebergement.net/red/index.html

et voici le 'paralax_slider.css' : 

.da-slider{
    width:947px !important;
    height:290px !important;
    border:1px solid #341d1d;
    background:#0d0d0d;
    margin-left:5px !important; 
    margin-top:15px;
    -moz-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.8);

    width: 100%;
    min-width: 947px;
    position: relative;
    overflow: hidden;
    background: transparent url(../images/paralax_banner/waves.gif) repeat 0% 0%;
    -webkit-transition: background-position 1s ease-out 0.3s;
    -moz-transition: background-position 1s ease-out 0.3s;
    -o-transition: background-position 1s ease-out 0.3s;
    -ms-transition: background-position 1s ease-out 0.3s;
    transition: background-position 1s ease-out 0.3s;
}
.da-slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align: left;
}
.da-slide-current{
    z-index: 1000;
}
.da-slider-fb .da-slide{
    left: 100%;
}
.da-slider-fb  .da-slide.da-slide-current{
    left: 0px;
}
.da-slide h2,
.da-slide p,
.da-slide .da-img{
    position: absolute;
    opacity: 0;
    left: 110%;
}
.da-slider-fb .da-slide h2,
.da-slider-fb .da-slide p{
    left: 10%;
    opacity: 1;
}
.da-slider-fb .da-slide .da-img{
    left: 400px;
    opacity: 1;
}
.da-slide h2{
    color: #fff;
    font-size: 50px;
    width: 50%;
    top: 15px;
    white-space: nowrap;
    z-index: 10;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 700;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide p{
    width: 45%;
    top: 115px;
    color: #cc9999;
    font-size: 16px;
    line-height: 26px;
    height: 80px;
    overflow: hidden;
    font-family: 'Economica', Arial, sans-serif;
    font-weight: 400;
    font-style: italic;
    z-index:99;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
}
.da-slide .da-img{
    text-align: center;
    width: 30%;
    top: 0px;
    height: 256px;
    line-height: 320px;
    left: 400pxpx; /*400px*/
    z-index:1;
}
.da-slide .da-link{
    color: #fff;
    text-decoration:none;
    transition:all 0.35s ease-in-out;
    /* Firefox 4 */
    -moz-transition:all 0.35s ease-in-out;
    /* Safari and Chrome */
    -webkit-transition:all 0.35s ease-in-out;
    /* Opera */
    -o-transition:all 0.35s ease-in-out;
}
.da-slide .da-link:hover{
    color:#ff2a2a;
    text-decoration:none;
    transition:all 0.35s ease-in-out;
    /* Firefox 4 */
    -moz-transition:all 0.35s ease-in-out;
    /* Safari and Chrome */
    -webkit-transition:all 0.35s ease-in-out;
    /* Opera */
    -o-transition:all 0.35s ease-in-out;
}
.da-dots{
    width: 100%;
    position: absolute;
    text-align: center;
    left: 0px;
    bottom: 20px;
    z-index: 2000;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-dots span{
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d41e1a;
    margin: 3px;
    cursor: pointer;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
}
.da-dots span.da-dots-current:after{
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: #5e0101;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}
.da-arrows{
    -moz-user-select: none;
    -webkit-user-select: none;
}
.da-arrows span{
    position: absolute;
    top: 50%;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background:none;
    cursor: pointer;
    z-index: 2000;
    opacity: 0;
    box-shadow: 
        1px 1px 1px rgba(0,0,0,0.1) inset, 
        1px 1px 1px rgba(255,255,255,0.1);
    -webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
    -moz-transition: opacity 0.4s ease-in-out-out 0.2s;
    -o-transition: opacity 0.4s ease-in-out-out 0.2s;
    -ms-transition: opacity 0.4s ease-in-out-out 0.2s;
    transition: opacity 0.4s ease-in-out-out 0.2s;
}
.da-slider:hover .da-arrows span{
    opacity: 1;
}
.da-arrows span:after{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background: transparent url(../images/paralax_banner/arrows.png) no-repeat top left;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.da-arrows span:hover:after{
    box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}
.da-arrows span:active:after{
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
}
.da-arrows span.da-arrows-next:after{
    background-position: top right;
}
.da-arrows span.da-arrows-prev{
    left: 15px;
}
.da-arrows span.da-arrows-next{
    right: 15px;
}

.da-slide-current h2,
.da-slide-current p{
    left: 10%;
    opacity: 1;
}
.da-slide-current .da-img{
    left: 400px;
    opacity: 1;
}
/* Animation classes and animations */

/* Slide in from the right*/
.da-slide-fromright h2{
    -webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright p{
    -webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
}
.da-slide-fromright .da-img{
    -webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    -ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
    animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
}
@-webkit-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-moz-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-o-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-ms-keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@keyframes fromRightAnim1{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim2{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim3{
    0%{ left: 110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromRightAnim4{
    0%{ left: 110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide in from the left*/
.da-slide-fromleft h2{
    -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-fromleft p{
    -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
}

.da-slide-fromleft .da-img{
    -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
    animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
}
@-webkit-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-webkit-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-moz-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-moz-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-o-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-o-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@-ms-keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@-ms-keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}

@keyframes fromLeftAnim1{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim2{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim3{
    0%{ left: -110%; opacity: 0; }
    1%{ left: 10%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}
@keyframes fromLeftAnim4{
    0%{ left: -110%; opacity: 0; }
    100%{ left: 400px; opacity: 1; }
}
/* Slide out to the right */
.da-slide-toright h2{
    -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
    animation: toRightAnim1 0.6s ease-in-out 0.6s both;
}
.da-slide-toright p{
    -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
    animation: toRightAnim2 0.6s ease-in-out 0.3s both;
}

.da-slide-toright .da-img{
    -webkit-animation: toRightAnim4 0.6s ease-in-out both;
    -moz-animation: toRightAnim4 0.6s ease-in-out both;
    -o-animation: toRightAnim4 0.6s ease-in-out both;
    -ms-animation: toRightAnim4 0.6s ease-in-out both;
    animation: toRightAnim4 0.6s ease-in-out both;
}
@-webkit-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-webkit-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-moz-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-moz-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-o-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-o-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@-ms-keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@-ms-keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}

@keyframes toRightAnim1{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim2{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim3{
    0%{ left: 10%;  opacity: 1; }
    99%{ left: 10%; opacity: 0; }
    100%{ left: 100%; opacity: 0; }
}
@keyframes toRightAnim4{
    0%{ left: 400px;  opacity: 1; }
    30%{ left: 55%;  opacity: 1; }
    100%{ left: 100%; opacity: 0; }
}
/* Slide out to the left*/
.da-slide-toleft h2{
    -webkit-animation: toLeftAnim1 0.6s ease-in-out both;
    -moz-animation: toLeftAnim1 0.6s ease-in-out both;
    -o-animation: toLeftAnim1 0.6s ease-in-out both;
    -ms-animation: toLeftAnim1 0.6s ease-in-out both;
    animation: toLeftAnim1 0.6s ease-in-out both;
}
.da-slide-toleft p{
    -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
    animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
}
.da-slide-toleft .da-img{
    -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
    animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
}
@-webkit-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-webkit-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-moz-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-moz-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-o-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-o-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@-ms-keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@-ms-keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

@keyframes toLeftAnim1{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim2{
    0%{ left: 10%;  opacity: 1; }
    30%{ left: 15%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim3{
    0%{ left: 10%;  opacity: 1; }
    100%{ left: -50%; opacity: 0; }
}
@keyframes toLeftAnim4{
    0%{ left: 400px;  opacity: 1; }
    70%{ left: 30%;  opacity: 0; }
    100%{ left: -50%; opacity: 0; }
}

et voici le 'Main.css' :

@charset "utf-8";

/* -----------------------------------------
  Main elements
----------------------------------------- */

*::-moz-selection{
background:#e50505;color:#fff
}
*::selection{
background:#e50505;color:#fff
}





html {
	background:#000;
	padding:0;
	margin:0;
}
body {
	margin:0;
	padding:0;
	width:auto;
	height:auto;
	background:url(../images/top_light.jpg) no-repeat center top;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#666;
}


.viewer iframe	{ 
width:240px; 
height:900px;
background:#FFF;
border:none;
}



img {
	border:0;
}
small {
	color:#999;
}
ul, li {
	list-style:none;
}
#main_wrapper {
	margin:0 auto;
	width:960px;
}
#footer_image {
	background:url(../images/footer_bg.png) no-repeat center bottom;
	padding-bottom:145px;
}
#main_in {
	margin:0px auto;
	width:960px;
	background:url(../images/wrapper_loop.jpg) repeat top left;
	-moz-box-shadow: 0px 0px 5px #000;
	-webkit-box-shadow: 0px 0px 5px #000;
	box-shadow: 0px 0px 5px #000;
}
.top_shadow {
	width:960px;
	height:7px;
	background:url(../images/top_shadow_loop.png) repeat-x top left;
	margin-top:15px;
}
.bottom_shadow {
	width:960px;
	height:12px;
	background:url(../images/bottom_shadow.png) no-repeat top left;
	margin:0px 0px 0px 0px;
	position: relative;
	right: -1px;
}
.clear {
	clear:both;
	height:0px;
	width:0px;
}
.read_more, .more_news {
	height:12px;
	display:block;
	background-image: -webkit-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -moz-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -ms-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -o-linear-gradient(top, #421b1b, #1e1f21);
	background-image: linear-gradient(top, #421b1b, #1e1f21);
	border: 1px solid #482d2d;
	border-radius: 5px;
	-webkit-box-shadow:0 1px 3px #000;
	box-shadow:0 1px 3px #000;
	color: #fff;
	font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
	padding: 8px 0 10px 0;
	text-align: center;
	text-decoration:none;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
	font-size:10px;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
.read_more:hover, .more_news:hover {
	background-image: -webkit-linear-gradient(top, #333, #421b1b);
	background-image: -moz-linear-gradient(top, #333, #421b1b);
	background-image: -ms-linear-gradient(top, #333, #421b1b);
	background-image: -o-linear-gradient(top, #333, #421b1b);
	background-image: linear-gradient(top, #333, #421b1b);
	cursor: pointer;
	color:#b51c1c;
	text-decoration:none;
	border-color:#482d2d;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
.read_more2 {
	display:block;
	background-image: -webkit-linear-gradient(top, #ff5429, #ff1d1c);
	background-image: -moz-linear-gradient(top, #ff5429, #ff1d1c);
	background-image: -ms-linear-gradient(top, #ff5429, #ff1d1c);
	background-image: -o-linear-gradient(top, #ff5429, #ff1d1c);
	background-image: linear-gradient(top, #ff5429, #ff1d1c);
	border: 1px solid #c8271f;
	border-radius: 5px;
	-webkit-box-shadow:0 1px 3px #000;
	box-shadow:0 1px 3px #000;
	color: #f1f1f1;
	font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
	padding: 10px 0 10px 0;
	text-align: center;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.25);
	font-size:12px;
	text-decoration:none;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
.read_more2:hover {
	background-image: -webkit-linear-gradient(top, #ff1d1c, #ff5429);
	background-image: -moz-linear-gradient(top, #ff1d1c, #ff5429);
	background-image: -ms-linear-gradient(top, #ff1d1c, #ff5429);
	background-image: -o-linear-gradient(top, #ff1d1c, #ff5429);
	background-image: linear-gradient(top, #ff1d1c, #ff5429);
	cursor: pointer;
	color:#fff;
	text-decoration:none;
	border-color:#c8271f;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
.header a {
	color:#fff;
	text-decoration:none;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
}
.header a:hover {
	color:#ff6000;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
}
/* Forms */

textarea, input {
	color: #666;
	padding: 8px;
	border: solid 1px #E5E5E5;
	background: url(../images/textfield.png) 0 0 repeat-x white;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	width:245px;
}
textarea:focus, input:focus {
	outline:none;
}
textarea:hover, input:hover, textarea:active, input:active {
	border:1px solid #ff2a2a;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
}
textarea {
	background: url(../images/textarea.png) 0 0 repeat-x white;
	height:152px;
}
label {
	display:block;
	margin:10px 0px 5px 0px;
}
/* colours */

span.light_blue {
	color:#ff2a2a;
}
span.cyan {
	color:#ff2a2a;
}
span.blue {
	color:#ff6000;
}
/* -----------------------------------------
  Header
----------------------------------------- */
#logo {
	margin:0px auto;
	height:225px;
	width:960px;
	text-align:center;
}
#logo img {
	margin-top:70px;
	border:0;
}
#social_ctn {
	margin:60px 0px 0px 400px;
	width:161px;
	height:27px;
}
#social_ctn a {
	display:block;
	float:left;
	height:27px;
}
#social_ctn img {
	margin-top:0 !important;
}
#social_ctn a:hover {
	background-position:0px -27px;
}
#facebook {
	width:57px;
	background:url(../images/facebook.png) top left no-repeat;
}

#rss{
	width:38px;
	margin:0px 3px 0px 3px;  
	background:url(../images/rss.jpg) top left no-repeat;
}
#twitter {
	width:58px;
	background:url(../images/twitter2.png) top left no-repeat;
}

/* -----------------------------------------
  Menu
----------------------------------------- */
#menu_wrapper{
	height:66px;
	width:960px;
}

#menu_left, #menu_right{
	width:2px;
	height:66px;
	float:left;
}

#menu_left{
	background:url(../images/menu_left.jpg) top left no-repeat;
}

#menu_right{
	background:url(../images/menu_left.jpg) top left no-repeat;
}

ul#menu{
	height:66px;
	width:956px;
	float:left;
	background:url(../images/menu_loop.jpg) top left repeat-x;
	padding:0;
	margin:0;
	list-style:none;
}

ul#menu li{
	float:left;
	height:66px;
	padding:0px 2px 0px 0px;
	background:url(../images/menu_divider.jpg) top right no-repeat;
	
}

ul#menu li a{
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	font-weight:700;
	font-size:14px;
	text-transform:uppercase;
	display:block;
	height:46px;
	color:#fff;
	padding:20px 20px 0px 20px;
	text-decoration:none;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	background:url(../images/menu_hover.png) top left repeat-x;
}

ul#menu li a:hover{
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	text-decoration:none;
	color:#ccc;
	background-position:0px -66px;
}

/* -----------------------------------------
  Hot news
----------------------------------------- */

#hot_news{
	width:956px;
	background:url(../images/hot_news_bg.jpg) center top repeat-x #181818;
	margin:0px 0px 0px 1px;
	border:1px solid #461C0E;
	border-bottom:0px;
	position:relative;
}

#hot_news .header{
	padding:10px 20px 0px 20px;
	height:55px;
}

#hot_news h1{
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica,  Arial, sans-serif;
	color:#fff;
	display:block;
	width:885px;
	float:left;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	border-bottom:1px solid #3c2623;
	padding:7px 0px 10px 25px;
	background:url(../images/hbullet.png) left top no-repeat;
	margin:0px 0px 0px 0px;
}

#hot_news h1 span{
	
	color:#ff2a2a;
}


/* ***** Boxes ***** */

.caroufredsel_wrapper{
	height:250px !important;
	margin-left:47px !important;
	width:865px !important;
	margin-bottom:10px !important;
	
}

ul#hot_news_box{
	list-style:none;
	padding:0x 0px 0px  0px;
	height:250px !important;
	
}

#hot_news #prev, #hot_news #next{
	width:21px;
	height:33px;
	display:block;
	position:absolute;
}

#hot_news #prev{
	background:url(../images/left.png) no-repeat top left;
	top:170px;
	left:15px;
}

#hot_news #next{
	background:url(../images/right.png) no-repeat top left;
	top:170px;
	right:15px;
}

#hot_news #prev:hover{
	background-position: 0px -33px;
}

#hot_news #next:hover{
	background-position: 0px -33px;
}

ul#hot_news_box li{
	width:255px;
	height:202px;
	background:url(../images/hn_box_bg.png) repeat-x top left #1f1f1f;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	float:left;
	margin:0px 15px 0px 5px;
	padding:10px 0px 0px 15px;
	border:1px solid #431a1a;
	-webkit-box-shadow:  0px 2px 5px 2px rgba(0, 0, 0, 75);  
    box-shadow:  0px 2px 5px 2px rgba(0, 0, 0, 75);
}

ul#hot_news_box li h2{
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica,  Arial, sans-serif;
	color:#ff2a2a;
	display:block;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	padding:0px 0px 10px 0px;
	margin:0px 0px 0px 0px;

}

ul#hot_news_box li h2 a{
	color:#ff2a2a;
	text-decoration:none;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}

ul#hot_news_box li h2 a:hover{
	
	color:#fff;
	text-decoration:none;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}

ul#hot_news_box li .image{
	width:75px;
	height:150px;
	border:3px solid #4c2222;
	background-color:#1f1f1f;
	-webkit-box-shadow:  0px 2px 3px 1px rgba(0, 0, 0, 75);  
    box-shadow:  0px 2px 3px 1px rgba(0, 0, 0, 75);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	float:left;
	overflow:hidden;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}

ul#hot_news_box li .image:hover{
	border:3px solid #ff6000;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}

ul#hot_news_box li .image img{
	height:150px;
	border:0;
}

ul#hot_news_box li .content{
	width:155px;
	height:155px;
	float:left;
	margin-left:10px;
}

ul#hot_news_box li .content p{
	line-height:15px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px;
	color:#cc9999;
}

ul#hot_news_box li .info{
	width:155px;
	height:35px;
	margin:10px 0px 0px 0px;
}

ul#hot_news_box li a.comments{
	float:left;
	width:70px;
	height:24px;
	display:block;
	font-size:10px;
	padding:8px 5px 0px 0px;
	color:#ff2a2a;
	text-decoration:underline;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}

ul#hot_news_box li a.comments:hover{
	color:#fff;
	text-decoration:underline;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}

ul#hot_news_box li a.read_more{
	float:left;
	width:78px;
}



/* -----------------------------------------
  Main news wrapper
----------------------------------------- */

#main_news_wrapper{
	width:958px;
	margin:0px 0px 0px 1px;
	background:url(../images/rwrapper_loop.png) repeat-y top right;
	border-right:1px solid #333;
	position:relative;
}

/* -----------------------------------------
  Left wrapper
----------------------------------------- */

#left_wrapper{
	width:625px;
	border-top:1px solid #461C0E;
	background:url(../images/lwrapper_loop.png) repeat-y top left;
	position:relative;
	-moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.75);
	box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

#left_wrapper .header, #full_page_wrapper .header{
	padding:10px 0px 0px 20px;
	height:45px;
	border-bottom:1px solid #3c2623;
}

#left_wrapper h2, #full_page_wrapper h2{
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica,  Arial, sans-serif;
	color:#fff;
	display:block;
	width:580px;
	float:left;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	padding:7px 0px 10px 25px;
	background:url(../images/hbullet.png) left top no-repeat;
	margin:0px 0px 0px 0px;
	position:relative;
}

#left_wrapper h2 span, #full_page_wrapper h2 span{
	color:#ff2a2a;
}


a.more_news{
	width:80px;
	float:right;
	text-transform:none;
	position:absolute;
	top:0px;
	right:10px;
}

/* General news */

ul#general_news{
	list-style:none;
	padding:10px 0px 0px 10px;
	width:605px;
	margin:0px 0px 0px 0px;
}

ul#general_news li{
	width:600px;
	background:#fff;
	border:3px solid #461c0e;
	border-radius: 10px;
	height:290px;
	margin:0px 0px 30px 0px;
	-webkit-box-shadow:  0px 2px 5px 2px rgba(0, 0, 0, 0.5);  
    box-shadow:  0px 2px 5px 2px rgba(0, 0, 0, 0.5);
	position:relative;
}

ul#general_news li .image{
	margin:15px 0px 0px 15px;
	width:210px;
	height:234px;
	border:3px solid #bb510a;
	background-color:#1f1f1f;
	-webkit-box-shadow:  0px 2px 3px 1px rgba(0, 0, 0, 75);  
    box-shadow:  0px 2px 3px 1px rgba(0, 0, 0, 75);
	-webkit-border-radius: 5px;
	border-radius: 5px;
	float:left;
	overflow:hidden;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}
ul#general_news li .image:hover{
	border:3px solid #ff6000;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}

ul#general_news li .image img{
	height:240px;
	border:0;
}



ul#general_news li .info{
	width:345px;
	height:290px;
	float:left;
	margin-left:20px;
	position:relative;
}


ul#general_news li .info h2{
	text-shadow:none;
	font-family:'Oswald', Helvetica,  Arial, sans-serif;
	background:none;
	display:block;
	height:20px;
	width:290px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	padding:15px 0px 10px 0px;
	margin:0px 0px 0px 0px;
	float:left;

}

ul#general_news li .info h2 a{
	color:#ff2a2a;
	text-decoration:none;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}

ul#general_news li .info h2 a:hover{
	color:#ff6000;
	text-decoration:none;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}

ul#general_news li .info .date_n_author{
	height:20px;
	width:330px;
	float:left;
	font-size:10px;
	color:#999999;
	border-bottom:1px solid #e0e0e0;
}

ul#general_news li .info p{
	display:block;
	float:left;
	width:330px;
	color:#666;
	line-height:18px;
}

ul#general_news li .info .comments{
	width:26px;
	height:32px;
	background:url(../images/comment_bg.png) top left no-repeat;
	position:absolute;
	top:12px;
	right:10px;
	color:#fff;
	font-family:'Oswald', Helvetica,  Arial, sans-serif;
	font-weight:700;
	padding:5px 0px 0px 13px;
}

ul#general_news li .info a.read_more2{
	width:96px;
	height:14px;
	position:absolute;
	bottom:15px; 
	right:10px;
}


ul#general_news li ul.social_share{
	list-style:none;
	width:130px;
	position:absolute;
	bottom:-14px;
	left:23px;
	height:37px;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}

ul#general_news li ul.social_share li{
	float:left;
	height:37px;
	width:43px;
	border:0px;
	background:none;
	box-shadow:none;
}

ul#pager{
	list-style:none;
	float:right;
	margin: 0px 10px 30px 0px;
}

ul#pager li{
	width:29px;
	margin:0px 5px 0px 2px;
	float:left;
}


ul#pager li a{
	width:29px;
	height:22px;
	display:block;
	background-image: -webkit-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -moz-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -ms-linear-gradient(top, #421b1b, #1e1f21);
	background-image: -o-linear-gradient(top, #421b1b, #1e1f21);
	background-image: linear-gradient(top, #421b1b, #1e1f21);
	border: 1px solid #452f2f;
	border-radius: 5px;
	-webkit-box-shadow:0 1px 3px #000;
	box-shadow:0 1px 3px #000;
	color: #ff2a2a;
	font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif;
	padding: 8px 0px 0px 0px;
	text-align: center;
	text-decoration:none;
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
	font-size:14px;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}

ul#pager li a:hover {
	background-image: -webkit-linear-gradient(top, #1e1f21, #421b1b);
	background-image: -moz-linear-gradient(top, #1e1f21, #421b1b);
	background-image: -ms-linear-gradient(top, #1e1f21, #421b1b);
	background-image: -o-linear-gradient(top, #1e1f21, #421b1b);
	background-image: linear-gradient(top, #1e1f21, #421b1b);
	cursor: pointer;
	color:#b51c1c;
	text-decoration:none;
	border-color:#482d2d;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}

ul#pager li a.active{
	background-image: none;
	background-color:#421B1B;
	box-shadow:inset 0 1px 3px #000;
	border:none;
	color:#cccccc;
	width:31px;
	height:23px;
	padding-top:9px;
}

/* -----------------------------------------
  Right wrapper
----------------------------------------- */

#right_wrapper{
	border-top:1px solid #461C0E;
	width:332px;
}


/* Search */

#search{
	width:330px;
	height:80px;
}

#search input[type="text"]{
	height:35px;
	width:240px;
	font-size:10px;
	padding:0px 0px 0px 10px;
	border-radius: 5px;
	margin:20px 0px 0px 20px;
	color:#cccccc;
	border:1px solid #1c1c1d;
	-webkit-box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b;
    box-shadow: inset 0px 2px 2px 1px rgba(0, 0, 0, 0.75), 0px 1px 0px 0px #2b2b2b;

	background-image: -webkit-linear-gradient(left, #281716, #171717);
	background-image: -moz-linear-gradient(left, #281716, #171717);
	background-image: -ms-linear-gradient(left, #281716, #171717);
	background-image: -o-linear-gradient(left, #281716, #171717);
	background-image: linear-gradient(left, #281716, #171717);
}






#search input[type="button"]{
	background:url(../images/search.jpg) top left no-repeat;
	cursor:pointer;
	border:none;	
	width:23px;
	height:25px;
	margin:0px 0px 0px 15px;
	padding:10px;
	transition:none;
	-moz-transition:none;
	-webkit-transition:none;
	-o-transition:none;
}

#search input[type="button"]:hover {
 background-position:0px -25px;
}
/* Top games  (and some categories elements) */

#top_games, #categories, .normal {
	background:url(../images/right_h_bg.png) top left no-repeat;
	width:330px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica, Arial, sans-serif;
	color:#fff;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	padding:0px 0px 0px 0px;
	margin:0px 0px 10px 1px;
	float:left;
}
#right_wrapper .header {
	padding:9px 0px 10px 20px;
}
#right_wrapper .footer {
	width:331px;
	height:16px;
	background:url(../images/footer.png) top left repeat-x;
	float:left;
}
#top_games ul {
	list-style:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#top_games ul li {
	float:left;
	width:330px;
	height:76px;
	background:url(../images/top_games_bg.jpg) top left no-repeat;
	margin:0px 0px 0px 0px;
	padding: 5px 0px 0px 5px;
}
#top_games ul li:hover {
	background-position: 0px -81px;
}
#top_games ul li .img {
	overflow:hidden;
	width:52px;
	height:52px;
	float:left;
	background:#1f1f1f;
	border:1px solid #bb3500;
	-webkit-box-shadow:  0px 0px 3px rgba(51, 51, 51, 1);
	box-shadow:  0px 0px 3px rgba(51, 51, 51, 1);
	margin:10px 0px 0px 7px;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}
#top_games ul li .img:hover {
	border:1px solid #fff;
	transition:border 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:border 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:border 0.35s ease-in-out;
	/* Opera */
	-o-transition:border 0.35s ease-in-out;
}
#top_games ul li .img a {
	display:block;
	overflow:hidden;
	width:52px;
	height:52px;
}
#top_games ul li .img img {
	height:52px;
}
#top_games ul li .info {
	width:255px;
	height:51px;
	float:left;
	margin:10px 0px 0px 10px;
}
#top_games ul li .info a {
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:none;
	text-decoration:none;
	font-size:12px;
	font-weight:normal;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}
#top_games ul li .info a:hover {
	color:#ff2a2a;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}
#top_games ul li .info small {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	text-transform:none;
	text-decoration:none;
	font-weight:normal;
	color:#999999;
}
#top_games ul li .info img {
	margin:10px 0px 0px 0px;
}
.normal .body {
	padding:15px 15px 15px 15px;
	width:300px;
	overflow:hidden;
	background:#f1f1f1;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#999;
	text-transform:none;
	font-weight:normal;
}
/* Adverts */

#right_wrapper .advert {
	width:315px;
	float:left;
	margin:10px 0px 25px 15px;
}
#right_wrapper .advert .top, #right_wrapper .advert .bottom {
	float:left;
	width:304px;
	height:17px;
}
#right_wrapper .advert .top {
	background:url(../images/top_rad.jpg) top left no-repeat;
}
#right_wrapper .advert .bottom {
	background:url(../images/bottom_rad.jpg) top left no-repeat;
}
#right_wrapper .advert .middle {
	width:284px;
	background:url(../images/loop_rad.jpg) top left repeat-y;
	float:left;
	padding: 0px 0px 0px 20px;
}
/* Categories */

#categories ul {
	list-style:none;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#categories ul li {
	float:left;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
}
#categories ul li a {
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	color:#f1f1f1;
	font-weight:normal;
	text-transform:none;
	text-decoration:none;
	display:block;
	width:311px;
	height:26px;
	padding:10px 0px 0px 20px;
	background:url(../images/categories_bg.jpg) top left no-repeat;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}
#categories ul li a:hover {
	background-position: 0px -36px;
	color:#ff2a2a;
	transition:color 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:color 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:color 0.35s ease-in-out;
	/* Opera */
	-o-transition:color 0.35s ease-in-out;
}
/* -----------------------------------------
  Main advert
----------------------------------------- */

.main_advert {
	width:754px;
	margin:0px auto 0px auto;
	padding:20px 0px 20px 0px;
}
.main_advert .top, .main_advert .bottom {
	width:754px;
	height:11px;
}
.main_advert .top {
	background:url(../images/top_mad.png) top left no-repeat;
}
.main_advert .bottom {
	background:url(../images/bottom_mad.png) top left no-repeat;
}
.main_advert .middle {
	width:754px;
	background:url(../images/loop_mad.png) top left repeat-y;
	padding: 0px 0px 0px 20px;
}
/* -----------------------------------------
  Footer
----------------------------------------- */

#footer {
	width:960px;
	border-top:1px solid #bf2a2a;
	background:url(../images/box_text_bg.png) top left repeat-x #050505;
	margin:30px 0px 0px 0px;
}
.divider_footer {
	width:1px;
	height:289px;
	float:left;
	background:url(../images/light_divider_footer.png) top center no-repeat #000;
	padding:0px 1px 0px 1px;
}
/* About */

#footer #about {
	width:329px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica, Arial, sans-serif;
	color:#fff;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	float:left;
}
#footer .header {
	padding:9px 0px 10px 15px;
}
#footer .body {
	padding:20px 10px 10px 20px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	height:220px;
	color:#999;
	text-transform:none;
	font-weight:normal;
}
#footer .body p {
	margin-top:0;
}
#footer .footer {
	width:331px;
	height:13px;
	background:url(../images/footer.png) top left repeat-x;
	float:left;
}
/* Latest Media */

#footer #latest_media {
	width:628px;
	text-shadow: 0px 2px 3px rgba(0, 0, 0, 1);
	font-family:'Oswald', Helvetica, Arial, sans-serif;
	color:#fff;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	padding:0px 0px 0px 0px;
	margin:0px 0px 0px 0px;
	float:left;
}
#footer #latest_media .header {
	padding:9px 0px 10px 15px;
}
ul#l_media_list {
	list-style:none;
	padding:0;
	margin:0;
}
ul#l_media_list li {
	margin:0px 5px 5px 0px;
	float:left;
	width:98px;
	height:94px;
	background:url(../images/media_bg.png) top left no-repeat;
	padding:8px;
}
ul#l_media_list li a {
	display:block;
	overflow:hidden;
	width:94px;
	height:86px;
}
ul#l_media_list li img {
	height:86px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
ul#l_media_list li img:hover {
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
#footer #latest_media .footer {
	width:628px;
	height:13px;
	background:url(../images/footer.png) top left repeat-x;
	float:left;
}
#twitter_last {
	background:url(../images/twitter_bg.png) top left no-repeat;
	width:960px;
	height:66px;
}
#twitter_last a#tr_left {
	display:block;
	height:30px;
	width:38px;
	background:url(../images/twitter_icon.png) top left no-repeat;
	float:left;
	margin:15px 0px 0px 20px;
}
#twitter_last a#tr_left:hover {
	background-position:0px -30px;
}
#twitter_last #tr_right {
	float:left;
	height:41px;
	width:850px;
	overflow:hidden;
	color:#854e4e;
	padding: 20px 0px 0px 45px;
}
#tw {
	width:850px;
	position: relative;
	list-style-type: none;
	top: -75px; /* allows a tweet to be moved into hidden space before scrolling into view */
	margin: 0px;
	padding: 0px;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
}
#tw a {
	color:#ff2a2a;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
	font-style:italic;
	font-weight:bold;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
#tw a:hover {
	color:#fff;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
.tweetImage {
	float: left;
	padding-right: 16px;
}
.tweet {
	height: 75px;
}
a#cop_text {
	float:left;
	margin:15px 0px 0px 15px;
	color:#ff6000;
	text-decoration:none;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}
a#cop_text:hover {
	margin:15px 0px 0px 20px;
	color:#fff;
	text-decoration:none;
	transition:all 0.35s ease-in-out;
	/* Firefox 4 */
	-moz-transition:all 0.35s ease-in-out;
	/* Safari and Chrome */
	-webkit-transition:all 0.35s ease-in-out;
	/* Opera */
	-o-transition:all 0.35s ease-in-out;
}

Sinon si c'est trop compliqué, quelqu'un veut bien m'aider à en ajouter un ? 
Merci & bonne année !

Salut,

Je te conseille deux choses :

1) Passer ton code au validateur W3C (https://validator.w3.org/#validate_by_uri) pour corriger toutes tes erreurs de mark-up.

2) Vérifier si tu charges bien ta lib jQuery, daprès ton code elle devrait être à l'adresse http://quebecdominion.cluster1.easy-hebergement.net/code.jquery.com/jquery-latest.js mais rien à faire ça tourne dans le vide. Je suis prêt à parier que ce fichier ne se charge pas correctement, ce qui expliquerait toutes les erreurs du type "$ is not defined" sur ta page.

Je ne comprend rien de ce que tu expliques malheureusement. Je n'ai aucune idée de ce qu'est jQuery.

Je suis prêt à rémunérer celui qui répare le slider ou en fait fonctionner un