web/data/timeline-bundle.css
changeset 1156 4b920f836567
parent 0 b97547f5f1fa
equal deleted inserted replaced
1155:61149b53d441 1156:4b920f836567
       
     1 div.simileAjax-bubble-container {
       
     2     margin:     0px;
       
     3     padding:    0px;
       
     4     border:     none;
       
     5     position:   absolute;
       
     6     z-index:    1000;
       
     7 }
       
     8 
       
     9 div.simileAjax-bubble-innerContainer {
       
    10     margin:     0px;
       
    11     padding:    0px;
       
    12     border:     none;
       
    13     position:   relative;
       
    14     width:      100%;
       
    15     height:     100%;
       
    16     overflow:   visible;
       
    17 }
       
    18 
       
    19 div.simileAjax-bubble-contentContainer {
       
    20     margin:     0px;
       
    21     padding:    0px;
       
    22     border:     none;
       
    23     position:   absolute;
       
    24     left:       0px;
       
    25     top:        0px;
       
    26     width:      100%;
       
    27     height:     100%;
       
    28     overflow:   auto;
       
    29     background: white;
       
    30 }
       
    31 
       
    32 div.simileAjax-bubble-border-left {
       
    33     position:   absolute;
       
    34     left:       -50px;
       
    35     top:        0px;
       
    36     width:      50px;
       
    37     height:     100%;
       
    38 }
       
    39 div.simileAjax-bubble-border-left-pngTranslucent {
       
    40     background: url(../images/bubble-left.png) top right repeat-y;
       
    41 }
       
    42 
       
    43 div.simileAjax-bubble-border-right {
       
    44     position:   absolute;
       
    45     right:      -50px;
       
    46     top:        0px;
       
    47     width:      50px;
       
    48     height:     100%;
       
    49 }
       
    50 .simileAjax-bubble-border-right-pngTranslucent {
       
    51     background: url(../images/bubble-right.png) top left repeat-y;
       
    52 }
       
    53 
       
    54 div.simileAjax-bubble-border-top {
       
    55     position:   absolute;
       
    56     top:        -50px;
       
    57     left:       0px;
       
    58     width:      100%;
       
    59     height:     50px;
       
    60 }
       
    61 .simileAjax-bubble-border-top-pngTranslucent {
       
    62     background: url(../images/bubble-top.png) bottom left repeat-x;
       
    63 }
       
    64 
       
    65 div.simileAjax-bubble-border-bottom {
       
    66     position:   absolute;
       
    67     bottom:     -50px;
       
    68     left:       0px;
       
    69     width:      100%;
       
    70     height:     50px;
       
    71 }
       
    72 .simileAjax-bubble-border-bottom-pngTranslucent {
       
    73     background: url(../images/bubble-bottom.png) top left repeat-x;
       
    74 }
       
    75 
       
    76 div.simileAjax-bubble-border-top-left {
       
    77     position:   absolute;
       
    78     top:        -50px;
       
    79     left:       -50px;
       
    80     width:      50px;
       
    81     height:     50px;
       
    82 }
       
    83 .simileAjax-bubble-border-top-left-pngTranslucent {
       
    84     background: url(../images/bubble-top-left.png) bottom right no-repeat;
       
    85 }
       
    86 
       
    87 div.simileAjax-bubble-border-top-right {
       
    88     position:   absolute;
       
    89     top:        -50px;
       
    90     right:      -50px;
       
    91     width:      50px;
       
    92     height:     50px;
       
    93 }
       
    94 .simileAjax-bubble-border-top-right-pngTranslucent {
       
    95     background: url(../images/bubble-top-right.png) bottom left no-repeat;
       
    96 }
       
    97 
       
    98 div.simileAjax-bubble-border-bottom-left {
       
    99     position:   absolute;
       
   100     bottom:     -50px;
       
   101     left:       -50px;
       
   102     width:      50px;
       
   103     height:     50px;
       
   104 }
       
   105 .simileAjax-bubble-border-bottom-left-pngTranslucent {
       
   106     background: url(../images/bubble-bottom-left.png) top right no-repeat;
       
   107 }
       
   108 
       
   109 div.simileAjax-bubble-border-bottom-right {
       
   110     position:   absolute;
       
   111     bottom:     -50px;
       
   112     right:      -50px;
       
   113     width:      50px;
       
   114     height:     50px;
       
   115 }
       
   116 .simileAjax-bubble-border-bottom-right-pngTranslucent {
       
   117     background: url(../images/bubble-bottom-right.png) top left no-repeat;
       
   118 }
       
   119 
       
   120 div.simileAjax-bubble-arrow-point-left {
       
   121     position:   absolute;
       
   122     left:       -100px;
       
   123     width:      100px;
       
   124     height:     49px;
       
   125 }
       
   126 .simileAjax-bubble-arrow-point-left-pngTranslucent {
       
   127     background: url(../images/bubble-arrow-point-left.png) center right no-repeat;
       
   128 }
       
   129 
       
   130 div.simileAjax-bubble-arrow-point-right {
       
   131     position:   absolute;
       
   132     right:      -100px;
       
   133     width:      100px;
       
   134     height:     49px;
       
   135 }
       
   136 .simileAjax-bubble-arrow-point-right-pngTranslucent {
       
   137     background: url(../images/bubble-arrow-point-right.png) center left no-repeat;
       
   138 }
       
   139 
       
   140 div.simileAjax-bubble-arrow-point-up {
       
   141     position:   absolute;
       
   142     top:        -100px;
       
   143     width:      49px;
       
   144     height:     100px;
       
   145 }
       
   146 .simileAjax-bubble-arrow-point-up-pngTranslucent {
       
   147     background: url(../images/bubble-arrow-point-up.png) bottom center no-repeat;
       
   148 }
       
   149 
       
   150 div.simileAjax-bubble-arrow-point-down {
       
   151     position:   absolute;
       
   152     bottom:     -100px;
       
   153     width:      49px;
       
   154     height:     100px;
       
   155 }
       
   156 .simileAjax-bubble-arrow-point-down-pngTranslucent {
       
   157     background: url(../images/bubble-arrow-point-down.png) bottom center no-repeat;
       
   158 }
       
   159 
       
   160 
       
   161 div.simileAjax-bubble-close {
       
   162     position:   absolute;
       
   163     right:      -10px;
       
   164     top:        -12px;
       
   165     width:      16px;
       
   166     height:     16px;
       
   167     cursor:     pointer;
       
   168 }
       
   169 .simileAjax-bubble-close-pngTranslucent {
       
   170     background: url(../images/close-button.png) no-repeat;
       
   171 }
       
   172 .timeline-container {
       
   173     position: relative;
       
   174     overflow: hidden;
       
   175 }
       
   176 
       
   177 .timeline-copyright {
       
   178     position: absolute;
       
   179     bottom: 0px;
       
   180     left: 0px;
       
   181     z-index: 1000;
       
   182     cursor: pointer;
       
   183 }
       
   184 
       
   185 .timeline-message-container {
       
   186     position:   absolute;
       
   187     top:        30%;
       
   188     left:       35%;
       
   189     right:      35%;
       
   190     z-index:    1000;
       
   191     display:    none;
       
   192 }
       
   193 .timeline-message {
       
   194     font-size:      120%;
       
   195     font-weight:    bold;
       
   196     text-align:     center;
       
   197 }
       
   198 .timeline-message img {
       
   199     vertical-align: middle;
       
   200 }
       
   201 
       
   202 .timeline-band {
       
   203     position:   absolute;
       
   204     background: #eee;
       
   205     z-index:    10;
       
   206 }
       
   207 
       
   208 .timeline-band-inner {
       
   209     position: relative;
       
   210     width: 100%;
       
   211     height: 100%;
       
   212 }
       
   213 
       
   214 .timeline-band-input {
       
   215     position:   absolute;
       
   216     width:      1em;
       
   217     height:     1em;
       
   218     overflow:   hidden;
       
   219     z-index:    0;
       
   220 }
       
   221 .timeline-band-input input{
       
   222     width:      0;
       
   223 }
       
   224 
       
   225 .timeline-band-layer {
       
   226     position:   absolute;
       
   227     width:      100%;
       
   228     height:     100%;
       
   229 }
       
   230 
       
   231 .timeline-band-layer-inner {
       
   232     position:   relative;
       
   233     width:      100%;
       
   234     height:     100%;
       
   235 }
       
   236 
     1 
   237 
     2 
   238 
     3 /*------------------- Horizontal / Vertical lines ----------------*/
   239 /*------------------- Horizontal / Vertical lines ----------------*/
     4 
   240 
     5 /* style for ethers */
   241 /* style for ethers */
     6 .timeline-ether-lines{border-color:#666; border-style:dotted; position:absolute;}
   242 .timeline-ether-lines{border-color:#666; border-style:dotted; position:absolute;}
     7 
       
     8 .timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;}
   243 .timeline-horizontal .timeline-ether-lines{border-width:0 0 0 1px; height:100%; top: 0; width: 1px;}
     9 
       
    10 .timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;}
   244 .timeline-vertical .timeline-ether-lines{border-width:1px 0 0; height:1px; left: 0; width: 100%;}
    11 
   245 
    12 
   246 
    13 
   247 
    14 
       
    15 /*---------------- Weekends ---------------------------*/
   248 /*---------------- Weekends ---------------------------*/
    16 
       
    17 .timeline-ether-weekends{
   249 .timeline-ether-weekends{
    18 	position:absolute;
   250 	position:absolute;
    19 	background-color:#FFFFE0;
   251 	background-color:#FFFFE0;
    20 }
   252 }
    21 
   253 
    22 .timeline-vertical .timeline-ether-weekends{left:0;width:100%;}
   254 .timeline-vertical .timeline-ether-weekends{left:0;width:100%;}
    23 
       
    24 .timeline-horizontal .timeline-ether-weekends{top:0; height:100%;}
   255 .timeline-horizontal .timeline-ether-weekends{top:0; height:100%;}
    25 
   256 
    26 
   257 
    27 
       
    28 /*-------------------------- HIGHLIGHT DECORATORS -------------------*/
   258 /*-------------------------- HIGHLIGHT DECORATORS -------------------*/
       
   259 /* Used for decorators, not used for Timeline Highlight              */
    29 .timeline-highlight-decorator,
   260 .timeline-highlight-decorator,
    30 .timeline-highlight-point-decorator{
   261 .timeline-highlight-point-decorator{
    31 	position:absolute;
   262 	position:absolute;
    32 	overflow:hidden;
   263 	overflow:hidden;
    33 }
   264 }
       
   265 
       
   266 /* Width of horizontal decorators and Height of vertical decorators is
       
   267    set in the decorator function params */
    34 .timeline-horizontal .timeline-highlight-point-decorator,
   268 .timeline-horizontal .timeline-highlight-point-decorator,
    35 .timeline-horizontal .timeline-highlight-decorator{
   269 .timeline-horizontal .timeline-highlight-decorator{
    36 	width:10px;
       
    37 	top:0;
   270 	top:0;
    38     height:100%;
   271   height:100%;
    39 }
   272 }
    40 
   273 
    41 .timeline-vertical .timeline-highlight-point-decorator,
   274 .timeline-vertical .timeline-highlight-point-decorator,
    42 .timeline-vertical .timeline-highlight-decorator{
   275 .timeline-vertical .timeline-highlight-decorator{
    43 	height:10px;
       
    44 	width:100%;
   276 	width:100%;
    45 	left:0;
   277 	left:0;
    46 }
   278 }
    47 
   279 
    48 .timeline-highlight-decorator{background-color:#FFC080;}
   280 .timeline-highlight-decorator{background-color:#FFC080;}
    49 .timeline-highlight-point-decorator{background-color:#ff5;}
   281 .timeline-highlight-point-decorator{background-color:#ff5;}
    50 
   282 
    51 
   283 
    52 
       
    53 /*---------------------------- LABELS -------------------------*/
   284 /*---------------------------- LABELS -------------------------*/
    54 .timeline-highlight-label{position:absolute;overflow:hidden;font-size:200%;font-weight:bold;color:#999;}
   285 .timeline-highlight-label {
       
   286   position:absolute; overflow:hidden; font-size:200%;
       
   287   font-weight:bold; color:#999; }
    55 
   288 
    56 
   289 
    57 /*---------------- VERTICAL LABEL -------------------*/
   290 /*---------------- VERTICAL LABEL -------------------*/
    58 .timeline-horizontal .timeline-highlight-label{top:0;height:100%;}
   291 .timeline-horizontal .timeline-highlight-label {top:0; height:100%;}
    59 .timeline-horizontal .timeline-highlight-label td{vertical-align:middle;}
   292 .timeline-horizontal .timeline-highlight-label td {vertical-align:middle;}
    60 .timeline-horizontal .timeline-highlight-label-start{text-align:right;}
   293 .timeline-horizontal .timeline-highlight-label-start {text-align:right;}
    61 .timeline-horizontal .timeline-highlight-label-end{text-align:left;}
   294 .timeline-horizontal .timeline-highlight-label-end {text-align:left;}
    62 
   295 
    63 
   296 
    64 /*---------------- HORIZONTAL LABEL -------------------*/
   297 /*---------------- HORIZONTAL LABEL -------------------*/
    65 .timeline-vertical .timeline-highlight-label{left:0;width:100%;}
   298 .timeline-vertical .timeline-highlight-label {left:0;width:100%;}
    66 .timeline-vertical .timeline-highlight-label td{vertical-align:top;}
   299 .timeline-vertical .timeline-highlight-label td {vertical-align:top;}
    67 .timeline-vertical .timeline-highlight-label-start{text-align:center;}
   300 .timeline-vertical .timeline-highlight-label-start {text-align:center;}
    68 .timeline-vertical .timeline-highlight-label-end{text-align:center;}
   301 .timeline-vertical .timeline-highlight-label-end {text-align:center;}
    69 
       
    70 
   302 
    71 
   303 
    72 /*-------------------------------- DATE LABELS --------------------------------*/
   304 /*-------------------------------- DATE LABELS --------------------------------*/
    73 .timeline-date-label{position:absolute; border:solid #aaa; color:#aaa;	width:5em; height:1.5em;}
   305 .timeline-date-label {
    74 .timeline-date-label-em{color:#000;}
   306   position: absolute;
       
   307   border: solid #aaa;
       
   308   color: #aaa;
       
   309   width: 5em;
       
   310   height: 1.5em;}
       
   311 .timeline-date-label-em {color: #000;}
    75 
   312 
    76 /* horizontal */
   313 /* horizontal */
    77 .timeline-horizontal .timeline-date-label{padding-left:2px;}
   314 .timeline-horizontal .timeline-date-label{padding-left:2px;}
    78 .timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;}
   315 .timeline-horizontal .timeline-date-label{border-width:0 0 0 1px;}
    79 .timeline-horizontal .timeline-date-label-em{height:2em}
   316 .timeline-horizontal .timeline-date-label-em{height:2em}
    81 /* vertical */
   318 /* vertical */
    82 .timeline-vertical .timeline-date-label{padding-top:2px;}
   319 .timeline-vertical .timeline-date-label{padding-top:2px;}
    83 .timeline-vertical .timeline-date-label{border-width:1px 0 0;}
   320 .timeline-vertical .timeline-date-label{border-width:1px 0 0;}
    84 .timeline-vertical .timeline-date-label-em{width:7em}
   321 .timeline-vertical .timeline-date-label-em{width:7em}
    85 
   322 
       
   323 
    86 /*------------------------------- Ether.highlight -------------------------*/
   324 /*------------------------------- Ether.highlight -------------------------*/
    87 .timeline-ether-highlight{position:absolute; background-color:#fff;}
   325 .timeline-ether-highlight{position:absolute; background-color:#fff;}
    88 .timeline-horizontal .timeline-ether-highlight{top:2px;}
   326 .timeline-horizontal .timeline-ether-highlight{top:2px;}
    89 .timeline-vertical .timeline-ether-highlight{left:2px;}
   327 .timeline-vertical .timeline-ether-highlight{left:2px;}
    90 
       
    91 
   328 
    92 
   329 
    93 /*------------------------------ EVENTS ------------------------------------*/
   330 /*------------------------------ EVENTS ------------------------------------*/
    94 .timeline-event-icon, .timeline-event-label,.timeline-event-tape{
   331 .timeline-event-icon, .timeline-event-label,.timeline-event-tape{
    95 	position:absolute;
   332 	position:absolute;
   106 .timeline-small-event-tape,
   343 .timeline-small-event-tape,
   107 .timeline-small-event-icon{
   344 .timeline-small-event-icon{
   108 	position:absolute;
   345 	position:absolute;
   109 }
   346 }
   110 
   347 
   111 .timeline-event-tape{height:4px;}
       
   112 
       
   113 .timeline-small-event-tape{height:2px;}
       
   114 .timeline-small-event-icon{width:1px; height:6px;}
   348 .timeline-small-event-icon{width:1px; height:6px;}
   115  
   349 
   116  
   350   
   117 
       
   118 /*--------------------------------- TIMELINE-------------------------*/
   351 /*--------------------------------- TIMELINE-------------------------*/
   119 .timeline-ether-bg{width:100%; height:100%;}
   352 .timeline-ether-bg{width:100%; height:100%;}
   120 .timeline-band-0 .timeline-ether-bg{background-color:#eee}
   353 .timeline-band-0 .timeline-ether-bg{background-color:#eee}
   121 .timeline-band-1 .timeline-ether-bg{background-color:#ddd}
   354 .timeline-band-1 .timeline-ether-bg{background-color:#ddd}
   122 .timeline-band-2 .timeline-ether-bg{background-color:#ccc}
   355 .timeline-band-2 .timeline-ether-bg{background-color:#ccc}
   163 
   396 
   164 .timeline-event-bubble-image {
   397 .timeline-event-bubble-image {
   165     float: right;
   398     float: right;
   166     padding-left: 5px;
   399     padding-left: 5px;
   167     padding-bottom: 5px;
   400     padding-bottom: 5px;
   168 }.timeline-container {
   401 }
   169     position: relative;
       
   170     overflow: hidden;
       
   171 }
       
   172 
       
   173 .timeline-copyright {
       
   174     position: absolute;
       
   175     bottom: 0px;
       
   176     left: 0px;
       
   177     z-index: 1000;
       
   178     cursor: pointer;
       
   179 }
       
   180 
       
   181 .timeline-message-container {
       
   182     position:   absolute;
       
   183     top:        30%;
       
   184     left:       35%;
       
   185     right:      35%;
       
   186     z-index:    1000;
       
   187     display:    none;
       
   188 }
       
   189 .timeline-message {
       
   190     font-size:      120%;
       
   191     font-weight:    bold;
       
   192     text-align:     center;
       
   193 }
       
   194 .timeline-message img {
       
   195     vertical-align: middle;
       
   196 }
       
   197 
       
   198 .timeline-band {
       
   199     position:   absolute;
       
   200     background: #eee;
       
   201     z-index:    10;
       
   202 }
       
   203 
       
   204 .timeline-band-inner {
       
   205     position: relative;
       
   206     width: 100%;
       
   207     height: 100%;
       
   208 }
       
   209 
       
   210 .timeline-band-input {
       
   211     position:   absolute;
       
   212     width:      1em;
       
   213     height:     1em;
       
   214     overflow:   hidden;
       
   215     z-index:    0;
       
   216 }
       
   217 .timeline-band-input input{
       
   218     width:      0;
       
   219 }
       
   220 
       
   221 .timeline-band-layer {
       
   222     position:   absolute;
       
   223     width:      100%;
       
   224     height:     100%;
       
   225 }
       
   226 
       
   227 .timeline-band-layer-inner {
       
   228     position:   relative;
       
   229     width:      100%;
       
   230     height:     100%;
       
   231 }
       
   232