<?php
	header("Content-type: text/css");
	echo '/* UTC+4 time ' . date('H:i:s') . ' */' . "\n";

	$browser = '-webkit-';
	if ( preg_match ( '/firefox/im', $_SERVER['HTTP_USER_AGENT'] ) ){
		$browser = '-moz-';
	}
	if ( preg_match ( '/opera/im', $_SERVER['HTTP_USER_AGENT'] ) ){
		$browser = '-o-';
	}
	if ( preg_match ( '/msie/im', $_SERVER['HTTP_USER_AGENT'] ) ){
		$browser = '-ms-';
	}
	echo '/* browser prefix: ' . $browser . ' */' . "\n\n";

	$hour = date('g');
	$min = date('i');
	$sec = date('s');

	$hour = round(($hour + $min/60)*30);
	$min = round(($min + $sec/60)*6);
	$sec = $sec*6;

	$hour_to = $hour + 360;
	$min_to = $min + 360;
	$sec_to = $sec + 360;
?>
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2)
{
	<? echo $browser; ?>animation-name: arr1;
}
@<? echo $browser; ?>keyframes arr1 {
	from {<? echo $browser; ?>transform: rotate(<?echo $hour;?>deg)}
	to {<? echo $browser; ?>transform: rotate(<?echo $hour_to;?>deg)}
}

.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4)
{
	<? echo $browser; ?>animation-name: arr2;
}
@<? echo $browser; ?>keyframes arr2 {
	from {<? echo $browser; ?>transform: rotate(<?echo $min;?>deg)}
	to {<? echo $browser; ?>transform: rotate(<?echo $min_to;?>deg)}
}

.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7)
{
	<? echo $browser; ?>animation-name: arr3;
}
@<? echo $browser; ?>keyframes arr3 {
	from {<? echo $browser; ?>transform: rotate(<?echo $sec;?>deg)}
	to {<? echo $browser; ?>transform: rotate(<?echo $sec_to;?>deg)}
}