﻿#horloge{
    height: 200px;
    margin: 50px 40px;
    position: relative;
    width: 200px;
    /*border: 10px solid #5a0d84;*/
    border-radius: 50%;
    /*background: url("image9-2.png") no-repeat scroll center center transparent;*/
    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;
}
#seconde{
    left: 99px;
    top: 12px;
    height: 90px;
    border: 2px solid rgba(203,  0,  0,0.8);
    -webkit-animation: tour 60s steps(60, end) infinite;
    -webkit-transform-origin: 50% 87px;
    -o-animation: tour 60s steps(60, end) infinite;
    -o-transform-origin: 50% 87px;
    animation: tour 60s steps(60, end) infinite;
    transform-origin: 50% 87px;
}
#minute{
    left: 98px;
    top: 27px;
    height: 75px;
    border: 4px solid rgba(166,  0,  0,0.8);
    -webkit-animation: tour 3600s steps(60, end) infinite;
    -webkit-transform-origin: 50% 72px;
    -o-animation: tour 3600s steps(60, end) infinite;
    -o-transform-origin: 50% 72px;
    animation: tour 3600s steps(60, end) infinite;
    transform-origin: 50% 72px;
}
#heure{
    left: 97px;
    top: 50px;
    height: 50px;
    border: 6px solid rgba(123,  0,  0,0.8);
    -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;
}
#centre{
    left: 100px;
top: 100px;
border: 0px solid rgba(48, 48, 48, 1);
}
.rond, .sep{
    position: absolute;
    border-radius: 50%;
}
.sep{
    height: 10px;
    width: 10px;
    text-align: center;
    line-height: 10px;
    top: 98px;
    left: 98px;
    color: #cb0000;
	font-weight:bold;
}
.sep:after{
    content: '•';
}
#h0{
    -webkit-transform: translate(0px, -95px);
    -o-transform: translate(0px, -95px);
    transform: translate(0px, -95px);
}
#h1{
    -webkit-transform: rotate(30deg) translate(0px, -95px);
    -o-transform: rotate(30deg) translate(0px, -95px);
    transform: rotate(30deg) translate(0px, -95px);
}
#h2{
    -webkit-transform: rotate(60deg) translate(0px, -95px);
    -o-transform: rotate(60deg) translate(0px, -95px);
    transform: rotate(60deg) translate(0px, -95px);
}
#h3{
    -webkit-transform: rotate(90deg) translate(0px, -95px);
    -o-transform: rotate(90deg) translate(0px, -95px);
    transform: rotate(90deg) translate(0px, -95px);
}
#h4{
    -webkit-transform: rotate(120deg) translate(0px, -95px);
    -o-transform: rotate(120deg) translate(0px, -95px);
    transform: rotate(120deg) translate(0px, -95px);
}
#h5{
    -webkit-transform: rotate(150deg) translate(0px, -95px);
    -o-transform: rotate(150deg) translate(0px, -95px);
    transform: rotate(150deg) translate(0px, -95px);
}
#h6{
    -webkit-transform: rotate(180deg) translate(0px, -190px);
    -o-transform: rotate(180deg) translate(0px, -190px);
    transform: rotate(180deg) translate(0px, -95px);
}
#h7{
    -webkit-transform: rotate(210deg) translate(0px, -95px);
    -o-transform: rotate(210deg) translate(0px, -95px);
    transform: rotate(210deg) translate(0px, -95px);
}
#h8{
    -webkit-transform: rotate(240deg) translate(0px, -95px);
    -o-transform: rotate(240deg) translate(0px, -95px);
    transform: rotate(240deg) translate(0px, -95px);
}
#h9{
    -webkit-transform: rotate(270deg) translate(0px, -95px);
    -o-transform: rotate(270deg) translate(0px, -95px);
    transform: rotate(270deg) translate(0px, -95px);
}
#h10{
    -webkit-transform: rotate(300deg) translate(0px, -95px);
    -o-transform: rotate(300deg) translate(0px, -95px);
    transform: rotate(300deg) translate(0px, -95px);
}
#h11{
    -webkit-transform: rotate(330deg) translate(0px, -95px);
    -o-transform: rotate(330deg) translate(0px, -95px);
    transform: rotate(330deg) translate(0px, -95px);
}
@-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);
    }
}