#history {
    position: relative;
    text-align: center;
    margin-top: 20px;
    background: none;
}

#historyCont {
    width: 80px;
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
}

#timeline {
    position: absolute;
    display: inline-block;
    top: 5px;
    width: 10px;
    height: 0;
    background: #000;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

.year {
    position: relative;
    left: 5px; /* the 5px of the timeline */
    color: #000000;
    font-weight: bolder;
    display: inline-block;
    width: 70px;
    height: 70px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.75);
}

.year div {
    display: inline-block;
    width: 55px;
    height: 25px;
    padding: 20px 5px;
    text-align: center;
    border: 3px solid #f39200;
    border-radius: 200px;
    -moz-border-radius: 200px;
    -webkit-border-radius: 200px;
    -webkit-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
    box-shadow: inset 1px 1px 5px 0px rgba(0,0,0,0.75);
}

#history section {
    position: relative;
}

#history div.article {
    display: inline-block;
    position: relative;
    top: 50px;
    opacity: 0;
    padding: 30px 0 30px 40px;
    text-align: left;
}

#history div.article .date {
    color: #000;
    position: relative;
    display: inline-block;
    padding: 0 25px;
    font-weight: bold;
    border-bottom: 2px solid #1c6ca1;
}

#history div.article .date .bullet {
    display: inline-block;
    position: absolute;
    width: 7px;
    height: 7px;
    border: 1px solid #FFFFFF;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    left: 0;
    bottom: -5px;
    background: #1c6ca1;
}

#history div.article .description {
    padding: 0 25px;
    text-align: left;
}

#history.narrow {
    text-align: left;
}

#history:not(.narrow) div.article {
    width: 430px;
}

#history:not(.narrow) div.article.alt {
    left: -380px;
    text-align: right;
    padding: 30px 0;
}

#history:not(.narrow) div.article.alt .date .bullet {
    left: auto;
    right: 0;
}

#history div.article ul {
    padding-left: 15px;
}

#history div.article li {
    margin: 10px 0;
}