/*
    Animated CSS 'Help Video'.

    This sheet produces a neat animation designed to show your users
    where to click an item. The pointer is drawn and animated purely
    in CSS. We also lay some descriptive text over the image, again,
    in CSS.

    (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/>
*/


#about-box {
    position: relative;
    width: 281px; /* dimensions of background 'about box' image */
    height: 139px;
    background: url("/windows/software/checksum/img/checksum-about-box.png") no-repeat scroll center;
    background-size: 281px;
    box-shadow: 1rem 1rem 0.9rem -0.85rem rgba(0,0,0,.33); /* window 3D shadow effect */
}


/*
    Although technically not visible yet, we separate out the dimensions into
    their own declaration to prevent some browsers (invisbly~~) setting them to
    0,0, causing the animation to fly out from the top-left corner. Same for
    .nw-arrow{}, below.
*/
.logo-click {
    position: absolute;
    width: 5rem; /* position the generated box over the logo.. */
    height: 5rem;
    left: 1.9rem;
    top: 4rem;
}

#about-box:hover > .logo-click {
    transition: all 500ms ease-out 0s;
    font-family: 'Lucida Console', Consolas, 'Courier New', ProFontWindows, monospace;
    text-align: center; /* generated text on hover (below) */
    font-size: 1.3rem;
    color: #261c02;
    box-shadow: 0 0 .9rem #F5A90A; /* blur effect */
    border: solid .2rem #F5A90A;
    border-radius: .1rem;
    background-color: rgba(245,169,10,0.33); /* semi-transparent */
}

/* custom text that appears over the logo */
#about-box:hover > .logo-click::after {
    content: "Click Here!";
    /* you can't put transitions on generated CSS 'content'
       but you can on the parent element - that will do for now */
}


.nw-arrow {
    position: absolute;
    width: 0;
    height: 0;
    left: 4rem;
    top: 7.5rem;
}

/* use skewed border properties to produce an 'arrow'
   and then animate it into position  */
#about-box:hover > .nw-arrow {
    transition: all 500ms ease-out 0s;
    border-style: solid;
    border-width: 1.8rem .65rem 0 2.4rem;
    border-color: white transparent transparent transparent;
    /* along with the mad dimensions, only one 'edge' is visible, which is
       the 'trick'if you make others black, you can see what's happening */
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotateZ(40deg);
    transform: rotate(40deg);
}