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