1 2 3/*------------------- Horizontal / Vertical lines ----------------*/ 4 5/* style for ethers */ 6.timeline-ether-lines{border-color:#666; border-style:dotted; position:absolute;} 7.timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;} 8.timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;} 9 10 11 12/*---------------- Weekends ---------------------------*/ 13.timeline-ether-weekends{ 14 position:absolute; 15 background-color:#FFFFE0; 16} 17 18.timeline-vertical .timeline-ether-weekends{left:0;width:100%;} 19.timeline-horizontal .timeline-ether-weekends{top:0; height:100%;} 20 21 22/*-------------------------- HIGHLIGHT DECORATORS -------------------*/ 23/* Used for decorators, not used for Timeline Highlight */ 24.timeline-highlight-decorator, 25.timeline-highlight-point-decorator{ 26 position:absolute; 27 overflow:hidden; 28} 29 30/* Width of horizontal decorators and Height of vertical decorators is 31 set in the decorator function params */ 32.timeline-horizontal .timeline-highlight-point-decorator, 33.timeline-horizontal .timeline-highlight-decorator{ 34 top:0; 35 height:100%; 36} 37 38.timeline-vertical .timeline-highlight-point-decorator, 39.timeline-vertical .timeline-highlight-decorator{ 40 width:100%; 41 left:0; 42} 43 44.timeline-highlight-decorator{background-color:#FFC080;} 45.timeline-highlight-point-decorator{background-color:#ff5;} 46 47 48/*---------------------------- LABELS -------------------------*/ 49.timeline-highlight-label { 50 position:absolute; overflow:hidden; font-size:200%; 51 font-weight:bold; color:#999; } 52 53 54/*---------------- VERTICAL LABEL -------------------*/ 55.timeline-horizontal .timeline-highlight-label {top:0; height:100%;} 56.timeline-horizontal .timeline-highlight-label td {vertical-align:middle;} 57.timeline-horizontal .timeline-highlight-label-start {text-align:right;} 58.timeline-horizontal .timeline-highlight-label-end {text-align:left;} 59 60 61/*---------------- HORIZONTAL LABEL -------------------*/ 62.timeline-vertical .timeline-highlight-label {left:0;width:100%;} 63.timeline-vertical .timeline-highlight-label td {vertical-align:top;} 64.timeline-vertical .timeline-highlight-label-start {text-align:center;} 65.timeline-vertical .timeline-highlight-label-end {text-align:center;} 66 67 68/*-------------------------------- DATE LABELS --------------------------------*/ 69.timeline-date-label { 70 position: absolute; 71 border: solid #aaa; 72 color: #aaa; 73 width: 5em; 74 height: 1.5em;} 75.timeline-date-label-em {color: #000;} 76 77/* horizontal */ 78.timeline-horizontal .timeline-date-label{padding-left:2px;} 79.timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;} 80.timeline-horizontal .timeline-date-label-em{height:2em} 81 82/* vertical */ 83.timeline-vertical .timeline-date-label{padding-top:2px;} 84.timeline-vertical .timeline-date-label{border-width:1px 0 0;} 85.timeline-vertical .timeline-date-label-em{width:7em} 86 87 88/*------------------------------- Ether.highlight -------------------------*/ 89.timeline-ether-highlight{position:absolute; background-color:#fff;} 90.timeline-horizontal .timeline-ether-highlight{top:2px;} 91.timeline-vertical .timeline-ether-highlight{left:2px;} 92 93 94/*------------------------------ EVENTS ------------------------------------*/ 95.timeline-event-icon, .timeline-event-label,.timeline-event-tape{ 96 position:absolute; 97 cursor:pointer; 98} 99 100.timeline-event-tape, 101.timeline-small-event-tape, 102.timeline-small-event-icon{ 103 background-color:#58A0DC; 104 overflow:hidden; 105} 106 107.timeline-small-event-tape, 108.timeline-small-event-icon{ 109 position:absolute; 110} 111 112.timeline-small-event-icon{width:1px; height:6px;} 113 114 115/*--------------------------------- TIMELINE-------------------------*/ 116.timeline-ether-bg{width:100%; height:100%;} 117.timeline-band-0 .timeline-ether-bg{background-color:#eee} 118.timeline-band-1 .timeline-ether-bg{background-color:#ddd} 119.timeline-band-2 .timeline-ether-bg{background-color:#ccc} 120.timeline-band-3 .timeline-ether-bg{background-color:#aaa} 121.timeline-duration-event { 122 position: absolute; 123 overflow: hidden; 124 border: 1px solid blue; 125} 126 127.timeline-instant-event2 { 128 position: absolute; 129 overflow: hidden; 130 border-left: 1px solid blue; 131 padding-left: 2px; 132} 133 134.timeline-instant-event { 135 position: absolute; 136 overflow: hidden; 137} 138 139.timeline-event-bubble-title { 140 font-weight: bold; 141 border-bottom: 1px solid #888; 142 margin-bottom: 0.5em; 143} 144 145.timeline-event-bubble-body { 146} 147 148.timeline-event-bubble-wiki { 149 margin: 0.5em; 150 text-align: right; 151 color: #A0A040; 152} 153.timeline-event-bubble-wiki a { 154 color: #A0A040; 155} 156 157.timeline-event-bubble-time { 158 color: #aaa; 159} 160 161.timeline-event-bubble-image { 162 float: right; 163 padding-left: 5px; 164 padding-bottom: 5px; 165}.timeline-container { 166 position: relative; 167 overflow: hidden; 168} 169 170.timeline-copyright { 171 position: absolute; 172 bottom: 0px; 173 left: 0px; 174 z-index: 1000; 175 cursor: pointer; 176} 177 178.timeline-message-container { 179 position: absolute; 180 top: 30%; 181 left: 35%; 182 right: 35%; 183 z-index: 1000; 184 display: none; 185} 186.timeline-message { 187 font-size: 120%; 188 font-weight: bold; 189 text-align: center; 190} 191.timeline-message img { 192 vertical-align: middle; 193} 194 195.timeline-band { 196 position: absolute; 197 background: #eee; 198 z-index: 10; 199} 200 201.timeline-band-inner { 202 position: relative; 203 width: 100%; 204 height: 100%; 205} 206 207.timeline-band-input { 208 position: absolute; 209 width: 1em; 210 height: 1em; 211 overflow: hidden; 212 z-index: 0; 213} 214.timeline-band-input input{ 215 width: 0; 216} 217 218.timeline-band-layer { 219 position: absolute; 220 width: 100%; 221 height: 100%; 222} 223 224.timeline-band-layer-inner { 225 position: relative; 226 width: 100%; 227 height: 100%; 228} 229 230