/* 
 player specific positioning of the displayed 'frequency spectrum', etc 
 
 NOTE: the reflection and position handling is a fucking nightmare: The Chome idiots
 like to change their dumbshit implementation with almost every minor release.. each
 time breaking what had to be used before.. bunch of clueless morons! 
 (Their latest achievement: reflection suddenly disapears (border and all) AS SOON as 
 JavaScript draws to the contained canvas. Of course they are also too dumb to use 
 regular font definitions anymore.)
*/

#moz-reflect-logo {
  position: relative;
	padding: 0 10px;
  
   -webkit-box-reflect: below 10px -webkit-linear-gradient(top, transparent 10%, transparent 40%,  rgba(255,255,255,0.9));
}
#logo {
	position: relative;
	padding: 0 10px;

	top: 40px;
	left: 400px;
	z-index:2;

	-webkit-transform: translateX(-220px) translateY(100px) translateZ(300px) rotateX(-28deg) rotateY(-60deg) rotateZ(-6deg);
	-moz-transform: translateX(-240px) translateY(200px) translateZ(300px) rotateX(-28deg) rotateY(-60deg) rotateZ(-6deg);
}
#moz-reflect-logo:after {
    content: "";
    display: none;
}

/* problem: the gradient used to "fade-out" the reflection uses no transparency - and covers the background */
#moz-reflect-logo.enableMozReflection:after {
    display: block;

	background: -moz-linear-gradient(top, rgba(255,255,255,1.0), rgba(255,255,255,1.0) 30%, rgba(255,255,255,0.6) 65%, rgba(255,255,255,0.3)) -60px,
				-moz-element(#moz-reflect-logo)  -10px 0px no-repeat;
    position:relative;
    width: auto;
	height: 100px;
    margin-bottom: 0px;
    -moz-transform: scaleY(-1);
}
 
#moz-reflect-spectrum {
	position: relative;
	padding: 0 10px;
	-webkit-box-reflect: below 5px -webkit-linear-gradient(top, transparent, transparent 50%, rgba(255,255,255,0.4));
}
#spectrum {
	position: relative;	
	padding: 0 10px;

	top: 120px;
	left: 265px;
	z-index:1;

	-webkit-transform: translateX(-250px) translateY(-250px) translateZ(0px) rotateX(-40deg) rotateY(45deg);
	-moz-transform: translateX(-250px) translateY(-250px) translateZ(0px) rotateX(-40deg) rotateY(45deg);  
}

#moz-reflect-spectrum:after {
    content: "";
    display: none;
}

#moz-reflect-spectrum.enableMozReflection:after {
    display: block;
	background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.6) 65%, rgba(255,255,255,0.3)) -60px,
				-moz-element(#moz-reflect-spectrum)  -10px 15px no-repeat;
	position:relative;
	top: 0px;
    width: auto;
	height: 100px;
	margin-bottom: 0px;
	-moz-transform: scaleY(-1);
}

.drop {
  position: relative;
	width:300px;
	height:300px;
}
#drop {
	-webkit-transform: translateX(50px) translateY(130px) translateZ(0px) rotateX(10deg) rotateY(-5deg) rotateZ(8deg);
	-moz-transform: translateX(50px) translateY(0px) translateZ(0px) rotateX(10deg) rotateY(-5deg) rotateZ(8deg);
}