A puzzle for you: Re-styling symbols using CSS

Assuming use of *CSS only* to restyle individual elements in a SVG file, how may this be achieved in a Cross-Browser way?

My current attempt is as follows, which works in Firefox (YAY FIREFOX!) but not in IE7+Adobeplugin, Opera 9.5 or Safari 3.1.2 (all under Windows XP).

I can't think of a way of achieving a green circle on the left and a red circle on the right **using only CSS restyling**.

Please help! David

---

<svg width="2000" height="260" viewBox="0 0 2000 260" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[

#id1 .colorReceiver
{
fill:green;
}

.default
{
stroke: black;
fill:red;
}

]]>
</style>

<defs>
<symbol class="default" id="StartManual">
<circle cx="25" cy="25" r="24" class="colorReceiver" />
<circle cx="25" cy="25" r="10" style="fill:black;" />
</symbol>
</defs>

<use id="id1" transform="translate(60,40)" xlink:href="#StartManual" />
<use id="id2" transform="translate(160,40)" xlink:href="#StartManual" />

</svg>