/*------------------- Horizontal / Vertical lines ----------------*/ /* style for ethers */ .timeline-ether-lines{border-color:white; border-style:dotted; position:absolute;} .timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;} .timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;} /*---------------- Weekends ---------------------------*/ .timeline-ether-weekends{ position:absolute; background-color:#FFFFE0; } .timeline-vertical .timeline-ether-weekends{left:0;width:100%;} .timeline-horizontal .timeline-ether-weekends{top:0; height:100%;} /*-------------------------- HIGHLIGHT DECORATORS -------------------*/ /* Used for decorators, not used for Timeline Highlight */ .timeline-highlight-decorator, .timeline-highlight-point-decorator{ position:absolute; overflow:hidden; } /* Width of horizontal decorators and Height of vertical decorators is set in the decorator function params */ .timeline-horizontal .timeline-highlight-point-decorator, .timeline-horizontal .timeline-highlight-decorator{ top:0; height:100%; } .timeline-vertical .timeline-highlight-point-decorator, .timeline-vertical .timeline-highlight-decorator{ width:100%; left:0; } .timeline-highlight-decorator{background-color:#FFC080;} .timeline-highlight-point-decorator{background-color:#ff5;} /*---------------------------- LABELS -------------------------*/ .timeline-highlight-label { position:absolute; overflow:hidden; font-size:200%; font-weight:bold; color:#999; } /*---------------- VERTICAL LABEL -------------------*/ .timeline-horizontal .timeline-highlight-label {top:0; height:100%;} .timeline-horizontal .timeline-highlight-label td {vertical-align:middle;} .timeline-horizontal .timeline-highlight-label-start {text-align:right;} .timeline-horizontal .timeline-highlight-label-end {text-align:left;} /*---------------- HORIZONTAL LABEL -------------------*/ .timeline-vertical .timeline-highlight-label {left:0;width:100%;} .timeline-vertical .timeline-highlight-label td {vertical-align:top;} .timeline-vertical .timeline-highlight-label-start {text-align:center;} .timeline-vertical .timeline-highlight-label-end {text-align:center;} /*-------------------------------- DATE LABELS --------------------------------*/ .timeline-date-label { position: absolute; border: solid transparent; color: red; width: 5em; height: 3.5em;font-size: 1.7em; color: #A896D4;} .timeline-date-label-em {color: #FFF;} /* horizontal */ .timeline-horizontal .timeline-date-label{padding-left:2px;} .timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;} .timeline-horizontal .timeline-date-label-em{height:3.5em;} /* vertical */ .timeline-vertical .timeline-date-label{padding-top:2px;} .timeline-vertical .timeline-date-label{border-width:1px 0 0;} .timeline-vertical .timeline-date-label-em{width:7em} /*------------------------------- Ether.highlight -------------------------*/ .timeline-ether-highlight{position:absolute; background-color:#fff;} .timeline-horizontal .timeline-ether-highlight{top:2px;} .timeline-vertical .timeline-ether-highlight{left:2px;} /*------------------------------ EVENTS ------------------------------------*/ .timeline-event-icon, .timeline-event-label,.timeline-event-tape{ position:absolute; cursor:pointer; } .timeline-event-tape, .timeline-small-event-tape, .timeline-small-event-icon{ background-color:#58A0DC; overflow:hidden; } .timeline-small-event-tape, .timeline-small-event-icon{ position:absolute; } .timeline-small-event-icon{width:1px; height:6px;} /*--------------------------------- TIMELINE-------------------------*/ .timeline-ether-bg{width:100%; height:100%;} .timeline-band-0 .timeline-ether-bg{background-color: transparent;} .timeline-band-1 .timeline-ether-bg{background-color:#ddd} .timeline-band-2 .timeline-ether-bg{background-color:#ccc} .timeline-band-3 .timeline-ether-bg{background-color:#aaa}