Make Sure That You're Using Safari or Chrome When Viewing These Demos

 a{color:#000;} a:hover{color:#f00;}

input.ourInputBox:focus{
-webkit-transition:background-color 0.5s linear; 
background:#CCC; }

a.thebg{
color:#000; 
background:#f00; 
padding:5px; 
-webkit-border-radius: 5px; 

-webkit-transition-property:color, background; 
-webkit-transition-duration: 1s, 1s; 
-webkit-transition-timing-function: linear, ease-in;
} 
a.thebg:hover{color:#f00;
background:#000;}

#signpost{
	width:60px;
	height:196px;
	position:relative;
}

#signpost #post{
	width:79px;
	height:196px;
	z-index:2;
	position:relative;
}

#signpost #sign{
	height:46px;
	width:80px;
	position:absolute;
	top:10;
	left:60;
	-webkit-transform-origin:0 0;
	-webkit-transform: rotate(86deg);
	z-index:1;
	-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
#signpost:hover #sign{
	-webkit-transform:rotate(0deg);
}

#circles{
	width:180px; 
	height:180px;
	position:relative;
}
.outercircle{
	width:180px; 
	height:180px;
	position:absolute;
	z-index:1;
	top:0: 
	left:0;
}
#circles:hover .outercircle {
	-webkit-animation-name: spin;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}	
@-webkit-keyframes spin {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(360deg);

	}
}

.middlecircle{
	width:90px; 
	height:90px;
	position:absolute;
	z-index:3;
	top:45px; 
	left:45px;
}
#circles:hover .middlecircle{
	-webkit-animation-name: spinrev;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 5s;
}	
	
	
@-webkit-keyframes spinrev {
from {
	-webkit-transform: rotate(0deg);
	}

to {
	-webkit-transform: rotate(-360deg);

	}
}