library/fullcalendar/fullcalendar.css

   1 /*!
   2  * FullCalendar v3.0.1 Stylesheet
   3  * Docs & License: http://fullcalendar.io/
   4  * (c) 2016 Adam Shaw
   5  */
   6
   7
   8 .fc {
   9         direction: ltr;
  10         text-align: left;
  11 }
  12
  13 .fc-rtl {
  14         text-align: right;
  15 }
  16
  17 body .fc { /* extra precedence to overcome jqui */
  18         font-size: 1em;
  19 }
  20
  21
  22 /* Colors
  23 --------------------------------------------------------------------------------------------------*/
  24
  25 .fc-unthemed th,
  26 .fc-unthemed td,
  27 .fc-unthemed thead,
  28 .fc-unthemed tbody,
  29 .fc-unthemed .fc-divider,
  30 .fc-unthemed .fc-row,
  31 .fc-unthemed .fc-content, /* for gutter border */
  32 .fc-unthemed .fc-popover,
  33 .fc-unthemed .fc-list-view,
  34 .fc-unthemed .fc-list-heading td {
  35         border-color: #ddd;
  36 }
  37
  38 .fc-unthemed .fc-popover {
  39         background-color: #fff;
  40 }
  41
  42 .fc-unthemed .fc-divider,
  43 .fc-unthemed .fc-popover .fc-header,
  44 .fc-unthemed .fc-list-heading td {
  45         background: #eee;
  46 }
  47
  48 .fc-unthemed .fc-popover .fc-header .fc-close {
  49         color: #666;
  50 }
  51
  52 .fc-unthemed .fc-today {
  53         background: #fcf8e3;
  54 }
  55
  56 .fc-highlight { /* when user is selecting cells */
  57         background: #bce8f1;
  58         opacity: .3;
  59 }
  60
  61 .fc-bgevent { /* default look for background events */
  62         background: rgb(143, 223, 130);
  63         opacity: .3;
  64 }
  65
  66 .fc-nonbusiness { /* default look for non-business-hours areas */
  67         /* will inherit .fc-bgevent's styles */
  68         background: #d7d7d7;
  69 }
  70
  71
  72 /* Icons (inline elements with styled text that mock arrow icons)
  73 --------------------------------------------------------------------------------------------------*/
  74
  75 .fc-icon {
  76         display: inline-block;
  77         height: 1em;
  78         line-height: 1em;
  79         font-size: 1em;
  80         text-align: center;
  81         overflow: hidden;
  82         font-family: "Courier New", Courier, monospace;
  83
  84         /* don't allow browser text-selection */
  85         -webkit-touch-callout: none;
  86         -webkit-user-select: none;
  87         -khtml-user-select: none;
  88         -moz-user-select: none;
  89         -ms-user-select: none;
  90         user-select: none;
  91         }
  92
  93 /*
  94 Acceptable font-family overrides for individual icons:
  95         "Arial", sans-serif
  96         "Times New Roman", serif
  97
  98 NOTE: use percentage font sizes or else old IE chokes
  99 */
 100
 101 .fc-icon:after {
 102         position: relative;
 103 }
 104
 105 .fc-icon-left-single-arrow:after {
 106         content: "\02039";
 107         font-weight: bold;
 108         font-size: 200%;
 109         top: -7%;
 110 }
 111
 112 .fc-icon-right-single-arrow:after {
 113         content: "\0203A";
 114         font-weight: bold;
 115         font-size: 200%;
 116         top: -7%;
 117 }
 118
 119 .fc-icon-left-double-arrow:after {
 120         content: "\000AB";
 121         font-size: 160%;
 122         top: -7%;
 123 }
 124
 125 .fc-icon-right-double-arrow:after {
 126         content: "\000BB";
 127         font-size: 160%;
 128         top: -7%;
 129 }
 130
 131 .fc-icon-left-triangle:after {
 132         content: "\25C4";
 133         font-size: 125%;
 134         top: 3%;
 135 }
 136
 137 .fc-icon-right-triangle:after {
 138         content: "\25BA";
 139         font-size: 125%;
 140         top: 3%;
 141 }
 142
 143 .fc-icon-down-triangle:after {
 144         content: "\25BC";
 145         font-size: 125%;
 146         top: 2%;
 147 }
 148
 149 .fc-icon-x:after {
 150         content: "\000D7";
 151         font-size: 200%;
 152         top: 6%;
 153 }
 154
 155
 156 /* Buttons (styled <button> tags, normalized to work cross-browser)
 157 --------------------------------------------------------------------------------------------------*/
 158
 159 .fc button {
 160         /* force height to include the border and padding */
 161         -moz-box-sizing: border-box;
 162         -webkit-box-sizing: border-box;
 163         box-sizing: border-box;
 164
 165         /* dimensions */
 166         margin: 0;
 167         height: 2.1em;
 168         padding: 0 .6em;
 169
 170         /* text & cursor */
 171         font-size: 1em; /* normalize */
 172         white-space: nowrap;
 173         cursor: pointer;
 174 }
 175
 176 /* Firefox has an annoying inner border */
 177 .fc button::-moz-focus-inner { margin: 0; padding: 0; }
 178
 179 .fc-state-default { /* non-theme */
 180         border: 1px solid;
 181 }
 182
 183 .fc-state-default.fc-corner-left { /* non-theme */
 184         border-top-left-radius: 4px;
 185         border-bottom-left-radius: 4px;
 186 }
 187
 188 .fc-state-default.fc-corner-right { /* non-theme */
 189         border-top-right-radius: 4px;
 190         border-bottom-right-radius: 4px;
 191 }
 192
 193 /* icons in buttons */
 194
 195 .fc button .fc-icon { /* non-theme */
 196         position: relative;
 197         top: -0.05em; /* seems to be a good adjustment across browsers */
 198         margin: 0 .2em;
 199         vertical-align: middle;
 200 }
 201
 202 /*
 203   button states
 204   borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
 205 */
 206
 207 .fc-state-default {
 208         background-color: #f5f5f5;
 209         background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
 210         background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 211         background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 212         background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 213         background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
 214         background-repeat: repeat-x;
 215         border-color: #e6e6e6 #e6e6e6 #bfbfbf;
 216         border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 217         color: #333;
 218         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 219         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 220 }
 221
 222 .fc-state-hover,
 223 .fc-state-down,
 224 .fc-state-active,
 225 .fc-state-disabled {
 226         color: #333333;
 227         background-color: #e6e6e6;
 228 }
 229
 230 .fc-state-hover {
 231         color: #333333;
 232         text-decoration: none;
 233         background-position: 0 -15px;
 234         -webkit-transition: background-position 0.1s linear;
 235            -moz-transition: background-position 0.1s linear;
 236              -o-transition: background-position 0.1s linear;
 237                 transition: background-position 0.1s linear;
 238 }
 239
 240 .fc-state-down,
 241 .fc-state-active {
 242         background-color: #cccccc;
 243         background-image: none;
 244         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 245 }
 246
 247 .fc-state-disabled {
 248         cursor: default;
 249         background-image: none;
 250         opacity: 0.65;
 251         box-shadow: none;
 252 }
 253
 254
 255 /* Buttons Groups
 256 --------------------------------------------------------------------------------------------------*/
 257
 258 .fc-button-group {
 259         display: inline-block;
 260 }
 261
 262 /*
 263 every button that is not first in a button group should scootch over one pixel and cover the
 264 previous button's border...
 265 */
 266
 267 .fc .fc-button-group > * { /* extra precedence b/c buttons have margin set to zero */
 268         float: left;
 269         margin: 0 0 0 -1px;
 270 }
 271
 272 .fc .fc-button-group > :first-child { /* same */
 273         margin-left: 0;
 274 }
 275
 276
 277 /* Popover
 278 --------------------------------------------------------------------------------------------------*/
 279
 280 .fc-popover {
 281         position: absolute;
 282         box-shadow: 0 2px 6px rgba(0,0,0,.15);
 283 }
 284
 285 .fc-popover .fc-header { /* TODO: be more consistent with fc-head/fc-body */
 286         padding: 2px 4px;
 287 }
 288
 289 .fc-popover .fc-header .fc-title {
 290         margin: 0 2px;
 291 }
 292
 293 .fc-popover .fc-header .fc-close {
 294         cursor: pointer;
 295 }
 296
 297 .fc-ltr .fc-popover .fc-header .fc-title,
 298 .fc-rtl .fc-popover .fc-header .fc-close {
 299         float: left;
 300 }
 301
 302 .fc-rtl .fc-popover .fc-header .fc-title,
 303 .fc-ltr .fc-popover .fc-header .fc-close {
 304         float: right;
 305 }
 306
 307 /* unthemed */
 308
 309 .fc-unthemed .fc-popover {
 310         border-width: 1px;
 311         border-style: solid;
 312 }
 313
 314 .fc-unthemed .fc-popover .fc-header .fc-close {
 315         font-size: .9em;
 316         margin-top: 2px;
 317 }
 318
 319 /* jqui themed */
 320
 321 .fc-popover > .ui-widget-header + .ui-widget-content {
 322         border-top: 0; /* where they meet, let the header have the border */
 323 }
 324
 325
 326 /* Misc Reusable Components
 327 --------------------------------------------------------------------------------------------------*/
 328
 329 .fc-divider {
 330         border-style: solid;
 331         border-width: 1px;
 332 }
 333
 334 hr.fc-divider {
 335         height: 0;
 336         margin: 0;
 337         padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
 338         border-width: 1px 0;
 339 }
 340
 341 .fc-clear {
 342         clear: both;
 343 }
 344
 345 .fc-bg,
 346 .fc-bgevent-skeleton,
 347 .fc-highlight-skeleton,
 348 .fc-helper-skeleton {
 349         /* these element should always cling to top-left/right corners */
 350         position: absolute;
 351         top: 0;
 352         left: 0;
 353         right: 0;
 354 }
 355
 356 .fc-bg {
 357         bottom: 0; /* strech bg to bottom edge */
 358 }
 359
 360 .fc-bg table {
 361         height: 100%; /* strech bg to bottom edge */
 362 }
 363
 364
 365 /* Tables
 366 --------------------------------------------------------------------------------------------------*/
 367
 368 .fc table {
 369         width: 100%;
 370         box-sizing: border-box; /* fix scrollbar issue in firefox */
 371         table-layout: fixed;
 372         border-collapse: collapse;
 373         border-spacing: 0;
 374         font-size: 1em; /* normalize cross-browser */
 375 }
 376
 377 .fc th {
 378         text-align: center;
 379 }
 380
 381 .fc th,
 382 .fc td {
 383         border-style: solid;
 384         border-width: 1px;
 385         padding: 0;
 386         vertical-align: top;
 387 }
 388
 389 .fc td.fc-today {
 390         border-style: double; /* overcome neighboring borders */
 391 }
 392
 393
 394 /* Internal Nav Links
 395 --------------------------------------------------------------------------------------------------*/
 396
 397 a[data-goto] {
 398         cursor: pointer;
 399 }
 400
 401 a[data-goto]:hover {
 402         text-decoration: underline;
 403 }
 404
 405
 406 /* Fake Table Rows
 407 --------------------------------------------------------------------------------------------------*/
 408
 409 .fc .fc-row { /* extra precedence to overcome themes w/ .ui-widget-content forcing a 1px border */
 410         /* no visible border by default. but make available if need be (scrollbar width compensation) */
 411         border-style: solid;
 412         border-width: 0;
 413 }
 414
 415 .fc-row table {
 416         /* don't put left/right border on anything within a fake row.
 417            the outer tbody will worry about this */
 418         border-left: 0 hidden transparent;
 419         border-right: 0 hidden transparent;
 420
 421         /* no bottom borders on rows */
 422         border-bottom: 0 hidden transparent;
 423 }
 424
 425 .fc-row:first-child table {
 426         border-top: 0 hidden transparent; /* no top border on first row */
 427 }
 428
 429
 430 /* Day Row (used within the header and the DayGrid)
 431 --------------------------------------------------------------------------------------------------*/
 432
 433 .fc-row {
 434         position: relative;
 435 }
 436
 437 .fc-row .fc-bg {
 438         z-index: 1;
 439 }
 440
 441 /* highlighting cells & background event skeleton */
 442
 443 .fc-row .fc-bgevent-skeleton,
 444 .fc-row .fc-highlight-skeleton {
 445         bottom: 0; /* stretch skeleton to bottom of row */
 446 }
 447
 448 .fc-row .fc-bgevent-skeleton table,
 449 .fc-row .fc-highlight-skeleton table {
 450         height: 100%; /* stretch skeleton to bottom of row */
 451 }
 452
 453 .fc-row .fc-highlight-skeleton td,
 454 .fc-row .fc-bgevent-skeleton td {
 455         border-color: transparent;
 456 }
 457
 458 .fc-row .fc-bgevent-skeleton {
 459         z-index: 2;
 460
 461 }
 462
 463 .fc-row .fc-highlight-skeleton {
 464         z-index: 3;
 465 }
 466
 467 /*
 468 row content (which contains day/week numbers and events) as well as "helper" (which contains
 469 temporary rendered events).
 470 */
 471
 472 .fc-row .fc-content-skeleton {
 473         position: relative;
 474         z-index: 4;
 475         padding-bottom: 2px; /* matches the space above the events */
 476 }
 477
 478 .fc-row .fc-helper-skeleton {
 479         z-index: 5;
 480 }
 481
 482 .fc-row .fc-content-skeleton td,
 483 .fc-row .fc-helper-skeleton td {
 484         /* see-through to the background below */
 485         background: none; /* in case <td>s are globally styled */
 486         border-color: transparent;
 487
 488         /* don't put a border between events and/or the day number */
 489         border-bottom: 0;
 490 }
 491
 492 .fc-row .fc-content-skeleton tbody td, /* cells with events inside (so NOT the day number cell) */
 493 .fc-row .fc-helper-skeleton tbody td {
 494         /* don't put a border between event cells */
 495         border-top: 0;
 496 }
 497
 498
 499 /* Scrolling Container
 500 --------------------------------------------------------------------------------------------------*/
 501
 502 .fc-scroller {
 503         -webkit-overflow-scrolling: touch;
 504 }
 505
 506 /* TODO: move to agenda/basic */
 507 .fc-scroller > .fc-day-grid,
 508 .fc-scroller > .fc-time-grid {
 509         position: relative; /* re-scope all positions */
 510         width: 100%; /* hack to force re-sizing this inner element when scrollbars appear/disappear */
 511 }
 512
 513
 514 /* Global Event Styles
 515 --------------------------------------------------------------------------------------------------*/
 516
 517 .fc-event {
 518         position: relative; /* for resize handle and other inner positioning */
 519         display: block; /* make the <a> tag block */
 520         font-size: .85em;
 521         line-height: 1.3;
 522         border-radius: 3px;
 523         border: 1px solid #3a87ad; /* default BORDER color */
 524         font-weight: normal; /* undo jqui's ui-widget-header bold */
 525 }
 526
 527 .fc-event,
 528 .fc-event-dot {
 529         background-color: #3a87ad; /* default BACKGROUND color */
 530 }
 531
 532 /* overpower some of bootstrap's and jqui's styles on <a> tags */
 533 .fc-event,
 534 .fc-event:hover,
 535 .ui-widget .fc-event {
 536         color: #fff; /* default TEXT color */
 537         text-decoration: none; /* if <a> has an href */
 538 }
 539
 540 .fc-event[href],
 541 .fc-event.fc-draggable {
 542         cursor: pointer; /* give events with links and draggable events a hand mouse pointer */
 543 }
 544
 545 .fc-not-allowed, /* causes a "warning" cursor. applied on body */
 546 .fc-not-allowed .fc-event { /* to override an event's custom cursor */
 547         cursor: not-allowed;
 548 }
 549
 550 .fc-event .fc-bg { /* the generic .fc-bg already does position */
 551         z-index: 1;
 552         background: #fff;
 553         opacity: .25;
 554 }
 555
 556 .fc-event .fc-content {
 557         position: relative;
 558         z-index: 2;
 559 }
 560
 561 /* resizer (cursor AND touch devices) */
 562
 563 .fc-event .fc-resizer {
 564         position: absolute;
 565         z-index: 4;
 566 }
 567
 568 /* resizer (touch devices) */
 569
 570 .fc-event .fc-resizer {
 571         display: none;
 572 }
 573
 574 .fc-event.fc-allow-mouse-resize .fc-resizer,
 575 .fc-event.fc-selected .fc-resizer {
 576         /* only show when hovering or selected (with touch) */
 577         display: block;
 578 }
 579
 580 /* hit area */
 581
 582 .fc-event.fc-selected .fc-resizer:before {
 583         /* 40x40 touch area */
 584         content: "";
 585         position: absolute;
 586         z-index: 9999; /* user of this util can scope within a lower z-index */
 587         top: 50%;
 588         left: 50%;
 589         width: 40px;
 590         height: 40px;
 591         margin-left: -20px;
 592         margin-top: -20px;
 593 }
 594
 595
 596 /* Event Selection (only for touch devices)
 597 --------------------------------------------------------------------------------------------------*/
 598
 599 .fc-event.fc-selected {
 600         z-index: 9999 !important; /* overcomes inline z-index */
 601         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 602 }
 603
 604 .fc-event.fc-selected.fc-dragging {
 605         box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
 606 }
 607
 608
 609 /* Horizontal Events
 610 --------------------------------------------------------------------------------------------------*/
 611
 612 /* bigger touch area when selected */
 613 .fc-h-event.fc-selected:before {
 614         content: "";
 615         position: absolute;
 616         z-index: 3; /* below resizers */
 617         top: -10px;
 618         bottom: -10px;
 619         left: 0;
 620         right: 0;
 621 }
 622
 623 /* events that are continuing to/from another week. kill rounded corners and butt up against edge */
 624
 625 .fc-ltr .fc-h-event.fc-not-start,
 626 .fc-rtl .fc-h-event.fc-not-end {
 627         margin-left: 0;
 628         border-left-width: 0;
 629         padding-left: 1px; /* replace the border with padding */
 630         border-top-left-radius: 0;
 631         border-bottom-left-radius: 0;
 632 }
 633
 634 .fc-ltr .fc-h-event.fc-not-end,
 635 .fc-rtl .fc-h-event.fc-not-start {
 636         margin-right: 0;
 637         border-right-width: 0;
 638         padding-right: 1px; /* replace the border with padding */
 639         border-top-right-radius: 0;
 640         border-bottom-right-radius: 0;
 641 }
 642
 643 /* resizer (cursor AND touch devices) */
 644
 645 /* left resizer  */
 646 .fc-ltr .fc-h-event .fc-start-resizer,
 647 .fc-rtl .fc-h-event .fc-end-resizer {
 648         cursor: w-resize;
 649         left: -1px; /* overcome border */
 650 }
 651
 652 /* right resizer */
 653 .fc-ltr .fc-h-event .fc-end-resizer,
 654 .fc-rtl .fc-h-event .fc-start-resizer {
 655         cursor: e-resize;
 656         right: -1px; /* overcome border */
 657 }
 658
 659 /* resizer (mouse devices) */
 660
 661 .fc-h-event.fc-allow-mouse-resize .fc-resizer {
 662         width: 7px;
 663         top: -1px; /* overcome top border */
 664         bottom: -1px; /* overcome bottom border */
 665 }
 666
 667 /* resizer (touch devices) */
 668
 669 .fc-h-event.fc-selected .fc-resizer {
 670         /* 8x8 little dot */
 671         border-radius: 4px;
 672         border-width: 1px;
 673         width: 6px;
 674         height: 6px;
 675         border-style: solid;
 676         border-color: inherit;
 677         background: #fff;
 678         /* vertically center */
 679         top: 50%;
 680         margin-top: -4px;
 681 }
 682
 683 /* left resizer  */
 684 .fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
 685 .fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
 686         margin-left: -4px; /* centers the 8x8 dot on the left edge */
 687 }
 688
 689 /* right resizer */
 690 .fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
 691 .fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
 692         margin-right: -4px; /* centers the 8x8 dot on the right edge */
 693 }
 694
 695
 696 /* DayGrid events
 697 ----------------------------------------------------------------------------------------------------
 698 We use the full "fc-day-grid-event" class instead of using descendants because the event won't
 699 be a descendant of the grid when it is being dragged.
 700 */
 701
 702 .fc-day-grid-event {
 703         margin: 1px 2px 0; /* spacing between events and edges */
 704         padding: 0 1px;
 705 }
 706
 707 tr:first-child > td > .fc-day-grid-event {
 708         margin-top: 2px; /* a little bit more space before the first event */
 709 }
 710
 711 .fc-day-grid-event.fc-selected:after {
 712         content: "";
 713         position: absolute;
 714         z-index: 1; /* same z-index as fc-bg, behind text */
 715         /* overcome the borders */
 716         top: -1px;
 717         right: -1px;
 718         bottom: -1px;
 719         left: -1px;
 720         /* darkening effect */
 721         background: #000;
 722         opacity: .25;
 723 }
 724
 725 .fc-day-grid-event .fc-content { /* force events to be one-line tall */
 726         white-space: nowrap;
 727         overflow: hidden;
 728 }
 729
 730 .fc-day-grid-event .fc-time {
 731         font-weight: bold;
 732 }
 733
 734 /* resizer (cursor devices) */
 735
 736 /* left resizer  */
 737 .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,
 738 .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer {
 739         margin-left: -2px; /* to the day cell's edge */
 740 }
 741
 742 /* right resizer */
 743 .fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,
 744 .fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer {
 745         margin-right: -2px; /* to the day cell's edge */
 746 }
 747
 748
 749 /* Event Limiting
 750 --------------------------------------------------------------------------------------------------*/
 751
 752 /* "more" link that represents hidden events */
 753
 754 a.fc-more {
 755         margin: 1px 3px;
 756         font-size: .85em;
 757         cursor: pointer;
 758         text-decoration: none;
 759 }
 760
 761 a.fc-more:hover {
 762         text-decoration: underline;
 763 }
 764
 765 .fc-limited { /* rows and cells that are hidden because of a "more" link */
 766         display: none;
 767 }
 768
 769 /* popover that appears when "more" link is clicked */
 770
 771 .fc-day-grid .fc-row {
 772         z-index: 1; /* make the "more" popover one higher than this */
 773 }
 774
 775 .fc-more-popover {
 776         z-index: 2;
 777         width: 220px;
 778 }
 779
 780 .fc-more-popover .fc-event-container {
 781         padding: 10px;
 782 }
 783
 784
 785 /* Now Indicator
 786 --------------------------------------------------------------------------------------------------*/
 787
 788 .fc-now-indicator {
 789         position: absolute;
 790         border: 0 solid red;
 791 }
 792
 793
 794 /* Utilities
 795 --------------------------------------------------------------------------------------------------*/
 796
 797 .fc-unselectable {
 798         -webkit-user-select: none;
 799          -khtml-user-select: none;
 800            -moz-user-select: none;
 801             -ms-user-select: none;
 802                 user-select: none;
 803         -webkit-touch-callout: none;
 804         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 805 }
 806
 807
 808
 809 /* Toolbar
 810 --------------------------------------------------------------------------------------------------*/
 811
 812 .fc-toolbar {
 813         text-align: center;
 814         margin-bottom: 1em;
 815 }
 816
 817 .fc-toolbar .fc-left {
 818         float: left;
 819 }
 820
 821 .fc-toolbar .fc-right {
 822         float: right;
 823 }
 824
 825 .fc-toolbar .fc-center {
 826         display: inline-block;
 827 }
 828
 829 /* the things within each left/right/center section */
 830 .fc .fc-toolbar > * > * { /* extra precedence to override button border margins */
 831         float: left;
 832         margin-left: .75em;
 833 }
 834
 835 /* the first thing within each left/center/right section */
 836 .fc .fc-toolbar > * > :first-child { /* extra precedence to override button border margins */
 837         margin-left: 0;
 838 }
 839
 840 /* title text */
 841
 842 .fc-toolbar h2 {
 843         margin: 0;
 844 }
 845
 846 /* button layering (for border precedence) */
 847
 848 .fc-toolbar button {
 849         position: relative;
 850 }
 851
 852 .fc-toolbar .fc-state-hover,
 853 .fc-toolbar .ui-state-hover {
 854         z-index: 2;
 855 }
 856
 857 .fc-toolbar .fc-state-down {
 858         z-index: 3;
 859 }
 860
 861 .fc-toolbar .fc-state-active,
 862 .fc-toolbar .ui-state-active {
 863         z-index: 4;
 864 }
 865
 866 .fc-toolbar button:focus {
 867         z-index: 5;
 868 }
 869
 870
 871 /* View Structure
 872 --------------------------------------------------------------------------------------------------*/
 873
 874 /* undo twitter bootstrap's box-sizing rules. normalizes positioning techniques */
 875 /* don't do this for the toolbar because we'll want bootstrap to style those buttons as some pt */
 876 .fc-view-container *,
 877 .fc-view-container *:before,
 878 .fc-view-container *:after {
 879         -webkit-box-sizing: content-box;
 880            -moz-box-sizing: content-box;
 881                 box-sizing: content-box;
 882 }
 883
 884 .fc-view, /* scope positioning and z-index's for everything within the view */
 885 .fc-view > table { /* so dragged elements can be above the view's main element */
 886         position: relative;
 887         z-index: 1;
 888 }
 889
 890
 891
 892 /* BasicView
 893 --------------------------------------------------------------------------------------------------*/
 894
 895 /* day row structure */
 896
 897 .fc-basicWeek-view .fc-content-skeleton,
 898 .fc-basicDay-view .fc-content-skeleton {
 899         /* there may be week numbers in these views, so no padding-top */
 900         padding-bottom: 1em; /* ensure a space at bottom of cell for user selecting/clicking */
 901 }
 902
 903 .fc-basic-view .fc-body .fc-row {
 904         min-height: 4em; /* ensure that all rows are at least this tall */
 905 }
 906
 907 /* a "rigid" row will take up a constant amount of height because content-skeleton is absolute */
 908
 909 .fc-row.fc-rigid {
 910         overflow: hidden;
 911 }
 912
 913 .fc-row.fc-rigid .fc-content-skeleton {
 914         position: absolute;
 915         top: 0;
 916         left: 0;
 917         right: 0;
 918 }
 919
 920 /* week and day number styling */
 921
 922 .fc-day-top.fc-other-month {
 923         opacity: 0.3;
 924 }
 925
 926 .fc-basic-view .fc-week-number,
 927 .fc-basic-view .fc-day-number {
 928         padding: 2px;
 929 }
 930
 931 .fc-basic-view th.fc-week-number,
 932 .fc-basic-view th.fc-day-number {
 933         padding: 0 2px; /* column headers can't have as much v space */
 934 }
 935
 936 .fc-ltr .fc-basic-view .fc-day-top .fc-day-number { float: right; }
 937 .fc-rtl .fc-basic-view .fc-day-top .fc-day-number { float: left; }
 938
 939 .fc-ltr .fc-basic-view .fc-day-top .fc-week-number { float: left; border-radius: 0 0 3px 0; }
 940 .fc-rtl .fc-basic-view .fc-day-top .fc-week-number { float: right; border-radius: 0 0 0 3px; }
 941
 942 .fc-basic-view .fc-day-top .fc-week-number {
 943         min-width: 1.5em;
 944         text-align: center;
 945         background-color: #f2f2f2;
 946         color: #808080;
 947 }
 948
 949 /* when week/day number have own column */
 950
 951 .fc-basic-view td.fc-week-number {
 952         text-align: center;
 953 }
 954
 955 .fc-basic-view td.fc-week-number > * {
 956         /* work around the way we do column resizing and ensure a minimum width */
 957         display: inline-block;
 958         min-width: 1.25em;
 959 }
 960
 961
 962 /* AgendaView all-day area
 963 --------------------------------------------------------------------------------------------------*/
 964
 965 .fc-agenda-view .fc-day-grid {
 966         position: relative;
 967         z-index: 2; /* so the "more.." popover will be over the time grid */
 968 }
 969
 970 .fc-agenda-view .fc-day-grid .fc-row {
 971         min-height: 3em; /* all-day section will never get shorter than this */
 972 }
 973
 974 .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton {
 975         padding-bottom: 1em; /* give space underneath events for clicking/selecting days */
 976 }
 977
 978
 979 /* TimeGrid axis running down the side (for both the all-day area and the slot area)
 980 --------------------------------------------------------------------------------------------------*/
 981
 982 .fc .fc-axis { /* .fc to overcome default cell styles */
 983         vertical-align: middle;
 984         padding: 0 4px;
 985         white-space: nowrap;
 986 }
 987
 988 .fc-ltr .fc-axis {
 989         text-align: right;
 990 }
 991
 992 .fc-rtl .fc-axis {
 993         text-align: left;
 994 }
 995
 996 .ui-widget td.fc-axis {
 997         font-weight: normal; /* overcome jqui theme making it bold */
 998 }
 999
1000
1001 /* TimeGrid Structure
1002 --------------------------------------------------------------------------------------------------*/
1003
1004 .fc-time-grid-container, /* so scroll container's z-index is below all-day */
1005 .fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
1006         position: relative;
1007         z-index: 1;
1008 }
1009
1010 .fc-time-grid {
1011         min-height: 100%; /* so if height setting is 'auto', .fc-bg stretches to fill height */
1012 }
1013
1014 .fc-time-grid table { /* don't put outer borders on slats/bg/content/etc */
1015         border: 0 hidden transparent;
1016 }
1017
1018 .fc-time-grid > .fc-bg {
1019         z-index: 1;
1020 }
1021
1022 .fc-time-grid .fc-slats,
1023 .fc-time-grid > hr { /* the <hr> AgendaView injects when grid is shorter than scroller */
1024         position: relative;
1025         z-index: 2;
1026 }
1027
1028 .fc-time-grid .fc-content-col {
1029         position: relative; /* because now-indicator lives directly inside */
1030 }
1031
1032 .fc-time-grid .fc-content-skeleton {
1033         position: absolute;
1034         z-index: 3;
1035         top: 0;
1036         left: 0;
1037         right: 0;
1038 }
1039
1040 /* divs within a cell within the fc-content-skeleton */
1041
1042 .fc-time-grid .fc-business-container {
1043         position: relative;
1044         z-index: 1;
1045 }
1046
1047 .fc-time-grid .fc-bgevent-container {
1048         position: relative;
1049         z-index: 2;
1050 }
1051
1052 .fc-time-grid .fc-highlight-container {
1053         position: relative;
1054         z-index: 3;
1055 }
1056
1057 .fc-time-grid .fc-event-container {
1058         position: relative;
1059         z-index: 4;
1060 }
1061
1062 .fc-time-grid .fc-now-indicator-line {
1063         z-index: 5;
1064 }
1065
1066 .fc-time-grid .fc-helper-container { /* also is fc-event-container */
1067         position: relative;
1068         z-index: 6;
1069 }
1070
1071
1072 /* TimeGrid Slats (lines that run horizontally)
1073 --------------------------------------------------------------------------------------------------*/
1074
1075 .fc-time-grid .fc-slats td {
1076         height: 1.5em;
1077         border-bottom: 0; /* each cell is responsible for its top border */
1078 }
1079
1080 .fc-time-grid .fc-slats .fc-minor td {
1081         border-top-style: dotted;
1082 }
1083
1084 .fc-time-grid .fc-slats .ui-widget-content { /* for jqui theme */
1085         background: none; /* see through to fc-bg */
1086 }
1087
1088
1089 /* TimeGrid Highlighting Slots
1090 --------------------------------------------------------------------------------------------------*/
1091
1092 .fc-time-grid .fc-highlight-container { /* a div within a cell within the fc-highlight-skeleton */
1093         position: relative; /* scopes the left/right of the fc-highlight to be in the column */
1094 }
1095
1096 .fc-time-grid .fc-highlight {
1097         position: absolute;
1098         left: 0;
1099         right: 0;
1100         /* top and bottom will be in by JS */
1101 }
1102
1103
1104 /* TimeGrid Event Containment
1105 --------------------------------------------------------------------------------------------------*/
1106
1107 .fc-ltr .fc-time-grid .fc-event-container { /* space on the sides of events for LTR (default) */
1108         margin: 0 2.5% 0 2px;
1109 }
1110
1111 .fc-rtl .fc-time-grid .fc-event-container { /* space on the sides of events for RTL */
1112         margin: 0 2px 0 2.5%;
1113 }
1114
1115 .fc-time-grid .fc-event,
1116 .fc-time-grid .fc-bgevent {
1117         position: absolute;
1118         z-index: 1; /* scope inner z-index's */
1119 }
1120
1121 .fc-time-grid .fc-bgevent {
1122         /* background events always span full width */
1123         left: 0;
1124         right: 0;
1125 }
1126
1127
1128 /* Generic Vertical Event
1129 --------------------------------------------------------------------------------------------------*/
1130
1131 .fc-v-event.fc-not-start { /* events that are continuing from another day */
1132         /* replace space made by the top border with padding */
1133         border-top-width: 0;
1134         padding-top: 1px;
1135
1136         /* remove top rounded corners */
1137         border-top-left-radius: 0;
1138         border-top-right-radius: 0;
1139 }
1140
1141 .fc-v-event.fc-not-end {
1142         /* replace space made by the top border with padding */
1143         border-bottom-width: 0;
1144         padding-bottom: 1px;
1145
1146         /* remove bottom rounded corners */
1147         border-bottom-left-radius: 0;
1148         border-bottom-right-radius: 0;
1149 }
1150
1151
1152 /* TimeGrid Event Styling
1153 ----------------------------------------------------------------------------------------------------
1154 We use the full "fc-time-grid-event" class instead of using descendants because the event won't
1155 be a descendant of the grid when it is being dragged.
1156 */
1157
1158 .fc-time-grid-event {
1159         overflow: hidden; /* don't let the bg flow over rounded corners */
1160 }
1161
1162 .fc-time-grid-event.fc-selected {
1163         /* need to allow touch resizers to extend outside event's bounding box */
1164         /* common fc-selected styles hide the fc-bg, so don't need this anyway */
1165         overflow: visible;
1166 }
1167
1168 .fc-time-grid-event.fc-selected .fc-bg {
1169         display: none; /* hide semi-white background, to appear darker */
1170 }
1171
1172 .fc-time-grid-event .fc-content {
1173         overflow: hidden; /* for when .fc-selected */
1174 }
1175
1176 .fc-time-grid-event .fc-time,
1177 .fc-time-grid-event .fc-title {
1178         padding: 0 1px;
1179 }
1180
1181 .fc-time-grid-event .fc-time {
1182         font-size: .85em;
1183         white-space: nowrap;
1184 }
1185
1186 /* short mode, where time and title are on the same line */
1187
1188 .fc-time-grid-event.fc-short .fc-content {
1189         /* don't wrap to second line (now that contents will be inline) */
1190         white-space: nowrap;
1191 }
1192
1193 .fc-time-grid-event.fc-short .fc-time,
1194 .fc-time-grid-event.fc-short .fc-title {
1195         /* put the time and title on the same line */
1196         display: inline-block;
1197         vertical-align: top;
1198 }
1199
1200 .fc-time-grid-event.fc-short .fc-time span {
1201         display: none; /* don't display the full time text... */
1202 }
1203
1204 .fc-time-grid-event.fc-short .fc-time:before {
1205         content: attr(data-start); /* ...instead, display only the start time */
1206 }
1207
1208 .fc-time-grid-event.fc-short .fc-time:after {
1209         content: "\000A0-\000A0"; /* seperate with a dash, wrapped in nbsp's */
1210 }
1211
1212 .fc-time-grid-event.fc-short .fc-title {
1213         font-size: .85em; /* make the title text the same size as the time */
1214         padding: 0; /* undo padding from above */
1215 }
1216
1217 /* resizer (cursor device) */
1218
1219 .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer {
1220         left: 0;
1221         right: 0;
1222         bottom: 0;
1223         height: 8px;
1224         overflow: hidden;
1225         line-height: 8px;
1226         font-size: 11px;
1227         font-family: monospace;
1228         text-align: center;
1229         cursor: s-resize;
1230 }
1231
1232 .fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after {
1233         content: "=";
1234 }
1235
1236 /* resizer (touch device) */
1237
1238 .fc-time-grid-event.fc-selected .fc-resizer {
1239         /* 10x10 dot */
1240         border-radius: 5px;
1241         border-width: 1px;
1242         width: 8px;
1243         height: 8px;
1244         border-style: solid;
1245         border-color: inherit;
1246         background: #fff;
1247         /* horizontally center */
1248         left: 50%;
1249         margin-left: -5px;
1250         /* center on the bottom edge */
1251         bottom: -5px;
1252 }
1253
1254
1255 /* Now Indicator
1256 --------------------------------------------------------------------------------------------------*/
1257
1258 .fc-time-grid .fc-now-indicator-line {
1259         border-top-width: 1px;
1260         left: 0;
1261         right: 0;
1262 }
1263
1264 /* arrow on axis */
1265
1266 .fc-time-grid .fc-now-indicator-arrow {
1267         margin-top: -5px; /* vertically center on top coordinate */
1268 }
1269
1270 .fc-ltr .fc-time-grid .fc-now-indicator-arrow {
1271         left: 0;
1272         /* triangle pointing right... */
1273         border-width: 5px 0 5px 6px;
1274         border-top-color: transparent;
1275         border-bottom-color: transparent;
1276 }
1277
1278 .fc-rtl .fc-time-grid .fc-now-indicator-arrow {
1279         right: 0;
1280         /* triangle pointing left... */
1281         border-width: 5px 6px 5px 0;
1282         border-top-color: transparent;
1283         border-bottom-color: transparent;
1284 }
1285
1286
1287
1288 /* List View
1289 --------------------------------------------------------------------------------------------------*/
1290
1291 /* possibly reusable */
1292
1293 .fc-event-dot {
1294         display: inline-block;
1295         width: 10px;
1296         height: 10px;
1297         border-radius: 5px;
1298 }
1299
1300 /* view wrapper */
1301
1302 .fc-rtl .fc-list-view {
1303         direction: rtl; /* unlike core views, leverage browser RTL */
1304 }
1305
1306 .fc-list-view {
1307         border-width: 1px;
1308         border-style: solid;
1309 }
1310
1311 /* table resets */
1312
1313 .fc .fc-list-table {
1314         table-layout: auto; /* for shrinkwrapping cell content */
1315 }
1316
1317 .fc-list-table td {
1318         border-width: 1px 0 0;
1319         padding: 8px 14px;
1320 }
1321
1322 .fc-list-table tr:first-child td {
1323         border-top-width: 0;
1324 }
1325
1326 /* day headings with the list */
1327
1328 .fc-list-heading {
1329         border-bottom-width: 1px;
1330 }
1331
1332 .fc-list-heading td {
1333         font-weight: bold;
1334 }
1335
1336 .fc-ltr .fc-list-heading-main { float: left; }
1337 .fc-ltr .fc-list-heading-alt { float: right; }
1338
1339 .fc-rtl .fc-list-heading-main { float: right; }
1340 .fc-rtl .fc-list-heading-alt { float: left; }
1341
1342 /* event list items */
1343
1344 .fc-list-item.fc-has-url {
1345         cursor: pointer; /* whole row will be clickable */
1346 }
1347
1348 .fc-list-item:hover td {
1349         background-color: #f5f5f5;
1350 }
1351
1352 .fc-list-item-marker,
1353 .fc-list-item-time {
1354         white-space: nowrap;
1355         width: 1px;
1356 }
1357
1358 /* make the dot closer to the event title */
1359 .fc-ltr .fc-list-item-marker { padding-right: 0; }
1360 .fc-rtl .fc-list-item-marker { padding-left: 0; }
1361
1362 .fc-list-item-title a {
1363         /* every event title cell has an <a> tag */
1364         text-decoration: none;
1365         color: inherit;
1366 }
1367
1368 .fc-list-item-title a[href]:hover {
1369         /* hover effect only on titles with hrefs */
1370         text-decoration: underline;
1371 }
1372
1373 /* message when no events */
1374
1375 .fc-list-empty-wrap2 {
1376         position: absolute;
1377         top: 0;
1378         left: 0;
1379         right: 0;
1380         bottom: 0;
1381 }
1382
1383 .fc-list-empty-wrap1 {
1384         width: 100%;
1385         height: 100%;
1386         display: table;
1387 }
1388
1389 .fc-list-empty {
1390         display: table-cell;
1391         vertical-align: middle;
1392         text-align: center;
1393 }
1394
1395 .fc-unthemed .fc-list-empty { /* theme will provide own background */
1396         background-color: #eee;
1397 }