Template:Harvard BioDesign/CSS

div {

   font-family: Helvetica, Arial, sans-serif;
   box-sizing: border-box;

} .timeline {

   width: 400px;
   .timeline-item {
       width: 100%;
       .year {
           font-size: 24px;
           font-weight: bold;
           width: 22%;
       }
       .info {
           width: 100%;
           width: 78%;
           margin-left: -2px;
           padding: 0 0 40px 35px;
           border-left: 4px solid #aaa;
           font-size: 14px;
           line-height: 20px;
       }
       .marker {
           background-color: #fff;
           border: 4px solid #aaa;
           height: 20px;
           width: 20px;
           border-radius: 100px;
           display: block;
           float: right;
           margin-right: -14px;
           z-index: 2000;
           position: relative;
           .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
       }
   }

} .timeline .timeline-item .info, .timeline .timeline-item .year {

   color: #eee;
   display: block;
   float:left;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {

   color: #ccc;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {

   color: #444;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {

   color: #9DB668;

} .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
   background-color: #9DB668;
   box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

}

.timeline {

   width: 400px;
   .timeline-item {
       width: 100%;
       .year {
           font-size: 24px;
           font-weight: bold;
           width: 22%;
       }
       .info {
           width: 100%;
           width: 78%;
           margin-left: -2px;
           padding: 0 0 40px 35px;
           border-left: 4px solid #aaa;
           font-size: 14px;
           line-height: 20px;
       }
       .marker {
           background-color: #fff;
           border: 4px solid #aaa;
           height: 20px;
           width: 20px;
           border-radius: 100px;
           display: block;
           float: right;
           margin-right: -14px;
           z-index: 2000;
           position: relative;
           .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
       }
   }

} .timeline .timeline-item .info, .timeline .timeline-item .year {

   color: #eee;
   display: block;
   float:left;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {

   color: #ccc;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {

   color: #444;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {

   color: #9DB668;

} .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
   background-color: #9DB668;
   box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

} div { .timeline {

   width: 400px;
   .timeline-item {
       width: 100%;
       .year {
           font-size: 24px;
           font-weight: bold;
           width: 22%;
       }
       .info {
           width: 100%;
           width: 78%;
           margin-left: -2px;
           padding: 0 0 40px 35px;
           border-left: 4px solid #aaa;
           font-size: 14px;
           line-height: 20px;
       }
       .marker {
           background-color: #fff;
           border: 4px solid #aaa;
           height: 20px;
           width: 20px;
           border-radius: 100px;
           display: block;
           float: right;
           margin-right: -14px;
           z-index: 2000;
           position: relative;
           .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
       }
   }

} .timeline .timeline-item .info, .timeline .timeline-item .year {

   color: #eee;
   display: block;
   float:left;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {

   color: #ccc;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {

   color: #444;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {

   color: #9DB668;

} .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
   background-color: #9DB668;
   box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

}

.timeline {

   width: 400px;
   .timeline-item {
       width: 100%;
       .year {
           font-size: 24px;
           font-weight: bold;
           width: 22%;
       }
       .info {
           width: 100%;
           width: 78%;
           margin-left: -2px;
           padding: 0 0 40px 35px;
           border-left: 4px solid #aaa;
           font-size: 14px;
           line-height: 20px;
       }
       .marker {
           background-color: #fff;
           border: 4px solid #aaa;
           height: 20px;
           width: 20px;
           border-radius: 100px;
           display: block;
           float: right;
           margin-right: -14px;
           z-index: 2000;
           position: relative;
           .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
       }
   }

} .timeline .timeline-item .info, .timeline .timeline-item .year {

   color: #eee;
   display: block;
   float:left;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {

   color: #ccc;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {

   color: #444;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {

   color: #9DB668;

} .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
   background-color: #9DB668;
   box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

} div {izing: border-box; } .timeline {

   width: 400px;
   .timeline-item {
       width: 100%;
       .year {
           font-size: 24px;
           font-weight: bold;
           width: 22%;
       }
       .info {
           width: 100%;
           width: 78%;
           margin-left: -2px;
           padding: 0 0 40px 35px;
           border-left: 4px solid #aaa;
           font-size: 14px;
           line-height: 20px;
       }
       .marker {
           background-color: #fff;
           border: 4px solid #aaa;
           height: 20px;
           width: 20px;
           border-radius: 100px;
           display: block;
           float: right;
           margin-right: -14px;
           z-index: 2000;
           position: relative;
           .dot {
               background-color: white;
               -webkit-transition: all 1s ease;
               -moz-transition: all 1s ease;
               transition: all 1s ease;
               display: block;
               border: 4px solid white;
               height: 12px;
               width: 12px;
               border-radius: 100px;
               float: right;
               z-index: 2000;
               position: relative;
           }
       }
   }

} .timeline .timeline-item .info, .timeline .timeline-item .year {

   color: #eee;
   display: block;
   float:left;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.close .info, .timeline .timeline-item.close .year {

   color: #ccc;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {

   color: #444;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;

} .timeline .timeline-item.active .year, .timeline .timeline-item:hover .year {

   color: #9DB668;

} .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
   background-color: #9DB668;
   box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);

}