/* 
    Created on : 30 août 2014, 23:27:55
    Author     : jade
*/

/** SLIDER  **/
@keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -101.5%; /*2ème image*/
    }
    40% {
        left: -101.5%; /*idem pour attente*/
    }
    50% {
        left: -201.92%; /*3ème image*/
    }
    65% {
        left: -201.92%; /*idem pour attente*/
    }
    75% {
        left: -302.6%; /*4ème image*/
    }
    90% {
        left: -302.6%; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}

#slideshow {
    position: relative;
    width: 61%;
    height: 350px;
    margin:  20px auto;
    overflow: hidden;
}
#sContent li {
    display: inline;
}
#sContent img {
    width:20%;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 500%;
    margin: 0;            
    padding: 10px;    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


#bloc{
    background: whitesmoke;
    position : relative;
    width : 60%;
    height : 350px;  
    margin : auto;
    margin-top : 20px;
    border-top : solid 2px #8492AD ;  
    border-bottom : solid 2px #8492AD ; 
    
}

/** critères communs aux différents blocs **/
.commun{
    padding : 1% 1% 1% 1%;   
    color: black;
    font-size: 13px;
    font-family: Arial;
    opacity : 0.7; 
       
}

.commun:hover{
    opacity : 1; 
}


.commun>img{
    border : dashed black; 
}

/**************** POSITIONNEMENT DU TITRE *************************/

#titrebloc{
    text-transform : uppercase;
    font-weight : bold;
    text-align : left;
}

#titrebloc a{
    font-weight : bold;
    color : #31538f;
}

#categoriebloc{
    text-transform : uppercase;
    font-weight : bold;
    text-align : left;
    font-size : 9px;
}

#categoriebloc a{
    font-weight : bold;
    color : #6aaaca;
}


/***************** POSITIONNEMENT DES BLOCS **************************/

#bloc1{
    position : absolute;
    left : 0%;
    margin-top : 20px;
    width : 30%;
    height : 300px; 
    
          
}

#bloc2{
    position : absolute;
    top : 0%;
    left : 33%;
    margin-top : 20px;
    width : 30%;
    height : 300px; 
    
}

#bloc3{
    position : absolute;
    top : 0%;
    left : 66%;
    margin-top : 20px;
    width : 30%;
    height : 300px;
    
       
      
}



/********* GESTION DE LA DATE *********/

[id^="datebloc"]{
   position : absolute;
   margin-top : 22px;
   margin-left : 2%;
   display : none;
   height : 15px;
   color : white;
   z-index : 1;
}


/********* GESTION DU TEXTE DE L'ARTICLE DANS LE BLOC ********/

#articlebloc{
    margin-top : 20px;
    width : 100%;
    padding-bottom : 15px;
      
}



/************ REDIMENSIONNER LA VIGNETTE******/

#vignette img{
    margin-left : 0%;
    margin-top : 20px;
    height : auto;
    max-width:100%;
       
}

@media screen and (max-width : 1225px){
   /** SLIDER  **/
    @keyframes AutoSlide {
        0% {
            left: 0px; /*1ère image*/
        }
        15% {
            left: 0px; /*idem pour attente*/
        }
        25% {
            left: -102%; /*2ème image*/
        }
        40% {
            left: -102%; /*idem pour attente*/
        }
        50% {
            left: -202.7%; /*3ème image*/
        }
        65% {
            left: -202.7%; /*idem pour attente*/
            }
        75% {
            left: -303.5%; /*4ème image*/
        }
        90% {
            left: -303.5%; /*idem pour attente*/
        }
        100% {
            left: 0px; /*1ère image*/
        }
    }
}

@media all and (max-width: 850px){
     /** SLIDER  **/
    @keyframes AutoSlide {
        0% {
            left: 0px; /*1ère image*/
        }
        15% {
            left: 0px; /*idem pour attente*/
        }
        25% {
            left: -103%; /*2ème image*/
        }
        40% {
            left: -103%; /*idem pour attente*/
        }
        50% {
            left: -204.7%; /*3ème image*/
        }
        65% {
            left: -204.7%; /*idem pour attente*/
            }
        75% {
            left: -305.5%; /*4ème image*/
        }
        90% {
            left: -305.5%; /*idem pour attente*/
        }
        100% {
            left: 0px; /*1ère image*/
        }
    }
}

@media all and (max-width: 550px){
     /** SLIDER  **/
    @keyframes AutoSlide {
        0% {
            left: 0px; /*1ère image*/
        }
        15% {
            left: 0px; /*idem pour attente*/
        }
        25% {
            left: -105%; /*2ème image*/
        }
        40% {
            left: -105%; /*idem pour attente*/
        }
        50% {
            left: -207.0%; /*3ème image*/
        }
        65% {
            left: -207.0%; /*idem pour attente*/
            }
        75% {
            left: -310.0%; /*4ème image*/
        }
        90% {
            left: -310.0%; /*idem pour attente*/
        }
        100% {
            left: 0px; /*1ère image*/
        }
    }
}