Difference between revisions of "Template:Harvard BioDesign/CSS"

(Created page with " div { font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } .timeline { width: ...")
 
Line 1: Line 1:
−
            div {
+
div {
−
                font-family: Helvetica, Arial, sans-serif;
+
    font-family: Helvetica, Arial, sans-serif;
−
                box-sizing: border-box;
+
    box-sizing: border-box;
−
            }
+
}
−
            .timeline {
+
.timeline {
−
                width: 400px;
+
    width: 400px;
−
            }
+
    .timeline-item {
−
            .timeline .timeline-item {
+
        width: 100%;
−
                width: 100%;
+
        .year {
−
             }
+
             font-size: 24px;
−
             .timeline .timeline-item .info, .timeline .timeline-item .year {
+
             font-weight: bold;
−
                color: #eee;
+
            width: 22%;
−
                display: block;
+
        }
−
                float:left;
+
        .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;
 
                 -webkit-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 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.close .info, .timeline .timeline-item.close .year {
+
        }
−
                color: #ccc;
+
    }
 +
}
 +
.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;
 
                 -webkit-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 transition: all 1s ease;
 
                 transition: all 1s ease;
−
            }
 
−
            .timeline .timeline-item .year {
 
−
                font-size: 24px;
 
−
                font-weight: bold;
 
−
                width: 22%;
 
−
            }
 
−
            .timeline .timeline-item .info {
 
−
                width: 100%;
 
−
                width: 78%;
 
−
                margin-left: -2px;
 
−
                padding: 0 0 40px 35px;
 
−
                border-left: 4px solid #aaa;
 
−
                font-size: 14px;
 
−
                line-height: 20px;
 
−
            }
 
−
            .timeline .timeline-item .marker {
 
−
                background-color: #fff;
 
−
                border: 4px solid #aaa;
 
−
                height: 20px;
 
−
                width: 20px;
 
−
                border-radius: 100px;
 
 
                 display: block;
 
                 display: block;
 +
                border: 4px solid white;
 +
                height: 12px;
 +
                width: 12px;
 +
                border-radius: 100px;
 
                 float: right;
 
                 float: right;
−
                margin-right: -14px;
 
 
                 z-index: 2000;
 
                 z-index: 2000;
 
                 position: relative;
 
                 position: relative;
 
             }
 
             }
−
            .timeline .timeline-item.active .info, .timeline .timeline-item:hover .info {
+
        }
−
                color: #444;
+
    }
 +
}
 +
.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;
 
                 -webkit-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 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.active .year, .timeline .timeline-item:hover .year {
+
        }
−
                color: #9DB668;
+
    }
−
            }
+
}
−
            .timeline .timeline-item .marker .dot {
+
.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;
 
                 background-color: white;
 
                 -webkit-transition: all 1s ease;
 
                 -webkit-transition: all 1s ease;
Line 72: Line 277:
 
                 position: relative;
 
                 position: relative;
 
             }
 
             }
−
            .timeline .timeline-item.active .marker .dot, .timeline .timeline-item:hover .marker .dot {
+
        }
 +
    }
 +
}
 +
.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;
 
                 -webkit-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 -moz-transition: all 1s ease;
 
                 transition: all 1s ease;
 
                 transition: all 1s ease;
−
                 background-color: #9DB668;
+
                 display: block;
−
                 box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
+
                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);
 +
}

Revision as of 13:21, 2 July 2015

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);

}