How does one style a gRaphael pie chart legend?

Question

I have a functional pie chart in place, but I'd like to improve the styling when hovering over related pie segments. Official documentation, online searches, and the source haven't provided clues for how to affect legend entries. Does anyone have any examples of how to do this?

The pie chart currently has 8 segments. If it helps any, here is the source with the example of one pie segment and its associated legend entry:

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="0">
    <rvml:stroke class="rvml" />
    <rvml:skew class="rvml" />
    <rvml:fill class="rvml" />

<!-- raphaelid="1" through "7" have the same attributes and subelements -->

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="8">
    <!-- same subelements as first -->

<!-- raphaelid="9" through "15" have the same attributes and subelements -->

<!-- Colored bullet just before legend entry -->
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="16">
    <!-- same subelements as first -->

<!-- Legend entry -->
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="17">
    <rvml:stroke class="rvml" />
    <rvml:textpath class="rvml" style="font: 400 12px Arial, sans-serif; v-text-align: left; v-text-kern: true;" />
    <rvml:path class="rvml" />
    <rvml:skew class="rvml" />
    <rvml:fill class="rvml" />

Answer 1

I found the relevant block of code within the chart setup. The thing is I needed to work with SVG styles, which apparently use a slightly different terminology. I prefer CSS since I have more experience there. Here's the original block:

pie.hover(function () {
    this.sector.stop();
    this.sector.scale(1.1, 1.1, this.cx, this.cy);
    if (this.label) {
        this.label[0].stop();
        this.label[0].attr({ oChart: 7.5 });
        this.label[1].attr({ "font-weight": 800 });
    }
}, function () {
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    if (this.label) {
        this.label[0].animate({ oChart: 5 }, 500, "bounce");
        this.label[1].attr({ "font-weight": 400 });
    }
});

What it took was for me to alter the two this.label[1] lines to this:

this.label[1].attr({ fill: "#ff0000" }); // line 7

and

this.label[1].attr({ fill: "#ffffff" }); // line 13

This change causes no change in the typeface (an undesired occurrence in the original setup I provided above), but does allow for the font color to change so long as the user hovers over the relevant pie chart segment. From what I read there are ways to style Raphael with CSS, but I don't have the experience or time to get into this right now.

I would certainly be appreciative if someone with experience could point to a good resource that explains how to style using CSS, however, since this may be a tool I reuse later.