/* 
================================================================================
 * Drop Shadow
 * Dan Craft, DuckSoupSites.com
 * technique from http://PositionIsEverything.net/articles/dropshadows.html
 */

/**
 * These rules may be used to add a drop shadow to rectangular content.  The
 * shadow PNGs are from an Illustrator drop shadow effect with X and Y offsets 
 * of 7 (right and below), blur of 5, black shadow, 75% transparency.  (The 
 * narrow slices of the blur that extend left and above the content in 
 * Illustrator are omitted.)
 *
 * Adding a drop shadow involves nesting three DIVs and a content element, e.g.:
 *     <div class="Shadowed">
 *         <div class="Shadowed2">
 *             <div class="Shadowed3">
 *                 <divImgEtc class="Content Shadowed4">
 * The Shadowed DIV and the Shadowed4 ele may have additional CSS styling; the 
 * Shadowed2 and Shadowed3 DIVs should not.
 * 
 * Shadowed will shrinkwrap to the content plus drop shadow if it is floated or 
 * absolute AND the content width is specified explicitly or intrinsically (IMG,
 * IFRAME, etc.).  Otherwise, the content will inflate to any width specified 
 * explicitly for Shadowed or implicitly via an ancestor.
 *
 * Shadowing adds 18px to the right and bottom of the content.  The content
 * itself must be at least 18px square.
 *
 * Note: This technique will not work for IE6 and below, including IE5/Mac (the
 * last IE avail on Mac), which cannot support right- or bottom-positioned 
 * background PNGs, even with the MSImageLoader.  The '>' child selector, which
 * these don't understand and thus ignore, is used below to hide rules from them
 * so the object is similarly rendered but without a drop shadow.  In the case 
 * of IE/Mac, shrinkwrapping via floating or absolute works only with an 
 * explicit width for Shadowed.
 */
html>body .Shadowed { /* add TR shadow to Shadowed2 */
    background:url(../images/ShadowTR.png) top right no-repeat;
}
html>body .Shadowed2 { /* add BL shadow to Shadowed3 */
    background:url(../images/ShadowBL.png) bottom left no-repeat;
}
.Shadowed2 { /* add BL shadow to Shadowed3 */
    padding-top:18px; padding-left:18px; 
        /* child, which contains BC+BR+MR shadows, clears TR & BL shadow corners
            so those shadows do; Shadowed4 reverses this padding for the content 
            */
}
html>body .Shadowed3 { /* add BCBRMR shadow to Shadowed4 */
    background:url(../images/ShadowBCBRMR.png) bottom right no-repeat;
}
.Shadowed4 {
    position:relative;
    left:-18px; top:-18px;
}