isolate class styling to the svg container

[timelyportfolio]

I'm not sure it this is intended or unintended, but the styles added through classDef will apply to all diagrams on a page that contains multiple diagrams. If we consider the example,

<div class = 'mermaid'>
graph TD;
     classDef exClass opacity:0.5 !important;
     a-->b;
     class a exClass;
</div>
<div>
graph TD;
     a-->b;
     class a exClass;
</div>

If this is unintended, and isolating the class styles to only the diagram in which they are part of the spec, I think we can change this line from

                embeddedStyles += '.' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';

to

                embeddedStyles += svg.id + ' .' + className + ' { ' + classes[className].styles.join("; ") + '; }\n';            

Thanks again for such a great project.

[knsv]

Thats for your feedback. I think you have a good point. Perhaps the order of styles should be something like this:

1. Use default styles hardcoded in mermaid - when no styles whatsoever are defined default style f
2. Use default styles from css (node) - when defined and no other styles are in place
3. Use diagram default styles - when defined and no other styles are in place
4. Use node specific classes when defined

(Higher number higher precedence)
@bjowes, what do you think?

[bjowes]

Agreed. I will include a fix for this in my work on #58.

[knsv]

This has been included in release 0.3.3