1 /* event-aggregator.css - some additional styles for the EventAggregator macro 2 which can be included in screen.css and print.css 3 using... 4 5 @import "event-aggregator.css"; 6 7 ...before any rules. 8 9 Copyright (c) 2009, 2010, 2011, 2012, 2013 by Paul Boddie 10 Licensed under the GNU GPL (v2 or later), see COPYING.txt for details. 11 */ 12 13 /* Controls. */ 14 15 .event-controls { 16 display: block; 17 } 18 19 .event-view-controls, 20 .event-download-controls { 21 text-align: center; 22 } 23 24 .event-view, 25 .event-download { 26 margin-left: 1em; 27 margin-right: 1em; 28 text-align: left; 29 } 30 31 .event-view a { 32 font-size: smaller; 33 display: inline-block; 34 } 35 36 .event-download { 37 position: relative; 38 font-size: smaller; 39 padding-bottom: 0.5em; 40 } 41 42 .event-download-popup { 43 display: none; 44 font-size: larger; 45 } 46 47 .event-download:hover .event-download-popup, 48 .event-download:target .event-download-popup, 49 .event-day-box:hover .event-day-number-popup, 50 .event-day-box:target .event-day-number-popup { 51 display: block; 52 position: absolute; 53 left: 0; 54 z-index: 3; 55 background-color: #fff; 56 color: #000; 57 border: 1px solid #000; 58 } 59 60 .event-download:hover .event-download-popup, 61 .event-download:target .event-download-popup { 62 top: 1em; /* negligible top padding + 1em, leaving 0.5em bottom padding */ 63 padding: 0.5em 0.5em 0 0.5em; 64 } 65 66 .event-day-box:hover .event-day-number-popup, 67 .event-day-box:target .event-day-number-popup { 68 top: 1.25em; /* 0.25em top padding + 1em, leaving 0.25em bottom padding */ 69 padding: 0.5em; 70 } 71 72 .event-download-item { 73 padding-top: 0.5em; 74 margin-bottom: 0.5em; 75 border-top: 1px solid #ddd; 76 border-bottom: 1px solid #ddd; 77 white-space: nowrap; 78 } 79 80 .event-download-webcal a { 81 background-color: #99d; 82 } 83 84 .event-download-http a { 85 background-color: #d99; 86 } 87 88 .event-download-webcal a:hover, 89 .event-download-webcal a:focus, 90 .event-download-webcal a:active { 91 background-color: #00d; 92 } 93 94 .event-download-http a:hover, 95 .event-download-http a:focus, 96 .event-download-http a:active { 97 background-color: #d00; 98 } 99 100 .event-download-webcal a, 101 .event-download-webcal a:link, 102 .event-download-webcal a:hover, 103 .event-download-webcal a:focus, 104 .event-download-webcal a:active, 105 .event-download-webcal a:visited, 106 .event-download-http a, 107 .event-download-http a:link, 108 .event-download-http a:hover, 109 .event-download-http a:focus, 110 .event-download-http a:active, 111 .event-download-http a:visited { 112 font-size: inherit; 113 font-weight: bold; 114 color: #fff !important; 115 text-decoration: none !important; 116 padding: 0.25em; 117 margin-right: 0.25em; 118 } 119 120 .event-download-link, 121 .event-download-period { 122 display: block; 123 text-align: right; 124 } 125 126 .event-download-link { 127 margin: 0; 128 padding-bottom: 0.5em; 129 } 130 131 .event-download-period { 132 margin-top: 0.5em; 133 } 134 135 .event-download-period-raw { 136 display: block; 137 font-size: smaller; 138 text-align: right; 139 } 140 141 /* Calendar view. */ 142 143 .event-month { 144 width: 98%; 145 border-bottom: 1px solid #dddddd; 146 table-layout: fixed; 147 margin-top: 0; /* should not be necessary, but some browsers put this below the caption */ 148 } 149 150 caption.event-month-heading { 151 margin: 0.5em 1px 1px 1px; 152 padding: 0.5em; 153 caption-side: top; 154 } 155 156 .event-map-heading, 157 .event-month-heading, 158 .event-full-day-heading { 159 background-color: #777777; 160 color: #ffffff; 161 text-align: center; 162 font-weight: bold; 163 border: 0; 164 } 165 166 .event-map-heading a:link, 167 .event-map-heading a:hover, 168 .event-map-heading a:focus, 169 .event-map-heading a:visited, 170 .event-month-heading a:link, 171 .event-month-heading a:hover, 172 .event-month-heading a:focus, 173 .event-month-heading a:visited, 174 .event-full-day-heading a:link, 175 .event-full-day-heading a:hover, 176 .event-full-day-heading a:focus, 177 .event-full-day-heading a:visited { 178 color: inherit !important; 179 } 180 181 .event-map-heading .previous, 182 .event-month-heading .previous, 183 .event-full-day-heading .previous, 184 .event-listings-heading .previous { 185 float: left; 186 } 187 188 .event-map-heading .next, 189 .event-month-heading .next, 190 .event-full-day-heading .next, 191 .event-listings-heading .next { 192 float: right; 193 } 194 195 .event-weekday-heading { 196 background-color: #999999; 197 color: #ffffff; 198 text-align: center; 199 border: 1px solid #dddddd; 200 } 201 202 /* Day types: days with content (busy), unused days (excluded or empty), 203 current (today). */ 204 205 .event-day-current.event-day-busy, 206 .event-day-current.event-day-empty { 207 background-color: #ffdddd; 208 } 209 210 .event-day-busy, 211 .event-timespan-busy { 212 background-color: #ffffff; 213 } 214 215 .event-day-excluded { 216 background-color: #dddddd; 217 border-left: 1px solid #dddddd; 218 border-right: 1px solid #dddddd; 219 } 220 221 .event-day-empty, 222 .event-timespan-empty { 223 background-color: #ffffff; 224 border-left: 1px solid #dddddd; 225 border-right: 1px solid #dddddd; 226 } 227 228 .event-day-content.event-day-empty { 229 padding-bottom: 2em; 230 } 231 232 /* Day headings and numbers. */ 233 234 .event-day-current.event-day-heading { 235 background-color: #ffdddd; 236 } 237 238 .event-day-excluded.event-day-heading { 239 background-color: #dddddd; 240 } 241 242 .event-day-heading { 243 width: 14%; 244 vertical-align: top; 245 padding-top: 0; 246 padding-left: 0; 247 padding-bottom: 0.5em; 248 border-top: 1px solid #dddddd; 249 border-bottom: 0; 250 border-left: 1px solid #dddddd; 251 border-right: 1px solid #dddddd; 252 background-color: #ffffff; 253 } 254 255 .event-day-box { 256 position: relative; /* see event-day-number-popup */ 257 } 258 259 .event-day-empty span.event-day-number { 260 color: #000000; 261 } 262 263 .event-day-busy span.event-day-number { 264 background-color: #555555; 265 color: #ffffff; 266 } 267 268 .event-day-number { 269 padding: 0.25em; 270 } 271 272 .event-day-number a:link, 273 .event-day-number a:hover, 274 .event-day-number a:focus, 275 .event-day-number a:visited { 276 color: inherit !important; 277 } 278 279 .event-day-number-link { 280 display: block; 281 } 282 283 /* Day content. */ 284 285 .event-day-content { 286 width: 14%; 287 vertical-align: top; 288 padding: 0; 289 border-top: 0; 290 border-bottom: 0; 291 } 292 293 .event-day-starting { 294 border-left: 0; 295 border-right: 1px solid #dddddd; 296 } 297 298 .event-day-ending { 299 border-left: 1px solid #dddddd; 300 border-right: 0; 301 } 302 303 .event-day-full, 304 .event-day-single, 305 .event-day-multiple { 306 border-left: 1px solid #dddddd; 307 border-right: 1px solid #dddddd; 308 } 309 310 .event-day-current.event-day-start-gap, 311 .event-day-current.event-day-end-gap { 312 background-color: #ffdddd; 313 } 314 315 .event-day-start-gap { 316 width: 2%; 317 border-top: 0; 318 border-bottom: 0; 319 border-left: 1px solid #dddddd; 320 border-right: 0; 321 background-color: #ffffff; 322 } 323 324 .event-day-end-gap { 325 width: 2%; 326 border-top: 0; 327 border-bottom: 0; 328 border-left: 0; 329 border-right: 1px solid #dddddd; 330 background-color: #ffffff; 331 } 332 333 /* Event details. */ 334 335 .event-summary-box { 336 position: relative; 337 } 338 339 .event-day-content a:link, 340 .event-day-content a:hover, 341 .event-day-content a:focus, 342 .event-day-content a:visited { 343 color: inherit !important; 344 } 345 346 .event-summary { 347 padding: 0.75em; 348 margin-left: 0; 349 margin-right: 0; 350 overflow: hidden; 351 } 352 353 .event-day-single .event-summary { 354 padding: 0.75em 0.25em 0.75em 0.25em; 355 margin-left: 0.5em; 356 margin-right: 0.5em; 357 } 358 359 .event-summary-popup, 360 .event-day-number-popup { 361 display: none; 362 overflow: show; 363 position: absolute; 364 left: 0.5em; 365 top: 0; 366 z-index: 2; 367 padding: 0.75em 0.25em 0.75em 0.25em; 368 margin-right: 0.5em; 369 } 370 371 .event-summary-box:hover > .event-summary-popup { 372 display: block; 373 } 374 375 .event-summary-box:hover > .event-summary a { 376 visibility: hidden; 377 } 378 379 /* Day spacers. */ 380 381 .event-day-current.event-day-spacer { 382 background-color: #ffdddd; 383 } 384 385 .event-day-spacer { 386 min-height: 0.5em; 387 border-top: 0; 388 border-bottom: 0; 389 border-left: 1px solid #dddddd; 390 border-right: 1px solid #dddddd; 391 } 392 393 /* Day view, showing days from a calendar. */ 394 395 .event-calendar-day { 396 width: 98%; 397 border-bottom: 1px solid #dddddd; 398 margin-top: 0; /* should not be necessary, but some browsers put this below the caption */ 399 } 400 401 caption.event-full-day-heading { 402 margin: 0.5em 1px 1px 1px; 403 padding: 0.5em; 404 caption-side: top; 405 } 406 407 .event-scale-heading, 408 .event-timespan-content, 409 .event-timespan-spacer { 410 border-top: 1px solid #dddddd; 411 border-bottom: 1px solid #dddddd; 412 border-left: 0; 413 border-right: 0; 414 } 415 416 .event-location-heading, 417 .event-location-spacer { 418 border: 0; 419 } 420 421 .event-location-heading, 422 .event-location-spacer, 423 .event-timespan-spacer, 424 .event-full-day-spacer { 425 background-color: #ffffff; 426 } 427 428 .event-location-heading { 429 text-align: center; 430 border: 0; 431 border-left: 1px dotted #ddd; 432 border-right: 1px dotted #ddd; 433 background-color: #ffffff; 434 } 435 436 .event-scale-heading { 437 padding-bottom: 2em; 438 } 439 440 .event-scale-heading, 441 .event-timespan-content { 442 vertical-align: top; 443 } 444 445 .event-timespan-content a:link, 446 .event-timespan-content a:hover, 447 .event-timespan-content a:focus, 448 .event-timespan-content a:visited { 449 color: inherit !important; 450 } 451 452 .event-timespan-spacer { 453 width: 2%; 454 } 455 456 /* List/summary view. */ 457 458 .event-listings { 459 list-style: none; 460 } 461 462 .event-listings-heading { 463 border-bottom: 1px solid #999999; 464 text-align: center; 465 } 466 467 .event-period-listings { 468 list-style: disc; 469 padding-bottom: 2em; 470 } 471 472 /* Table view */ 473 474 .event-table { 475 width: 98%; 476 } 477 478 .event-table-heading { 479 font-weight: bold; 480 } 481 482 .event-table-details a:link, 483 .event-table-details a:hover, 484 .event-table-details a:focus, 485 .event-table-details a:visited { 486 color: inherit !important; 487 } 488 489 .event-table-category-conference { 490 background-color: #ff9999; 491 color: #000000; 492 } 493 494 .event-table-category-training { 495 background-color: #99ff99; 496 color: #000000; 497 } 498 499 .event-table-category-special { 500 background-color: #ffff99; 501 color: #000000; 502 } 503 504 /* Map view. */ 505 506 .event-map { 507 text-align: center; 508 } 509 510 .event-map table { 511 display: inline-block; 512 } 513 514 caption.event-map-heading { 515 margin: 0.5em 1px 1px 1px; 516 padding: 0.5em; 517 caption-side: top; 518 } 519 520 .event-map-container { 521 position: relative; 522 margin: 0; 523 padding: 0; 524 text-align: left; 525 } 526 527 .event-map-container > img { 528 margin: 0; 529 padding: 0; 530 border: 0; 531 /* image and dimensions specified in the HTML */ 532 } 533 534 .event-map-container > ol { 535 margin: 0; 536 padding: 0; 537 list-style-type: none; 538 } 539 540 /* Label element and pop-up effects. */ 541 542 div.event-map-label-only { 543 display: none; 544 } 545 546 a.event-map-label-link span { 547 display: none; 548 } 549 550 a.event-map-label-link:focus span { 551 display: inline-block; 552 background-color: #fff; 553 padding: 0.25em; 554 } 555 556 div.event-map-label { 557 position: absolute; 558 /* position and dimensions specified in the HTML */ 559 border: 2px solid #d00; 560 } 561 562 div.event-map-label .event-map-details { 563 display: none; 564 position: absolute; 565 top: 0; 566 left: 0; 567 z-index: 2; 568 min-width: 10em; 569 } 570 571 div.event-map-label:hover .event-map-details, 572 div.event-map-label:target .event-map-details { 573 display: block; 574 } 575 576 /* Details elements. */ 577 578 .event-map-shadow { 579 background-color: #555; 580 } 581 582 .event-map-shadow .event-map-location { 583 position: relative; 584 top: -8px; 585 left: -8px; 586 padding: 0.25em; 587 background-color: #fff; 588 } 589 590 .event-map-unpositioned h2, 591 .event-map-location h2 { 592 font-size: inherit !important; 593 text-align: center; 594 } 595 596 .event-map-unpositioned:not(:target) h2, 597 .event-map-unpositioned:target .event-map-show-control, 598 .event-map-unpositioned:not(:target) .event-map-hide-control, 599 .event-map-unpositioned:not(:target) ul.event-map-location-events { 600 display: none; 601 } 602 603 .event-map-unpositioned:target h2, 604 .event-map-unpositioned:not(:target) .event-map-show-control, 605 .event-map-unpositioned:target .event-map-hide-control, 606 .event-map-unpositioned:target ul.event-map-location-events { 607 display: block; 608 } 609 610 ul.event-map-location-events { 611 list-style-type: none; 612 padding: 0.25em; 613 } 614 615 ul.event-map-location-events li { 616 text-align: left; 617 padding: 0.25em 0 0.25em 0; 618 } 619 620 .event-map-period { 621 display: block; 622 font-size: smaller; 623 } 624 625 /* New event form. */ 626 627 td.event-time-selection, 628 td.event-zone-selection, 629 td.event-regime-selection.event-end-time { 630 vertical-align: bottom; 631 } 632 633 td.event-time-selection.label, 634 td.event-regime-selection { 635 vertical-align: top; 636 } 637 638 /* vim: tabstop=4 expandtab shiftwidth=4 639 */