#torrentstream-button:before {
	content: "";
	position: absolute;
	display: inline-block;
	z-index: -1;
	border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius:100px;
	width: 150px;
	height: 150px;
	margin: -25px 0 0 -25px;
	
	background: hsla(0,0%,0%,.05); /* fallback */
	background: -webkit-gradient(radial, center top, 150, center top, 0, from(hsla(0,0%,100%,.5)), to(hsla(0,0%,50%,.1)));	
	background: -moz-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background:   -o-radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
	background: 	 radial-gradient(50% 0 180deg, circle farthest-side, hsla(0,0%,50%,.05), hsla(0,0%,100%,.4) );
}
#torrentstream-button {
	position: relative;
	display: inline-block;
	padding: 2px;
	border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius:100px;
	width: 100px;
	height: 100px;
	
	background-color: #3399CC;
	
	-webkit-box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
	   -moz-box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
		 -o-box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
			box-shadow: rgba(255,255,255,.8) 0 2px 3px, rgba(0,0,0,.5) 0 -1px 2px;
}




/* button */

#torrentstream-button .button {	
	position: absolute;
	display: inline-block;
	border: none;
	border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius:50px;
	width: 100px;
	height: 100px;
	
	cursor: pointer;
	
	background: #f0f0f0;
	/*
	background: hsla(0,0%,50%,1); 
	background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.65)));	
	background: #000 -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000   -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	background: #000 	  radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, .35) 100%);
	*/
	
	-webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
	   -moz-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
		 -o-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
			box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
	
	-webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);	
	   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);	
		 -o-transition: 	 -o-transform .3s cubic-bezier(0,.5,.5,1), 	 	-o-border-radius .2s cubic-bezier(0,.5,0,1);	
			transition: 		transform .3s cubic-bezier(0,.5,.5,1), 		   border-radius .2s cubic-bezier(0,.5,0,1);
}


#torrentstream-button .button:active, #torrentstream-button.play .button {
	-webkit-transform:  scale(.5);
	   -moz-transform:  scale(.5);
		 -o-transform:  scale(.5);
			transform:  scale(.5);
	
	background: #f0f0f0;
	/*
	background: hsla(0,0%,40%,1);
	background: #000 -webkit-gradient(radial, center top, 200, center top, 20, from(hsla(0,0%,100%,0)), to(hsla(0,0%,100%,.48)));	
	background: #000 -moz-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000   -o-radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	background: #000 	  radial-gradient(50% 0 180deg, circle farthest-side, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, .28) 100%);
	*/
	
	-webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
	   -moz-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
		 -o-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
			box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 4px 4px 1px;	
	
	-webkit-transition: -webkit-transform .2s cubic-bezier(0,.5,0,1), -webkit-border-radius 1s cubic-bezier(0,.5,0,1);
	   -moz-transition:    -moz-transform .2s cubic-bezier(0,.5,0,1),    -moz-border-radius 1s cubic-bezier(0,.5,0,1);
		 -o-transition: 	 -o-transform .2s cubic-bezier(0,.5,0,1), 	   -o-border-radius 1s cubic-bezier(0,.5,0,1);
			transition: 		transform .2s cubic-bezier(0,.5,0,1), 		  border-radius 1s cubic-bezier(0,.5,0,1);
}


#torrentstream-button .button:active, #torrentstream-button.play .button:active {
	-webkit-transform:  scale(.5);	
	   -moz-transform:  scale(.5);	
		 -o-transform:  scale(.5);	
			transform:  scale(.5);	
}
#torrentstream-button.play .button {
	border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius:30px;
	
	-webkit-transform:  scale(.54);
	   -moz-transform:  scale(.54);
		 -o-transform:  scale(.54);
			transform:  scale(.54);	
}

/* icon */

#torrentstream-button .button .icon {
	position: absolute;
	display: inline-block;
	top: 0;
	width: 100px;
	height: 100px;
}
#torrentstream-button .button .icon.play {
	background: url(../img/controls.png) no-repeat 0 0;
	
	-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
	   -moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		 -o-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
			transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
}
#torrentstream-button .hover .icon.play{
	background-position: -100px 0;
}
#torrentstream-button.play .button .play {
	opacity: 0;
	
	-webkit-transition: none;
	   -moz-transition: none;
		 -o-transition: none;
			transition: none;
}

#torrentstream-button .button .icon.pause {
	opacity: 0;	
	background: url(../img/controls.png) no-repeat 0 -100px;
}
#torrentstream-button .button .icon.pause:hover {
	background-position: -100px -100px;
}
#torrentstream-button.play .button .pause {
	opacity: 1;
	
	-webkit-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
	   -moz-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
		 -o-transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
			transition: opacity 1s cubic-bezier(.5,.5,.5,1);	
}


/* buffer */
/*
#torrentstream-button .buffer {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: url(../img/buffer.png) no-repeat;
}
#torrentstream-button .buffer.loaded {
	opacity: 0;
	-webkit-transition: opacity .5s;
	   -moz-transition: opacity .5s;	
		 -o-transition: opacity .5s;	
			transition: opacity .5s;
}*/

/* progress */

#torrentstream-button .progress {
	display: block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: url(../img/progress.png) no-repeat;
	opacity: .85;
}



/* circle */

#torrentstream-button .circle {
	display: block;
	position: absolute;
	width: 98px;
	height: 98px;
	margin: 1px;
	border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius:50px;
	
	background: url(../img/circle-still.png); /* fallback */
	background: url(../img/circle.png) no-repeat, -webkit-gradient(radial, center center, 35, center center, 15, from(hsla(200,100%,0%,0)), to(hsla(200,100%,0%,1)));
	background: url(../img/circle-still.png) no-repeat, -moz-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
	background: url(../img/circle-still.png) no-repeat,   -o-radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
	background: url(../img/circle-still.png) no-repeat, 	  radial-gradient(50% 50%, hsla(200,100%,0%,1), hsla(200,100%,0%,1), hsla(200,100%,0%,0) 50%);
		
	background-color: #3399CC;
	
	-webkit-box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
	   -moz-box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
		 -o-box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
			box-shadow: inset rgba(0,0,0,.5) 0 0 5px 3px;
	
	-webkit-transform:  scale(.7) rotate(-180deg);
	   -moz-transform:  scale(.7) rotate(-180deg);
		 -o-transform:  scale(.7) rotate(-180deg);
			transform:  scale(.7) rotate(-180deg);
	
	-webkit-transition: all .5s ease-in;	
	   -moz-transition: all .5s ease-in;	
		 -o-transition: all .5s ease-in;	
			transition: all .5s ease-in;	
}


#torrentstream-button.play .circle {
	background-color: hsl(200,100%,60%);	
	
	-webkit-transform: scale(1) rotate(0deg);
	   -moz-transform: scale(1) rotate(0deg);
		 -o-transform: scale(1) rotate(0deg);
			transform: scale(1) rotate(0deg);
	
	-webkit-transition: -webkit-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
	   -moz-transition:    -moz-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
		 -o-transition: 	 -o-transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
			transition: 		transform 1s cubic-bezier(0,.5,0,1), background-color .6s linear;
	
	-webkit-animation: rotate 20s linear infinite 1s;	
}


/* Record rotation only in webkit. Yes, could be done in JS, but I prefer CSS and it's not a showstopper, just visual. */
#torrentstream-button.play .circle.rotate {
	-webkit-animation: rotate 20s linear infinite;	
}
/*
@-webkit-keyframes rotate {
	from { -webkit-transform: rotate(   0deg); } 
	  to { -webkit-transform: rotate(360deg); }
}
*/