"

From 2013.igem.org

.tn-timeline {

   position: relative;

   margin: 0 auto;

   height: 1200px;
   width: 960px;

}

.tn-timeline .line {

   display: block;
   
   margin: 0 auto;
   
   height: 100%;
   width: 15px;
   
   background-color: lightblue;

}

.tn-timeline .box {

   position: absolute;

   padding: 1.5em;

   width: 400px;
   
   background-color: rgba(250,250,250,.9);
   border-radius: 0.7em;
   box-shadow: 2px 2px 4px black;
   
   font-family: "Cabin", cursive;
   text-align: justify;

}

.tn-timeline #box1 {

   top: 0;
   left: 0;

}

.tn-timeline #box2 {

   top: 230px;
   right: 0;

}

.tn-timeline #box3 {

   top: 430px;
   left: 0;

}

.tn-timeline #box4 {

   top: 600px;
   right: 0;

}

.tn-timeline #box5 {

   top: 760px;
   left: 0;

}

.tn-timeline #box6 {

   top: 900px;
   right: 0;

}

.tn-timeline .box .date {

   display: block;
   margin-bottom: 5px;
   font-family: "Boogaloo", sans-serif;
   font-size: 1.5em;

}

.tn-timeline .box.left .date {

   text-align: right;

}