Javascript-форум - Стрелка на часах

Здравствуйте,
Есть часы, написаты на Хтмл и ЦСС.
Но стрелка стартует сверху.
Хочу переделать,так чтоб стрелка стартовала не сверху, а снизу.
Спасибо.Думаю поможете.
З.Ы.выложу часть кода(без общего дизайна,кнопок стоп и старт, ну и прочего ненужного):

.clock
{
    background: #fff;
    border-radius: 100%;
    box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 6px #000;
    height: 280px;
    left: 10px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    width: 280px;
}
.clock::before
{
    background: #fff;
    border: 1px solid #777;
    border-radius: 100%;
    content: "";
    height: 270px;
    left: 4px;
    position: absolute;
    top: 3px;
    width: 270px;
    z-index: 10;
}
.line
{
    width: 1px;
    height: 100%;
    background: #777;
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -1px;
}
.line::before
{
    width: 1px;
    height: 100%;
    background: #777;
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -1px;
    -o-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    content: "";
}
.one
{
    -o-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
}
.three
{
    -o-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
}
.five
{
    background: transparent;
}
.five::before, .five::after
{
    content: "0";
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 16px;
    background: #fff;
    color: #777;
    top: 8px;
    left: -9px;
    z-index: 11;
    display: block;
    position: absolute;
    -p-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    -moz-transform: none;
}
.five::after
{
    content: "90";
    top: auto;
    bottom: 8px;
}
.arrow
{
   -o-animation-delay: 0;   
   -o-animation-iteration-count: infinite;
   -o-animation-timing-function: linear;
   -o-animation-duration: 60s;
   -ms-animation-delay: 0;   
   -ms-animation-iteration-count: infinite;
   -ms-animation-timing-function: linear;
   -ms-animation-duration: 600s;
   -webkit-animation-delay: 0;   
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -webkit-animation-duration: 60s;
   -moz-animation-delay: 0;   
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
   -moz-animation-duration: 60s;
   width: 20px;
   height: 20px;
   border-radius: 100%;
   left: 50%;
   top: 50%;
   margin: -10px;
   background:#666;
   position: absolute;
   z-index: 12;
}
.arrow::before
{
    height: 162px;
    position: absolute;
    width: 2px;
    left: 50%;
    margin-left: -1px;
    bottom: -20px;
    background: #666;
    content: "";
}
.arrow::after
{
    content: "";
    border: 4px solid;
    border-color: transparent transparent #666;
    position: absolute;
    margin-left:-4px;
    left: 50%;
    top: -130px;
}