/**
 *  @charset       utf-8
 *  @modified      February 17, 2011
 *  @description   CSS3で秒数カウント
 *  @author        Tohl SMALLFIELD
 */
/*----- body -----*/
body{
    margin: 0;
    padding: 145px 55px 0 0;
    background-color: #000;
    overflow: hidden;
}

/*----- digits[sec] -----*/
div{
    position: relative;
    float: right;
    width: 100px; height: 100px;
    margin: 0; padding: 0;
    -webkit-transform: skew(-10deg) scale(.5, .45);
    -moz-transform:    skew(-10deg) scale(.5, .45);
    transform:         skew(-10deg) scale(.5, .45);
}

/*----- digits[ms] -----*/
div:nth-child(1){
    width: 55px; height: 60px;
    margin-top: 56px;
    margin-left: 15px;
    -webkit-transform: skew(-10deg) scale(.30, .27);
    -moz-transform:    skew(-10deg) scale(.30, .27);
    transform:         skew(-10deg) scale(.30, .27);
}

/*----- decimal point -----*/
div:nth-child(1):before{
    display: block;
    top: 260px;
    left: -55px;
    width: 34px; height: 31px;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    border-radius:         10px;
    content: "";
}

/*----- segments & dp -----*/
p, p:before, p:after,
div:nth-child(1):before{
    position: absolute;
    margin: 0; padding: 0;
    background-color: #f09;
}

/*----- rectangles -----*/
p{
    width: 29px; height: 100px;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

/*----- rectangles for center segments -----*/
p:nth-child(4){ height: 110px; }/* HEIGHT + 10 */

/*----- triangles -----*/
p:before, p:after{
    display: block;
    width: 29px; height: 29px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    transform:         rotate(45deg);
    content: "";
}
p:before{ top:    -15px; }/* -WIDTH / 2 */
p:after { bottom: -15px; }/* -WIDTH / 2 */

/*----- triangles for center segments -----*/
p:nth-child(4):before, p:nth-child(4):after{
    left: 4px;
    width: 20px; height: 20px;
}
p:nth-child(4):before{ top:    -10px; }
p:nth-child(4):after { bottom: -10px; }

/*----- keyframes -----
                                            
                    p2          
                                            
            p1      p3      
                                            
                    p4          
                                            
            p5      p7      
                                            
                    p6          
                                            
----------------------*/
@-webkit-keyframes p1 {
        0% { opacity: 1.0; }    9.99% { opacity: 1.0; }
     10% { opacity: 0.1; }/* 19.99% { opacity: 0.1; }
     20% { opacity: 0.1; }   29.99% { opacity: 0.1; }
     30% { opacity: 0.1; } */39.99% { opacity: 0.1; }
     40% { opacity: 1.0; }/* 49.99% { opacity: 1.0; }
     50% { opacity: 1.0; }   59.99% { opacity: 1.0; }
     60% { opacity: 1.0; }   69.99% { opacity: 1.0; }
     70% { opacity: 1.0; }   79.99% { opacity: 1.0; }
     80% { opacity: 1.0; }   89.99% { opacity: 1.0; }
     90% { opacity: 1.0; }   99.99% { opacity: 1.0; }*/
    100% { opacity: 1.0; }
} @-webkit-keyframes p2 {
        0% { opacity: 1.0; }    9.99% { opacity: 1.0; }
     10% { opacity: 0.1; }   19.99% { opacity: 0.1; }
     20% { opacity: 1.0; }/* 29.99% { opacity: 1.0; }
     30% { opacity: 1.0; } */39.99% { opacity: 1.0; }
     40% { opacity: 0.1; }   49.99% { opacity: 0.1; }
     50% { opacity: 1.0; }/* 59.99% { opacity: 1.0; }
     60% { opacity: 1.0; }   69.99% { opacity: 1.0; }
     70% { opacity: 1.0; }   79.99% { opacity: 1.0; }
     80% { opacity: 1.0; }   89.99% { opacity: 1.0; }
     90% { opacity: 1.0; }   99.99% { opacity: 1.0; }*/
    100% { opacity: 1.0; }
} @-webkit-keyframes p3 {
        0% { opacity: 1.0; }/*  9.99% { opacity: 1.0; }
     10% { opacity: 1.0; }   19.99% { opacity: 1.0; }
     20% { opacity: 1.0; }   29.99% { opacity: 1.0; }
     30% { opacity: 1.0; }   39.99% { opacity: 1.0; }
     40% { opacity: 1.0; } */49.99% { opacity: 1.0; }
     50% { opacity: 0.1; }/* 59.99% { opacity: 0.1; }
     60% { opacity: 0.1; } */69.99% { opacity: 0.1; }
     70% { opacity: 1.0; }/* 79.99% { opacity: 1.0; }
     80% { opacity: 1.0; }   89.99% { opacity: 1.0; }
     90% { opacity: 1.0; }   99.99% { opacity: 1.0; }*/
    100% { opacity: 1.0; }
} @-webkit-keyframes p4 {
        0% { opacity: 0.1; }/*  9.99% { opacity: 0.1; }
     10% { opacity: 0.1; } */19.99% { opacity: 0.1; }
     20% { opacity: 1.0; }/* 29.99% { opacity: 1.0; }
     30% { opacity: 1.0; }   39.99% { opacity: 1.0; }
     40% { opacity: 1.0; }   49.99% { opacity: 1.0; }
     50% { opacity: 1.0; }   59.99% { opacity: 1.0; }
     60% { opacity: 1.0; } */69.99% { opacity: 1.0; }
     70% { opacity: 0.1; }   79.99% { opacity: 0.1; }
     80% { opacity: 1.0; }/* 89.99% { opacity: 1.0; }
     90% { opacity: 1.0; } */99.99% { opacity: 1.0; }
    100% { opacity: 0.1; }
} @-webkit-keyframes p5 {
        0% { opacity: 1.0; }    9.99% { opacity: 1.0; }
     10% { opacity: 0.1; }   19.99% { opacity: 0.1; }
     20% { opacity: 1.0; }   29.99% { opacity: 1.0; }
     30% { opacity: 0.1; }/* 39.99% { opacity: 0.1; }
     40% { opacity: 0.1; }   49.99% { opacity: 0.1; }
     50% { opacity: 0.1; } */59.99% { opacity: 0.1; }
     60% { opacity: 1.0; }   69.99% { opacity: 1.0; }
     70% { opacity: 0.1; }   79.99% { opacity: 0.1; }
     80% { opacity: 1.0; }   89.99% { opacity: 1.0; }
     90% { opacity: 0.1; }   99.99% { opacity: 0.1; }
    100% { opacity: 1.0; }
} @-webkit-keyframes p6 {
        0% { opacity: 1.0; }    9.99% { opacity: 1.0; }
     10% { opacity: 0.1; }   19.99% { opacity: 0.1; }
     20% { opacity: 1.0; }/* 29.99% { opacity: 1.0; }
     30% { opacity: 1.0; } */39.99% { opacity: 1.0; }
     40% { opacity: 0.1; }   49.99% { opacity: 0.1; }
     50% { opacity: 1.0; }/* 59.99% { opacity: 1.0; }
     60% { opacity: 1.0; } */69.99% { opacity: 1.0; }
     70% { opacity: 0.1; }   79.99% { opacity: 0.1; }
     80% { opacity: 1.0; }/* 89.99% { opacity: 1.0; }
     90% { opacity: 1.0; }   99.99% { opacity: 1.0; }*/
    100% { opacity: 1.0; }
} @-webkit-keyframes p7 {
        0% { opacity: 1.0; }/*  9.99% { opacity: 1.0; }
     10% { opacity: 1.0; } */19.99% { opacity: 1.0; }
     20% { opacity: 0.1; }   29.99% { opacity: 0.1; }
     30% { opacity: 1.0; }/* 39.99% { opacity: 1.0; }
     40% { opacity: 1.0; }   49.99% { opacity: 1.0; }
     50% { opacity: 1.0; }   59.99% { opacity: 1.0; }
     60% { opacity: 1.0; }   69.99% { opacity: 1.0; }
     70% { opacity: 1.0; }   79.99% { opacity: 1.0; }
     80% { opacity: 1.0; }   89.99% { opacity: 1.0; }
     90% { opacity: 1.0; }   99.99% { opacity: 1.0; }*/
    100% { opacity: 1.0; }
}

/*----- duration of each digits -----*/
div:nth-child(1) p{ -webkit-animation-duration:    1s; }
div:nth-child(2) p{ -webkit-animation-duration:   10s; }
div:nth-child(3) p{ -webkit-animation-duration:  100s; }
div:nth-child(4) p{ -webkit-animation-duration: 1000s; }

/*----- position & animation of each segments -----*/
p:nth-child(1){ top:   0;   left:   0;   -webkit-animation-name: p1; }
p:nth-child(2){ top: -70px; left:  70px; -webkit-animation-name: p2; }
p:nth-child(3){ top:   0;   left: 140px; -webkit-animation-name: p3; }
p:nth-child(4){ top:  70px; left:  70px; -webkit-animation-name: p4; }
p:nth-child(5){ top: 150px; left:   0;   -webkit-animation-name: p5; }/* top: 140 + 10 */
p:nth-child(6){ top: 220px; left:  70px; -webkit-animation-name: p6; }/* top: 210 + 10 */
p:nth-child(7){ top: 150px; left: 140px; -webkit-animation-name: p7; }/* top: 140 + 10 */

/*----- rotation of horizontal segments -----*/
p:nth-child(even){
    -webkit-transform: rotate(90deg);
    -moz-transform:    rotate(90deg);
    transform:         rotate(90deg);
}

/*----- border-radius of top & leftside segments -----*/
p:nth-child(1):before, p:nth-child(1):after,
p:nth-child(2):before, p:nth-child(2):after,
p:nth-child(5):before, p:nth-child(5):after{
    left: -6px;/* -WIDTH * ( Math.sqrt(2) - 1 ) / 2 */
    -webkit-border-radius: 0 0 0 99px;
    -moz-border-radius:    0 0 0 99px;
    border-radius:         0 0 0 99px;
}

/*----- border-radius of bottom & rightside segments -----*/
p:nth-child(3):before, p:nth-child(3):after,
p:nth-child(6):before, p:nth-child(6):after,
p:nth-child(7):before, p:nth-child(7):after{
    right: -6px;/* -WIDTH * ( Math.sqrt(2) - 1 ) / 2 */
    -webkit-border-radius: 0 99px 0 0;
    -moz-border-radius:    0 99px 0 0;
    border-radius:         0 99px 0 0;
}