Team:KU Leuven/CSS:Timeline
From 2013.igem.org
.timeline { padding: 0; }
.cbp_tmlabel { cursor: pointer; }
.cbp_tmlabel .content { display: none; font-size: 13px; }
.cbp_tmlabel .content table { width: 100%; }
/*.cbp_tmlabel:hover .content { display: inline-block; }*/
.cbp_tmtimeline {
margin: 30px 0 0 0; padding: 0; list-style: none; position: relative;
}
/* The line */ .cbp_tmtimeline:before {
content: ; position: absolute; top: 0; bottom: 0; width: 10px; background: #57bce5; left: 15%; margin-left: -10px;
}
.cbp_tmtimeline > li {
position: relative;
}
/* The date/time */ .cbp_tmtimeline > li .cbp_tmtime {
display: block; width: 0%; padding-right: 100px; position: absolute;
}
.cbp_tmtimeline > li .cbp_tmtime span {
display: block; text-align: right; text-align: center;
width: 70px; }
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
font-size: 0.9em; color: #57bce5;
}
.cbp_tmtimeline > li .cbp_tmtime span:last-child {
font-size: 1.5em; color: #34495e; padding-top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
color: #34495e;
}
/* Right content */ .cbp_tmtimeline > li .cbp_tmlabel {
margin: 0 0 15px 20%; background: #fff; color: #34495e; padding: 15px 30px; font-size: 1.2em; font-weight: 300; line-height: 1.4; position: relative; border-bottom: 2px solid #e4e5e4;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
background: #fff;
}
.cbp_tmtimeline > li .cbp_tmlabel h2 {
margin-top: 0px; padding: 0 0 10px 0;
}
/* The triangle */ .cbp_tmtimeline > li .cbp_tmlabel:after {
right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; /*border-right-color: #57bce5;*/ border-width: 10px; top: 10px;
}
.cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
/*border-right-color: #57bce5;*/
}
/* The icons */ .cbp_tmtimeline > li .cbp_tmicon {
width: 40px; height: 40px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #fff; background: #224171; border-radius: 50%; box-shadow: 0 0 0 8px #57bce5; text-align: center; left: 15%; top: 0; margin: 0 0 0 -25px;
}
.cbp_tmicon i { margin-top: 8px; }
/*.cbp_tmicon-phone:before {
content: "\e000";
}
.cbp_tmicon-screen:before {
content: "\e001";
}
.cbp_tmicon-mail:before {
content: "\e002";
}
.cbp_tmicon-earth:before {
content: "\e003";
}*/
/* Example Media Queries */ @media screen and (max-width: 65.375em) {
.cbp_tmtimeline > li .cbp_tmtime span:last-child { font-size: 1.5em; }
}
@media screen and (max-width: 47.2em) {
.cbp_tmtimeline:before { display: none; } .cbp_tmtimeline > li .cbp_tmtime { width: 100%; position: relative; padding: 0 0 20px 0; } .cbp_tmtimeline > li .cbp_tmtime span { text-align: left; } .cbp_tmtimeline > li .cbp_tmlabel { margin: 0 0 30px 0; padding: 1em; font-weight: 400; font-size: 95%; } .cbp_tmtimeline > li .cbp_tmlabel:after { right: auto; left: 20px; border-right-color: transparent; top: -20px; } .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after { border-right-color: transparent; } .cbp_tmtimeline > li .cbp_tmicon { position: relative; float: right; left: auto; margin: -55px 5px 0 0px; }
}