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