Team:Aalto-Helsinki/timeline.css
From 2014.igem.org
img { border: 0; max-width: 100%; }
.page-header h1 {
font-size: 3.26em; text-align: center; color: #efefef; text-shadow: 1px 1px 0 #000;
}
/** timeline box structure **/ .timeline {
list-style: none; padding: 0px 20px 0px 0px; position: relative; min-height:4000px;
}
.timeline:before {
top: 0; bottom: 0; position: absolute; content: " "; width: 4px; background-color: rgba(194, 240, 236, 0.42); left: 49.4%; margin-left: -1.5px;
}
.tldate {
display: block; width: 200px; background: #ffffff; margin: 0 auto; padding: 20px 0; font-size: x-large; text-align: center;
}
.timeline li {
position: relative;
}
.timeline li.entry { width: 47vw; }
.timeline li:before, .timeline li:after {
content: " "; display: table;
} .timeline .tldate {
clear: both;
} .timeline li:before, .timeline li:after {
content: " "; display: table;
}
/** timeline panels **/ .timeline li .timeline-panel {
width: 99%; float: left; background: #fff; border: 1px solid #0AA699; padding: 20px; position: relative; margin-bottom: 25px;
}
/** panel arrows **/ .timeline li .timeline-panel:before {
position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #0AA699; border-right: 0 solid #0AA699; border-bottom: 15px solid transparent; content: " ";
}
.timeline li .timeline-panel:after {
position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " ";
} .timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0; right:0; display: none; border: 0;
}
.timeline .entry li.timeline-inverted .timeline-panel {
float: right;
}
.timeline-inverted { clear:right; float:right; }
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0; border-right-width: 15px; left: -15px; right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0; border-right-width: 14px; left: -14px; right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute; top: 23px; left: 106%; text-align: center; background: #6a8db3; color: #fff; width: 35px; height: 35px; line-height: 35px; margin-left: -16px; border: 3px solid #90acc7; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; z-index: 1024;
}
.timeline li.timeline-inverted .timeline-panel { margin-left: 6px; }
.month { clear:both; }
/** timeline content **/
.tl-heading h4 {
margin: 0;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
}
.tl-body > p + p {
margin-top: 5px;
}
footer { clear:both; }
/** media queries **/ @media (max-width: 991px) {
.timeline li .timeline-panel { width: 44%; }
}
@media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; } ul.timeline:before { left: 40px; } .tldate { width: 140px; }
ul.timeline li .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); }
ul.timeline li .tl-circ { top: 22px; left: 22px; margin-left: 0;
} ul.timeline > li > .tldate { margin: 0; }
ul.timeline > li > .timeline-panel { float: right; }
ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; }
ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; }
}