#timeline{
	position:relative;
	height:451px;
	width:100%;
	top:0;
	left:20px;
}

#ruler{ height:100%; width:12px; position:absolute; top:0; left:40px; background:url(../img/Ruler.png) repeat-y; }

#timelineList{ list-style:none; margin:0; padding:0; top:0; left:115px; position:absolute;}
#timelineList li:before{ position:absolute; content:''; display:block; height:40px; width:165px; top:1.3em; left:-80px; background:url(../img/timePointer_t1.png) no-repeat;  }
#timelineList li{margin:0; padding:0; position:relative;}
#timelineList li:hover{  }

.time{ font-weight:bold; margin-right:10px; font-size:16px; /*color:#3dc2f1;*/ }

#time1{ top:20px; }
#time2{ top:100px; }
#time3{ top:130px; }
#time4{ top:230px; }
#time5{ top:243px; }
#time6{ top:250px; }

#timelineList a{ color:inherit; text-decoration:none; padding:0 5px; border-left:6px solid transparent; }
#timelineList a:hover{ /*border-bottom:1px dotted #3dc2f1; background:#b6ff00;*/ border-color:#3dc2f1; }






@-webkit-keyframes timeIn {
    from { left:-50px; opacity:0; }
    to { left:0px; opacity:1; }
}
@keyframes timeIn {
    from { left:-50px; opacity:0;}
    to { left:0px; opacity:1;}
}
@-webkit-keyframes detailsIn {
	0% { opacity:0; top:5px;}
    30% { opacity:0; top:5px;}
    100% { opacity:1; top:0px;}
}
@keyframes detailsIn {
	0% { opacity:0; top:5px;}
    30% { opacity:0; top:5px;}
    100% { opacity:1; top:0px;}
}

.time {
	-webkit-animation: timeIn .7s;
	animation: timeIn .7s;
	position: relative;
}
.details {
	-webkit-animation: detailsIn .7s;
	animation: detailsIn .7s;
	position: relative;
}