svg.d4 {
  border: 1px solid rgb(234,234,234);
  background-color: rgb(240,240,240);
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  font-size:11px;
  -webkit-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  -webkit-box-shadow: 0px 0px 2px 0.5px rgb(222,222,222);
  box-shadow: 0px 0px 2px 0.5px rgb(222,222,222);

  background: #ffffff; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ3JSIgc3RvcC1jb2xvcj0iI2Y2ZjZmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-8 */
}
.d4 .brush .extent {
    fill : rgba(0,0,0,0.2);
}
.d4 .tick text {
    font-size: 9px;
    fill: #999;
    shape-rendering: crispEdges;
}

.d4 .axis .domain, .d4 .axis .tick line {
  fill: none;
  stroke: #999;
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.d4 .line, .d4 path, .d4 .connectors line {
    fill: none;
    stroke: #222;
    stroke-width: 1px;
}

.d4 .zeroLine line {
    stroke-width:1px;
    stroke: #555;
}

/*
  Specific Examples
*/
#punchcard circle {
  stroke-width: 0;
  fill: #444;
}
#punchcard circle:hover {
  stroke-width: 0;
  fill: #4183c4;
}

#grid .d4 .grid.border rect {
    fill: none;
    stroke: #aaa;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

#grid .d4 .grid line {
    fill:none;
    stroke: #aaa;
    stroke-width: 1px;
    stroke-dasharray :3, 4;
    shape-rendering: crispEdges;
}

#scatter .d4 circle.series0 {
    fill: #CD202C;
    fill-opacity: 0.6;
    stroke: #CD202C;
    stroke-width: 1px;
}

#pie .fill {
    fill-opacity: 0.5;
}
#pie .series0.fill {
    fill:#FF0000;
}
#pie .series1.fill {
    fill:#EC0012;
}
#pie .series2.fill {
    fill:#DA0024;
}
#pie .series3.fill {
    fill:#C80036;
}
#pie .series4.fill {
    fill:#B60048;
}
#pie .series5.fill {
    fill:#A3005B;
}
#pie .series6.fill {
    fill:#91006D;
}
#pie .series7.fill {
    fill:#7F007F;
}
#pie .series8.fill {
    fill:#6D0091;
}
#pie .series9.fill {
    fill:#5B00A3;
}
#pie .series10.fill {
    fill:#4800B6;
}
#pie .series11.fill {
    fill:#3600C8;
}
#pie .series12.fill {
    fill:#2400DA;
}
#pie .series13.fill {
    fill:#1200EC;
}
#pie .series14.fill {
    fill:#0000FF;
}

#items .item0.fill {
    fill: #CD202C;
}

#items .item1.fill {
    fill: #D4BA00;
}

#items .item2.fill {
    fill: #A2AD00;
}

#items .item3.fill {
    fill: #E37222;
}

#series .series0 .fill {
    fill: #CD202C;
}

#series .series1 .fill {
    fill: #D4BA00;
}

#series .series2 .fill {
    fill: #A2AD00;
}

#series .series3 .fill {
    fill: #E37222;
}
#series .series4 .fill {
    fill: #AD005B;
}

#series-item .series0 .item0.fill {
    fill: #CD202C;
}

#series-item .series0 .item1.fill {
    fill: #D95760;
}

#series-item .series0 .item2.fill {
    fill: #E68F95;
}

#series-item .series1 .item0.fill {
    fill: #D4BA00;
}

#series-item .series1 .item1.fill {
    fill: #DECB3F;
}

#series-item .series1 .item2.fill {
    fill: #E9DC7F;
}

#series-item .series2 .item0.fill {
    fill: #A2AD00;
}

#series-item .series2 .item1.fill {
    fill: #B9C13F;
}

#series-item .series2 .item2.fill {
    fill: #D0D67F;
}

#series-item .series3 .item0.fill {
    fill: #E37222;
}

#series-item .series3 .item1.fill {
    fill: #EA9559;
}

#series-item .series3 .item2.fill {
    fill: #F1B890;
}

#series-item .series4 .item0.fill {
    fill: #AD005B;
}

#series-item .series4 .item1.fill {
    fill: #C13F84;
}

#series-item .series4 .item2.fill {
    fill: #D67FAD;
}

.d4 .negative.fill, #waterfall  .d4 .negative.fill {
    fill: #CD202C;
}

.d4 .positive.fill, #waterfall .d4 .positive.fill {
    fill: #002960;
}

#waterfall .d4 .subtotal.fill {
    fill: #0065BD;
}

#stacked_column .d4 .series0 .fill, #stacked_column .average {
    fill: #CD202C;
    background-color: #CD202C;
}

#stacked_column .d4 .series1 .fill, #stacked_column .gina {
    fill: #AD005B;
    background-color: #AD005B;
}

#stacked_column .d4 .series2 .fill, #stacked_column .bob {
    fill: #66307C;
    background-color: #66307C;
}

#stacked_row .d4 .series0 .fill, #stacked_row .average {
    fill: #D4BA00;
    background-color: #D4BA00;
}

#stacked_row .d4 .series1 .fill, #stacked_row .gina {
    fill: #A2AD00;
    background-color: #A2AD00;
}

#stacked_row .d4 .series2 .fill, #stacked_row .bob {
    fill: #E37222;
    background-color: #E37222;
}

#brushable circle {
  -webkit-transition: fill-opacity 250ms linear !important;
}
#brushable .d4.selecting circle {
    fill-opacity: 0.2;
}
#brushable .d4.selecting circle.selected {
    stroke: #f00;
}

#ordinal_brush path {
  -webkit-transition: fill-opacity 250ms linear;
}

#ordinal_brush .selecting path {
  fill-opacity: .2;
}

#ordinal_brush .selecting path.selected {
  stroke: #f00;
  stroke-width: 2px;
}

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

#ordinal_brush .brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

#multi_scatter .d4 .grid.border rect {
    fill: none;
    stroke: #aaa;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

#multi_scatter .d4 .grid line {
    fill:none;
    stroke: #aaa;
    stroke-width: 1px;
    stroke-dasharray :3, 4;
    shape-rendering: crispEdges;
}

#multi_scatter .d4 .series0, #multi_scatter .d4 .series0 circle {
    fill: darkred;
    fill-opacity: 0.6;
    stroke: darkred;
    stroke-width: 1px;
}

#multi_scatter .d4 .series1, #multi_scatter .d4 .series1 circle {
    fill: darkslategrey;
    fill-opacity: 0.6;
    stroke: darkslategrey;
    stroke-width: 2px;
}
#multi_scale .y.axis, #multi_scale .lineSeries path {
    fill: none;
    stroke: #cc0000;
    stroke-width: 1px;
}

#multi_scale .z.axis {
    fill: none;
    stroke: #002960;
    stroke-width: 1px;
}

#line_and_dot .d4 .series0 circle {
    fill: darkred;
    fill-opacity: 0.6;
    stroke: darkred;
    stroke-width: 1px;
}
.dataPoint {
    fill:none;
}
.hatch {
    stroke: #fff !important;
    pointer-events: none;
}
#line_and_dot .d4 .series0 path, #time_series .d4 .series0 path,  #time_series .lineSeriesLabels text.series0, #time_series .lineSeriesLabels .dataPoint.series0 {
    stroke: darkred;
}
#time_series .d4 .series1 path,  #time_series .lineSeriesLabels text.series1, #time_series .lineSeriesLabels .dataPoint.series1 {
    stroke: green;
}
#time_series .d4 .series2 path,  #time_series .lineSeriesLabels text.series2, #time_series .lineSeriesLabels .dataPoint.series2 {
    stroke: blue;
}
#time_series .d4 .series3 path,  #time_series .lineSeriesLabels text.series3, #time_series .lineSeriesLabels .dataPoint.series3 {
    stroke: purple;
}
#time_series .d4 .series4 path,  #time_series .lineSeriesLabels text.series4, #time_series .lineSeriesLabels .dataPoint.series4 {
    stroke: orange;
}
#time_series .d4 .series5 path,  #time_series .lineSeriesLabels text.series5, #time_series .lineSeriesLabels .dataPoint.series5 {
    stroke: yellow;
}


#line_and_dot .d4 .series1 circle {
    fill: darkslategrey;
    fill-opacity: 0.6;
    stroke: darkslategrey;
    stroke-width: 2px;
}

#line_and_dot .d4 .series1 path {
    stroke: darkslategrey;
}

#line_and_dot .d4 .series2 circle {
    fill: steelblue;
    fill-opacity: 0.6;
    stroke: steelblue;
    stroke-width: 2px;
}

#line_and_dot .d4 .series2 path {
    stroke: steelblue;
}

#dynamic_updates .d4 rect {
    fill: steelblue;
    stroke: white;
}

#arrow marker path {
    fill: darkred;
    stroke: darkred;
}
#arrow .arrow line {
    stroke: darkred;
    stroke-width: 5px;
}

#force #example{
    width: 960px;
    height:500px;
}
#force #example circle {
    fill: white;
    stroke: black;
}
#force #example .selected {
    fill: darkred;
    fill-opacity: 0.6;
}