/*
    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! ~ cor + 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;
}