#horloge{
    height: 200px;
    /*margin: 40px auto;*/ 
    position: relative;
    width: 200px;
    /*border:10px solid #3A5486;*/
    background:url(ecrinosDeux.png) no-repeat scroll center 25% #f4f4c7;
    /*box-shadow: 0 0 40px #8080A0, 0 0 50px 10px #CCCCCC inset; */
}

#horloge:before{
    /*border-radius:50% 
    box-shadow: -2px -2px 5px #000000 inset, -2px 2px 5px #000000 inset, 2px -2px 5px #000000 inset, 2px 2px 5px #000000 inset; */
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

#centre{
    position: absolute;
    left: 97px;
    top: 97px;
    border: 6px solid rgba(0,25,0,0.6);  
    border-radius: 50%;
}

#heure{
	position: absolute;
	border-radius: 50%;
    left: 97px;
    top: 50px;
    height: 50px;
    border: 4px solid rgba( 10,25,128,0.8);  
}


#minute{
	position: absolute;
	border-radius: 50%;
    left: 98px;
    top: 25px;
    height: 75px;
    border: 3px solid rgba( 20,25,150,0.8); 
}

#seconde{
	position: absolute;
	border-radius: 50%;
    left: 99px;
    top: 13px;
    height: 90px;
    border: 2px solid rgba( 255,150,180,0.8);
}
 /*************************/
 
 @-webkit-keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-o-keyframes tour{
    from{
        -o-transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
    }
}
@keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/***********************************/

#seconde{
    -webkit-animation: tour 60s steps(60, end) infinite;
    -webkit-transform-origin: 50% 88px;
    -o-animation: tour 60s steps(60, end) infinite;
    -o-transform-origin: 50% 88px;
    animation: tour 60s steps(60, end) infinite;
    transform-origin: 50% 88px;
}

#minute{
    -webkit-animation: tour 3600s steps(60, end) infinite;
    -webkit-transform-origin: 50% 73px;
    -o-animation: tour 3600s steps(60, end) infinite;
    -o-transform-origin: 50% 73px;
    animation: tour 3600s steps(60, end) infinite;
    transform-origin: 50% 73px;
}

#heure{
    -webkit-animation: tour 43200s linear infinite;
    -webkit-transform-origin: 50% 50px;
    -o-animation: tour 43200s linear infinite;
    -o-transform-origin: 50% 50px;
    animation: tour 43200s linear infinite;
    transform-origin: 50% 50px;
}



