#foo p {
	/*@ transition-rule @*/
	
	background-color:#EEE;
	color:black;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	width:50%;
	
	-webkit-transition-property:background-color, color, width, padding-left, padding-right, padding-top, padding-bottom;
	-webkit-transition-duration:0.5s;
	/*-webkit-transition-delay:1s;*/
	-moz-transition-property:background-color, color, width, padding-left, padding-right, padding-top, padding-bottom;
	-moz-transition-duration:0.5s;
	transition-property:background-color, color, width, padding-left, padding-right, padding-top, padding-bottom;
	transition-duration:0.5s;
	/*transition-delay:1s;*/
}

#foo:target p {
	/*@ transition-rule @*/
	padding:10px;
	background-color:blue;
	color:white;
	width:80%;
}
#foo.bar p {
	/*@ transition-rule @*/
	padding:40px 15px;
	background-color:pink;
	color:red;
	width:70%;
}
#foo:hover p {
	/*@ transition-rule @*/
	padding:25px;
	background-color:cyan;
	color:blue;
	width:80%;
}
#foo p:hover {
	/*@ transition-rule @*/
	padding:50px;
	background-color:lime;
	color:brown;
	width:70%;
}
#foo:active p {
	/*@ transition-rule @*/
	padding:35px;
	background-color:yellow;
	color:green;
	width:40%;
}
#foo p:active {
	/*@ transition-rule @*/
	padding:35px;
	background-color:orange;
	color:purple;
	width:40%;
}


.on {
	color:green !important;
}
.disabled {
	color:gray !important;
}