/*
 * TITLE: Transparent Rounded Drop Shadow
 * URI: http://nerd.ocracy.org/em/shadow/shadow.css
 * CREATED: Wed, 27 Jul 2005 18:58:42 +0200
 * MODIF: Wed, 10 May 2006 14:35:56 +0200
 * Inspired by the technique presented by Alessandro 
 * (http://web-graphics.com/mtarchive/001589.php) and the one called
 * ":befTer Drop Shadow" 
 * (http://www.hszk.bme.hu/~hj130/css/before_after/befter_dropshadow/index_nopos.html).
 * This stylesheet adds a transparent (if the shadow image has an alpha 
 * channel) drop shadow with rounded corners to the selected block elements
 * surrounded by a container <div> with class "shadow":
 *
 * <div class="shadow">
 *   <img src="foo.jpg" />
 * </div>
 *
 * KNOWN BUGS: 
 * - Mozilla 1.7 (probably other versions also) has a bug with non-floated
 *   elements: at the end of the file there is a simple workaround which
 *   you can enable as you need.
 */

/* The shadow */
div.shadow {
    float: left;
    background: url(shadow.png) no-repeat bottom right;
    margin: 9px 0 0 9px;
}

/* The top-right corner of the shadow */
div.shadow:before {
    content:"";
    background: url(shadow.png) no-repeat top right;
    margin: -9px 0 0 0;
    display:block;
    height: 9px;
}

/* The bottom-left corner of the shadow */
div.shadow:after {
    content: "";
    background: url(shadow.png) no-repeat bottom left;
    margin: -30px 0 0 -9px;
    display: block;
    width: 9px;
    height: 30px;
}

/* The item with the shadow */
div.shadow > * {
    margin:0;
    display: block;
    position: relative;
    top: -9px; 
    left: -9px;
}

/* Workaround for a bug in Mozilla 1.7 (1.7.10-1 Debian)
 *
 * For non-floated elements the div.shadow will extend to contain 
 * the whole :before rect, which has negative margins and should
 * be put instead outside it's parent. Putting a border around the 
 * div seems to fix the problem. 
 *
 * Enable the following rule if you want to use non floated content.
 */

/*
div.shadow { border: 0.1px solid transparent; }
*/