/*
	My super-groovy 3D fly-out download box..

	I use a generic-ish parcel, and throw 3D-skewed icons over it.
	On hover, they expand up to larger sized icons, covering the entire box,
	front and center. The effect is slick, makes you wanna click.

	(c) 2013->tomorrow! ~ corz.org ;o)

	This stylesheet is freely released under the creative commons license:
	<http://creativecommons.org/licenses/by-nc-sa/1.0/>
*/

.download-box {
	width: 12.8rem;
	height: 10.3rem;
	display: block;
	margin: auto;
	background: url("/img/corz-cardboard-download-box.png") no-repeat scroll center;
	background-size: 100%;
}
.download-box .box-logo {
	transition: all .33s ease-out 0s;
	position: relative;
	display: block;
	width: 4.8rem;
	height: 4.8rem;
	left: 7.8rem;
	top: 3.6rem;
	color: #ffffff;
	font-size: 2.2rem; /* for text-based logos, e.g.. 404 */
	/* this creates a tiny inset border - looks neat, like embossing - the colors are based on parcel brown */
	box-shadow: .1rem .1rem .1rem .01rem #f5f5ef,  -.1rem -.1rem .1rem .01rem #6d7043;
	-webkit-transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
	transform: perspective(20rem) rotateY(40deg) skew(0,-4.5deg);
	/* we set an invisible border so it appears (and grows) with the transformation */
	border: 0 solid #F5A90A;
	-khtml-opacity: 0.75;
	opacity: 0.75;
}

/*	hover *anywhere* to light up the box contents, and much more..
	using this selector syntax, we can name the containing div whatever we like, more protable */
a:hover > .download-box > .box-logo {
	transition: all .33s ease-out 0s;
	background-color: #ffffff;
	border-radius: .6rem;
	color: #F5A90A;
	box-shadow: none;
	border: .3rem solid #F5A90A;
	/*	instead of scale, we could simply set dims and use different translate values, but then we
	would also have to set text sizes and such. This scales *whatever* is in there, uniformly.	*/
    -webkit-transform: perspective(0) scale(2.5,2.5) translateX(-1.6rem) translateY(-.6rem);
    transform: perspective(10000rem) scale(2.5,2.5) translateX(-1.6rem) translateY(-.6rem);
	-khtml-opacity: 1;
	opacity: 1;
}

/*	sometimes the containing div is #download, sometimes it's #section-Download, this covers both.
	it will also cause text-based logos to glow at full scale ;o) */
[id$=ownload] a:hover, [id^=download] a:hover {
	text-decoration: none;
	text-shadow: 0 0 1rem #ffffff;
	color: #F5A90A;
}