@import url('normalize.css');
@import url('demo.css');

#chart-container {
        width: 1000px;
        margin: 0 auto 50px auto;
        background: rgba(255,255,255,0.5);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
        padding: 20px 30px;
}

#chart-container h2 {
        color: #444;
        margin: 0 0 10px;
        font-weight: 300;
        padding: 10px;
        text-shadow: 0 1px 1px rgba(255,255,255,0.8);
        font-size: 24px;
}

#chart-container_twovar {
        width: 1000px;
        margin: 0 auto 50px auto;
        background: rgba(255,255,255,0.5);
        box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
        padding: 20px 30px;
}

#chart-container_twovar h2 {
        color: #444;
        margin: 0 0 10px;
        font-weight: 300;
        padding: 10px;
        text-shadow: 0 1px 1px rgba(255,255,255,0.8);
        font-size: 24px;
}


svg {
        font-family: 'Lato', Arial, serif;
        font-size: 10px;
        font-weight: 700;
        text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

text.country-title {
        font-size: 20px;
}

text.instructions {
        font-size: 16px;
        font-family: 'Lato', Aral, serif;
        font-weight:400;
}

g.context g.brush rect.background {
        fill: rgba(0,0,0,.1);
}

g.context g.axis path {
        stroke-opacity: 0;
}

g.context g.axis line {
        stroke-opacity: .1;
}

g.france path.chart {
        fill: rgba(127,201,127,0.5);
}

g.germany path.chart {
        fill: rgba(127,201,174,0.5);
}

g.japan path.chart {
        fill: rgba(127,183,201,0.5);
}

g.uk path.chart {
        fill: rgba(127,130,201,0.5);
}

g.usa path.chart {
        fill: rgba(171,127,201,0.5);
}

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

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

g.context rect.background{
        fill: rgb(200,200,255);
        visibility: visible !important;
}​