buildroot

.timeline {

    list-style: none;

    padding: 20px 0 20px;

    position: relative;

}

​

.timeline:before {

    top: 0;

    bottom: 0;

    position: absolute;

    content: " ";

    width: 3px;

    background-color: #E4E4E4;

    left: 50%;

    margin-left: -1.5px;

    }

​

.timeline > li {

    margin-bottom: 20px;

    position: relative;

}

​

.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}

​

.timeline > li:after {

    clear: both;

}

​

.timeline > li:before,

.timeline > li:after {

    content: " ";

    display: table;

}

​

.timeline > li:after {

    clear: both;

}

​

.timeline > li > .timeline-panel {

    width: 46%;

    float: left;

    border: 1px solid #d4d4d4;

    border-radius: 2px;

    padding: 20px;

    position: relative;

    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

    background-color: white;

}

​

.timeline > li > .timeline-panel:before {

    position: absolute;

    top: 26px;

    right: -15px;

    display: inline-block;

    border-top: 15px solid transparent;

    border-left: 15px solid #ccc;

    border-right: 0 solid #ccc;

    border-bottom: 15px solid transparent;

    content: " ";

}

​

.timeline > li > .timeline-panel:after {

    position: absolute;

    top: 27px;

    right: -14px;

    display: inline-block;

    border-top: 14px solid transparent;

    border-left: 14px solid #fff;

    border-right: 0 solid #fff;

    border-bottom: 14px solid transparent;

    content: " ";

}

​

.timeline > li > .timeline-badge {

    color: #fff;

    width: 50px;

    height: 50px;

    line-height: 50px;

    font-size: 1.4em;

    text-align: center;

    position: absolute;

    top: 16px;

    left: 50%;

    margin-left: -25px;

    background-color: #E6E6E6;

    z-index: 100;

    border-top-right-radius: 50%;