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