examples/calendar/resources/css/calendar.css

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7
   8 /*******************************************
   9  *
  10  * Ext Calendar styles
  11  *
  12  ******************************************/
  13
  14 /* -----------------------------------------
  15  * Shared calendar view containers
  16  */
  17 .x-panel-tbar .ext-cal-toolbar {
  18     padding: 3px;
  19     border-bottom-width: 0 !important;
  20 }
  21 .x-panel-tbar .ext-cal-toolbar .x-btn button {
  22     font-weight: bold;
  23     color: #555;
  24 }
  25 .x-panel-tbar .ext-cal-toolbar .x-toolbar-cell {
  26     padding: 0 3px;
  27 }
  28
  29 .ext-cal-ct {
  30     position: relative;
  31     font-family: helvetica, arial, sans-serif;
  32     border-bottom:1px solid #ddd;
  33     border-right:1px solid #ddd;
  34 }
  35 .ext-cal-ct img {
  36     border:0 none;
  37 }
  38 .ext-cal-inner-ct {
  39     height: 100%;
  40     line-height: 14px;
  41     position: relative;
  42     background: #eee;
  43     white-space: nowrap;
  44 }
  45 .ext-cal-ct td,
  46 .ext-cal-mdv td {
  47     font-size: 11px;
  48 }
  49
  50 /* Background layout table for week rows */
  51 .ext-cal-bg-tbl {
  52     height:100%;
  53     left:0;
  54     position:absolute;
  55     table-layout:fixed;
  56     top:0;
  57     width:100%;
  58 }
  59
  60 /* Month names subheader */
  61 .ext-cal-hd-days-tbl {
  62     background: #EFEFEF;
  63     color: #555;
  64     table-layout: fixed;
  65     top: 18px;
  66     width: 100%;
  67     font-size: 12px;
  68     line-height: 12px;
  69 }
  70
  71 .ext-cal-month-hd .ext-cal-hd-days-tbl {
  72     border-top: 1px solid #99BBE8;
  73 }
  74 .x-calendar-nonav .ext-cal-month-hd .ext-cal-hd-days-tbl {
  75     border-top: 0;
  76 }
  77 .ext-cal-month-hd .ext-cal-hd-day {
  78     border-left: 1px solid #DDD;
  79 }
  80
  81 .ext-cal-hd-ct {
  82     border-bottom: 1px solid #bcf;
  83 }
  84 .ext-cal-hd-day {
  85     text-align: center;
  86     padding: 4px 0;
  87     white-space: nowrap;
  88 }
  89
  90 /* -----------------------------------------
  91  * Day/week-specific styles
  92  */
  93 .ext-cal-dayview .ext-cal-hd-days-tbl {
  94     table-layout: fixed;
  95     width: 100%;
  96     background-color: #CDDCEF;
  97     overflow: hidden;
  98     font-size: 11px;
  99     line-height: 14px;
 100     height: 100%;
 101 }
 102 .ext-cal-hd-days-td {
 103     padding-bottom: 2px;
 104 }
 105 .ext-cal-dayview .ext-cal-hd-ct {
 106     height: 100%;
 107 }
 108 .ext-cal-dayview .ext-cal-gutter {
 109     width: 50px;
 110 }
 111 .ext-cal-dayview .ext-cal-gutter-rt {
 112     width: 15px;
 113 }
 114 .ext-ie .ext-cal-dayview .ext-cal-gutter-rt {
 115     width: 16px;
 116 }
 117 .ext-cal-hd-ad {
 118     background-color: #fff;
 119     font-size: 11px;
 120     line-height: 14px;
 121     border-color: #e3e9ff #e3e9ff #e3e9ff #e3e9ff;
 122     border-style: solid;
 123     border-width: 0 1px 1px 0;
 124 }
 125 .ext-cal-hd-ad-inner {
 126     position: relative;
 127     height: 100%;
 128 }
 129 .x-calendar-nonav .ext-cal-hd-ad-inner {
 130     margin-top: 3px;
 131 }
 132 .x-calendar-nonav .ext-cal-hd-ct {
 133     border-top: 1px solid #99BBE8;
 134 }
 135 .ext-cal-dayview .ext-cal-dtitle {
 136     padding: 8px 1px 2px;
 137 }
 138 .ext-cal-hd-ad-bg-tbl {
 139     position: absolute;
 140     left: 0;
 141     table-layout: fixed;
 142     width: 100%;
 143 }
 144 .ext-cal-hd-ad .st-c {
 145     padding: 1px 1px 0 1px
 146 }
 147 .ext-cal-dayview .ext-cal-body-ct {
 148     position: relative;
 149     overflow-y: scroll;
 150     overflow-x: hidden;
 151     padding: 0;
 152     line-height: normal;
 153 }
 154 .ext-cal-dayview .ext-cal-body-ct .ext-cal-bg-tbl {
 155     height: 1008px;
 156 }
 157 .ext-cal-dayview .ext-cal-bg-tbl {
 158     background-color: #fff;
 159     margin-top: -1px;
 160     border-bottom: 1px solid #bcf;
 161     border-right: 1px solid #bcf;
 162 }
 163 .ext-cal-dayview .ext-cal-bg-rows {
 164     position: relative;
 165     margin-left: 1px;
 166     top: 1px;
 167 }
 168 .ext-cal-dayview .ext-cal-bg-rows-inner {
 169     position: absolute;
 170     width: 100%;
 171 }
 172 .ext-ie .ext-cal-dayview .ext-cal-bg-rows-inner,
 173 .ext-gecko .ext-cal-dayview .ext-cal-bg-rows-inner {
 174     top: -1; /* row line alignment fix */
 175 }
 176 .ext-cal-dayview .ext-cal-bg-row {
 177     height: 42px;
 178 }
 179 .ext-cal-dayview .ext-cal-bg-row-div {
 180     border-bottom: 1px dotted #ddd;
 181     border-top: 1px solid #ddd;
 182     font-size: 1px;
 183     height: 20px;
 184     margin-bottom: 20px;
 185 }
 186 .ext-cal-dayview .ext-row-1 {
 187     border-top: 0;
 188 }
 189 .ext-cal-day-times {
 190     background-color: #f6f9fc;
 191     color: #666;
 192     padding: 1px 0 0 0;
 193     text-align: right;
 194     vertical-align: top;
 195 }
 196 .ext-cal-day-time-inner {
 197     height: 38px;
 198     border-bottom: 1px solid #ddd;
 199     padding: 3px 4px 0 0;
 200 }
 201 .ext-cal-day-col {
 202     border-left: 1px solid #ddd;
 203     vertical-align: top
 204 }
 205 .ext-cal-day-col-inner {
 206     position: relative;
 207     cursor: default;
 208 }
 209 .ext-cal-day-col-gutter {
 210     position: relative;
 211     margin-right: 15px;
 212     height: 1008px;
 213 }
 214 .ext-ie .ext-cal-day-col-gutter,
 215 .ext-opera .ext-cal-day-col-gutter {
 216     margin-right: 10px;
 217 }
 218 .ext-ie6 .ext-cal-day-col-gutter {
 219     zoom: 1
 220 }
 221
 222 /* -----------------------------------------
 223  * Month-specific styles
 224  */
 225 .ext-cal-monthview .ext-cal-hd-ct {
 226     left: 0;
 227     top: 0;
 228     position: absolute;
 229     width: 100%;
 230     background: #95B8EF;
 231 }
 232 .ext-cal-monthview .ext-cal-body-ct {
 233     background: #fff;
 234     bottom: 0;
 235     left: 0;
 236     border:0;
 237     overflow: hidden;
 238     position: absolute;
 239     top: 20px;
 240     width: 100%;
 241 }
 242
 243 .ext-cal-monthview .ext-cal-noheader .ext-cal-hd-ct {
 244     display: none;
 245 }
 246 .ext-cal-monthview .ext-cal-noheader .ext-cal-body-ct {
 247     top: 0;
 248 }
 249
 250 /* Month view week link boxes */
 251 .ext-cal-monthview .ext-cal-week-link,
 252 .ext-cal-monthview .ext-cal-week-link-hd {
 253     width: 20px;
 254     position: absolute;
 255     left: 0;
 256     top: 0;
 257     height: 100%;
 258     background: #EFEFEF;
 259     border-top: 1px solid #DDD;
 260     border-right: 1px solid #DDD;
 261     font-size: 10px;
 262     color: #999;
 263     padding: 3px 0 0;
 264     text-align: center;
 265     cursor: pointer;
 266 }
 267 .ext-cal-monthview .ext-cal-week-link-hd {
 268     border-top: 1px solid #99BBE8;
 269 }
 270 .x-calendar-nonav .ext-cal-monthview .ext-cal-week-link-hd {
 271     border-top: 0;
 272 }
 273 .ext-cal-week-links .ext-cal-bg-tbl {
 274     left: 20px;
 275 }
 276 .ext-cal-week-links .ext-cal-evt-tbl,
 277 .ext-cal-week-links .ext-cal-hd-days-tbl {
 278     margin-left: 20px;
 279 }
 280 .ext-cal-monthview .ext-week-link-over {
 281     background: #E0E7EF;
 282 }
 283
 284
 285 /* Hide the nav bar if specified */
 286 .ext-cal-hide-navbar .ext-cal-hd-ct {
 287     height: 25px;
 288 }
 289 .ext-cal-hide-navbar .ext-cal-body-ct {
 290     top: 24px;
 291 }
 292
 293 /* Outer wrapping div for week rows */
 294 .ext-cal-wk-ct {
 295     left: 0;
 296     overflow: hidden;
 297     position: absolute;
 298     width: 100%;
 299     height: 100px;
 300 }
 301 .ext-cal-monthview .ext-cal-wk-ct {
 302     height: 100%;
 303 }
 304 /* Background table cell */
 305 .ext-cal-day {
 306     border-left: 1px solid #ddd;
 307     cursor: pointer;
 308 }
 309 .ext-cal-day-first {
 310     /*border-left: 1px solid #BBCCFF;*/
 311    border-left: 0;
 312 }
 313
 314 .ext-cal-ev,
 315 .ext-cal-dtitle {
 316     cursor: pointer;
 317 }
 318 .ext-day-over {
 319     background: #D1EAEF !important;
 320 }
 321 /* Event container table */
 322 .ext-cal-evt-tbl {
 323     position:relative;
 324     table-layout:fixed;
 325     width:100%;
 326 }
 327
 328 /* Event title cell (includes today, prev & next month) */
 329 td.ext-cal-dtitle {
 330     font-family: helvetica, arial, sans-serif;
 331     border-top:1px solid #ddd;
 332     color: #666;
 333     line-height:14px;
 334     overflow:hidden;
 335     text-align:right;
 336     font-size: 11px;
 337     padding-top: 1px;
 338     padding-right: 1px;
 339     padding-left: 1px;
 340 }
 341 td.ext-cal-dtitle-first {
 342     border-top: 1px solid #DDD;
 343 }
 344 td.ext-cal-dtitle div {
 345     padding: 2px 4px 1px;
 346 }
 347 /* Today's title cell */
 348 td.ext-cal-dtitle-today div {
 349     color: #BFA52F;
 350     white-space: nowrap;
 351 }
 352 /* Today time span */
 353 .ext-cal-dtitle-time {
 354     font-size: 11px;
 355 }
 356 /* Today's background cell */
 357 .ext-cal-day-today {
 358     background: #FFF4BF;
 359 }
 360 /* Prev/next month title cells */
 361 .ext-cal-dtitle-prev div,
 362 .ext-cal-dtitle-next div {
 363     color: #bbb;
 364 }
 365 /* Prev/next month background cells */
 366 .ext-cal-day-prev,
 367 .ext-cal-day-next {
 368     background: #EFEFEF;
 369 }
 370 /* Event cells */
 371 .ext-cal-ev {
 372     font-family:Verdana,sans-serif;
 373     padding:1px 1px 0 2px;
 374     vertical-align:top;
 375 }
 376 /* Event overflow more link */
 377 .ext-cal-ev-more {
 378         text-align: center;
 379 }
 380 .ext-cal-ev-more a,
 381 .ext-cal-ev-more a:visited {
 382     font-family: verdana;
 383     color: #777;
 384     font-size: 10px;
 385         cursor: pointer;
 386 }
 387 /* More view */
 388 .ext-cal-mvd-tbl {
 389         width: 100%;
 390         table-layout: fixed;
 391 }
 392
 393 .ext-cal-evt {
 394     cursor:pointer;
 395 }
 396
 397 /* Default rounded event div (Gecko/Webkit/W3C) */
 398 .ext-cal-evr { /* rounded */
 399     -moz-border-radius:5px;
 400     -webkit-border-radius:5px;
 401     border-radius:5px;
 402     overflow:hidden;
 403     padding: 2px 1px 2px 5px;
 404     white-space:nowrap;
 405         text-overflow: ellipsis;
 406     border: 0;
 407 }
 408 .ext-cal-day-col .ext-cal-evr {
 409     border-width: 1px;
 410     border-style: solid;
 411 }
 412 /* Nested event divs (IE/Opera) */
 413 .ext-cal-evo { /* outer */
 414     border-top: 1px solid;
 415     border-bottom: 1px solid;
 416     border-right: 0;
 417     border-left: 0;
 418     margin: 0 1px;
 419     cursor: pointer;
 420     position: relative;
 421 }
 422 .ext-cal-day-col .ext-cal-evo  {
 423     height: 100%;
 424 }
 425 .ext-cal-evm { /* middle */
 426     border-left: 1px solid;
 427     border-right: 1px solid;
 428     border-top: 0;
 429     border-bottom: 0;
 430     margin: 0 -1px;
 431     zoom: 1;
 432     padding-left: 3px;
 433 }
 434 .ext-cal-evi { /* inner */
 435     width: 100%;
 436     white-space: nowrap;
 437     overflow: hidden;
 438 }
 439
 440 /* Day view event styles */
 441 .ext-cal-day-col .ext-cal-evt {
 442     position: absolute;
 443     overflow: hidden;
 444     cursor: default;
 445     color: #fff;
 446     -moz-user-select: none;
 447 }
 448 .ext-cal-evt dl {
 449     margin: 0;
 450     border: 0 1px;
 451     overflow: hidden;
 452     border-width: 0 1px;
 453     border-style: solid;
 454 }
 455 .ext-ie6 .ext-cal-evt dl {
 456     zoom: 1
 457 }
 458 .ext-cal-evt dd {
 459     margin: 0;
 460     overflow: hidden;
 461     font-size: 11px;
 462     text-align: left;
 463     word-wrap: break-word;
 464 }
 465 .ext-cal-evdm {
 466     border: 1px solid;
 467     -moz-border-radius: 3px;
 468     -webkit-border-radius: 3px
 469 }
 470 .ext-cal-evdm dt {
 471     margin-top: 0
 472 }
 473 .ext-cal-day-col .ext-cal-evt a:link,
 474 .ext-cal-day-col .ext-cal-evt a:visited,
 475 .ext-cal-day-col .ext-cal-evt a:active {
 476     text-decoration: none;
 477     color: #fff
 478 }
 479
 480 .ext-cal-evb {
 481     height: 1px;
 482     overflow: hidden;
 483     margin: 0 1px;
 484     border-top-width: 1px;
 485     border-top-style: solid;
 486 }
 487 .ext-opera .ext-cal-evb,
 488 .ext-strict .ext-ie .ext-cal-evb {
 489     height: 0;
 490 }
 491
 492 /* Event spanning -- overrides rounded corners */
 493 .ext-cal-ev-spanboth,
 494 .ext-cal-ev-spanleft,
 495 .ext-cal-ev-spanright {
 496     -moz-border-radius:0;
 497     -webkit-border-radius:0;
 498     border-radius:0;
 499         position: relative;
 500 }
 501 .ext-cal-ev-spanleft {
 502     -moz-border-radius-topright:5px;
 503     -moz-border-radius-bottomright:5px;
 504     -webkit-border-top-right-radius:5px;
 505     -webkit-border-bottom-right-radius:5px;
 506     border-top-right-radius:5px;
 507     border-bottom-right-radius:5px;
 508     xpadding-left:5px;
 509 }
 510 .ext-cal-ev-spanright {
 511     -moz-border-radius-topleft:5px;
 512     -moz-border-radius-bottomleft:5px;
 513     -webkit-border-top-left-radius:5px;
 514     -webkit-border-bottom-left-radius:5px;
 515     border-top-left-radius:5px;
 516     border-bottom-left-radius:5px;
 517     xpadding-right:5px;
 518 }
 519 /* IE/ Opera: */
 520 .ext-cal-ev-spanboth .ext-cal-evm {
 521         margin: 0;
 522 }
 523 .ext-cal-ev-spanright .ext-cal-evm {
 524         margin: 0 0 0 -1px;
 525 }
 526 .ext-cal-ev-spanleft .ext-cal-evm {
 527         margin: 0 -1px 0 0;
 528 }
 529
 530 .ext-cal-spl,
 531 .ext-cal-spr {
 532 /*    background-image:url(../images/default/calendar-sprites.gif);
 533     background-repeat:no-repeat;
 534     display: inline-block;
 535     height: 15px;
 536     line-height: 15px;
 537     width: 2px;
 538         position: absolute;
 539         top: 0;*/
 540 }
 541 .ext-cal-spl {
 542     background-position:-1px -11px;
 543     left: 0;
 544 }
 545 .ext-cal-spr {
 546     background-position:0 -11px;
 547     right: -2px;
 548 }
 549 .ext-ie .ext-cal-spr {
 550     right: -5px;
 551 }
 552
 553 /* Generic calendar icons */
 554 .ext-cal-ic {
 555     background-image:url(../images/default/calendar-sprites.gif);
 556     background-repeat:no-repeat;
 557     display:inline-block;
 558     height:11px;
 559     line-height:11px;
 560     margin-left:4px;
 561     width:14px;
 562 }
 563 .ext-cal-ic-rcr {
 564     background-position:0 0;
 565 }
 566 .ext-cal-ic-rem {
 567     background-position:-14px 0;
 568 }
 569
 570 /* Calendar DD styles */
 571 .ext-cal-dd-sel-ct {
 572     display: block;
 573     z-index: 10;
 574     position: absolute;
 575     height: 0;
 576     left: 0;
 577     top: 0;
 578     width: 0;
 579 }
 580 .ext-cal-dd-sel {
 581     background-color: #C3D9FF;
 582     font-size: 0;
 583     line-height: 0;
 584     opacity: 0.5;
 585     position: absolute;
 586 }
 587
 588 /* Webkit/Gecko: */
 589 .ext-evt-over,
 590 /* IE/Opera: */
 591 .ext-evt-over .ext-cal-evm {
 592     opacity: .8;
 593     filter: alpha(opacity=80);
 594 }
 595
 596 /* Calendar Picker */
 597 .ext-calendar-picker .x-form-text {
 598     padding-left: 23px;
 599 }
 600 .ext-calendar-picker .x-combo-list-item {
 601     padding-left: 24px;
 602 }
 603 .ext-cal-picker-icon {
 604     width: 16px;
 605     height: 16px;
 606     margin-right: 5px;
 607     -moz-border-radius:8px;
 608     -webkit-border-radius:8px;
 609     border-radius:8px;
 610     float: left;
 611 }
 612 /* This is the selected icon that always shows: */
 613 .ext-cal-picker-mainicon {
 614     float: none;
 615     position: absolute;
 616     top: 3px;
 617     left: 4px;
 618 }
 619
 620 /*
 621  * Event resize handle
 622  */
 623 .ext-evt-rsz {
 624     position: absolute;
 625     bottom: 0;
 626     height: 5px;
 627     line-height: 5px;
 628     width: 100%;
 629     margin-left: -5px;
 630     text-align: center; /* needed for IE quirks mode */
 631     cursor: s-resize;
 632 }
 633 .ext-gecko .ext-evt-rsz,
 634 .ext-webkit .ext-evt-rsz {
 635     cursor: ns-resize;
 636 }
 637 .ext-evt-rsz-h {
 638     display: none;
 639     border-top:3px double;
 640     border-color: white;
 641     font-size:0;
 642     height:0;
 643     line-height:0;
 644     margin-left:auto;
 645     margin-right:auto;
 646     width:20px;
 647     opacity:.5;
 648     -moz-opacity:.5;
 649     -khtml-opacity:.5;
 650     /* no opacity for ie by default */
 651 }
 652 .ext-evt-over .ext-evt-rsz-h {
 653     display: block;
 654 }
 655 .ext-ie .ext-evt-rsz-h {
 656     border-color: #ccc;
 657 }
 658 .ext-strict .ext-ie8 .ext-evt-rsz-h {
 659     border-color: #fff;
 660     filter:alpha(opacity=50);
 661 }
 662
 663 /*
 664  * Calendar event colors
 665  */
 666 .ext-cal-evr,
 667 .ext-cal-evi,
 668 .ext-cal-evt dl {
 669         color: #fff;
 670 }
 671
 672 .ext-color-1,
 673 .ext-ie .ext-color-1-ad,
 674 .ext-opera .ext-color-1-ad {
 675         color: #306da6;
 676 }
 677 .ext-cal-day-col .ext-color-1,
 678 .ext-dd-drag-proxy .ext-color-1,
 679 .ext-color-1-ad,
 680 .ext-color-1-ad .ext-cal-evm,
 681 .ext-color-1 .ext-cal-picker-icon,
 682 .ext-color-1-x dl,
 683 .ext-color-1-x .ext-cal-evb {
 684         background: #306da6;
 685 }
 686 .ext-color-1-x .ext-cal-evb,
 687 .ext-color-1-x dl {
 688     border-color: #29527A;
 689 }
 690
 691 .ext-color-2,
 692 .ext-ie .ext-color-2-ad,
 693 .ext-opera .ext-color-2-ad {
 694         color: #86a723;
 695 }
 696 .ext-cal-day-col .ext-color-2,
 697 .ext-dd-drag-proxy .ext-color-2,
 698 .ext-color-2-ad,
 699 .ext-color-2-ad .ext-cal-evm,
 700 .ext-color-2 .ext-cal-picker-icon,
 701 .ext-color-2-x dl,
 702 .ext-color-2-x .ext-cal-evb {
 703         background: #86a723;
 704 }
 705 .ext-color-2-x .ext-cal-evb,
 706 .ext-color-2-x dl {
 707     border-color: #711616;
 708 }
 709 .ext-color-3,
 710 .ext-ie .ext-color-3-ad,
 711 .ext-opera .ext-color-3-ad {
 712     color: #b6a980;
 713 }
 714 .ext-cal-day-col .ext-color-3,
 715 .ext-dd-drag-proxy .ext-color-3,
 716 .ext-color-3-ad,
 717 .ext-color-3-ad .ext-cal-evm,
 718 .ext-color-3 .ext-cal-picker-icon,
 719 .ext-color-3-x dl,
 720 .ext-color-3-x .ext-cal-evb {
 721     background: #b6a980;
 722 }
 723 .ext-color-3-x .ext-cal-evb,
 724 .ext-color-3-x dl {
 725     border-color: #8C500B;
 726 }
 727
 728 .ext-cal-day-col .ext-cal-evt {
 729     position: absolute;
 730 }
 731 .ext-cal-day-col .ext-cal-evr,
 732 .ext-cal-day-col .ext-cal-evi {
 733     white-space: normal;
 734 }
 735
 736 /* Shim for drag/drop operations on calendar views */
 737 .ext-dd-shim {
 738     z-index:1000;
 739     overflow:hidden;
 740     position:absolute;
 741     left:0;top:0;
 742     opacity:.40;
 743     -moz-opacity:.40;
 744         -khtml-opacity:.40;
 745     filter:alpha(opacity=40);
 746         background: #C3D9FF;
 747 }
 748
 749 .ext-cal-event-win a:link,
 750 .ext-cal-event-win a:visited {
 751     color: #15428B;
 752 }
 753
 754 /* StatusProxy override styles */
 755 .ext-dd-ghost-ct {
 756         color:#000;
 757         font: normal 11px arial, helvetica, sans-serif;
 758         border: 1px solid;
 759     border-color: #ddd #bbb #bbb #ddd;
 760         background-color:#fff;
 761         padding:3px;
 762         padding-left:20px;
 763         white-space: nowrap;
 764 }
 765 .ext-dd-ghost-ct .x-dd-drag-ghost{
 766         border: 0;
 767         background: none;
 768         padding: 0;
 769         width: 150px;
 770 }
 771 .ext-dd-ghost-ct .ext-evt-rsz {
 772     display: none;
 773 }
 774
 775 /*******************************************
 776  *
 777  * Calendar navigation picker styles
 778  *
 779  ******************************************/
 780 .ext-cal-nav-picker {
 781     border-style: none none solid;
 782     border-color: #99BBE8;
 783 }
 784 .ext-cal-nav-picker .x-date-left,
 785 .ext-cal-nav-picker .x-date-middle,
 786 .ext-cal-nav-picker .x-date-right {
 787     background: url(../../../../resources/images/default/toolbar/bg.gif) repeat-x;
 788 }
 789 .ext-cal-nav-picker .x-date-left a {
 790     background-image: url(../../../../resources/images/default/grid/page-prev.gif);
 791 }
 792 .ext-cal-nav-picker .x-date-right a {
 793     background-image: url(../../../../resources/images/default/grid/page-next.gif);
 794 }
 795 .ext-cal-nav-picker .x-date-middle {
 796     padding: 3px 0;
 797 }
 798 .ext-cal-nav-picker .x-date-middle .x-btn-text {
 799     color: #555;
 800     font-weight: bold;
 801 }
 802 .ext-cal-nav-picker .x-date-middle .x-btn-mc em.x-btn-arrow {
 803     background-image: url(../../../../resources/images/default/button/arrow.gif);
 804     background-position: right 4px;
 805 }
 806 .ext-cal-nav-picker .x-date-inner {
 807     border-top: 1px solid #BBCCFF;
 808 }
 809 .ext-cal-nav-picker .x-date-inner th {
 810     background: none;
 811     border-bottom: 1px solid #BBCCFF;
 812 }
 813 .ext-cal-nav-picker .x-date-inner .x-date-today a {
 814     border-color: #BFA52F;
 815     background: #FFF4BF;
 816 }
 817
 818 /*******************************************
 819  *
 820  * Calendar form styles
 821  *
 822  ******************************************/
 823 .ext-gecko .ext-cal-event-win .x-window-body .x-form-item {
 824     overflow: hidden;
 825 }
 826 .ext-evt-edit-form .x-form-item {
 827     margin-bottom: 8px;
 828 }
 829 .ext-evt-edit-form .x-panel-bbar .x-toolbar {
 830     border-bottom: 1px solid #99BBE8;
 831 }
 832 .ext-evt-edit-form .x-panel-header {
 833     background: transparent url(../images/default/ext-cal-edit-hd.png) repeat-x;
 834     padding: 9px 0 4px !important;
 835     font-size: 13px !important;
 836     font-family: helvetica, arial, sans-serif;
 837     border-top: 0;
 838     border-bottom: 1px solid #BBCCFF;
 839 }
 840 .ext-evt-edit-form .x-panel-fbar {
 841     padding: 5px 10px;
 842     background: #DFE8F6;
 843     border: 1px solid #BBCCFF;
 844 }
 845
 846 /*******************************************
 847  *
 848  * DateRangeField styles
 849  *
 850  ******************************************/
 851 .ext-dt-range label {
 852     font-size: 12px;
 853 }
 854 .ext-dt-range .x-form-check-wrap {
 855     white-space: nowrap;
 856 }
 857 .ext-dt-range .x-table-layout-cell {
 858     padding-right: 5px;
 859 }