CSS conflicts

Hi, thanks for the plugin! I had it working well on the default theme but now that I have setup my new theme there are some styling issues.

I have uploaded the css file correctly as per the instructions (was working fine in default theme), but now when I use firebug the page the right css file is there but the code has been overwritten.

The correct css is:

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

But the css detailed in firebug is:

#pseudoCssId0:after {
    display: block !important;
}
#pseudoCssId1:after {
    display: block !important;
}
#pseudoCssId2:after {
    display: block !important;
}
#pseudoCssId3:after {
    display: block !important;
}
.x.axis path {
    display: none !important;
}

Within firebug if I select to ‘edit source’ the d3 css file all the correct css code is there, and selecting edit source then makes the css magically render on the page. So the theme must be doing something to overide the plugin css, but strangely the ‘.x.axis path’ css rule makes it through.

Any help would be greatly appreciated.

The link to the test post is:

https://wordpress.org/plugins/wp-d3/