"

From 2014.igem.org

/* -------------------------------------

* timeline
* ------------------------------------- */

1. timeline {

 list-style: none;
 margin: 50px 0 30px 120px;
 padding-left: 30px;
 border-left: 8px solid #625d71;

}

1. timeline li {

 margin: 10px 0;
 position: relative;

}

1. timeline p {

 margin: 0 20px 15px;

}

.date {

 margin-top: -10px;
 top: 50%;
 left: -158px;
 font-size: 0.95em;
 line-height: 20px;
 position: absolute;
   width:100px;

}

.circle {

 margin-top: -10px;
 top: 50%;
 left: -44px;
 width: 10px;
 height: 10px;
 background: #625d71;
 border: 5px solid #625d71;
 border-radius: 50%;
 display: block;
 position: absolute;

}

.timeline-content {

 max-height: 20px;
 padding: 60px 0px 0;
 border-color: transparent;
 border-width: 2px;
 border-style: solid;
 border-radius: 0.5em;
 position: relative;

} .timeline-content:before, .timeline-content:after {

 content: "";
 width: 0;
 height: 0;
 border: solid transparent;
 position: absolute;
 pointer-events: none;
 right: 100%;

} .timeline-content:before {

 border-right-color: inherit;
 border-width: 20px;
 top: 50%;
 margin-top: -20px;

} .timeline-content:after {

 border-right-color: #fdcc70;
 border-width: 17px;
 top: 50%;
 margin-top: -17px;
   margin-right: 2px

} .timeline-content p {

 max-height: 0;
 text-align: justify;
 word-break: break-word;
 -webkit-hyphens: auto;
    -moz-hyphens: auto;
     -ms-hyphens: auto;
         hyphens: auto;
 overflow: hidden;

}

label {

 font-size: 1.3em;
 position: absolute;
 z-index: 100;
 cursor: pointer;
 top: 20px;
   margin-left:5px;
 -webkit-transition: -webkit-transform 0.2s linear;
         transition: transform 0.2s linear;

}

.radio {

 display: none;

}

.radio:checked + .relative label {

 cursor: auto;
 -webkit-transform: translateX(42px);
     -ms-transform: translateX(42px);
         transform: translateX(42px);

} .radio:checked + .relative .circle {

 background: #fdcc70;

} .radio:checked ~ .timeline-content {

 max-height: 300px;
 border-color: #eee9dc;
 margin-right: 20px;
 -webkit-transform: translateX(20px);
     -ms-transform: translateX(20px);
         transform: translateX(20px);
 -webkit-transition: max-height 0.4s linear, border-color 0.5s linear, -webkit-transform 0.2s linear;
         transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear;

} .radio:checked ~ .timeline-content p {

 max-height: 300px;
 
 -webkit-transition: color 0.3s linear 0.3s;
         transition: color 0.3s linear 0.3s;

}