| |
| |
| /*------------------- Horizontal / Vertical lines ----------------*/ |
| |
| /* style for ethers */ |
| .timeline-ether-lines{border-color:#666; 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 #aaa; |
| color: #aaa; |
| width: 5em; |
| height: 1.5em;} |
| .timeline-date-label-em {color: #000;} |
| |
| /* 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:2em} |
| |
| /* 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:#eee} |
| .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} |
| .timeline-duration-event { |
| position: absolute; |
| overflow: hidden; |
| border: 1px solid blue; |
| } |
| |
| .timeline-instant-event2 { |
| position: absolute; |
| overflow: hidden; |
| border-left: 1px solid blue; |
| padding-left: 2px; |
| } |
| |
| .timeline-instant-event { |
| position: absolute; |
| overflow: hidden; |
| } |
| |
| .timeline-event-bubble-title { |
| font-weight: bold; |
| border-bottom: 1px solid #888; |
| margin-bottom: 0.5em; |
| } |
| |
| .timeline-event-bubble-body { |
| } |
| |
| .timeline-event-bubble-wiki { |
| margin: 0.5em; |
| text-align: right; |
| color: #A0A040; |
| } |
| .timeline-event-bubble-wiki a { |
| color: #A0A040; |
| } |
| |
| .timeline-event-bubble-time { |
| color: #aaa; |
| } |
| |
| .timeline-event-bubble-image { |
| float: right; |
| padding-left: 5px; |
| padding-bottom: 5px; |
| }.timeline-container { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .timeline-copyright { |
| position: absolute; |
| bottom: 0px; |
| left: 0px; |
| z-index: 1000; |
| cursor: pointer; |
| } |
| |
| .timeline-message-container { |
| position: absolute; |
| top: 30%; |
| left: 35%; |
| right: 35%; |
| z-index: 1000; |
| display: none; |
| } |
| .timeline-message { |
| font-size: 120%; |
| font-weight: bold; |
| text-align: center; |
| } |
| .timeline-message img { |
| vertical-align: middle; |
| } |
| |
| .timeline-band { |
| position: absolute; |
| background: #eee; |
| z-index: 10; |
| } |
| |
| .timeline-band-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .timeline-band-input { |
| position: absolute; |
| width: 1em; |
| height: 1em; |
| overflow: hidden; |
| z-index: 0; |
| } |
| .timeline-band-input input{ |
| width: 0; |
| } |
| |
| .timeline-band-layer { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| } |
| |
| .timeline-band-layer-inner { |
| position: relative; |
| width: 100%; |
| height: 100%; |
| } |
| |