body {
    background-color: snow;
    font-family: 'Roboto', sans-serif;
}

.center {
    text-align: center;
}

.axis path,
.axis line {
    fill: none;
    padding: 5px;
    shape-rendering: crispEdges;
    stroke: black;
}

.temp_lines, .decade_lines {
    fill: none;
    stroke: lightgray;
    stroke-width: 2;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: auto;
    height: auto;
    padding: 5px;
    fill: black;
    background: whitesmoke;
    border: 1px solid lightsteelblue;
    border-radius: 8px;
    pointer-events: none;
}

div.tooltip ul {
    list-style-type: none;
    padding: 1% 0 1% 3%;
    -webkit-columns: 50px 2; /* Chrome, Safari, Opera */
    -moz-columns: 50px 2; /* Firefox */
    columns: 50px 2;
}

select {
    color: black;
}

#load {
    font-size: 4em;
}

h4 {
    font-weight: bold;
}

h4.center {
    margin-top: 25px;
}

#works li {
    display: inline;
    font-size:  1.2em;
    padding-left: 25px;
}
/* scrolling */
#sections > div{
    opacity: .3
}

#sections div.graph-scroll-active{
    opacity: 1;
}

#container{
    position: relative;
    overflow: auto;
}

#sections{
    width: 200px;
    float: left;
}

#graph{
    width: 600px;
    float: left;
    margin-left: 40px;
}

#graph.graph-scroll-fixed{
    position: fixed;
    top: 0px;
    margin-left: 240px;
}

#graph.graph-scroll-below{
    position: absolute;
    bottom: 0px;
    margin-left: 240px;
}