section#timeline {
    font-family: Helvetica, sans-serif;   
    width: 80%;
    margin: 20px auto;
    position: relative;
    padding: 30px;
}

    section#timeline:before {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        margin: 0 0 0 -1px;
        width: 2px;
        height: 100%;
        background: lightgray;
    }

    section#timeline article {
        width: 100%;
        margin: 0 0 20px 0;
        position: relative;
    }

        section#timeline article:after {
            content: '';
            display: block;
            clear: both;
        }

        section#timeline article div.inner {
            width: 40%;
            float: left;
            margin: 5px 0 0 0;
            border-radius: 6px;
        }

            section#timeline article div.inner span.date {
                display: block;
                width: 40px;
                height: 40px;
                padding: 5px 0;
                position: absolute;
                top: 0;
                left: 50%;
                margin: 0 0 0 -20px;
                border-radius: 100%;
                font-size: 12px;
                font-weight: 900;
                text-transform: uppercase;
                background: white;
                color: gray;
                box-shadow: 0 0 0 2px gray;
            }

            section#timeline article div.inner span.date2 {
                display: block;
                width: 40px;
                height: 40px;
                padding: 5px 0;
                position: absolute;
                top: 0;
                left: 50%;
                margin: 0 0 0 -20px;
                border-radius: 100%;
                font-size: 12px;
                font-weight: 900;
                text-transform: uppercase;
                background: blue;
                color: white;
                box-shadow: 0 0 0 2px darkblue;
            }

                section#timeline article div.inner span.date span {
                    display: block;
                    text-align: center;
                }

            section#timeline article div.inner span.date2 span {
                display: block;
                text-align: center;
            }

                    section#timeline article div.inner span.date span.day {
                        font-size: 10px;
                    }

                    section#timeline article div.inner span.date span.month {
                        font-size: 20px;
                    }
                    section#timeline article div.inner span.date2 span.month {
                        font-size: 20px;
                    }

                    section#timeline article div.inner span.date span.year {
                        font-size: 10px;
                    }

            section#timeline article div.inner h2 {
                padding: 15px;
                margin: 0;
                color: #fff;
                font-size: 14px;
                text-transform: uppercase;
                letter-spacing: -1px;
                border-radius: 6px 6px 0 0;
                position: relative;
                border-style: solid;
                border-width: 1px;
                border-color: lightgray;
            }

                section#timeline article div.inner h2:after {
                    content: '';
                    position: absolute;
                    top: 20px;
                    right: -5px;
                    width: 10px;
                    height: 10px;
                    -webkit-transform: rotate(-45deg);
                }

            section#timeline article div.inner p {
                padding: 15px;
                margin: 0;
                font-size: 14px;
                background: #fff;
                color: #656565;
                border-radius: 0 0 6px 6px;
                border-style: solid;
                border-width: 1px;
                border-color: lightgray;
            }

        section#timeline article:nth-child(2n+2) div.inner {
            float: right;
        }

            section#timeline article:nth-child(2n+2) div.inner h2:after {
                left: -5px;
            }

        section#timeline article:nth-child(1) div.inner h2 {
            background: #e74c3c;
        }

            section#timeline article:nth-child(1) div.inner h2:after {
                background: #e74c3c;
            }

        section#timeline article:nth-child(2) div.inner h2 {
            background: #2ecc71;
        }

            section#timeline article:nth-child(2) div.inner h2:after {
                background: #2ecc71;
            }

        section#timeline article:nth-child(3) div.inner h2 {
            background: #e67e22;
        }

            section#timeline article:nth-child(3) div.inner h2:after {
                background: #e67e22;
            }

        section#timeline article:nth-child(4) div.inner h2 {
            background: #1abc9c;
        }

            section#timeline article:nth-child(4) div.inner h2:after {
                background: #1abc9c;
            }

        section#timeline article:nth-child(5) div.inner h2 {
            background: #9b59b6;
        }

            section#timeline article:nth-child(5) div.inner h2:after {
                background: #9b59b6;
            }


        section#timeline article:nth-child(6) div.inner h2 {
            background: #e74c3c;
        }

            section#timeline article:nth-child(6) div.inner h2:after {
                background: #e74c3c;
            }

        section#timeline article:nth-child(7) div.inner h2 {
            background: #2ecc71;
        }

            section#timeline article:nth-child(7) div.inner h2:after {
                background: #2ecc71;
            }

        section#timeline article:nth-child(8) div.inner h2 {
            background: #e67e22;
        }

            section#timeline article:nth-child(8) div.inner h2:after {
                background: #e67e22;
            }

        section#timeline article:nth-child(9) div.inner h2 {
            background: #1abc9c;
        }

            section#timeline article:nth-child(9) div.inner h2:after {
                background: #1abc9c;
            }

        section#timeline article:nth-child(10) div.inner h2 {
            background: #9b59b6;
        }

            section#timeline article:nth-child(10) div.inner h2:after {
                background: #9b59b6;
            }

        section#timeline article:nth-child(11) div.inner h2 {
            background: #e74c3c;
        }

            section#timeline article:nth-child(11) div.inner h2:after {
                background: #e74c3c;
            }

        section#timeline article:nth-child(12) div.inner h2 {
            background: #2ecc71;
        }

            section#timeline article:nth-child(12) div.inner h2:after {
                background: #2ecc71;
            }

        section#timeline article:nth-child(13) div.inner h2 {
            background: #e67e22;
        }

            section#timeline article:nth-child(13) div.inner h2:after {
                background: #e67e22;
            }

        section#timeline article:nth-child(14) div.inner h2 {
            background: #1abc9c;
        }

            section#timeline article:nth-child(14) div.inner h2:after {
                background: #1abc9c;
            }

        section#timeline article:nth-child(15) div.inner h2 {
            background: #9b59b6;
        }

            section#timeline article:nth-child(15) div.inner h2:after {
                background: #9b59b6;
            }

        section#timeline article:nth-child(16) div.inner h2 {
            background: #e74c3c;
        }

            section#timeline article:nth-child(16) div.inner h2:after {
                background: #e74c3c;
            }

        section#timeline article:nth-child(17) div.inner h2 {
            background: #2ecc71;
        }

            section#timeline article:nth-child(17) div.inner h2:after {
                background: #2ecc71;
            }

        section#timeline article:nth-child(18) div.inner h2 {
            background: #e67e22;
        }

            section#timeline article:nth-child(18) div.inner h2:after {
                background: #e67e22;
            }

        section#timeline article:nth-child(19) div.inner h2 {
            background: #1abc9c;
        }

            section#timeline article:nth-child(19) div.inner h2:after {
                background: #1abc9c;
            }

        section#timeline article:nth-child(20) div.inner h2 {
            background: #9b59b6;
        }

            section#timeline article:nth-child(20) div.inner h2:after {
                background: #9b59b6;
            }