/**
 *  @fileoverview  CSS3 SpeedMeter
 *  @author        Tohl SMALLFIELD
 */
html,body,div,p{
    margin: 0; padding: 0;
}
body{
    overflow: hidden;
    background-color: #000;
    font-family: myriad, helvetica, verdana, sans-serif;
}

/*------------------------------------------------
    #meter
------------------------------------------------*/
div#meter{
    position: absolute;
    top: 32px; left: 32px;
    width: 401px; height: 401px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#555), color-stop(.1, #333), color-stop(.7, #000), to(#000));
    background-image: -moz-linear-gradient(top, #555, #333, #000, #000);
    -webkit-border-radius: 999px;
    -moz-border-radius:    999px;
    border-radius:         999px;
    overflow: hidden;
    counter-reset: speed -390;
}
div#meter:before{
    position: absolute;
    top: 5px; left: 5px;
    display: block;
    content: "";
    width: 391px; height: 391px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#004), color-stop(.7, #000), to(#000));
    background-image: -moz-linear-gradient(top, #004, #000, #000);
    -webkit-border-radius: 999px;
    -moz-border-radius:    999px;
    border-radius:         999px;
}
div#meter:after{
    position: absolute;
    display: block;
    content: "";
    top: 181px; left: 181px;
    width: 40px; height: 40px;
    background-color: #000;
    -webkit-border-radius: 999px;
    -moz-border-radius:    999px;
    border-radius:         999px;
}


/*----- 数字＆目盛 -----*/
#measures{
    position: absolute;
    top: 0; left: 6px; right: 0; bottom: 0;
    -webkit-transform: rotate(-30deg);
    -moz-transform:    rotate(-30deg);
    transform:         rotate(-30deg);
}
p{
    position: absolute;
    top: 199px;
    width: 389px; height: 2px;
    counter-increment: speed 30;
}
p:nth-of-type(1) { -webkit-transform: rotate(  0deg); -moz-transform: rotate(  0deg); }
p:nth-of-type(2) { -webkit-transform: rotate( 10deg); -moz-transform: rotate( 10deg); }
p:nth-of-type(3) { -webkit-transform: rotate( 20deg); -moz-transform: rotate( 20deg); }
p:nth-of-type(4) { -webkit-transform: rotate( 30deg); -moz-transform: rotate( 30deg); }
p:nth-of-type(5) { -webkit-transform: rotate( 40deg); -moz-transform: rotate( 40deg); }
p:nth-of-type(6) { -webkit-transform: rotate( 50deg); -moz-transform: rotate( 50deg); }
p:nth-of-type(7) { -webkit-transform: rotate( 60deg); -moz-transform: rotate( 60deg); }
p:nth-of-type(8) { -webkit-transform: rotate( 70deg); -moz-transform: rotate( 70deg); }
p:nth-of-type(9) { -webkit-transform: rotate( 80deg); -moz-transform: rotate( 80deg); }
p:nth-of-type(10){ -webkit-transform: rotate( 90deg); -moz-transform: rotate( 90deg); }
p:nth-of-type(11){ -webkit-transform: rotate(100deg); -moz-transform: rotate(100deg); }
p:nth-of-type(12){ -webkit-transform: rotate(110deg); -moz-transform: rotate(110deg); }
p:nth-of-type(13){ -webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); }
p:nth-of-type(14){ -webkit-transform: rotate(130deg); -moz-transform: rotate(130deg); }
p:nth-of-type(15){ -webkit-transform: rotate(140deg); -moz-transform: rotate(140deg); }
p:nth-of-type(16){ -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); }
p:nth-of-type(17){ -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); }
p:nth-of-type(18){ -webkit-transform: rotate(170deg); -moz-transform: rotate(170deg); }
p:nth-of-type(19){ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); }
p:nth-of-type(20){ -webkit-transform: rotate(190deg); -moz-transform: rotate(190deg); }
p:nth-of-type(21){ -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); }
p:nth-of-type(22){ -webkit-transform: rotate(210deg); -moz-transform: rotate(210deg); }
p:nth-of-type(23){ -webkit-transform: rotate(220deg); -moz-transform: rotate(220deg); }
p:nth-of-type(24){ -webkit-transform: rotate(230deg); -moz-transform: rotate(230deg); }
p:nth-of-type(25){ -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); }

/*----- 数字 -----*/
p:nth-of-type(2n+1):before{
    position: absolute;
    display: block;
    line-height: 1;
    top: -0.5em; left: 15px;
    width: 3em;
    content: counter(speed);
    color: #ccc;
    font-weight: bold;
    font-size: 110%;
    text-align: center;
    text-shadow: 0 0 1px #ccc;
}
p:nth-of-type( 1):before{ -webkit-transform: rotate(  30deg); -moz-transform: rotate(  30deg); }
p:nth-of-type( 2):before{ -webkit-transform: rotate(  20deg); -moz-transform: rotate(  20deg); }
p:nth-of-type( 3):before{ -webkit-transform: rotate(  10deg); -moz-transform: rotate(  10deg); }
p:nth-of-type( 4):before{ -webkit-transform: rotate(   0deg); -moz-transform: rotate(   0deg); }
p:nth-of-type( 5):before{ -webkit-transform: rotate( -10deg); -moz-transform: rotate( -10deg); }
p:nth-of-type( 6):before{ -webkit-transform: rotate( -20deg); -moz-transform: rotate( -20deg); }
p:nth-of-type( 7):before{ -webkit-transform: rotate( -30deg); -moz-transform: rotate( -30deg); }
p:nth-of-type( 8):before{ -webkit-transform: rotate( -40deg); -moz-transform: rotate( -40deg); }
p:nth-of-type( 9):before{ -webkit-transform: rotate( -50deg); -moz-transform: rotate( -50deg); }
p:nth-of-type(10):before{ -webkit-transform: rotate( -60deg); -moz-transform: rotate( -60deg); }
p:nth-of-type(11):before{ -webkit-transform: rotate( -70deg); -moz-transform: rotate( -70deg); }
p:nth-of-type(12):before{ -webkit-transform: rotate( -80deg); -moz-transform: rotate( -80deg); }
p:nth-of-type(13):before{ -webkit-transform: rotate( -90deg); -moz-transform: rotate( -90deg); }
p:nth-of-type(14):before{ -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); }
p:nth-of-type(15):before{ -webkit-transform: rotate(-110deg); -moz-transform: rotate(-110deg); }
p:nth-of-type(16):before{ -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); }
p:nth-of-type(17):before{ -webkit-transform: rotate(-130deg); -moz-transform: rotate(-130deg); }
p:nth-of-type(18):before{ -webkit-transform: rotate(-140deg); -moz-transform: rotate(-140deg); }
p:nth-of-type(19):before{ -webkit-transform: rotate(-150deg); -moz-transform: rotate(-150deg); }
p:nth-of-type(20):before{ -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); }
p:nth-of-type(21):before{ -webkit-transform: rotate(-170deg); -moz-transform: rotate(-170deg); }
p:nth-of-type(22):before{ -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); }
p:nth-of-type(23):before{ -webkit-transform: rotate(-190deg); -moz-transform: rotate(-190deg); }
p:nth-of-type(24):before{ -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); }
p:nth-of-type(25):before{ -webkit-transform: rotate(-210deg); -moz-transform: rotate(-210deg); }

/*----- 目盛 -----*/
p:after,
p:nth-of-type(2n):after{
    position: absolute;
    display: block;
    content: "";
    background-color: #669;
    -webkit-box-shadow: 0 0 1px #669;
    -moz-box-shadow:    0 0 1px #669;
    -box-shadow:        0 0 1px #669;
}
p:after{
    width: 10px; height: 3px;
}
p:nth-of-type(2n):after{
    width: 6px; height: 1px;
}

/*-----  -----*/
h1,h2{
    position: relative;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #669;
}
h1{ margin-top: 130px; font-size:  65%; }
h2{ margin-top:   5px; font-size: 100%; }
/*------------------------------------------------
    #sensor
------------------------------------------------*/
.c{
    position: absolute;
    top: 0; bottom: 0;
    width: 15px;/* WIDTH[px] */
    height: 100%;
}
.c0  .c{ margin-left:  15px; }
.c30 .c{ margin-left: -15px; }
/*------------------------------------------------
    #needle
------------------------------------------------*/
#needle,
#needle:before{
    background-color: #f00;
}
#needle{
    position: relative;
    width: 15px; height: 15px;
    -webkit-border-radius: 99px;
    -moz-border-radius:    99px;
    border-radius:         99px;
}
#needle:before{
    display: block;
    position: absolute;
    top: -160px; left: 6px;
    width: 3px; height: 160px;
    margin: 0; padding: 0;
    content: "";
    -webkit-box-shadow: 0 0 3px #f00;
    -moz-box-shadow:    0 0 3px #f00;
    box-shadow:         0 0 3px #f00;
}
#needle:after{
    display: block;
    position: absolute;
    top: 5px; left: 5px;
    width: 5px; height: 5px;
    margin: 0; padding: 0;
    background-color: #000;
    content: "";
    -webkit-border-radius: 99px;
    -moz-border-radius:    99px;
    border-radius:         99px;
}
/*------------------------------------------------
    #motor
------------------------------------------------*/
/*----- 加速度0の場合を考えると目盛 θ[deg] 分は WIDTH[px]/(tの50%)[sec] = 30[px/sec] ???? -----*/
.n{
    width: 15px; height: 15px;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 1s;/* t[sec] */
    -webkit-animation-property: all;
    -webkit-animation-iteration-count: 1;
}
.n0{
    margin-top: 225px; margin-left: 240px;
}
/*
@-webkit-keyframes "left"{
    0% {
        -webkit-transform: rotate(10deg);
    } 49.99% {
        -webkit-transform: rotate(10deg);
    } 50% {
        -webkit-transform: rotate(0deg);
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
*/
@-webkit-keyframes "left"{
    0% {
        -webkit-transform: rotate(0deg);
    } 50% {
        -webkit-transform: rotate(10deg);/* θ[deg] */
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
@-webkit-keyframes "right"{
    0% {
        -webkit-transform: rotate(0deg);
    } 50% {
        -webkit-transform: rotate(-10deg);/* θ[deg] */
    } 100% {
        -webkit-transform: rotate(0deg);
    }
}
/*--------------|----- test -----*/
 .c0:hover  .n0, .c0.hover  .n0,
 .c1:hover  .n1, .c1.hover  .n1,
 .c2:hover  .n2, .c2.hover  .n2,
 .c3:hover  .n3, .c3.hover  .n3,
 .c4:hover  .n4, .c4.hover  .n4,
 .c5:hover  .n5, .c5.hover  .n5,
 .c6:hover  .n6, .c6.hover  .n6,
 .c7:hover  .n7, .c7.hover  .n7,
 .c8:hover  .n8, .c8.hover  .n8,
 .c9:hover  .n9, .c9.hover  .n9,
 
.c10:hover .n10, .c10.hover .n10,
.c11:hover .n11, .c11.hover .n11,
.c12:hover .n12, .c12.hover .n12,
.c13:hover .n13, .c13.hover .n13,
.c14:hover .n14, .c14.hover .n14,
.c15:hover .n15, .c15.hover .n15,
.c16:hover .n16, .c16.hover .n16,
.c17:hover .n17, .c17.hover .n17,
.c18:hover .n18, .c18.hover .n18,
.c19:hover .n19, .c19.hover .n19,

.c20:hover .n20, .c20.hover .n20,
.c21:hover .n21, .c21.hover .n21,
.c22:hover .n22, .c22.hover .n22,
.c23:hover .n23, .c23.hover .n23,
.c24:hover .n24, .c24.hover .n24,
.c25:hover .n25, .c25.hover .n25,
.c26:hover .n26, .c26.hover .n26,
.c27:hover .n27, .c27.hover .n27,
.c28:hover .n28, .c28.hover .n28,
.c29:hover .n29, .c29.hover .n29,

.c30:hover .n30, .c30.hover .n30
{
    -webkit-animation-name: left;
}

.c31:hover  .n0,
.c32:hover  .n1,
.c33:hover  .n2,
.c34:hover  .n3
.c35:hover  .n4,
.c36:hover  .n5,
.c37:hover  .n6,
.c38:hover  .n7,
.c39:hover  .n8,
.c40:hover  .n9,

.c41:hover .n10,
.c42:hover .n11,
.c43:hover .n12,
.c44:hover .n13,
.c45:hover .n14,
.c46:hover .n15,
.c47:hover .n16,
.c48:hover .n17,
.c49:hover .n18,
.c50:hover .n19,

.c51:hover .n20,
.c52:hover .n21,
.c53:hover .n22,
.c54:hover .n23,
.c55:hover .n24,
.c56:hover .n25,
.c57:hover .n26,
.c58:hover .n27,
.c59:hover .n28,
.c60:hover .n29,

.c61:hover .n30
{
    -webkit-animation-name: right;
}

/*------------------------------------------------
    for DEBUG
------------------------------------------------*/
#test{
    width: 445px;
    padding: 5px 10px;
    position: absolute;
    background-color: #f00;
    color: #fff;
}
.c.hover{
    background-color: rgba(255, 0, 0, .25);
}
.test .c{
    -webkit-box-shadow: 0 0 1px #09f inset;
    -moz-box-shadow:    0 0 1px #09f inset;
    box-shadow:         0 0 1px #09f inset;
}