/* css reset */
a,abbr,acronym,address,applet,big,blockquote,body,caption,cite,code,dd,del,dfn,div,dl,dt,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,iframe,img,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit}:focus{outline:0}body{line-height:1;color:#000;background:#fff}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,td,th{text-align:left;font-weight:400}blockquote:after,blockquote:before,q:after,q:before{content:""}blockquote,q{quotes:"" ""}.alignleft{float:left}.alignright{float:right}.clear{clear:both}

/* css */
body{
    font-size: 14px;
}
h1{
    font-weight: bold;
    font-size: 1.5em;
}
h1, p{
    margin: 25px 0;
}
p{
    font-size: 1.1em;
    text-align: justify;
    line-height: 1.5em;
}
.content{
    width: 250px;
    margin: 0 auto;
}
#vizcontainer{
    padding: 50px 50px;
    margin: 25px auto;
    border: 1px solid #ccc;
    width: 55px;
    height: 183376px;
    position: relative;
}
.dataviz{
    width: 25px;
    float: left;
}
#flight{
    color: #F14F54;
    background-color: #F14F54;
    line-height: 1.5em;
    height: 1px;
    margin-right: 5px;
}
#trees{
    background-color: #6AA647;
    color: #6AA647;
    font-size: 1.5em;
    line-height: .8em;
    height: 183376px;
}


.message{
    position: absolute;
    right: -75px;
    width: 100px;
    padding: 10px 0;
    line-height: 1.1em;
    background-color: #ffffffaa;
}

/* pos = hours + 40 */
#got{
    top: 40px
}
#jaar{
    top: 624px;
}

#jaartwee{
    top: 1208px;
}

#jaarvijf{
    top: 2960px;
}

#jaartien{
    top: 5880px;
}
#goud{
    top: 29240px;
}
#eeuw{
    top: 58440px;
}

#dory{
    top: 140000px;
}

#done{
    top: 183411px;
}