multiple shortcodes / how to clear shortcode values?

I’m sure there is some ridiculously simple way to do this, but I’m blanking.

I have a shortcode that puts a frame around a div (it’s a custom shadow effect). It takes only one arg, the width of the div.

My problem is that if I use the shortcode in the sidebar, and also use it in the content of a page, one of the ‘width’ values overrides the other.

Here’s the code:

function shadow_box_code($atts, $content = null) {
	extract(shortcode_atts(array(
		"width" => '0em'
	), $atts));
	return '<style type="text/css">.custom .box {width:'.$width.';}</style><div class="box"><div class="topleft"><div class="topright"><div>' . do_shortcode($content) . '</div></div></div><div class="bottomleft"><div class="bottomright"></div></div></div>';
}
add_shortcode("shadowBox", "shadow_box_code");

In the sidebar, I’m calling the shortcode using:

[shadowBox width="30em"]This is the content that goes in the div and can be anything.[/shadowBox]

In the page content, I’m calling the shortcode using:

[shadowBox width="10em"]This is the content that goes in the div and can be anything.[/shadowBox]

Unfortunately both boxes show up with a width of 30em.

Any ideas on how to clear this value between instances? Thank you!!