/*For general setting*/
body {
    font-family: Helvetica, arial, freesans, clean, sans-serif;
    width: 1200px;
    margin: auto;
    background-color: #ffffff;
}
.bottomstroke {border-bottom:1px solid #e5e4e1;}
h1{
    color: #1cabe2;
}
h3{
    color: #f6911d;
}
h5,p,h2{
    color: #767678;
}
.container {
    width: 1255px;
}

#graphic {
    padding-top: 60px;
}
#sections {
    position: relative;
    display: inline-block;
    width: 250px;
    top: 0px;
    z-index: 90;
    padding-bottom: 20px;
}
.step {
    margin-bottom: 350px;
    font-size: 16px;
    line-height: 23px;
    color: #767678;
}
#sections .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px;
    color: #f6911d;
    line-height: 1.2em;
}
#extra-space {
    height: 600px;
}
#page_header {
    position: relative;
    z-index: 2;
    width: 85.4%;
    margin: 0 auto;
}

#vis {
    display: none;
    position: fixed;
    float: right;
    top: 60px;
    z-index: 1;
    margin-left: 0;
    font-size: 10px;
    padding-left: 40px;
    cursor: pointer;
}
#lineForThree,#scatter,#area {
    display: none;
    position: fixed;
    float: right;
    top: 60px;
    z-index: 1;
    margin-left: 0;
    font-size: 10px;
    padding-left: 40px;
}
.tooltipForArea{
    position: absolute;
    font-size: 12px;
    z-index: 1000;
}
.axis path,
.axis line {
    fill: none;
    stroke: #ccc;
    stroke-width: 1px;
}

path.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1px;
    stroke-opacity: 80%;
}
.axis text {
    font-size: 11px;
    line-height: 1em;
}
.line.normal {
    stroke: gray;

}

.line.unfocused{
    stroke-opacity: 10%;
}

.countries path.focused {

    fill: orange;

}

.overlay {
    fill: none;
    pointer-events: all;
}

.countries{
    stroke: #fff;
    stroke-linejoin: round;
}
.subhead {
    margin-top: 10px;
}
.tooltipForMap{
    position: absolute;
    background-color:white;
    z-index: 1000;
}
p {
    font-size: 14px;
    margin: 10px 0 0 0;
}
.chart {
    min-height: 200;
    min-width: 600;
}

#lineForThree a {
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    cursor: pointer;
    margin-right: 3px;
}
#button1{
    background: rgb(31, 119, 180);
}
#button2{
    background: rgb(255, 127, 14);
}
#button3{
    background: rgb(44, 160, 44);
}
.toolTipForThree{
    position: absolute;
    font-size: 12px;
    z-index: 10;
}
#Series1s,#Series2s,#Series3s{
    cursor: pointer;
}
.tooltipForScatter{
    position: absolute;
    z-index: 10;
}
.tooltipForScatter p {
    background-color: white;
    border: gray 1px solid;
    padding: 2px;
}
.tooltipForArea p {
    background-color: white;
    border: gray 1px solid;
    padding: 2px;
}
.toolTipForThree p {
    background-color: white;
    border: gray 1px solid;
    padding: 2px;
}
text{
    font-size: 15px;
}
.special{
    cursor: pointer;
}
#ending{
    text-align: center;
}
.author{
    text-align: end;
}