*, *:after, *:before {
    box-sizing: border-box;
}


html, body {
    height: 100%;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
}
body > section {
    height: 100%;
    width: 100%;
}



#chart {
    width: 90%;
    height: 150px;
    opacity: 0.9;
    border-radius: 5px;
    border: 1px solid #2b2b2b;
}

#chart line {
    stroke: #2b2b2b;
}

#chart line.vertical-marker.now {
    stroke: #c00;
}

rect.interval.science {
    fill: rgba(51, 204, 51, 0.4);
    stroke: rgb(51, 204, 51);
}

.group-label {
    font-family: 'Roboto Slab', serif;
}

p {
    font-family: 'Open Sans Condensed';
    font-size: 14pt;
    font-weight: 300;
    line-height: 20pt;
}

.labelable {
    font-family: 'Roboto Slab', serif;
    font-size: 15pt;
    margin-bottom: 0;
    padding-bottom: 5px;
}

/* Temp Classes */

circle.sage {
    fill: #00e6ac;
    stroke: #00e6ac;
}

circle.ltblue {
    fill: #80d4ff;
    stroke: #80d4ff;
}

circle.ocean {
    fill: #006699;
    stroke:	#006699;
}

circle.dkblue{
    fill: #000099;
    stroke: #000099;    
}

circle.silver{
    fill: #cccccc;
    stroke: #cccccc;
}

circle.blue-dot {
    fill: blue;    
}

/* Event Classes */

circle.holiday {
    fill: #999999;
    stroke: #999999;
    opacity: 0.6;
}

circle.protest {
    fill: #ff66cc;
    stroke: #ff66cc;
    opacity: 0.6;
}

circle.ae {
    fill: #333333;
    stroke: #333333;
    opacity: 0.6;
}

/* Politics classes */

circle.politics {
    fill: #990033;
    stroke: #990033;
    opacity: 0.6;
}

circle.housing {
    fill: #ff5050;
    stroke: #ff5050;
    opacity: 0.6;
}

circle.order {
    fill: #800000;
    stroke: #800000;
    opacity: 0.6;
}

circle.bill {
    fill: #ff6666;
    stroke: #ff6666;
    opacity: 0.6;
}

circle.bill-h {
    fill: #ff4d4d;
    stroke: #ff4d4d;
    opacity: 0.6;
}

/* Media Classes */
circle.journalism {
    fill: #86b300;
    stroke: #86b300;
    opacity: 0.6;
}

circle.facts {
    fill: #666633;
    stroke: #666633;
    opacity: 0.6;
}

rect.interval.media {
    fill: rgba(255, 153, 0, 0.4);
    stroke: #ff9900;
}

circle.media {
    fill: #ff9900;
    stroke: #ff9900;
}

/* Override d3tip */

.d3-tip {
    background: white;
    padding: 8px;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    font-family: 'Open Sans Condensed';
    font-size: 14pt;
    font-weight: 300;
}

/* Tiny Flex Grid */

[flex] {
    display: flex;
}
[flex-fill] {
    flex: 1;
}
[flex-full-center] {
    align-items: center;
    justify-content: center;
}
[flex-direction=column] {
    flex-direction: column;
}
[flex-direction=row] {
    flex-direction: row;
}
[flex-size="40"] {
    flex: 40;
}
[flex-size="60"] {
    flex: 60;
}