css/civicrm.css

   1 /**
   2  * @file: CiviCRM Stylesheet
   3  *
   4  * NOTE: The main civicrm container has both class and id of crm-container
   5  * Other civi blocks outside the main container also have the class crm-container (but not the id)
   6  * All styles should start with .crm-container unless they are specific to the main div only
   7  */
   8
   9 div.crm-container label {
  10   font-weight: normal;
  11   display: inline;
  12 }
  13
  14 div.crm-container fieldset label{
  15   float: none;
  16 }
  17
  18 .crm-container .crm-quickSearchField {
  19   font-weight: normal;
  20 }
  21
  22 #crm-container .hiddenElement,
  23 .crm-container .hiddenElement {
  24   display: none;
  25 }
  26
  27 #crm-container .clear,
  28 .crm-container .clear {
  29   clear: both;
  30 }
  31
  32 .crm-container a,
  33 .crm-container a:link,
  34 .crm-container a:visited {
  35   color: #2786c2;
  36   text-decoration: none;
  37 }
  38
  39 #crm-container .crm-content-block {
  40   padding: 0px;
  41 }
  42
  43 /* TABLE STYLING */
  44
  45 .crm-container table {
  46   margin: 0em 0em 1em;
  47   border-collapse: collapse;
  48   width: 100%;
  49   font-size: 13px;
  50 }
  51
  52 .crm-container table.criteria-group {
  53   margin-bottom: .1em;
  54 }
  55
  56 .crm-container table.crm-address-element {
  57   border: none;
  58   margin-bottom: .25em;
  59 }
  60
  61 .crm-container th,
  62 .crm-container table.display thead th,
  63 .crm-container table thead.sticky th,
  64 .crm-container table.caseSelector tr.columnheader th {
  65   background-color: #FFFFFF;
  66   border-color: #FFFFFF #FFFFFF #CFCEC3;
  67   border-style: solid;
  68   border-width: 1px 1px 2px;
  69   color: #A7A7A7;
  70   font-size: 13px;
  71   font-weight: bold;
  72   padding: 4px;
  73   text-align: left;
  74   vertical-align: top;
  75 }
  76 /* Styles for Sticky Header */
  77 .crm-container table thead.sticky {
  78   background-color: #FFF;
  79 }
  80
  81 .crm-container thead div.sticky-header {
  82   height: 15px;
  83   border-bottom: 2px solid #CFCEC3;
  84   background-color: #FFF;
  85   z-index: 10;
  86 }
  87
  88 /* Styles for Sorting Header */
  89 .crm-container table.display thead th.sorting_asc,
  90 .crm-container table.display thead th.sorting_desc,
  91 .crm-container table .sticky th a.sort-ascending,
  92 .crm-container table .sticky th a.sort-descending,
  93 .crm-container table.caseSelector tr.columnheader th a.sort-ascending,
  94 .crm-container table.caseSelector tr.columnheader th a.sort-descending {
  95   color: #3e3e3e;
  96   background-color: #FFF;
  97 }
  98
  99 /* Set background back to normal gray for form labels which use <th>. Temporary fix until we standardize form layout markup. */
 100 .crm-container table.form-layout-compressed tbody th.label {
 101   background-color: #F7F7F7;
 102 }
 103
 104 .crm-container tbody {
 105   border-top: none;
 106 }
 107
 108 .crm-container tr {
 109   font-size: .95em;
 110   background: none;
 111 }
 112
 113 .crm-container td {
 114   padding: 4px;
 115   vertical-align: top;
 116 }
 117
 118 .crm-container tr.even-row td,
 119 .crm-container tr.odd-row td,
 120 .crm-container table.display td,
 121 .crm-container table.pagerDisplay td {
 122   border-collapse: collapse;
 123 }
 124
 125 .crm-container .crm-row-selected {
 126   margin: 0px;
 127   padding: 3px 0px 3px 0px;
 128   clear: none;
 129   background-color: #FFFFCC !important;
 130 }
 131
 132 .crm-container .crm-row-child {
 133   margin: 0px;
 134   padding: 3px 0px 3px 0px;
 135   clear: none;
 136   background-color: #F1F8EB !important;
 137 }
 138
 139 .crm-container .row-highlighted {
 140   margin: 0px;
 141   padding: 3px 0px 3px 0px;
 142   clear: none;
 143   background-color: #FFFFCC;
 144 }
 145
 146 /*
 147 ** Size input fields in crm-container by class. Classes are assigned by the
 148 ** module in relation to the data object max size.
 149 */
 150 .crm-container .two {
 151   width: 2em;
 152 }
 153 .crm-container .four {
 154   width: 4em;
 155 }
 156 .crm-container .six {
 157   width: 6em;
 158 }
 159 .crm-container .eight {
 160   width: 8em;
 161 }
 162 .crm-container .twelve {
 163   width: 12em;
 164 }
 165 .crm-container .twenty {
 166   width: 20em;
 167 }
 168 .crm-container .medium {
 169   width: 12em;
 170 }
 171 .crm-container .big {
 172   width: 15em;
 173 }
 174 .crm-container .huge {
 175   width: 25em;
 176 }
 177 .crm-container .huge40 {
 178   width: 40em;
 179 }
 180 .crm-container textarea.big {
 181   width: 35em;
 182   height: 4em;
 183 }
 184 .crm-container textarea.huge {
 185   width: 45em;
 186   height: 16em;
 187 }
 188 .crm-container textarea.huge12 {
 189   width: 40em;
 190   height: 12em;
 191 }
 192 .crm-container textarea.huge40 {
 193   width: 40em;
 194   height: 16em;
 195 }
 196 .crm-container textarea.nowrap {
 197   width: 45em;
 198   height: 4.5em;
 199   white-space: nowrap;
 200   overflow: auto;
 201 }
 202 .crm-container .bigSelect {
 203   width: 15em;
 204   height: 12em;
 205 }
 206
 207
 208 /* Override line-height from style.css */
 209 #crm-container,
 210 .crm-container {
 211   line-height: 135%;
 212 }
 213
 214 /* Base crm-container styles */
 215 .crm-container hr {
 216   background-color: #B0B0B0;
 217 }
 218
 219 .crm-container .crm-form-block {
 220   padding: 4px;
 221   margin-bottom: 4px;
 222   font-size: 13px;
 223   background-color: #E6E6DC;
 224   color: #3E3E3E;
 225 }
 226
 227 .crm-container textarea,
 228 .crm-container .crm-form-multiselect {
 229   border: 1px solid #999;
 230 }
 231
 232 /*
 233 ** class for hiding the text box;
 234   it is used in the OtherActivity template
 235 ** for showing the descrition of activity type element.
 236 */
 237 .crm-container .texttolabel,
 238 .crm-container .no-border {
 239   border-style: none;
 240 }
 241
 242 /*
 243 ** Class for giving solid line at the bottom of the <div>(block level element)
 244 ** Currently it is used on the dashboard pages - CiviContribute, CiviMember...
 245 */
 246 .crm-container div.solid-border-bottom {
 247   border-bottom: 2px solid #777;
 248 }
 249
 250 .crm-container div.solid-border-top,
 251 .crm-container .attachment-fieldset {
 252   margin-top: 15px;
 253   border-top: 1px solid #696969;
 254 }
 255
 256 /* Size the verticle heights in crm-containers by class. */
 257 .crm-container .ht-one {
 258   height: 1em;
 259 }
 260
 261 .crm-container .add-remove-link,
 262 .crm-container .map-link,
 263 .crm-container .font-small {
 264   font-size: .9em;
 265 }
 266
 267 /* Ensures max-width is reset to css default for the images in the maps */
 268 #Map img {
 269   max-width: none;
 270 }
 271
 272 .crm-container .required {
 273   color: inherit;
 274 }
 275
 276 /* CRM form layout classes (from www.realworldstyle.com) */
 277 .crm-container .spacer {
 278   clear: left;
 279   height: 5px;
 280 }
 281
 282 .crm-container td.compressed select,
 283 .crm-container td.compressed input {
 284   font-size: 0.90em;
 285   font-weight: bold;
 286 }
 287
 288 .crm-container td.Int input {
 289   width: 6em;
 290 }
 291
 292 .crm-container input.crm-form-text,
 293 .crm-container input.dateplugin {
 294   border: 1px solid #999;
 295   vertical-align: middle;
 296   padding: 1px 2px;
 297   height: 1.8em;
 298 }
 299
 300 .crm-container .form-submit {
 301   margin: .25em 0.5em 0.25em 0;
 302 }
 303
 304 .crm-container .form-submit-inline {
 305   margin: 0em 0.5em 0.25em 0em;
 306 }
 307
 308 .crm-container div.crm-inline-button {
 309   padding-left: 6px;
 310   padding-top: 6px;
 311   margin-bottom: 28px;
 312 }
 313
 314 .crm-container span.crm-lock-button {
 315   float: right;
 316 }
 317
 318 .crm-container fieldset {
 319   background: none;
 320   padding: 4px 0px;
 321   margin: 10px 0px;
 322   border: none;
 323   border-top: 1px solid #CFCEC3;
 324 }
 325
 326 .crm-container fieldset.no-border {
 327   border-top: none;
 328 }
 329
 330 .crm-container fieldset legend {
 331   display: block;
 332   font-family: Arial, Helvetica, sans-serif;
 333   font-size: 14px;
 334   font-weight: bold;
 335   padding: 4px;
 336   background: none;
 337   border: medium none;
 338   background-color: transparent;
 339   color: #3E3E3E;
 340   position: relative;
 341   text-indent: 0px;
 342   width: auto;
 343 }
 344
 345 .crm-container fieldset.form-layout {
 346   margin: .25em 0em .5em 0em;
 347   padding: 1px 10px 1px 10px;
 348 }
 349
 350 .crm-container fieldset.collapsible {
 351   border: 0px;
 352 }
 353
 354 .crm-container div.form-item {
 355   border-top-style: none;
 356   margin: 0px;
 357   padding: 3px 0px 5px 0px;
 358   clear: none;
 359   height: 100%;
 360 }
 361
 362 .crm-container div.form-item dl,
 363 .crm-container .section-hidden dl,
 364 .crm-container .crm-form-block dl {
 365   margin: 0;
 366 }
 367
 368 /* contribution page styles */
 369 .crm-container #Main fieldset table td {
 370   background-color: transparent;
 371   border: none;
 372 }
 373
 374 .crm-container .crm-section,
 375 .crm-container-snippet .crm-section {
 376   margin-bottom: 1em;
 377 }
 378
 379 .crm-container .crm-section .label,
 380 .crm-container-snippet .crm-section .label {
 381   float: left;
 382   width: 17%;
 383   text-align: right;
 384 }
 385
 386 .crm-container .label-left .label {
 387   text-align: left;
 388 }
 389
 390 .crm-container .crm-section .content,
 391 .crm-container-snippet .crm-section .content {
 392   margin-left: 19%;
 393 }
 394
 395 .crm-container .no-label .content {
 396   margin-left: 0px;
 397 }
 398
 399 #crm-container #cvv2 {
 400   vertical-align: top;
 401 }
 402
 403 /* Use definition lists for simple 2 col forms - <dt> for labels, <dd> for fields */
 404 .crm-container div.form-item dt,
 405 .crm-container .crm-form-block dt {
 406   float: left;
 407   clear: left;
 408   width: 150px;
 409   text-align: right;
 410   vertical-align: top;
 411   padding: 5px 15px 5px 0px;
 412   font-size: .95em;
 413   white-space: normal;
 414 }
 415
 416 .crm-container .section-hidden dt {
 417   float: left;
 418   clear: left;
 419   width: 150px;
 420   text-align: left;
 421   font-weight: bold;
 422   white-space: nowrap;
 423   padding: 5px 15px 5px 0px;
 424 }
 425
 426 .crm-container div.form-item dd,
 427 .crm-container .crm-form-block dd,
 428 .crm-container .section-hidden dd {
 429   padding: 3px;
 430   margin-left: 160px;
 431 }
 432
 433 .crm-container div.form-item dd.html-adjust,
 434 .crm-container div.form-item dl.html-adjust dd,
 435 .crm-container div.crm-form-block dl.html-adjust dd,
 436 .crm-container div.crm-form-block dd.html-adjust {
 437   width: 57%;
 438 }
 439
 440 .crm-container div.form-item dd.description,
 441 .crm-container div.crm-form-block dd.description {
 442   padding: 0px 0px 5px;
 443   white-space: normal;
 444 }
 445
 446 .crm-container div.form-item span.labels,
 447 .crm-container div.crm-form-block span.labels {
 448   float: left;
 449   width: 15%;
 450   text-align: right;
 451 }
 452
 453 .crm-container div.form-item span.fields,
 454 .crm-container div.crm-form-block span.fields {
 455   width: 84%;
 456   text-align: left;
 457   margin-left: 16%;
 458   display: block;
 459 }
 460
 461 .crm-container table.form-layout,
 462 .crm-container table.control-panel,
 463 .crm-container table.no-border {
 464   margin: 0em;
 465   border-collapse: collapse;
 466   border: 0px none;
 467 }
 468
 469 .crm-container table.form-layout-compressed {
 470   margin: 0em 0em .5em;
 471   width: auto;
 472   border-collapse: collapse;
 473   border: 1px none;
 474 }
 475
 476 .crm-container table.crm-profile-tagsandgroups>tbody>tr>td {
 477   padding: 0;
 478 }
 479
 480 .crm-container table.crm-profile-tagsandgroups,
 481 .crm-container table.crm-profile-tagsandgroups table {
 482   margin: 0;
 483 }
 484
 485 .crm-container table.advmultiselect {
 486   margin: 0em;
 487   width: auto;
 488   border-collapse: collapse;
 489   border: 1px solid #696969;
 490 }
 491
 492 .crm-container table.advmultiselect td {
 493   padding: 10px;
 494 }
 495
 496 .crm-container table.advmultiselect td select {
 497   width: 150px;
 498 }
 499
 500 .crm-container .form-layout td {
 501   vertical-align: top;
 502   padding: 5px;
 503   white-space: normal;
 504   border: none;
 505 }
 506
 507 .crm-container .form-layout td.report,
 508 .crm-container .form-layout td.description,
 509 .crm-container .form-layout-compressed td.description {
 510   white-space: normal;
 511 }
 512
 513 .crm-container .form-layout-compressed td,
 514 .crm-container .form-layout-compressed th {
 515   vertical-align: text-top;
 516   padding: 2px 5px;
 517   border: none;
 518 }
 519
 520 .crm-container .control-panel td {
 521   padding: 3px;
 522   width: 25%;
 523   white-space: nowrap;
 524   border: 0px none;
 525   text-align: center;
 526 }
 527
 528 .crm-container .form-layout td.label,
 529 .crm-container .form-layout-compressed td.label,
 530 .crm-container .selector td.label,
 531 .crm-container .form-layout-compressed th.label {
 532   text-align: right;
 533   padding: 4px 4px 4px 6px;
 534   border: 0px none;
 535   vertical-align: top;
 536 }
 537
 538 .crm-container td.op-checkbox label {
 539   font-weight: normal;
 540   font-style: italic;
 541 }
 542
 543 .crm-container .form-layout td.label-left,
 544 .crm-container .form-layout-compressed td.label-left {
 545   text-align: left;
 546   padding: 4px 4px 4px 6px;
 547   border: 0px none;
 548   vertical-align: top;
 549 }
 550
 551 .crm-container table.selector td {
 552   border-right: 1px solid #dddddd;
 553 }
 554
 555 .crm-container .form-layout td.view-value,
 556 .crm-container .form-layout-compressed td.view-value {
 557   text-align: left;
 558   padding: 4px;
 559   border: 0px none;
 560   vertical-align: top;
 561 }
 562
 563 #crm-submit-buttons {
 564   width: 100%;
 565   /* fix ie7/ie8 bug where page goes bananas */
 566 }
 567
 568 .crm-container .form-layout .buttons,
 569 .crm-container .form-layout-compressed .buttons {
 570   padding-top: 10px;
 571 }
 572
 573 .crm-container .button-disabled {
 574   color: #CFCEC3!important;
 575 }
 576
 577 .crm-container .form-layout-compressed td.describe-image {
 578   vertical-align: top;
 579   padding: 0.5em 0em 0em 0em;
 580   font-size: .9em;
 581 }
 582
 583 .crm-container .right {
 584   text-align: right;
 585 }
 586
 587 .crm-container .form-layout-compressed td.option-label {
 588   vertical-align: top;
 589   text-align: right;
 590   padding: 0.75em 0.5em 0em 0.75em;
 591   color: #7a7a60;
 592 }
 593
 594 .crm-container td.price_set_option-label {
 595   padding-left: 3em;
 596 }
 597
 598 /* messages and status */
 599 .crm-container .messages {
 600   margin: 1.0em 0em 1.0em;
 601   border: none;
 602   font-weight: normal;
 603 }
 604
 605 .crm-container .messages .msg-title {
 606   font-weight: bold;
 607 }
 608
 609 .crm-container .messages table {
 610   width: auto;
 611 }
 612
 613 .crm-container .messages table td {
 614   background-color: #F7F7F7;
 615   border-bottom: 1px solid #DDDDDD;
 616 }
 617
 618 .crm-container .status {
 619   background-color: #FFFFCC;
 620   background-image: none;
 621   border: 1px solid #FFFF66;
 622   margin: 0.5em 0px;
 623   padding: 0.25em 0.5em;
 624   color: #3e3e3e;
 625   font-weight: normal;
 626 }
 627
 628 .crm-container .status dl {
 629   margin: 2px 5px;
 630 }
 631
 632 .crm-container div.status dt {
 633   clear: none;
 634   float: left;
 635   width: 20px;
 636 }
 637
 638 .crm-container div.status dd {
 639   margin-left: 0px;
 640 }
 641
 642 .crm-container div.status ul {
 643   margin: 0 0 1em 16px;
 644 }
 645
 646 .crm-container .status-pending {
 647   color: green;
 648 }
 649
 650 .crm-container .status-completed {
 651   color: #000080;
 652 }
 653
 654 .crm-container .crm-marker,
 655 .crm-container-snippet .crm-marker {
 656   color: #8A1F11;
 657   font-weight: bold;
 658   margin-right: 5px;
 659 }
 660
 661 .crm-container .crm-error,
 662 .crm-container .crm-inline-error {
 663   background: #FBE3E4 none repeat scroll 0 0;
 664   border: none;
 665   color: #8A1F11;
 666 }
 667 .crm-container .crm-error {
 668   padding: 4px;
 669 }
 670
 671 .crm-container div.view-data {
 672   padding: .25em .5em .25em .5em;
 673   border: 1px solid DimGray;
 674   width: auto;
 675   background-color: #ffffff;
 676 }
 677
 678 .crm-container .crm-footer {
 679   font-size: 0.8em;
 680 }
 681
 682 #civicrm-footer {
 683   margin-top: 2em;
 684   border-top: 1px solid #ddd;
 685   padding: 0.8em;
 686   text-align: center;
 687 }
 688
 689 #crm-record-log {
 690   padding: 0.8em 0.8em 0em 0em;
 691   text-align: right;
 692 }
 693
 694 .crm-container #access {
 695   padding: 0.8em 0.8em 0em 0em;
 696   text-align: right;
 697 }
 698
 699 .crm-container .header-dark {
 700   margin: 0.5em 0em 0.5em;
 701   padding: 0.5em;
 702   background-color: #999999;
 703   font-weight: bold;
 704   color: #FAFAFA;
 705   border-radius: 2px;
 706   -moz-border-radius: 2px;
 707   -webkit-border-radius: 2px;
 708   -khtml-border-radius: 2px;
 709 }
 710
 711 .crm-container div.display-block {
 712   font-weight: normal;
 713   margin: 1.0em 2.0em 1.0em 2.0em;
 714 }
 715
 716 /* Data display layouts */
 717 .crm-container h3 {
 718   /* h3 used as table header for civicrm */
 719   background-color: #CDE8FE;
 720   font-size: 15px;
 721   font-family: Arial, Helvetica, sans-serif;
 722   font-weight: bold;
 723   color: #121A2D;
 724   padding: 4px 6px;
 725   margin: 0 0 0.3em;
 726 }
 727
 728 .crm-container h3.nobackground,
 729 .crm-container .crm-form-block h3 {
 730   background-color: transparent;
 731 }
 732
 733 #crm-container .col1 {
 734   float: left;
 735   vertical-align: top;
 736   width: 40%;
 737   text-align: left;
 738   margin: 0px 25px 0px 25px;
 739 }
 740
 741 #crm-container .col2 {
 742   float: right;
 743   vertical-align: top;
 744   width: 50%;
 745   text-align: left;
 746   margin: 0px;
 747 }
 748
 749 #crm-container ul.indented {
 750   padding-left: 3em;
 751 }
 752
 753 #crm-container tr.subevent td.event-title,
 754 #crm-container tr.subevent td.event-info {
 755   padding-left: 3em;
 756 }
 757
 758 #crm-container span.child-indent {
 759   padding-left: 1em;
 760 }
 761
 762 /*
 763 ** CSS for links from Drupal Blocks.
 764 */
 765 /* Following styles are used to remove the white bullets from the Garland Theme */
 766 .crm-container ul li {
 767   background-image: none;
 768 }
 769
 770 /* But allow them for the help at the top of forms
 771 */
 772 .crm-container #help ul li {
 773   background-image: url(menu-leaf.png);
 774 }
 775
 776 .crm-container .crm-form-block .crm-loading-element {
 777   background-image: url("../i/loading-E6E6DC.gif");
 778 }
 779
 780 .crm-container .crm-loading-element {
 781   padding-left: 30px;
 782   height: 30px;
 783   background: transparent url("../i/loading.gif") no-repeat 0px 0px;
 784 }
 785
 786 .crm-container div div.crm-msg-loading div.icon {
 787   background: transparent url("../i/loading-2f2f2e.gif") no-repeat 0px 0px;
 788 }
 789
 790 /*
 791  * Styles for formatting text
 792  */
 793
 794 /* Inline form field 'post-help' and radio-button unselect */
 795 .crm-container .description {
 796   font-size: 0.9em;
 797   font-weight: normal;
 798   white-space: normal;
 799   width: auto;
 800   color: #696969;
 801   line-height: inherit;
 802   padding: 0;
 803   margin: 0;
 804 }
 805
 806 .crm-container .form-layout-compressed td.description,
 807 .crm-container .form-layout td.description {
 808   padding: 0 5px 5px 5px;
 809   font-size: 1em;
 810 }
 811
 812 /* Page and form-level 'help' */
 813 .crm-container .help,
 814 .crm-container #help {
 815   background-color: #F1F8EB;
 816   border: 1px solid #B0D730;
 817   color: #3E3E3E;
 818   font-size: 13px;
 819   margin: 0 0 8px;
 820   padding: 4px;
 821 }
 822
 823 .crm-container .help p {
 824   margin: 4px;
 825 }
 826
 827 /* Set display: inline to over-ride drupal.css which sets label tags to display: block */
 828 #crm-container .notorg {
 829   font-weight: normal;
 830 }
 831
 832 .crm-container .font-light {
 833   font-weight: lighter;
 834 }
 835
 836 .crm-container .bold {
 837   font-weight: bold;
 838 }
 839
 840 .crm-container .font-italic {
 841   font-style: italic;
 842 }
 843
 844 .crm-container .font-size11pt {
 845   font-size: 1.1em;
 846 }
 847
 848 .crm-container .font-size12pt {
 849   font-size: 1.2em;
 850 }
 851
 852 .crm-container .qill {
 853   font-weight: normal;
 854   line-height: 1.1em;
 855 }
 856
 857 /* Styles for record browser and report tables, and pager bar */
 858 #crm-container #map-field table,
 859 #crm-container table.report,
 860 #crm-container table.chart {
 861   width: auto;
 862 }
 863
 864 #crm-container .crm-flashchart {
 865   overflow: scroll;
 866 }
 867
 868 #crm-container td.enclosingNested {
 869   padding: 0px;
 870 }
 871
 872 #crm-container .nowrap {
 873   white-space: nowrap;
 874 }
 875
 876 #crm-container tr.columnheader {
 877   background-color: #E6E6E6;
 878   color: #000000;
 879   border: 1px solid #DDD;
 880 }
 881
 882 #crm-container tr.columnheader a {
 883   color: #000;
 884   text-decoration: none;
 885   vertical-align: top;
 886 }
 887
 888 #crm-container tr.columnheader-dark th {
 889   background-color: #999999;
 890   color: #FAFAFA;
 891   border: 1px solid #696969;
 892 }
 893
 894 #crm-container tr.columnheader-dark td,
 895 #crm-container tr.columnheader-dark th,
 896 #crm-container tr.columnheader td,
 897 #crm-container tr.columnfooter td {
 898   font-size: 1.1em;
 899   font-weight: bold;
 900 }
 901
 902 #crm-container tr.columnheader-dark th span.extra {
 903   font-size: .95em;
 904   font-weight: normal;
 905 }
 906
 907 #crm-container tr.columnfooter {
 908   border-top: 2px solid #999999;
 909   font-size: 1.1em;
 910 }
 911
 912 #crm-container #map-field th {
 913   border-right: 1px solid #999999;
 914 }
 915
 916 #crm-container #map-field td,
 917 #crm-container .report td,
 918 #crm-container .chart td {
 919   padding: 10px 10px 4px 10px;
 920 }
 921
 922 #crm-container .report td {
 923   border: 1px solid #999999;
 924   background-color: #F6F6F6;
 925 }
 926
 927 /* double line right border for last cell in a horizontal grouping */
 928 #crm-container table.report td.splitter {
 929   border-right: 5px double #999999;
 930 }
 931
 932 #crm-container .report td.separator {
 933   padding-top: 1em;
 934   background-color: #FFFFFF;
 935   border-left-color: #FFFFFF;
 936   border-right-color: #FFFFFF;
 937 }
 938
 939 #crm-container .chart td {
 940   border: 2px solid #999999;
 941 }
 942
 943 #crm-container td.yes-no {
 944   text-align: center;
 945 }
 946
 947 #crm-container .horizontal-position {
 948   margin-right: 30px;
 949   margin-left: 30px;
 950 }
 951
 952 #crm-container .horizontal-center {
 953   text-align: center;
 954   margin: 0 auto;
 955   width: 80%;
 956 }
 957
 958 #crm-container .place-left {
 959   float: left;
 960   margin-left: 30px;
 961   margin-right: 30px;
 962 }
 963
 964 #crm-container .float-left {
 965   float: left;
 966   padding: 4px 0px;
 967   clear: none;
 968 }
 969
 970 #crm-container .float-left + .float-left {
 971   margin-left: 1em;
 972 }
 973
 974 #crm-container .float-right {
 975   float: right;
 976   width: auto;
 977   padding: 4px 0px;
 978   clear: none;
 979 }
 980
 981 #crm-container .align-right {
 982   display: block;
 983   margin-right: 20px;
 984   text-align: right;
 985 }
 986
 987 #crm-container .element-right {
 988   float: right;
 989   margin-right: 35px;
 990 }
 991
 992 /* search page styles */
 993 .crm-container .crm-search-tasks,
 994 .crm-container .crm-tasks {
 995   margin-bottom: 4px;
 996   padding: 4px;
 997 }
 998
 999 .crm-container .crm-search-results {
1000   margin-bottom: 4px;
1001   padding: 0px;
1002 }
1003
1004 .crm-container #search-status {
1005   border: none;
1006   font-size: 13px;
1007   font-weight: normal;
1008 }
1009
1010 .crm-container .crm-pager {
1011   border: none;
1012   background-color: #F5F6F1;
1013   position: relative;
1014   height: 35px;
1015   padding-top: 5px;
1016   margin-bottom: 4px;
1017 }
1018
1019 .crm-container #search-status ul {
1020   margin: 0em;
1021 }
1022
1023 .crm-container #search-status ul li,
1024 #crm-container ul.left-alignment li {
1025   display: list-item;
1026   margin-left: 2.0em;
1027   list-style-position: inside;
1028 }
1029
1030 .crm-container .crm-pager input {
1031   text-align: center;
1032 }
1033
1034 .crm-container .crm-pager-nav {
1035   display: block;
1036   margin-top: 7px;
1037   padding-left: 5px;
1038 }
1039
1040 #crm-container .section-hidden {
1041   display: block;
1042   margin: 0px;
1043   padding: 5px;
1044   font-size: 0.95em;
1045 }
1046 #crm-container form .section-hidden-border {
1047   background-color: #5c5c59;
1048   border: medium none;
1049   color: #FFFFFF;
1050   margin-left: 5px;
1051   font-size: 13px;
1052   font-family: Verdana;
1053   padding: 2px 0 0 0px;
1054 }
1055
1056 #crm-container .section-shown {
1057   padding: 0px 5px;
1058 }
1059 #crm-container .data-group-first {
1060   margin: 10px 5px 5px 5px;
1061   padding: 5px;
1062   border-top: 2px solid #999999;
1063   clear: none;
1064 }
1065
1066 /* Styles for Wizard Progress Bars */
1067 #crm-container ul.wizard-bar {
1068   border-collapse: collapse;
1069   padding: 0em 0em 0em 1em;
1070   white-space: nowrap;
1071   list-style: none;
1072   margin: 10px 0px 20px;
1073   height: auto;
1074   width: auto;
1075   line-height: normal;
1076   border-top: 3px solid #bbb;
1077 }
1078
1079 #crm-container ul.wizard-bar li {
1080   display: inline;
1081   background-color: #FAFAFA;
1082   border: 1px solid #999999;
1083   height: auto;
1084   margin-right: 1em;
1085   padding: .5em 1em .5em;
1086   text-decoration: none;
1087   font-size: .95em;
1088   background-image: none;
1089 }
1090
1091 #crm-container ul.wizard-bar li.current-step {
1092   background-color: #FAFAFA;
1093   border-color: #999999;
1094   font-weight: bold;
1095 }
1096
1097 #crm-container ul.wizard-bar li.past-step {
1098   background-color: #F5F5F5;
1099   color: #666;
1100 }
1101
1102 /* Recently Viewed bar */
1103 #crm-recently-viewed ul {
1104   list-style-image: none;
1105   font-size: .9em;
1106   margin: 0px;
1107   padding: 0px;
1108 }
1109
1110 #crm-recently-viewed li.crm-recently-viewed {
1111   margin: 1px;
1112   padding: 1px 1px 4px 3px;
1113   border: 1px solid #D7D7D0;
1114   background-color: #fff;
1115   white-space: nowrap;
1116   list-style-type: none;
1117   position: relative;
1118   -moz-border-radius: 4px;
1119   -webkit-border-radius: 4px;
1120   border-radius: 4px;
1121 }
1122
1123 #crm-recently-viewed ul li.crm-recently-viewed:hover,
1124 #crm-recently-viewed .crm-recentview-wrapper {
1125   background-color: #FFFFCC;
1126   border: 1px solid #FFFF66;
1127   -moz-border-radius: 4px;
1128   -webkit-border-radius: 4px;
1129   border-radius: 4px;
1130 }
1131
1132 #crm-recently-viewed a {
1133   font-weight: normal;
1134   color: #4A88DF;
1135   text-decoration: none;
1136   font-size: .95em;
1137 }
1138
1139 #crm-recently-viewed .crm-recentview-wrapper {
1140   display: none;
1141   position: absolute;
1142   z-index: 99;
1143   width: 10em;
1144   overflow: hidden;
1145   top: 0px;
1146   text-align: center;
1147   padding-top: 1em;
1148 }
1149
1150 #crm-recently-viewed.left .crm-recentview-wrapper {
1151   border-left: none;
1152   right: -10em;
1153 }
1154
1155 #crm-recently-viewed.right .crm-recentview-wrapper {
1156   border-right: none;
1157   left: -10em;
1158 }
1159
1160 #crm-recently-viewed li.crm-recently-viewed:hover .crm-recentview-wrapper {
1161   display: block;
1162 }
1163
1164 #crm-recently-viewed .crm-recentview-wrapper a:hover {
1165   color: #494949;
1166 }
1167
1168 /* alpha filter styles */
1169 #crm-recently-viewed ul,
1170 #crm-container #alpha-filter ul {
1171   border-collapse: collapse;
1172   padding: 0em;
1173   list-style-type: none;
1174   margin: 3px;
1175   height: auto;
1176   width: auto;
1177 }
1178
1179 .crm-container div#alpha-filter {
1180   background-color: #CDE8FE;
1181   margin: 4px 0 5px;
1182   padding: 2px;
1183   text-align: left;
1184 }
1185
1186 .crm-container #alpha-filter li {
1187   background-color: transparent;
1188   background-image: none;
1189   border: none;
1190   color: #AAAAAA;
1191   display: inline;
1192   font-size: 15px;
1193   font-weight: normal;
1194   height: auto;
1195   margin: 0 1px;
1196   padding: 2px 5px;
1197   font-family: Arial, Helvetica, sans-serif;
1198 }
1199
1200 .crm-container #alpha-filter a {
1201   border-bottom: 1px dotted #2A71B4;
1202   color: #2A71B4;
1203   font-weight: normal;
1204 }
1205
1206 .crm-container #lang-switch {
1207   float: right;
1208   z-index: 2;
1209   margin: -24px 30px 0px 0px;
1210 }
1211
1212 /*
1213 ** Boxes of checkbox elements (e.g. Advanced Search page)
1214 */
1215 .crm-container .listing-box {
1216   width: auto;
1217   max-width: 30em;
1218   height: 7.25em;
1219   overflow: auto;
1220   border: 1px solid #999999;
1221 }
1222
1223 .crm-container .listing-box div {
1224   color: black;
1225 }
1226
1227 /*
1228 ** To allow for taller boxes of groups/tags.
1229 */
1230 .crm-container .listing-box-tall {
1231   margin: 0.25em 2.0em 0.5em 0em;
1232   width: auto;
1233   max-width: 30em;
1234   height: 15em;
1235   overflow: auto;
1236   border: 1px solid #999999;
1237 }
1238
1239 /* Image Styles */
1240 .crm-container .action-icon {
1241   vertical-align: middle;
1242   padding: 2px 2px 2px 3px;
1243   margin: 2px 2px 3px 2px;
1244   cursor: pointer;
1245   cursor: hand;
1246 }
1247
1248 /*
1249 ** Style for hiding blocks or table rows
1250 */
1251 #crm-container .hide-block,
1252 #crm-container .hide-row {
1253   display: none;
1254 }
1255
1256 /*
1257 ** Styles for showing blocks and table rows
1258 */
1259 #crm-container .show-block {
1260   display: block;
1261 }
1262
1263 #crm-container .show-row {
1264   display: table-row;
1265 }
1266
1267 #crm-container input.submit-link {
1268   color: #285286;
1269   background-color: transparent;
1270   border: none;
1271   cursor: pointer;
1272   cursor: hand;
1273   margin: 0em -0.5em 0em -0.5em;
1274 }
1275
1276 .crm-container .underline-effect {
1277   color: #285286;
1278 }
1279
1280 .crm-container .underline-effect:hover {
1281   text-decoration: underline;
1282 }
1283
1284 .crm-container .underline-effect:before {
1285   content: "\00BB";
1286 }
1287
1288 .crm-container div#searchForm {
1289   height: auto;
1290   width: 100%;
1291 }
1292
1293 .crm-container div#searchForm table.form-layout {
1294   border-spacing: 0;
1295 }
1296
1297 .crm-container div#searchForm table.form-layout td {
1298   padding: 4px;
1299   border: 1px solid #DDDDDD;
1300 }
1301
1302 .crm-container #main {
1303   height: 95%;
1304   width: 95%;
1305   left: 1%;
1306   top: 1%;
1307   position: relative;
1308 }
1309
1310 #crm-container .label-pane {
1311   margin: 0.25em 0em 0em;
1312   padding: 0.25em;
1313   background-color: #6AA8EE;
1314   cursor: pointer;
1315   color: #213245;
1316   font-weight: bold;
1317   cursor: pointer;
1318 }
1319
1320 #crm-container .content-pane {
1321   overflow: auto;
1322 }
1323
1324 /*
1325 editor specific classes
1326 */
1327 #crm-container dd.editor {
1328   margin-top: 0.7em;
1329   margin-left: 0em;
1330   float: left;
1331   vertical-align: top;
1332   width: 58em;
1333 }
1334
1335 #crm-container.clear,
1336 .crm-container .crm-group-summary .clear {
1337   /* generic container (i.e. div) for floating buttons */
1338   overflow: hidden;
1339   width: 100%;
1340 }
1341
1342 /* class for tinymce buttons display */
1343 #crm-container table.mceLayout td,
1344 #crm-container table.mceLayout table {
1345   padding: 0px;
1346   background: #EDEDED;
1347   border: 2px solid #EDEDED;
1348   font-size: 0em;
1349   vertical-align: top;
1350   width: auto;
1351 }
1352
1353 #crm-container tr.mceLast {
1354   border: 1px solid #EDEDED;
1355 }
1356
1357 #location .form-layout table,
1358 #location .form-layout td,
1359 #crm-container div#location table.form-layout table.inner-table td {
1360   border: 0px;
1361   vertical-align: top;
1362   margin-bottom: -5px;
1363   width: auto;
1364 }
1365
1366 /* class for personal campaign info page */
1367 #crm-container table.campaign th,
1368 .crm-container table.campaign td,
1369 #crm-container table.campaign,
1370 #crm-container table.campaign table.form-layout td {
1371   font-size: 9pt;
1372   border: 0px;
1373   width: auto;
1374   vertical-align: top;
1375 }
1376
1377 #crm-container table.campaign table {
1378   background: #F7F7F7;
1379 }
1380
1381 #crm-container div.remaining {
1382   background: url("../i/contribute/pcp_remain.gif");
1383 }
1384
1385 #crm-container div.achieved {
1386   background: url("../i/contribute/pcp_achieve.gif");
1387 }
1388
1389 #crm-container .honor_roll {
1390   margin: 1em 20px 0 0;
1391   padding: 10px;
1392   width: 120px;
1393   background-color: #fafafa;
1394   border: 1px solid #9d9fca;
1395   height: 220px;
1396 }
1397
1398 #crm-container .thermometer-wrapper,
1399 #crm-container .honor-roll-wrapper {
1400   float: left;
1401   width: 150px;
1402   margin-left: 1em;
1403 }
1404
1405 #crm-container .thermometer-fill-wrapper {
1406   background: transparent url("../i/contribute/pcp_remain.gif") repeat-y scroll left bottom;
1407   height: 220px;
1408   position: relative;
1409   margin: 1em 0 1.5em 0;
1410 }
1411
1412 #crm-container .thermometer-fill {
1413   background: transparent url(../i/contribute/pcp_achieve.gif) repeat-y scroll 0 bottom;
1414   bottom: 0;
1415   left: 0;
1416   position: absolute;
1417   width: 130px;
1418 }
1419
1420 #crm-container .thermometer-pointer {
1421   padding-left: 45px;
1422   /* width of thermometer + a little actual padding */
1423   position: absolute;
1424   top: -10px;
1425   /* vertically center text on percentage raised */
1426   line-height: 1em;
1427 }
1428
1429 #crm-container .pcp-intro-text {
1430   padding-bottom: 1em;
1431 }
1432
1433 #crm-container .pcp-image {
1434   float: left;
1435   margin: 0 1em 1em 0;
1436 }
1437
1438 #crm-container .ui-draggable {
1439   background: url("../i/draggable.png") no-repeat left 1px;
1440   float: left;
1441   height: 16px;
1442   text-indent: -10000px;
1443   width: 16px;
1444 }
1445
1446 #crm-container .pcp-widgets {
1447   border: 1px solid #CCCCCC;
1448   float: right;
1449   margin: 0 0 1em 1em;
1450   padding: 0.5em;
1451 }
1452
1453 #crm-container .pcp_honor_roll_entry {
1454   margin-bottom: 1em;
1455 }
1456
1457 #crm-container .pcp-honor_roll-nickname {
1458   font-weight: bold;
1459 }
1460
1461 #crm-container .pcp-donate {
1462   height: 24px;
1463 }
1464 #crm-container a.pcp-contribute-button {
1465   font-weight: bold;
1466 }
1467
1468 #crm-container .pcp-create-your-own {
1469   clear: left;
1470   margin: 1em 0;
1471 }
1472
1473 #crm-container .pcp-page-text {
1474   margin-bottom: 1em;
1475 }
1476
1477 #crm-container table.nestedSelector {
1478   margin: 0px;
1479   width: 100%;
1480   border-bottom: 0px;
1481 }
1482
1483 #crm-container table.nestedSelector tr.columnheader th {
1484   border: 0px;
1485 }
1486
1487 #crm-container table.caseSelector {
1488   vertical-align: top;
1489   border: 0px;
1490   margin: 0.5em 0.1em;
1491 }
1492
1493 #crm-container table.caseSelector tr {
1494   border-bottom: 1px solid #999999;
1495 }
1496
1497 #crm-container table.caseSelector td.status-urgent {
1498   font-weight: bold;
1499   text-transform: uppercase;
1500 }
1501
1502 #crm-container table.caseSelector td {
1503   border-right: 0px;
1504   padding: 4px;
1505 }
1506
1507 #crm-container table.nestedActivitySelector {
1508   margin: 0px;
1509   width: 100%;
1510   border: 0px;
1511   color: #333333;
1512 }
1513
1514 #crm-container table.nestedActivitySelector tr.columnheader th {
1515   color: #000000;
1516   background-color: #CFCEC3;
1517   border-top-color: #FFF;
1518   border-left-color: #FFFFFF;
1519   border-right-color: #FFFFFF;
1520   border-bottom-color: #999999;
1521 }
1522
1523 #crm-container table#activities-selector.nestedActivitySelector,
1524 #crm-container table#activities-selector.nestedActivitySelector td {
1525   border: 0px;
1526 }
1527
1528 #crm-container table.nestedActivitySelector td {
1529   border-right: 0px;
1530 }
1531
1532 #crm-container table#activities-selector.nestedActivitySelector tr.status-overdue {
1533
1534 }
1535
1536 #crm-container table.nestedActivitySelector tr.priority-urgent,
1537 #crm-container table.nestedActivitySelector tr a.priority-urgent {
1538   background-color: #FFDDDD;
1539 }
1540
1541 #crm-container table.nestedActivitySelector tr.priority-low,
1542 #crm-container table.nestedActivitySelector tr a.priority-low {
1543   background-color: #DDFFDD;
1544 }
1545
1546 #crm-container table.nestedActivitySelector tr.status-scheduled,
1547 #crm-container table.nestedActivitySelector tr a.status-scheduled {
1548   color: #006633;
1549 }
1550
1551 #crm-container table.nestedActivitySelector tr.status-completed,
1552 #crm-container table.nestedActivitySelector tr a.status-completed {
1553   color: #333333;
1554 }
1555
1556 #crm-container table.nestedActivitySelector tr.status-overdue,
1557 #crm-container table.nestedActivitySelector tr a.status-overdue {
1558   color: #FF0000;
1559 }
1560
1561 #crm-container table.nestedActivitySelector tr a.crm-activity-status {
1562   cursor: pointer;
1563 }
1564
1565 #crm-container table.nestedActivitySelector tr a {
1566   color: #0066CC;
1567 }
1568
1569 #crm-container #activities-selector tr:hover td,
1570 #crm-container #activities-selector tr:hover td.sorted,
1571 #crm-container #activities-selector tr.trOver td.sorted,
1572 #crm-container #activities-selector tr.trOver td {
1573   background: transparent;
1574 }
1575
1576 #crm-container span.success-status {
1577   margin-left: 6px;
1578   background-color: #ffff99;
1579   padding: .25em .5em .25em .5em;
1580   border: 1px solid #696969;
1581 }
1582
1583 /* Styles for Config Task List */
1584 #crm-container td.tasklist a {
1585   font-weight: bold;
1586 }
1587
1588 #crm-container table.selector td.tasklist {
1589   border-right: 1px solid #DDDDDD;
1590   width: 20%;
1591 }
1592
1593 #crm-container td.tasklist a:link {
1594   color: #FF0105;
1595 }
1596
1597 #crm-container td.tasklist a:visited {
1598   color: green;
1599 }
1600
1601 /* Styles for Actions Ribbon */
1602 #crm-container .crm-actions-ribbon {
1603   margin: 0 0 8px 0;
1604 }
1605
1606 #crm-container .crm-actions-ribbon ul {
1607   margin: 0px;
1608   padding: 0px;
1609 }
1610
1611 #crm-container .crm-actions-ribbon li {
1612   float: left;
1613   margin: 0 8px 0 0;
1614   padding: 0px;
1615   list-style: none;
1616 }
1617
1618 #crm-container .crm-actions-ribbon li.crm-delete-action {
1619   margin-left: 30px;
1620 }
1621
1622 #crm-container .crm-actions-ribbon li.crm-previous-action,
1623 #crm-container .crm-actions-ribbon li.crm-next-action {
1624   float: right;
1625   margin: 0px 0px 0px 8px;
1626 }
1627
1628 #crm-container .ac_results li {
1629   float: none;
1630   padding: 4px;
1631   margin: 0px;
1632   line-height: 15px;
1633 }
1634
1635 /* Styles for Action Items &  Action Link pop-up */
1636 .crm-container .action-item {
1637   padding: 0px 5px;
1638   border-left: 1px solid #CCC;
1639   white-space: nowrap;
1640 }
1641 .crm-container .action-item-wrap {
1642   padding: 0px 5px;
1643   border-left: 1px solid #CCC;
1644   white-space: normal;
1645 }
1646 .crm-container .action-item-first {
1647   border-left: none;
1648   /* last action item should not have right hand border */}
1649
1650
1651 /* theming for panel and context menus */
1652 .crm-container td ul.panel li {
1653   background-color: #2F2F2E;
1654 }
1655
1656 .crm-container .panel li a {
1657   color: #DFDFDF;
1658 }
1659
1660 .crm-container .panel li a:hover,
1661 .crm-container .crm-participant-list-inner li a:hover,
1662 .crm-container .crm-event-links-list-inner li a:hover,
1663 .crm-container .crm-contribpage-links-list-inner li a:hover {
1664   color: #3e3e3e;
1665   background-color: #F5F6F1;
1666   text-decoration: none;
1667 }
1668
1669 .crm-container .panel {
1670   display: none;
1671   z-index: 9999;
1672   position: absolute;
1673   border-bottom: 0px;
1674   background: transparent url(../i/dropdown-pointer.gif) no-repeat scroll 150px 1px;
1675   text-align: left;
1676   padding-top: 5px;
1677   margin: 0px;
1678   width: 180px;
1679 }
1680
1681 .crm-container td ul.panel {
1682   top: 15px;
1683   right: 0px;
1684 }
1685
1686 .crm-container td ul.panel li {
1687   margin: 0px;
1688   padding: 2px;
1689   list-style: none;
1690   background-image: none;
1691   width: auto;
1692 }
1693
1694 .crm-container .btn-slide {
1695   text-align: left;
1696   text-decoration: none;
1697   border: none;
1698   cursor: pointer;
1699   position: relative;
1700   padding: 0px 14px 0 5px;
1701   background: url("../i/TreePlus.gif") no-repeat right 1px;
1702   white-space: nowrap;
1703   z-index: 2;
1704 }
1705
1706 .crm-container .btn-slide-active {
1707   z-index: 10;
1708 }
1709
1710 .crm-container .crm-configure-actions,
1711 .crm-container .crm-event-participants,
1712 .crm-container .crm-event-links,
1713 .crm-container .crm-event-more {
1714   min-width: 85px;
1715   z-index: 1;
1716 }
1717
1718 .crm-container .panel li a {
1719   text-decoration: none;
1720   padding: 4px;
1721   display: block;
1722   border: none;
1723   cursor: pointer;
1724 }
1725
1726 /*class for CMS user name check used in profile*/
1727 .crm-container .cmsmessagebox {
1728   position: absolute;
1729   width: auto;
1730   margin-left: 10px;
1731   padding: 3px;
1732 }
1733
1734 /* class for text area resizer jquery plugin*/
1735 div.grippie {
1736   background: #EEEEEE url('../i/grippie.png') no-repeat scroll center 2px;
1737   border-color: #DDDDDD;
1738   border-style: solid;
1739   border-width: 0pt 1px 1px;
1740   cursor: s-resize;
1741   height: 9px;
1742   overflow: hidden;
1743 }
1744 .crm-container .resizable-textarea textarea {
1745   display: block;
1746   margin-bottom: 0pt;
1747   width: 95%;
1748   height: 20%;
1749 }
1750
1751 .crm-container ul li.crm-tab-button {
1752   border-bottom: 0 none;
1753   float: left;
1754   margin: 0 0.2em 1px 0;
1755   padding: 0 0 1px;
1756   position: relative;
1757   top: 1px;
1758   white-space: nowrap;
1759 }
1760
1761 .crm-container .ui-tabs .ui-tabs-nav {
1762   padding: 4px;
1763 }
1764
1765 .crm-container .crm-tab-button a,
1766 .crm-container .ui-tabs .ui-tabs-nav li a,
1767 .crm-container .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a,
1768 .crm-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
1769   font-size: 0.9em;
1770 }
1771
1772 #mainTabContainer li.crm-tab-button {
1773   margin: 0 2px 2px 0;
1774 }
1775
1776 .crm-container .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
1777   padding-bottom: 0px;
1778   border: none;
1779 }
1780
1781 .crm-container .crm-tab-button a,
1782 .crm-container .ui-tabs .ui-tabs-nav li a {
1783   padding: 5px !important;
1784   color: #fafafa;
1785 }
1786
1787 .crm-container .crm-tab-button a,
1788 .crm-container .ui-tabs .ui-tabs-nav li.ui-state-active a {
1789   color: #090909;
1790 }
1791
1792 .crm-container .crm-tab-button a em {
1793   font-style: normal;
1794 }
1795
1796 #crm-container div.ui-accordion-content {
1797   padding: .5em 1em !important;
1798 }
1799
1800 /* Styles for Contact Summary start here. dgg */
1801 #crm-container .primary {
1802   font-weight: bold;
1803 }
1804
1805 #crm-container .ui-tabs-panel {
1806   padding: 4px;
1807   font-size: 13px;
1808 }
1809
1810 #crm-container div.contact_details {
1811   padding: 4px;
1812   line-height: 1.4em;
1813   clear: both;
1814 }
1815
1816 #crm-container div#crm-contact-thumbnail {
1817   padding: 4px;
1818   float: right;
1819 }
1820
1821 #crm-container div.contact_panel {
1822   display: block;
1823 }
1824
1825 #crm-container .upper {
1826   text-transform: uppercase;
1827 }
1828
1829 #crm-container table.caseSelector td.status-urgent {
1830   font-weight: bold;
1831   text-transform: uppercase;
1832 }
1833
1834 #crm-container div.crm-inline-edit {
1835   border: 2px dashed transparent;
1836   background: none;
1837   position: relative;
1838 }
1839
1840 #crm-container .crm-edit-ready .crm-inline-edit:hover {
1841   cursor: pointer;
1842   border: 2px dashed lightgrey;
1843 }
1844
1845 #crm-container div.crm-inline-edit.form {
1846   cursor: default;
1847   border: 2px dashed #6665BF;
1848   overflow: auto;
1849 }
1850
1851 #crm-container .crm-inline-edit.add-new {
1852   min-height: 2.5em;
1853 }
1854
1855 #crm-container div.crm-inline-edit .crm-edit-help {
1856   display: none;
1857   position: absolute;
1858   right: 0px;
1859   top: 0px;
1860   opacity: .8;
1861   padding: .4em;
1862   border-bottom-left-radius: 1em;
1863 }
1864
1865 #crm-container .crm-inline-edit.add-new .crm-edit-help {
1866   display: block;
1867   background-color: #EBEBEB;
1868 }
1869
1870 #crm-container .crm-edit-ready .crm-inline-edit:hover .crm-edit-help {
1871   display: block;
1872   background-color: #DFE1FF;
1873 }
1874
1875 #crm-container div.crm-inline-edit.form .crm-edit-help {
1876   display: none !important;
1877 }
1878
1879 #crm-container div.crm-summary-contactname-block {
1880   padding-bottom: 8px;
1881   margin-top: -10px;
1882 }
1883
1884 #crm-container div.crm-summary-display_name {
1885   font-size: 19px;
1886   padding-bottom: 10px;
1887 }
1888
1889 #crm-container div.contactCardLeft,
1890 #crm-container div#Top {
1891   width: 49%;
1892   display: block;
1893   float: left;
1894   clear: both;
1895 }
1896
1897 #crm-container div.contactCardRight {
1898   width: 49%;
1899   display: block;
1900   float: right;
1901 }
1902
1903 #crm-container div.contact_panel table {
1904   margin-bottom: 0px;
1905 }
1906
1907 #crm-container div.contactCardLeft .label,
1908 #crm-container div.contactCardRight .label {
1909   font-size: 11px;
1910   vertical-align: top;
1911   margin-right: 10px;
1912 }
1913
1914 #crm-container div.contactCardLeft .grouplabel,
1915 #crm-container div.contactCardRight .grouplabel {
1916   border-bottom: grey 1px solid;
1917   width: 100%;
1918   font-size: 0.95em;
1919   font-weight: bold;
1920   background-color: #ddd;
1921 }
1922
1923 #crm-container div.contact_panel .spacer {
1924   padding: 8px;
1925 }
1926
1927 #crm-container div.contact_panel td {
1928   padding: 4px;
1929   vertical-align: top;
1930   border-bottom: 1px solid #E2E2E2;
1931 }
1932
1933 #crm-container div.contact_panel td.label {
1934   width: 28%;
1935 }
1936
1937 #crm-container div.contact_panel td.last {
1938   border-bottom: 0px;
1939 }
1940
1941 #crm-container #customFields {
1942   width: 100%;
1943 }
1944
1945 #crm-container #customFields div.contact_panel td.talabel {
1946   padding: 4px 0 0 4px;
1947   border: 0px;
1948 }
1949
1950 #crm-container #customFields .contact_panel .customFieldGroup {
1951   background-color: #F7F7F7;
1952   line-height: 1.4em;
1953   padding: 4px;
1954   width: 100%;
1955 }
1956
1957 #crm-container div.contact_panel .crm-address-block {
1958   margin-bottom: 6px;
1959 }
1960 #crm-container .crm-add-address-wrapper {
1961   height: 25px;
1962 }
1963
1964 .crm-container .crm-clearfix:after,
1965 #crm-container .crm-summary-row:after {
1966   clear: both;
1967   content: ".";
1968   display: block;
1969   height: 0;
1970   visibility: hidden;
1971 }
1972
1973 .crm-container div.crm-clear {
1974   clear: both;
1975   margin-bottom: 1px;
1976   background-color: #FAFAFA;
1977   font-size: 11px;
1978 }
1979
1980 #crm-container div.crm-summary-row {
1981   background-color: #F4F4ED;
1982   border-top: 1px solid #ffffff;
1983   margin-bottom: 1px;
1984   min-height: 17px;
1985 }
1986
1987 #crm-container div.crm-summary-row div.crm-label {
1988   background-color: #FAFAFA;
1989   color: #7A7A60;
1990   text-align: left;
1991   width: 122px;
1992   float: left;
1993   padding: 4px;
1994 }
1995
1996 #crm-container div.crm-summary-row div.crm-content {
1997   padding: 4px;
1998   margin-left: 130px;
1999 }
2000
2001 #crm-container div.crm-config-option {
2002   float: right;
2003   padding-right: 10px;
2004   padding-top: 5px;
2005 }
2006
2007 #crm-container a.crm-link-action {
2008   cursor: pointer;
2009   cursor: hand;
2010 }
2011
2012 #crm-container span.crm-custom-greeting {
2013   font-size: 9px;
2014 }
2015
2016 #crm-container table.crm-inline-edit-form td,
2017 #crm-container div.crm-inline-edit-form {
2018   background-color: #E6E6DC;
2019   white-space: nowrap;
2020 }
2021 #crm-container table.crm-inline-edit-form td.crm-label,
2022 #crm-container div.crm-inline-edit-form .crm-label {
2023   white-space: normal;
2024 }
2025
2026 #crm-container div.crm-inline-edit-field {
2027   display: inline-block;
2028   padding: 4px 5px;
2029 }
2030
2031 #crm-container div.buttons {
2032   text-align: right;
2033   margin: 8px 0 0;
2034   padding: 4px 4px 2px 0;
2035   background-color: #fff;
2036   border: none;
2037 }
2038
2039 #crm-container div.buttons input,
2040 #crm-container div.buttons select {
2041   font-size: 0.9em;
2042   vertical-align: top !important;
2043 }
2044
2045
2046 #crm-container div.buttons #actions {
2047   text-align: left;
2048   float: left;
2049 }
2050 #crm-container div.buttons ul#actions {
2051   list-style-type: none;
2052   padding-left: 0px;
2053 }
2054 #crm-container div.buttons #actions li {
2055   float: left;
2056   padding: 0px;
2057   margin: 0 5px 0 0;
2058 }
2059
2060 #crm-container div.crm-case-dashboard-buttons {
2061   height: 33px;
2062 }
2063
2064 #crm-container div.crm-case-dashboard-switch-view-buttons {
2065   float: right;
2066 }
2067
2068 #crm-container .separator {
2069   border-bottom: solid 2px #ccc;
2070 }
2071
2072 /* reports */
2073 #crm-container .report-layout {
2074   border: none;
2075 }
2076
2077 #crm-container .reports-header-right {
2078   text-align: right;
2079 }
2080
2081 #crm-container .report-contents {
2082   background-color: #F5F5F5;
2083   border: 1px solid #CDCDC3;
2084   padding: 4px;
2085   width: 20%;
2086   white-space: normal;
2087   font-size: 0.95em;
2088 }
2089
2090 #crm-container .report-contents-right {
2091   border: 1px solid #CDCDC3;
2092   padding: 4px;
2093   font-size: 0.95em;
2094   text-align: right;
2095 }
2096
2097 #crm-container table.report-layout td {
2098   padding: 4px;
2099   border-bottom: 1px solid #CDCDC3;
2100   vertical-align: top;
2101 }
2102
2103 #crm-container table.report-layout tr {
2104   font-size: 0.95em;
2105 }
2106
2107 #crm-container .report-label {
2108   text-align: right;
2109   font-weight: bold;
2110 }
2111
2112 #crm-container table.report-layout th.report-contents {
2113   background-color: #F5F5F5;
2114
2115 }
2116
2117 #crm-container table.report-layout th.statistics {
2118   width: 5%;
2119   white-space: nowrap;
2120 }
2121
2122 /*override default pager for report*/
2123 .crm-container .report-pager .crm-pager-nav a {
2124   color: #000000;
2125 }
2126
2127 #crm-container table.view-layout {
2128   margin: 0em;
2129   border-collapse: collapse;
2130   border: 0px none;
2131 }
2132
2133 #crm-container table.view-layout .label {
2134   color: DimGray;
2135   font-size: 0.95em;
2136   vertical-align: top;
2137   font-weight: bold;
2138   margin-right: 10px;
2139   background-color: #EEEEEE;
2140   width: 20%;
2141 }
2142
2143 #crm-container th.contriTotalRight {
2144   border-right: 1px solid #999999;
2145 }
2146
2147 #crm-container th.contriTotalLeft {
2148   border-left: 1px solid #999999;
2149 }
2150
2151 /* TimeEntry styles */
2152 .crm-container .timeEntry_control {
2153   vertical-align: middle;
2154   margin-left: 2px;
2155 }
2156 * html .timeEntry_control {
2157   /* IE only */
2158   margin-top: -4px;
2159 }
2160
2161 /* This is the style for the trigger icon. The margin-bottom value causes the icon to shift down to center it. */
2162 .crm-container .ui-datepicker-trigger {
2163   margin-top: 4px;
2164   margin-bottom: -6px;
2165 }
2166
2167 .crm-container .ui-datepicker {
2168   width: 17em;
2169   padding: .2em .2em 0;
2170   z-index: 9999 !important;
2171 }
2172
2173 #crm-container .cke_editor {
2174   border: 0px none;
2175 }
2176
2177
2178 /* Set/alter ICONS */
2179
2180 #crm-container div#printer-friendly {
2181   float: right;
2182   position: relative;
2183   margin: -2em 0.5em 0 0;
2184 }
2185 /* For Joomla, margin 0 works correctly */
2186 #crm-container table#crm-content div#printer-friendly {
2187   margin: 0;
2188 }
2189
2190 #crm-container .order-icon {
2191   height: 15px;
2192   width: 10px;
2193   padding-top: 4px;
2194   padding-right: 4px;
2195 }
2196
2197 /* crm button style */
2198
2199 .crm-container .crm-submit-buttons,
2200 .crm-container .action-link {
2201   height: 27px;
2202   margin: 4px 0px 4px 2px;
2203 }
2204
2205 .crm-container .register_link-top {
2206   float: right;
2207   margin-left: 8px;
2208 }
2209
2210 #crm-container .crm-button {
2211   border: medium none;
2212   cursor: pointer;
2213   display: block;
2214   float: left !important;
2215   overflow: hidden;
2216   text-shadow: 0 1px 0 black;
2217   margin: 0px 12px 0 0;
2218   padding: 0px 4px;
2219   cursor: pointer;
2220 }
2221 #crm-container .crm-button input {
2222   background: none;
2223   _background: #6C6C6C;
2224   /* IE6 only */
2225   border: medium none;
2226   color: #FFF;
2227   cursor: pointer;
2228   font-size: 13px;
2229   font-weight: normal;
2230   margin: 0 0 0 0px;
2231   padding: 1px 8px 2px 4px;
2232 }
2233 #crm-container .crm-button-type-cancel,
2234 #crm-container .crm-button-type-back {
2235   margin-left: 20px;
2236 }
2237 #crm-container .crm-button-type-cancel input {
2238   color: #E6E6DC!important;
2239 }
2240
2241 .crm-container a.button,
2242 .crm-container a.button:link,
2243 .crm-container a.button:visited,
2244 .crm-container input.form-submit,
2245 #crm-container input[type=button],
2246 #crm-container input.form-submit-inline,
2247 #crm-container .crm-button {
2248   text-shadow: 0 1px 0 black;
2249   background: #70716B url(../i/crm-button-bg.gif) repeat-x top left;
2250   color: #FFF;
2251   font-size: 13px;
2252   font-weight: normal;
2253   margin-right: 6px;
2254   padding: 2px 6px;
2255   text-decoration: none;
2256   cursor: pointer;
2257   border: 1px solid #3e3e3e;
2258 }
2259
2260 #crm-container .crm-button {
2261   padding: 1px;
2262 }
2263
2264 .crm-container input.form-submit,
2265 #crm-container input[type=button],
2266 #crm-container input.form-submit-inline {
2267   padding: 2px 6px;
2268 }
2269
2270 #crm-container .crm-button input[type=button],
2271 #crm-container .crm-button input.form-submit,
2272 #crm-container .crm-button input.form-submit-inline {
2273   padding: 2px 4px;
2274   margin: 0px;
2275   background: none;
2276   _background: #6C6C6C;
2277   /* IE6 only */
2278   border: none;
2279 }
2280
2281 .crm-container a.button,
2282 .crm-container a.button:link,
2283 .crm-container a.button:visited {
2284   display: block;
2285   float: left;
2286 }
2287
2288 .crm-container a.button span {
2289   display: block;
2290   line-height: 14px;
2291   padding: 2px 0px;
2292 }
2293
2294 .crm-container .button .red {
2295   background-image: url(../i/icons/jquery-ui-FFFFFF.png);
2296 }
2297
2298 .crm-container a.button:active {
2299   color: #000;
2300   outline: none;
2301   /* hide dotted outline in Firefox */
2302 }
2303
2304 .crm-container .crm-button:hover,
2305 .crm-container .crm-button:focus,
2306 .crm-container input[type=submit]:hover,
2307 .crm-container input[type=button]:hover,
2308 .crm-container a.button:hover,
2309 .crm-container a.button:focus {
2310   background-position: 0px -25px;
2311 }
2312
2313 /* No button styling for PayPal Express buttons */
2314 #crm-container input#_qf_Register_upload_express,
2315 #crm-container input#_qf_Main_upload_express {
2316   background: none;
2317   margin: 0px;
2318   padding: 0px;
2319   border: none;
2320 }
2321
2322 /* create new XXX style (drupal block) */
2323
2324 #crm-participant-wrapper,
2325 #crm-event-links-wrapper,
2326 #crm-contribpage-links-wrapper,
2327 #crm-create-new-wrapper,
2328 #crm-contact-actions-wrapper {
2329   position: relative;
2330   float: left;
2331 }
2332
2333 #crm-event-links-list,
2334 #crm-contribpage-links-list,
2335 #crm-create-new-list,
2336 #crm-contact-actions-list,
2337 #crm-participant-list {
2338   position: absolute;
2339   display: none;
2340   top: 24px;
2341   width: 220px;
2342   left: 0px;
2343   z-index: 15;
2344 }
2345
2346 #crm-create-new-list {
2347   width: 124px;
2348 }
2349 #crm-contact-actions-list .icon {
2350   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
2351 }
2352
2353 #crm-contact-actions-list .crm-contact_activities-list select {
2354   margin-top: 4px;
2355 }
2356
2357 #crm-contact-actions-list .crm-contact_activities-list,
2358 #crm-contact-actions-list .crm-contact_print-list,
2359 #crm-contact-actions-list .crm-contact_actions-list {
2360   width: 160px;
2361 }
2362
2363 #crm-contact-actions-list .crm-contact_activities-list ul,
2364 #crm-contact-actions-list .crm-contact_print-list ul,
2365 #crm-contact-actions-list .crm-contact_actions-list ul,
2366 #crm-event-links-list .crm-event-info ul,
2367 #crm-event-links-list .crm-event-test ul,
2368 #crm-event-links-list .crm-event-live ul,
2369 #crm-contribpage-links-list .crm-contribpage-contribution ul,
2370 #crm-contribpage-links-list .crm-contribpage-test ul,
2371 #crm-contribpage-links-list .crm-contribpage-live ul,
2372 #crm-participant-list .crm-participant-counted ul,
2373 #crm-participant-list .crm-participant-not-counted ul,
2374 #crm-participant-list .crm-participant-listing ul,
2375 #crm-create-new-list ul {
2376   width: auto;
2377   margin: 0px;
2378   padding: 0px;
2379 }
2380
2381 #crm-contact-actions-list .crm-contact_activities-list ul {
2382   padding-right: 4px;
2383 }
2384 #crm-contact-actions-list .crm-contact_print-list ul {
2385   padding-left: 4px;
2386 }
2387 #crm-contact-actions-list .crm-contact_actions-list ul {
2388   padding-left: 4px;
2389 }
2390
2391 #crm-contact-actions-list .crm-contact_activities-list {
2392   float: left;
2393 }
2394 #crm-contact-actions-list .crm-contact_print-list {
2395   float: right;
2396 }
2397 #crm-contact-actions-list .crm-contact_actions-list {
2398   margin-left: 160px;
2399   margin-right: 161px;
2400   border-left: 1px solid #a7a7a7;
2401   border-right: 1px solid #a7a7a7;
2402 }
2403
2404 /* =================== */
2405 /* ! contact actions  */
2406 /* =================== */
2407
2408
2409 #crm-contact-actions-wrapper {
2410   width: 85px;
2411   /* fixes ie bug where button is toooooo long */
2412 }
2413 #crm-contact-actions-list {
2414   width: 495px;
2415   /* fixes ie bug  caused by above*/
2416 }
2417
2418 /* setup for icons */
2419
2420 .ac_results ul li {
2421   background-image: url('');
2422 }
2423
2424 .crm-container .ui-icon {
2425   background-image: url("../i/icons/jquery-ui-52534D.png")
2426 }
2427 .crm-container .icon {
2428   height: 16px;
2429   width: 16px;
2430   background: transparent url("../i/icons/jquery-ui-52534D.png") no-repeat top right;
2431   float: left;
2432   text-indent: -10000px;
2433 }
2434
2435 .crm-container span.icon {
2436   float: none;
2437   display: inline-block;
2438 }
2439
2440 .crm-container .button .icon,
2441 .crm-container .crm-button .icon {
2442   background-image: url("../i/icons/jquery-ui-FFFFFF.png");
2443 }
2444 .crm-container .button:hover .icon,
2445 .crm-container .crm-button:hover .icon {
2446   background-image: url("../i/icons/jquery-ui-2786C2.png");
2447 }
2448
2449 .crm-container .crm-button .icon {
2450   margin-top: 3px;
2451 }
2452
2453 .crm-container .dark-icon {
2454   background-image: url("../packages/jquery/jquery-ui/css/black-tie/images/ui-icons_222222_256x240.png")}
2455 .crm-container .red-icon {
2456   background-image: url("../i/icons/jquery-ui-8A1F11.png")}
2457
2458 .crm-container .edit-icon {
2459   background-position: -66px -114px;
2460 }
2461 .crm-container .previous-icon {
2462   background-position: -82px -161px;
2463 }
2464 .crm-container .next-icon {
2465   background-position: -66px -161px;
2466 }
2467 .crm-container .add-icon {
2468   background-position: -2px -193px;
2469 }
2470 .crm-container .back-icon {
2471   background-position: -2px -65px;
2472 }
2473 .crm-container .delete-icon {
2474   background-position: -179px -99px;
2475 }
2476 .crm-container .details-icon {
2477   background-position: -129px -112px;
2478 }
2479 .crm-container .button:hover .delete-icon {
2480   background-image: url("../i/icons/jquery-ui-8A1F11.png")!important;
2481 }
2482
2483 .crm-container .restore-icon {
2484   background-position: 0px -66px;
2485   background-image: url("../i/icons/jquery-ui-91CE00.png");
2486 }
2487 .crm-container .button:hover .restore-icon {
2488   background-image: url("../i/icons/jquery-ui-91CE00.png");
2489 }
2490
2491 .crm-container .vcard-icon {
2492   background-position: -35px -81px;
2493 }
2494
2495 .crm-container .print-icon {
2496   background-position: -162px -97px;
2497 }
2498
2499 .crm-container .dashboard-icon {
2500   background-position: -194px -129px;
2501 }
2502
2503 .crm-container .user-record-icon {
2504   background-position: -145px -98px;
2505 }
2506
2507 .crm-container .inform-icon {
2508   background-position: -16px -144px;
2509   margin-right: 5px;
2510 }
2511
2512 .crm-container .dropdown-icon {
2513   background-position: -46px -32px;
2514   float: right;
2515 }
2516
2517 .crm-container .tip-icon {
2518   background-position: -128px -128px;
2519 }
2520
2521 .crm-container .alert-icon {
2522   background-position: 0 -144px;
2523 }
2524 .crm-container .check-icon {
2525   background-position: -66px -146px;
2526 }
2527 .crm-container .refresh-icon {
2528   background-position: -65px -81px;
2529 }
2530 .crm-container .settings-icon {
2531   background-position: -178px -114px;
2532 }
2533 .crm-container .search-icon {
2534   background-position: -161px -114px;
2535 }
2536 .crm-container .email-icon {
2537   background-position: -81px -98px;
2538 }
2539 .crm-container .preview-icon {
2540   background-position: -227px -129px;
2541 }
2542 .crm-container .play-icon {
2543   background-position: -3px -161px;
2544 }
2545 .crm-container .close-icon {
2546   background-position: -82px -130px;
2547 }
2548 .crm-container .swap-icon {
2549   background-position: -82px -81px;
2550 }
2551
2552 #crm-container .geotag {
2553   padding: 2px 0 2px 20px !important;
2554   background: url('../i/geotag_16.png') left center no-repeat;
2555   font-size: .9em;
2556 }
2557
2558 /* These .crm-icon classes use item_sprites.png */
2559
2560 .crm-container .crm-icon {
2561   background-image: url('../i/item_sprites.png');
2562   margin: 2px 4px 0 0;
2563   text-indent: -10000px;
2564   /* for accessibility reason, put the name of the type/subtype in the icon div (it will be hidden and replaced by the icon) */
2565 }
2566
2567 .crm-container .Individual-icon {
2568   background-position: 0px 0px;
2569 }
2570 .crm-container .Group-icon {
2571   background-position: -16px 0px;
2572 }
2573 .crm-container .Household-icon {
2574   background-position: -32px 0px;
2575 }
2576
2577 .crm-container .Individual-subtype-icon {
2578   background-position: 0px -48px;
2579 }
2580 .crm-container .Household-subtype-icon {
2581   background-position: -32px -48px;
2582 }
2583 .crm-container .Organization-subtype-icon {
2584   background-position: -48px -48px;
2585 }
2586
2587 .crm-container .Organization-icon {
2588   background-position: -48px 0px;
2589 }
2590 .crm-container .Activity-icon {
2591   background-position: -64px 0px;
2592 }
2593 .crm-container .Case-icon {
2594   background-position: -80px 0px;
2595 }
2596 .crm-container .Grant-icon {
2597   background-position: 0px -16px;
2598 }
2599 .crm-container .Contribution-icon {
2600   background-position: -16px -16px;
2601 }
2602 .crm-container .Pledge-icon {
2603   background-position: -16px -16px;
2604 }
2605 .crm-container .Membership-icon {
2606   background-position: -32px -16px;
2607 }
2608 .crm-container .Participant-icon {
2609   background-position: 0px -32px;
2610 }
2611 .crm-container .Note-icon {
2612   background-position: -16px -32px;
2613 }
2614 .crm-container .Relationship-icon {
2615   background-position: -32px -32px;
2616 }
2617
2618 /* Icon hover-buttons */
2619 .crm-container .crm-hover-button {
2620   display: inline-block;
2621   border: 1px solid transparent;
2622 }
2623 .crm-container .crm-hover-button:hover,
2624 .crm-container .crm-hover-button:active {
2625   background: #ccc;
2626   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(1, #ccc));
2627   background-image: -webkit-linear-gradient(center bottom, #eee 0%, #ccc 100%);
2628   background-image: -moz-linear-gradient(center bottom, #eee 0%, #ccc 100%);
2629   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#eeeeee', GradientType = 0);
2630   background-image: linear-gradient(top, #eee 0%, #ccc 100%);
2631   border: 1px solid #AAAAAA;
2632   border-radius: 4px;
2633 }
2634 .crm-container .crm-hover-button .icon {
2635   margin-left: 3px;
2636   margin-top: 2px;
2637   vertical-align: middle;
2638 }
2639 .crm-container .crm-hover-button:hover .icon,
2640 .crm-container .crm-hover-button:active .icon {
2641   background-image: url("../i/icons/jquery-ui-2786C2.png");
2642 }
2643 /* accordion styles */
2644
2645 .crm-container .crm-accordion-header {
2646   background-image: url("../i/TreeMinusWhite.gif");
2647   background-repeat: no-repeat;
2648   background-position: 2px center;
2649   cursor: pointer;
2650   color: #F5F6F1;
2651   font-weight: normal;
2652   padding: 4px 8px 4px 20px;
2653   background-color: #5D677B;
2654 }
2655
2656 .crm-container .crm-accordion-header:hover {
2657   background-color: #32414f;
2658 }
2659
2660 .crm-container .collapsed .crm-accordion-header {
2661   background-image: url("../i/TreePlusWhite.gif");
2662 }
2663
2664 .crm-container .collapsed .crm-accordion-body,
2665 .crm-container .crm-collapsible.collapsed .collapsible-title + * {
2666   display: none;
2667 }
2668
2669 .crm-container .crm-accordion-inner .crm-accordion-header,
2670 .crm-container .crm-accordion-wrapper .crm-master-accordion-header,
2671 .crm-container .crm-collapsible .collapsible-title {
2672   background-image: url("../i/TreeMinus.gif");
2673   background-color: transparent;
2674   color: #3E3E3E;
2675 }
2676
2677 .crm-container .crm-accordion-inner.collapsed .crm-accordion-header,
2678 .crm-container .crm-accordion-wrapper.collapsed .crm-master-accordion-header,
2679 .crm-container .crm-collapsible.collapsed .collapsible-title {
2680   background-image: url("../i/TreePlus.gif");
2681 }
2682
2683 .crm-container .crm-accordion-wrapper .crm-master-accordion-header {
2684   background-color: transparent;
2685   font-size: 16px;
2686   color: #3e3e3e;
2687   margin-bottom: 0px;
2688 }
2689
2690 .crm-container .crm-accordion-inner .crm-accordion-header {
2691   font-size: 13px;
2692 }
2693
2694 .crm-container .crm-accordion-wrapper {
2695   margin-bottom: 4px;
2696 }
2697
2698 .crm-container .crm-accordion-header {
2699   -moz-border-radius: 4px 4px 0px 0px;
2700   -webkit-border-radius: 4px 4px 0px 0px;
2701   -khtml-border-radius: 4px 4px 0px 0px;
2702   border-radius: 4px 4px 0px 0px;
2703 }
2704
2705 .crm-container .collapsed .crm-accordion-header {
2706   -moz-border-radius: 4px;
2707   -webkit-border-radius: 4px;
2708   -khtml-border-radius: 4px;
2709   border-radius: 4px;
2710 }
2711
2712 .crm-container .crm-accordion-body {
2713   -moz-border-radius: 0px 0px 4px 4px;
2714   -webkit-border-radius: 0px 0px 4px 4px;
2715   -khtml-border-radius: 0px 0px 4px 4px;
2716   border-radius: 0px 0px 4px 4px;
2717   border: 1px solid #70716B;
2718   border-top: 0px;
2719   padding: 4px 0px;
2720 }
2721
2722 .crm-container .crm-collapsible .collapsible-title {
2723   padding-left: 19px;
2724   text-decoration: none;
2725   background-repeat: no-repeat;
2726   background-position: 0px center;
2727   cursor: pointer;
2728 }
2729
2730 .crm-container .crm-master-accordion-header+.crm-accordion-body {
2731   border: none;
2732   padding: 0px;
2733 }
2734
2735 .crm-container .crm-accordion-header.active {
2736   font-weight: bold;
2737   background-color: #41477E;
2738 }
2739
2740 .crm-container .crm-accordion-header.active:hover {
2741   background-color: #2E3471;
2742 }
2743
2744 .crm-container .crm-accordion-header a.crm-close-accordion {
2745   font-weight: normal !important;
2746   float: right;
2747   color: #FFF !important;
2748 }
2749
2750 .crm-container .crm-accordion-header a.crm-close-accordion span {
2751   visibility: hidden;
2752 }
2753
2754 .crm-container .crm-accordion-header a.crm-close-accordion:hover span {
2755   visibility: visible;
2756 }
2757
2758 .crm-container .crm-master-accordion-header.crm-accordion-header:hover,
2759 .crm-container .crm-collapsible .collapsible-title:hover {
2760   background-color: transparent;
2761   color: #0200A0;
2762 }
2763
2764 /* civicrm admin menu */
2765 #civicrm-menu {
2766   height: 27px;
2767 }
2768
2769 #civicrm-menu .ui-autocomplete-input,
2770 .crm-container .ui-autocomplete-input,
2771 .crm-container .ac_input {
2772   background: white url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll right -23px;
2773   padding-right: 16px;
2774   /* so that text doesn't flow on top of icon */
2775 }
2776 #crm-container .ac_input {
2777   width: 20em;
2778 }
2779
2780 #civicrm-menu #crm-qsearch {
2781   padding: 1px 3px 1px 2px;
2782   height: 20px;
2783 }
2784
2785 #civicrm-menu #crm-qsearch input {
2786   background-color: #ffffff;
2787   border: 1px solid black;
2788   margin: 0px;
2789   padding: 2px 16px 3px 2px;
2790 }
2791
2792 /* Status message bar */
2793 #civicrm-menu .crm-menubar-status-container {
2794   position: absolute;
2795   right: 2px;
2796   top: 0;
2797   border-top: 1px solid #1B1B1B;
2798 }
2799
2800 #civicrm-menu .crm-menubar-status-progressbar {
2801   padding: 3px 14px;
2802   font-size: 14px !important;
2803   font-weight: bold;
2804   background: rgba(142, 136, 0, 0.9);
2805   text-align: center;
2806 }
2807
2808 #civicrm-menu .status-busy {
2809   background: #F8FF03 url("../packages/jquery/jquery-ui/css/black-tie/images/animated-overlay.gif");
2810 }
2811
2812 #civicrm-menu .status-done .crm-menubar-status-progressbar {
2813   background: rgba(41, 152, 32, 0.7);
2814 }
2815
2816 /* Pop-up help icon - eliminate forced line break */
2817 .crm-container a.helpicon,
2818 .crm-container .crm-master-accordion-header a.helpicon {
2819   background-color: #6177D5;
2820   background-image: url("../i/icons/jquery-ui-F5F6F1.png");
2821   background-position: -50px -146px;
2822   border-radius: 6px;
2823   display: inline-block;
2824   height: 12px;
2825   width: 12px;
2826   opacity: .7;
2827   position: relative;
2828   top: 2px;
2829 }
2830
2831 div.crm-accordion-header a.helpicon {
2832   background-color: #F5F6F1;
2833   background-image: url(../i/icons/jquery-ui-2786C2.png);
2834 }
2835
2836 div a.helpicon:hover,
2837 div a.helpicon:focus {
2838   opacity: 1;
2839 }
2840
2841 .crm-container .crm-summary-link {
2842   position: relative;
2843   z-index: 16;
2844 }
2845
2846 .crm-container .crm-tooltip-wrapper {
2847   position: absolute;
2848   bottom: 0px;
2849   left: -36px;
2850   overflow: hidden;
2851   z-index: 1000;
2852   padding-bottom: 10px;
2853   background: transparent url('../i/overlay-pointer.png') no-repeat bottom left;
2854   font-size: 13px;
2855   display: none;
2856 }
2857
2858 .crm-container .crm-tooltip-down .crm-tooltip-wrapper {
2859   top: 20px;
2860   padding-top: 10px;
2861   background: transparent url('../i/overlay-pointer.png') no-repeat top left;
2862   overflow: visible;
2863 }
2864
2865 .crm-container .crm-tooltip-active {
2866   z-index: 20;
2867 }
2868
2869 .crm-container .crm-tooltip-active .crm-tooltip-wrapper {
2870   display: block;
2871 }
2872
2873 .crm-container .crm-tooltip {
2874   padding: 4px;
2875   background-color: #2f2f2e;
2876   color: #FFF;
2877   margin-left: 11px;
2878   min-width: 20px;
2879   min-height: 20px;
2880 }
2881 #crm-container .crm-tooltip table,
2882 #crm-container .crm-tooltip table tr td {
2883   border: none;
2884   color: #FFF;
2885 }
2886 .crm-container .crm-tooltip .crm-summary-group {
2887   width: 700px;
2888   margin-bottom: 0px;
2889 }
2890
2891 .crm-container .crm-tooltip .crm-report-overlay {
2892   width: 500px;
2893   margin-bottom: 0px;
2894 }
2895
2896 .crm-container .crm-tooltip .crm-report-overlay thead td {
2897   font-weight: bold;
2898 }
2899
2900 .crm-container .crm-summary-group h2 {
2901   padding: 2px 4px 0 4px;
2902   font-size: 14px;
2903   color: #FFF;
2904   margin-bottom: 0px;
2905 }
2906
2907 /* crm-summary-group appears outside crm-container for contact summary icon overlay */
2908 #crm-container .crm-summary-group .crm-section .label,
2909 .crm-container .crm-summary-group .crm-section .label {
2910   text-align: left;
2911   width: 40%;
2912   font-size: 11px;
2913   color: #A7A7A7;
2914 }
2915
2916 #crm-container .crm-summary-group .crm-section .content,
2917 .crm-container .crm-summary-group .crm-section .content {
2918   margin-left: 41%;
2919 }
2920
2921 /* Class for tokens and helpicon */
2922 .crm-container .helpIcon {
2923   float: right;
2924   position: relative;
2925   z-index: 1;
2926   margin-right: 45px;
2927 }
2928
2929 #crm-container ul.token-input-list-facebook, ul.token-input-list-facebook li.leaf,
2930 #crm-container ul li {
2931   list-style-image: none;
2932 }
2933
2934 /* privacy icons */
2935 #crm-container div span.privacy-flag {
2936   background-repeat: no-repeat;
2937   background-image: url("../i/stop-icon.png");
2938   float: right;
2939 }
2940
2941 /* specific, targeted fixes */
2942 #crm-container .dashboard-elements,
2943 #crm-container #membership-listings,
2944 #crm-container #premiums-listings,
2945 #crm-container #searchForm table {
2946   margin: 0em;
2947   border-collapse: collapse;
2948   border: 0px none;
2949 }
2950
2951 /* Override Drupal .2em margin-bottom on forms (we don't want to give up that space) */
2952 div#crm-container form {
2953   margin-bottom: 0em;
2954 }
2955
2956 /* This is the style for the trigger icon. The margin-bottom value causes the icon to shift down to center it. */
2957 .crm-container .ui-datepicker-trigger {
2958   margin-top: 4px;
2959   margin-bottom: -6px;
2960 }
2961
2962 .crm-container .ui-datepicker {
2963   z-index: 1;
2964 }
2965
2966 #activity-content table {
2967   width: 100%!important;
2968 }
2969
2970 #Tag .tree .collapsable .hit,
2971 #Tag .tree .expandable .hit {
2972   padding-left: 16px;
2973 }
2974
2975 /** DATATABLES **/
2976 /*
2977  * jQuery UI specific styling
2978  */
2979
2980 .crm-container .paging_two_button .ui-button {
2981   float: left;
2982   cursor: pointer;
2983   * cursor: hand;
2984 }
2985
2986 .crm-container .paging_full_numbers .ui-button {
2987   padding: 2px 6px;
2988   margin: 0;
2989   cursor: pointer;
2990   * cursor: hand;
2991   color: white !important;
2992 }
2993
2994 .crm-container .dataTables_paginate .ui-button {
2995   margin-right: -0.1em !important;
2996 }
2997
2998 .crm-container .paging_full_numbers {
2999   width: 350px !important;
3000 }
3001
3002 .crm-container .dataTables_wrapper .ui-toolbar {
3003   padding: 5px;
3004 }
3005
3006 .crm-container .dataTables_paginate {
3007   width: auto;
3008 }
3009
3010 .crm-container .dataTables_info {
3011   padding-top: 3px;
3012 }
3013
3014 .crm-container div.dataTables_wrapper .ui-widget-header {
3015   font-weight: normal;
3016 }
3017
3018
3019 /*
3020  * Sort arrow icon positioning
3021  */
3022 .crm-container table.display thead th div.DataTables_sort_wrapper {
3023   position: relative;
3024   padding-right: 20px;
3025 }
3026
3027 .crm-container table.display thead th div.DataTables_sort_wrapper span {
3028   position: absolute;
3029   top: 50%;
3030   margin-top: -8px;
3031   right: 0;
3032 }
3033
3034 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3035  * DataTables features
3036  */
3037
3038 .crm-container .dataTables_wrapper {
3039   position: relative;
3040   clear: both;
3041   zoom: 1; /* Feeling sorry for IE */
3042 }
3043
3044 .crm-container .dataTables_processing {
3045   position: absolute;
3046   top: 50%;
3047   left: 50%;
3048   width: 250px;
3049   height: 30px;
3050   margin-left: -125px;
3051   margin-top: -15px;
3052   padding: 14px 0 2px 0;
3053   border: 1px solid #ddd;
3054   text-align: center;
3055   color: #999;
3056   font-size: 14px;
3057   background-color: white;
3058 }
3059
3060 .crm-container .dataTables_length {
3061   width: 40%;
3062   float: none;
3063   padding-bottom: 5px;
3064 }
3065
3066 .crm-container .dataTables_filter {
3067   width: 50%;
3068   float: right;
3069   text-align: right;
3070 }
3071
3072 .crm-container .dataTables_info {
3073   width: 60%;
3074   float: left;
3075 }
3076
3077 .crm-container .dataTables_paginate {
3078   float: right;
3079   text-align: right;
3080 }
3081
3082
3083 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3084  * DataTables display
3085  */
3086 .crm-container table.display {
3087   margin: 0 auto;
3088   clear: both;
3089   width: 100%;
3090 }
3091
3092 .crm-container table.display thead th {
3093   padding: 3px 18px 3px 10px;
3094   border-bottom: 1px solid black;
3095   font-weight: bold;
3096   cursor: pointer;
3097 }
3098
3099 .crm-container table.display thead th.sorting_disabled {
3100   cursor: default;
3101 }
3102
3103 .crm-container table.display tfoot th {
3104   padding: 3px 18px 3px 10px;
3105   border-top: 1px solid black;
3106   font-weight: bold;
3107 }
3108
3109 .crm-container table.display tr.heading2 td {
3110   border-bottom: 1px solid #aaa;
3111 }
3112
3113 .crm-container table.display td {
3114   padding: 3px 10px;
3115 }
3116
3117 .crm-container table.display td.center {
3118   text-align: center;
3119 }
3120
3121 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3122  * DataTables row classes
3123  */
3124 .crm-container table.display tr.odd.gradeA {
3125   background-color: #ddffdd;
3126 }
3127
3128 .crm-container table.display tr.even.gradeA {
3129   background-color: #eeffee;
3130 }
3131
3132 .crm-container table.display tr.odd.gradeC {
3133   background-color: #ddddff;
3134 }
3135
3136 .crm-container table.display tr.even.gradeC {
3137   background-color: #eeeeff;
3138 }
3139
3140 .crm-container table.display tr.odd.gradeX {
3141   background-color: #ffdddd;
3142 }
3143
3144 .crm-container table.display tr.even.gradeX {
3145   background-color: #ffeeee;
3146 }
3147
3148 .crm-container table.display tr.odd.gradeU {
3149   background-color: #ddd;
3150 }
3151
3152 .crm-container table.display tr.even.gradeU {
3153   background-color: #eee;
3154 }
3155
3156
3157 .crm-container tr.odd {
3158   background-color: #E2E4FF;
3159 }
3160
3161 .crm-container tr.even {
3162   background-color: white;
3163 }
3164
3165 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
3166  * Misc
3167  */
3168 .crm-container .dataTables_scroll {
3169   clear: both;
3170 }
3171
3172 .crm-container .dataTables_scrollBody {
3173   *margin-top: -1px;
3174   -webkit-overflow-scrolling: touch;
3175 }
3176
3177 .crm-container .top, .bottom {
3178   padding: 15px;
3179   background-color: #F5F5F5;
3180   border: 1px solid #CCCCCC;
3181 }
3182
3183 .crm-container .top .dataTables_info {
3184   float: none;
3185 }
3186
3187 .crm-container .dataTables_empty {
3188   text-align: center;
3189 }
3190
3191 .crm-container tfoot input {
3192   margin: 0.5em 0;
3193   width: 100%;
3194   color: #444;
3195 }
3196
3197 .crm-container tfoot input.search_init {
3198   color: #999;
3199 }
3200
3201 .crm-container td.group {
3202   background-color: #d1cfd0;
3203   border-bottom: 2px solid #A19B9E;
3204   border-top: 2px solid #A19B9E;
3205 }
3206
3207 .crm-container td.details {
3208   background-color: #d1cfd0;
3209   border: 2px solid #A19B9E;
3210 }
3211
3212
3213 .crm-container .example_alt_pagination div.dataTables_info {
3214   width: 40%;
3215 }
3216
3217 .crm-container .paging_full_numbers {
3218   width: 400px;
3219   height: 22px;
3220   line-height: 22px;
3221 }
3222
3223 .crm-container .paging_full_numbers a:active {
3224   outline: none
3225 }
3226
3227 .crm-container .paging_full_numbers a:hover {
3228   text-decoration: none;
3229 }
3230
3231 .crm-container .paging_full_numbers a.paginate_button,
3232 .crm-container .paging_full_numbers a.paginate_active {
3233   border: 1px solid #aaa;
3234   -webkit-border-radius: 5px;
3235   -moz-border-radius: 5px;
3236   padding: 2px 5px;
3237   margin: 0 3px;
3238   cursor: pointer;
3239   *cursor: hand;
3240   color: #333 !important;
3241 }
3242
3243 .crm-container .paging_full_numbers a.paginate_button {
3244   background-color: #ddd;
3245 }
3246
3247 .crm-container .paging_full_numbers a.paginate_button:hover {
3248   background-color: #ccc;
3249   text-decoration: none !important;
3250 }
3251
3252 .crm-container .paging_full_numbers a.paginate_active {
3253   background-color: #99B3FF;
3254 }
3255
3256 .crm-container table.display tr.even.row_selected td {
3257   background-color: #B0BED9;
3258 }
3259
3260 .crm-container table.display tr.odd.row_selected td {
3261   background-color: #9FAFD1;
3262 }
3263
3264 /*
3265  * Sorting classes for columns
3266  */
3267 /* For the standard odd/even */
3268 .crm-container tr.odd td.sorting_1 {
3269   background-color: #D3D6FF;
3270 }
3271
3272 .crm-container tr.odd td.sorting_2 {
3273   background-color: #DADCFF;
3274 }
3275
3276 .crm-container tr.odd td.sorting_3 {
3277   background-color: #E0E2FF;
3278 }
3279
3280 .crm-container tr.even td.sorting_1 {
3281   background-color: #EAEBFF;
3282 }
3283
3284 .crm-container tr.even td.sorting_2 {
3285   background-color: #F2F3FF;
3286 }
3287
3288 .crm-container tr.even td.sorting_3 {
3289   background-color: #F9F9FF;
3290 }
3291
3292
3293 /* For the Conditional-CSS grading rows */
3294 /*
3295         Colour calculations (based off the main row colours)
3296   Level 1:
3297                 dd > c4
3298                 ee > d5
3299         Level 2:
3300           dd > d1
3301           ee > e2
3302  */
3303 .crm-container tr.odd.gradeA td.sorting_1 {
3304   background-color: #c4ffc4;
3305 }
3306
3307 .crm-container tr.odd.gradeA td.sorting_2 {
3308   background-color: #d1ffd1;
3309 }
3310
3311 .crm-container tr.odd.gradeA td.sorting_3 {
3312   background-color: #d1ffd1;
3313 }
3314
3315 .crm-container tr.even.gradeA td.sorting_1 {
3316   background-color: #d5ffd5;
3317 }
3318
3319 .crm-container tr.even.gradeA td.sorting_2 {
3320   background-color: #e2ffe2;
3321 }
3322
3323 .crm-container tr.even.gradeA td.sorting_3 {
3324   background-color: #e2ffe2;
3325 }
3326
3327 .crm-container tr.odd.gradeC td.sorting_1 {
3328   background-color: #c4c4ff;
3329 }
3330
3331 .crm-container tr.odd.gradeC td.sorting_2 {
3332   background-color: #d1d1ff;
3333 }
3334
3335 .crm-container tr.odd.gradeC td.sorting_3 {
3336   background-color: #d1d1ff;
3337 }
3338
3339 .crm-container tr.even.gradeC td.sorting_1 {
3340   background-color: #d5d5ff;
3341 }
3342
3343 .crm-container tr.even.gradeC td.sorting_2 {
3344   background-color: #e2e2ff;
3345 }
3346
3347 .crm-container tr.even.gradeC td.sorting_3 {
3348   background-color: #e2e2ff;
3349 }
3350
3351 .crm-container tr.odd.gradeX td.sorting_1 {
3352   background-color: #ffc4c4;
3353 }
3354
3355 .crm-container tr.odd.gradeX td.sorting_2 {
3356   background-color: #ffd1d1;
3357 }
3358
3359 .crm-container tr.odd.gradeX td.sorting_3 {
3360   background-color: #ffd1d1;
3361 }
3362
3363 .crm-container tr.even.gradeX td.sorting_1 {
3364   background-color: #ffd5d5;
3365 }
3366
3367 .crm-container tr.even.gradeX td.sorting_2 {
3368   background-color: #ffe2e2;
3369 }
3370
3371 .crm-container tr.even.gradeX td.sorting_3 {
3372   background-color: #ffe2e2;
3373 }
3374
3375 .crm-container tr.odd.gradeU td.sorting_1 {
3376   background-color: #c4c4c4;
3377 }
3378
3379 .crm-container tr.odd.gradeU td.sorting_2 {
3380   background-color: #d1d1d1;
3381 }
3382
3383 .crm-container tr.odd.gradeU td.sorting_3 {
3384   background-color: #d1d1d1;
3385 }
3386
3387 .crm-container tr.even.gradeU td.sorting_1 {
3388   background-color: #d5d5d5;
3389 }
3390
3391 .crm-container tr.even.gradeU td.sorting_2 {
3392   background-color: #e2e2e2;
3393 }
3394
3395 .crm-container tr.even.gradeU td.sorting_3 {
3396   background-color: #e2e2e2;
3397 }
3398
3399 /*
3400  * KeyTable
3401  */
3402 .crm-container table.KeyTable td {
3403   border: 3px solid transparent;
3404 }
3405
3406 .crm-container table.KeyTable td.focus {
3407   border: 3px solid #3366FF;
3408 }
3409
3410 .crm-container table.display tr.gradeA {
3411   background-color: #eeffee;
3412 }
3413
3414 .crm-container table.display tr.gradeC {
3415   background-color: #ddddff;
3416 }
3417
3418 .crm-container table.display tr.gradeX {
3419   background-color: #ffdddd;
3420 }
3421
3422 .crm-container table.display tr.gradeU {
3423   background-color: #ddd;
3424 }
3425
3426 /*  DataTables fixes */
3427 .crm-container .crm-datatable-pager-top {
3428   padding-top: 5px;
3429   padding-bottom: 25px;
3430 }
3431 .crm-container .crm-datatable-pager-bottom {
3432   padding-top: 10px;
3433   padding-bottom: 25px;
3434 }
3435 .crm-container .crm-datatable-pager-top .dataTables_length {
3436   float: left;
3437 }
3438 .crm-container .css_right {
3439   float: right;
3440 }
3441
3442 /* Date plugin */
3443 .crm-container input.dateplugin {
3444   background: white url(../i/cal.gif) no-repeat scroll right center;
3445   padding-right: 16px;
3446   /* so that text doesn't flow on top of icon */
3447   width: 9em;
3448 }
3449
3450 /* Date plugin */
3451 .crm-container div.batch-update {
3452   overflow: visible;
3453 }
3454
3455 /* Help text in Send Mail*/
3456 #crm-container div.messageHelp {
3457   z-index: 1;
3458   position: absolute;
3459   margin: 6px 0px 0px 115px;
3460 }
3461 /*chart */
3462 #chartData {
3463   overflow: auto;
3464 }
3465
3466 #crm-container .signature {
3467   width: 495px;
3468 }
3469
3470 /* editor skin tweaks */
3471
3472 #crm-container span.cke_skin_kama {
3473   border: none;
3474 }
3475 #crm-container .cke_skin_kama .cke_wrapper {
3476   background-image: none;
3477 }
3478
3479 /* skin */
3480
3481 #crm-container .crm-title {
3482   margin-bottom: 8px;
3483 }
3484
3485 /* tables */
3486 .crm-container table {
3487   border: 1px solid #efefef;
3488 }
3489
3490 .crm-container .crm-form-block table {
3491   border: none;
3492 }
3493 .crm-container tr.even,
3494 .crm-container tr.odd,
3495 .crm-container tbody th {
3496   border-color: #FFF #FFF #efefef #FFF;
3497 }
3498
3499 .crm-container tr.even-row td,
3500 .crm-container tr.odd-row td,
3501 .crm-container table.display td,
3502 .crm-container table.pagerDisplay td {
3503   border-color: #efefef;
3504   border-right: 1px solid #efefef;
3505 }
3506 .crm-container .odd-row,
3507 .crm-container .odd,
3508 tbody.scrollContent {
3509   background-color: #FAFAFA;
3510 }
3511 .crm-container .even-row,
3512 .crm-container .even,
3513 tbody.scrollContent tr.alternateRow {
3514   background-color: #EFEFEF;
3515 }
3516
3517 .crm-container td.checkbox {
3518   vertical-align: middle;
3519   text-align: center;
3520 }
3521 .crm-container tr.columnheader a.sorting {
3522   color: #a7a7a7;
3523 }
3524
3525 .crm-container a.sorting {
3526   color: #A7A7A7;
3527 }
3528 .crm-container a.sorting_desc,
3529 .crm-container a.sorting_asc {
3530   color: #000;
3531 }
3532
3533 .crm-container tr a.sorting,
3534 .crm-container tr a.sorting_asc,
3535 .crm-container tr a.sorting_desc {
3536   color: #52534D;
3537 }
3538
3539 /*contact summary page */
3540 #crm-container div.contact_details,
3541 #crm-container #customFields .contact_panel .customFieldGroup {
3542   background-color: transparent;
3543 }
3544
3545 #crm-container div.contact_panel td,
3546 .crm-container table.crm-info-panel td {
3547   border-bottom: 1px solid #FFF;
3548 }
3549
3550 #crm-container div.contactCardLeft .label,
3551 #crm-container div.contactCardRight .label,
3552 .crm-container table.crm-info-panel .label {
3553   color: #2f2f2f;
3554   font-weight: normal;
3555 }
3556
3557 .crm-container .disabled,
3558 .crm-container .cancelled {
3559   color: #999999 !important;
3560 }
3561 #mainTabContainer li.disabled {
3562   text-decoration: none;
3563 }
3564 #mainTabContainer li.disabled a.ui-tabs-anchor,
3565 #mainTabContainer li.crm-count-0 a.ui-tabs-anchor {
3566   color: #999999 !important;
3567 }
3568 #crm-container tr.crm-job {
3569   text-decoration: none !important;
3570 }
3571
3572 #crm-container table.selector td {
3573   border-right: 1px dotted #DDDDDD;
3574 }
3575 #crm-container #customFields div.contact_panel td {
3576   border-bottom: 1px solid #FFFFFF;
3577   padding: 4px;
3578   vertical-align: top;
3579 }
3580
3581 #crm-container div.contact_panel td,
3582 .crm-container table.crm-info-panel td {
3583   background-color: #f4f4ed;
3584 }
3585
3586 #crm-container div.contact_panel td.label,
3587 #crm-container #customFields div.contact_panel td.label,
3588 .crm-container table.crm-info-panel td.label {
3589   background-color: #fafafa;
3590   width: 120px;
3591   text-align: left;
3592   color: #7a7a60;
3593 }
3594 .crm-container table.crm-info-panel td.label {
3595   width: 150px;
3596 }
3597
3598 #crm-container .form-layout td.label,
3599 #crm-container .form-layout-compressed td.label {
3600   width: 150px;
3601   text-align: right;
3602   color: #7a7a60;
3603 }
3604
3605 #crm-container .form-layout td.label,
3606 #crm-container form table.report .label,
3607 #crm-container form table label,
3608 #crm-container form table.report label {
3609   color: #3e3e3e;
3610 }
3611
3612 #crm-container div.contact_panel td.grouplabel {
3613   border-bottom: 2px solid #D7D7D0 !important;
3614 }
3615
3616 #tagGroup table .label {
3617   color: #FFF;
3618 }
3619 #tagGroup table {
3620   color: #000;
3621 }
3622
3623
3624 /* search results */
3625
3626 .crm-container .crm-search-tasks,
3627 .crm-container .crm-tasks {
3628   background-color: #F0F0E8;
3629   color: #52534D;
3630 }
3631
3632 #crm-container .crm-tasks table {
3633   margin: 0;
3634 }
3635
3636 .crm-container .crm-results-block {
3637   position: relative;
3638 }
3639
3640 /* warning labels and messages */
3641 .crm-container del,
3642 .crm-container .crm-is_deleted,
3643 .crm-container table.caseSelector td.status-urgent,
3644 .crm-container .font-red,
3645 .crm-container .status-removed,
3646 .crm-container .status-overdue,
3647 .crm-container .status-fatal,
3648 .crm-container .status-hold,
3649 .crm-container .status-past,
3650 .crm-container .status-warning {
3651   color: #E43D2B !important;
3652 }
3653
3654 /* rounded corners - we will call dd_roundies on all this */
3655 .crm-container .crm-button,
3656 .crm-container a.button,
3657 .crm-container a.button:link,
3658 .crm-container input.form-submit,
3659 .crm-container input[type=button],
3660 .crm-container input.form-submit-inline {
3661   -moz-border-radius: 3px;
3662   -webkit-border-radius: 3px;
3663   -khtml-border-radius: 3px;
3664   border-radius: 3px;
3665 }
3666
3667
3668 .crm-container div.status,
3669 div.m ul#civicrm-menu,
3670 .crm-container #help,
3671 .crm-container .help,
3672 .crm-container .ui-tabs-panel,
3673 .crm-container .crm-content-block,
3674 #full-screen-header,
3675 .crm-container .crm-pager,
3676 .crm-container form .section-hidden-border,
3677 .crm-container #search-status,
3678 .crm-container .crm-form-block,
3679 .crm-container .crm-search-tasks,
3680 .crm-container .crm-tasks,
3681 .crm-container div.form-item,
3682 .crm-container div.messages {
3683   -moz-border-radius: 4px;
3684   -webkit-border-radius: 4px;
3685   -khtml-border-radius: 4px;
3686   border-radius: 4px;
3687 }
3688
3689 /* autocomplete */
3690
3691 .ac_results {
3692   background: transparent url(../i/dropdown-pointer.gif) no-repeat 25px 1px;
3693   padding-top: 5px;
3694   border: none;
3695   text-align: left;
3696 }
3697
3698 .ac_results-inner,
3699 .crm-participant-list-inner,
3700 .crm-event-links-list-inner,
3701 .crm-contribpage-links-list-inner,
3702 .crm-create-new-list-inner,
3703 .crm-contact-actions-list-inner {
3704   background-color: #2f2f2e;
3705   padding: 4px;
3706 }
3707
3708 .crm-create-new-list-inner {
3709   width: 124px!important;
3710 }
3711
3712 .ac_even {
3713   background-color: transparent;
3714 }
3715 .ac_odd {
3716   background-color: #4F4F4F;
3717 }
3718
3719 .ac_results li a {
3720   display: block;
3721 }
3722
3723 .ac_results li,
3724 .ac_results li a,
3725 .ac_results li a:visited,
3726 .crm-container .ac_results li,
3727 .crm-container .ac_results li a,
3728 .crm-container .ac_results li a:visited {
3729   color: #DFDFDF;
3730   text-decoration: none;
3731 }
3732
3733 .ac_results li strong {
3734   color: #FFF;
3735   font-weight: normal;
3736 }
3737
3738 .ac_results li .icon,
3739 .ac_results li a .icon,
3740 .ac_results li a:visited .icon,
3741 .crm-container .ac_results li .icon,
3742 .crm-container .ac_results li a .icon,
3743 .crm-container .ac_results li a:visited .icon {
3744   background-image: url(../i/icons/jquery-ui-FFFFFF.png);
3745 }
3746
3747 .ac_results li a:hover .icon,
3748 .ac_results li.ac_over a .icon,
3749 .crm-container .ac_results li a:hover .icon {
3750   background-image: url(../i/icons/jquery-ui-3E3E3E.png);
3751 }
3752
3753 .ac_results li.ac_over,
3754 .ac_results li:hover,
3755 .ac_results li:hover a,
3756 .ac_results li.ac_over a,
3757 .ac_results li a:hover,
3758 .ac_results li.ac_over a:visited {
3759   background-color: #F5F6F1;
3760   color: #666;
3761 }
3762 .ac_results li.ac_over strong,
3763 .ac_results li:hover strong,
3764 .crm-container .ac_results li.ac_over strong {
3765   color: #000;
3766 }
3767
3768 /* loader autocomplete */
3769
3770 #civicrm-menu .ui-autocomplete-loading,
3771 .crm-container .ui-autocomplete-loading,
3772 .crm-container .ac_loading {
3773   background: white url('../i/loading.gif') no-repeat right center;
3774 }
3775
3776 /* select2 */
3777 .crm-select2 {
3778   width: 15em;
3779 }
3780 .crm-container .select2-container {
3781   min-width: 8em !important;
3782   font-size: 11px;
3783 }
3784 /* Style civi form inputs to match select2 */
3785 .crm-container input.crm-form-text {
3786   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
3787   background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
3788   background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
3789   background-image: linear-gradient(top, #eee 1%, #fff 15%);
3790 }
3791 .crm-container select.crm-form-select {
3792   border: 1px solid #aaa;
3793   color: #444;
3794   height: 2.2em;
3795   padding: 4px;
3796   border-radius: 4px;
3797   background-color: #fff;
3798   background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
3799   background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
3800   background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
3801   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
3802   background-image: linear-gradient(top, #fff 0%, #eee 50%);
3803 }
3804 /* Add arrow icon to multi-selects */
3805 .crm-container .select2-container-multi .select2-choices:before {
3806   background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll 0 -4px;
3807   content: "";
3808   display: block;
3809   height: 15px;
3810   position: absolute;
3811   right: 0;
3812   top: 5px;
3813   width: 20px;
3814 }
3815 /* Add search icon to ajax multi-selects and opened multi-selects */
3816 .crm-container .select2-container-multi.select2-container-active .select2-choices:before,
3817 .crm-container .select2-container-multi.crm-ajax-select .select2-choices:before {
3818   background-position: right -26px;
3819 }
3820 /* Reduce select2 size to match other inputs */
3821 .crm-container .select2-container-multi .select2-choices {
3822   min-height: 25px;
3823 }
3824 .crm-container .select2-container-multi .select2-choices .select2-search-choice {
3825   padding: 2px 5px 2px 18px;
3826 }
3827 .crm-container .select2-container-multi .select2-choices .select2-search-field input {
3828   padding: 4px;
3829 }
3830 .crm-container .select2-search-choice-close {
3831   top: 2px;
3832 }
3833 .crm-container .select2-container .select2-choice abbr {
3834   top: 6px;
3835 }
3836 /* Add search icon to ajax single-selects */
3837 .crm-container .crm-ajax-select .select2-arrow b {
3838   background-position: -39px -22px;
3839 }
3840 /* Restore normal icon when searchable field is open */
3841 .crm-container .select2-dropdown-open .select2-choice .select2-arrow b {
3842   background-position: -18px 1px;
3843 }
3844
3845 /* Special styling for specific form buttons */
3846 #crm-container span.crm-button_qf_Main_upload input,
3847 #crm-container span.crm-button_qf_Confirm_next input,
3848 #crm-container span.crm-button_qf_Register_upload input {
3849   font-size: 1.2em;
3850 }
3851
3852 /*Import progress bar */
3853 .crm-container .ui-progressbar-value {
3854   background-image: url("../packages/jquery/css/images/pbar-ani.gif");
3855 }
3856
3857 /*Needed for jstree contextmenu */
3858 #vakata-contextmenu.jstree-default-context li {
3859   background: none repeat scroll 0 0 transparent;
3860 }
3861
3862 /* Class for successful upgrade */
3863 .crm-container .upgrade-success {
3864   background-color: #00CC00;
3865   color: white;
3866 }
3867
3868 .crm-container .extension-upgradable {
3869   background-color: #FFFFCC !important;
3870 }
3871
3872 .crm-container .extension-installed {
3873   background-color: #DDFFDD !important;
3874 }
3875
3876 .crm-container .extension-missing {
3877   color: #E43D2B !important;
3878 }
3879
3880 /* table row highlightng */
3881 .crm-container table.row-highlight tr:hover {
3882   background-color: #FFFFCC !important;
3883 }
3884 #crm-container .civicrm-drupal-wysiwyg .collapsed {
3885   background: transparent;
3886   padding-left: 0px;
3887 }
3888
3889 #manageTags {
3890   position: static;
3891   z-index: -100;
3892 }
3893
3894 #crm-container .crm-socialnetwork {
3895   margin-top: 1em;
3896 }
3897
3898 #crm-container .crm-fb-tweet-buttons {
3899   width: 93%;
3900 }
3901 #crm-container div.finalconf-button {
3902   float: right;
3903   padding: 5px 0 0 0;
3904 }
3905 #crm-container div.finalconf-button input {
3906   margin: 0;
3907 }
3908 #crm-container div.finalconf-intro {
3909   padding-bottom: 12px;
3910   font-style: italic;
3911 }
3912 #crm-container h4.finalconf-item {
3913   border-top: 1px solid #ccc;
3914   padding: 8px 0 8px 10px;
3915   margin: 0;
3916 }
3917 #crm-container div.finalconf-itemdesc {
3918   font-style: italic;
3919   padding: 6px 12px 6px 12px;
3920   color: #666;
3921   float: right;
3922   width: 60%;
3923 }
3924 #crm-container h4.finalconf-btm {
3925   border-bottom: 1px solid #ccc;
3926   margin-bottom: 20px;
3927 }
3928
3929 /* classes related to batch entry operation */
3930 .crm-container span.batch-edit {
3931   padding: 2px 9px 2px 3px;
3932   margin: 2px 2px 3px 2px;
3933   cursor: pointer;
3934   cursor: hand;
3935   background-position: -66px -114px;
3936   background-image: url("../i/icons/jquery-ui-3E3E3E.gif");
3937 }
3938
3939 .crm-container span.batch-valid {
3940   padding: 2px 9px 2px 3px;
3941   margin: 2px 2px 3px 2px;
3942   cursor: pointer;
3943   cursor: hand;
3944   background-position: -322px -143px;
3945   background-image: url("../i/icons/jquery-ui-3E3E3E.gif");
3946 }
3947
3948 .crm-container span.batch-invalid {
3949   padding: 2px 9px 2px 3px;
3950   margin: 2px 2px 3px 2px;
3951   cursor: pointer;
3952   cursor: hand;
3953   background-position: -258px -143px;
3954   background-image: url("../i/icons/jquery-ui-3E3E3E.gif");
3955 }
3956
3957 .crm-container #Entry ul#errorList {
3958   display: none;
3959 }
3960
3961 .crm-container table.batch-totals {
3962   border: 1px solid #7A7A60 !important;
3963   margin-top: 10px !important;
3964 }
3965
3966 /* grid div as table */
3967 .crm-container .crm-grid-table {
3968   display: table;
3969   border-collapse: collapse;
3970   border: 1px solid #7A7A60;
3971   background-color: #FFFFFF;
3972   margin: 10px 3px 10px !important;
3973 }
3974
3975 .crm-container .crm-batch-entry-table {
3976   border-right: 2px solid #7A7A60 !important;
3977 }
3978
3979 .crm-container .crm-grid-row,
3980 .crm-container .crm-grid-header {
3981   display: table-row;
3982 }
3983
3984 .crm-container .crm-grid-header {
3985   white-space: nowrap;
3986 }
3987
3988 .crm-container .crm-grid-cell {
3989   display: table-cell;
3990   border-right: 1px solid #EFEFEF;
3991   padding: 2px;
3992   vertical-align: top;
3993 }
3994
3995 /* Responsive layout changes */
3996
3997 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed,
3998 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed tbody,
3999 #crm-container .contact_basic_information-section.narrowform.xnarrowform table.form-layout-compressed tr {
4000   display: block;
4001   width: 100%;
4002 }
4003
4004 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed tr {
4005   display: inline-block;
4006   width: 49%;
4007   vertical-align: top;
4008 }
4009
4010 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td {
4011   display: block;
4012   clear: left;
4013   vertical-align: top;
4014   margin-bottom: .5ex;
4015 }
4016
4017 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td.hashelpicon {
4018   position: relative;
4019 }
4020
4021 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td.hashelpicon label {
4022   padding-bottom: 16px;
4023 }
4024
4025 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td .helpicon {
4026   position: absolute;
4027   bottom: -12px;
4028   left: 2px;
4029 }
4030
4031 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td br {
4032   display: none;
4033 }
4034
4035 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td label {
4036   display: block;
4037   box-sizing: border-box;
4038   -moz-box-sizing: border-box;
4039   width: 25%;
4040   float: left;
4041   padding-right: 1%;
4042 }
4043
4044 #crm-container .contact_basic_information-section.narrowform table.form-layout-compressed td input {
4045   box-sizing: border-box;
4046   -moz-box-sizing: border-box;
4047   width: 75%;
4048 }
4049
4050 #crm-container #mainTabContainer.narrowpage #contact-summary div.customFieldGroup,
4051 #crm-container #mainTabContainer.narrowpage #contact-summary div.contactCardLeft,
4052 #crm-container #mainTabContainer.narrowpage #contact-summary div.contactCardRight {
4053   box-sizing: border-box;
4054   -moz-box-sizing: border-box;
4055   float: none;
4056   width: 100%;
4057 }
4058
4059 /* in place edit  */
4060 .crm-container .crm-editable-enabled {
4061   white-space: nowrap;
4062   padding-left: 2px;
4063   border: 2px dashed transparent;
4064 }
4065 .crm-container .crm-editable-textarea-enabled {
4066   padding-left: 2px;
4067   border: 2px dashed transparent;
4068 }
4069
4070 .crm-container .crm-editable-enabled:hover,
4071 .crm-container .crm-editable-textarea-enabled:hover {
4072   border: 2px dashed lightgrey;
4073   cursor: pointer;
4074 }
4075
4076 .crm-container span.crm-editable-textarea-enabled {
4077   display: inline-block !important;
4078   width: 96%;
4079 }
4080 .crm-container span.crm-editable-enabled {
4081   display: inline-block !important;
4082 }
4083
4084 .crm-container .crm-editable-placeholder {
4085   background: url("../i/icons/jquery-ui-2786C2.png") -66px -114px no-repeat;
4086   text-indent: -10000px;
4087   display: block;
4088   width: 12px;
4089 }
4090
4091 .crm-container .crm-editable-saving {
4092   background: #FFFFCC!important;
4093   opacity: 0.8;
4094 }
4095
4096 .crm-container .crm-editable-error,
4097 .crm-container .crm-editable-error input {
4098   background: red!important;
4099   opacity: 0.8;
4100 }
4101
4102 .crm-container h2.crm-editable-enabled input {
4103   min-height: 1.4em;
4104 }
4105 .crm-container .crm-editable-textarea-enabled textarea {
4106   min-height: 5em;
4107 }
4108
4109 /*crm-10345*/
4110 .crm-container .field-action {
4111   word-wrap: normal;
4112 }
4113
4114 .crm-container .field-action span.btn-slide {
4115   padding-left: 0px;
4116   padding-right: 11px;
4117 }
4118 /*end crm-10345*/
4119
4120 /* alter display of parent and child groups in Manage Groups selector */
4121 #crm-container .crm-group-parent td.crm-group-name {
4122   padding-left: 20px;
4123   text-indent: -20px;
4124 }
4125
4126 #crm-container .crm-group-child td.crm-group-name.level_2 {
4127   padding-left: 40px;
4128   text-indent: -20px;
4129 }
4130 #crm-container .crm-group-child td.crm-group-name.level_3 {
4131   padding-left: 60px;
4132   text-indent: -20px;
4133 }
4134 #crm-container .crm-group-name span.crm-editable-enabled {
4135   text-indent: 0;
4136 }
4137
4138 #crm-container div.crm-row-parent-name {
4139   padding: 3px 0px 0px .5em;
4140   opacity: 0.75;
4141 }
4142 #crm-container td span.show-children,
4143 #crm-container td span.crm-no-children {
4144   padding-left: 20px;
4145 }
4146
4147 #crm-container span.collapsed,
4148 #crm-container a.collapsed {
4149   background: url("../i/TreePlus.gif") no-repeat 0 0;
4150   padding-left: 19px;
4151   cursor: pointer;
4152 }
4153
4154 #crm-container span.expanded,
4155 #crm-container a.expanded {
4156   background: url("../i/TreeMinus.gif") no-repeat 0 0;
4157   padding-left: 19px;
4158   cursor: pointer;
4159 }
4160
4161 /* Notifications */
4162 #crm-notification-container {
4163   width: 350px;
4164   position: fixed;
4165   top: 45px;
4166   right: 15px;
4167   z-index: 999999;
4168 }
4169 #crm-notification-container div.ui-notify-message {
4170   padding: 10px;
4171   margin-bottom: 15px;
4172   color: #fff;
4173   -moz-border-radius: 8px;
4174   -webkit-border-radius: 8px;
4175   border-radius: 8px;
4176   max-height: 600px;
4177   overflow: auto;
4178 }
4179 #crm-notification-container div.ui-notify-message h1 {
4180   font-size: 14px;
4181   margin: 0;
4182   padding: 4px;
4183   font-weight: bold;
4184   color: #fff;
4185 }
4186 #crm-notification-container div.ui-notify-message p {
4187   margin: 3px 0;
4188   padding: 0;
4189   line-height: 18px;
4190 }
4191 #crm-notification-container div.ui-notify-message:last-child {
4192   margin-bottom: 0;
4193 }
4194 #crm-notification-container div.ui-notify-message-style {
4195   background: rgba(0,0,0,0.8);
4196   box-shadow: 0 0 6px #000;
4197 }
4198 .crm-container div.ui-notify-message-style a,
4199 .crm-container div.ui-notify-message-style a:link {
4200   color: #CCD0FF;
4201   text-decoration: underline;
4202 }
4203 .crm-container div.ui-notify-message-style a:hover,
4204 .crm-container div.ui-notify-message-style a:focus {
4205   color: #B2B8FF;
4206 }
4207 #crm-notification-container .ui-notify-message .ui-notify-close {
4208   cursor: pointer;
4209 }
4210 #crm-notification-container .ui-notify-message a.ui-notify-cross {
4211   margin-top: -4px;
4212   float: right;
4213   text-decoration: none;
4214   font-size: 13px;
4215   font-weight: bold;
4216   text-shadow: 0 1px 1px #fff;
4217   padding: 2px;
4218   color: #FDFDFD;
4219 }
4220 #crm-notification-container .ui-notify-message .ui-notify-cross:hover,
4221 #crm-notification-container .ui-notify-message .ui-notify-cross:focus {
4222   color: #ffffab;
4223 }
4224 .crm-container div.ui-notify-message table,
4225 .crm-container div.ui-notify-message tbody,
4226 .crm-container div.ui-notify-message tr {
4227   border: 0 none;
4228   font-size: 11px;
4229 }
4230 .crm-container div.ui-notify-message td {
4231   background: rgba(255,255,255,0.1);
4232   border: 1px solid #111;
4233   font-size: 11px;
4234 }
4235 .crm-container div.ui-notify-message th {
4236   background: rgba(200,200,200,0.2);
4237   border: 1px solid #111;
4238   color: #eee;
4239   font-size: 11px;
4240 }
4241 .crm-container div.ui-notify-message ul,
4242 .crm-container div.ui-notify-message ol {
4243   margin: 0.5em 0 1em;
4244   padding: 0 0 0 0.5em;
4245 }
4246
4247 .crm-container div.ui-notify-message div.icon,
4248 .crm-status-icon {
4249   background: transparent url("../i/message-icons.png") no-repeat 0 0;
4250   width: 24px;
4251   height: 24px;
4252   margin-right: 6px;
4253 }
4254 .crm-container div.ui-notify-message.success div.icon,
4255 .crm-status-icon.success {
4256   background-position: -24px 0px;
4257 }
4258 .crm-container div.ui-notify-message.info div.icon,
4259 .crm-status-icon.info {
4260   background-position: -48px 0px;
4261 }
4262 .crm-container div.ui-notify-message.error div.icon,
4263 .crm-status-icon.error {
4264   background-position: -72px 0px;
4265 }
4266
4267 span.crm-status-icon {
4268   display: inline-block;
4269 }
4270
4271 /* Public Pages */
4272
4273 #crm-container.crm-public input[type="text"],
4274 #crm-container.crm-public select {
4275   font-size: 15px;
4276   padding: 5px;
4277   border-radius: 2px;
4278   vertical-align: middle;
4279 }
4280
4281 #crm-container.crm-public .label {
4282   padding-top: 6px;
4283 }
4284
4285 .crm-public .crm-profile-view .content {
4286   padding-top: 6px;
4287 }
4288
4289 #crm-container.crm-public .calc-value {
4290   padding-top: 6px;
4291   font-size: 15px;
4292 }
4293
4294 #crm-container.crm-public .crm-section,
4295 .crm-section {
4296   margin-bottom: 0;
4297 }
4298
4299 #crm-container.crm-public #crm-submit-buttons {
4300   margin-top: 30px;
4301 }
4302
4303 #crm-container.crm-public #crm-submit-buttons input#_qf_Main_upload-bottom {
4304   font-size: 1.5em;
4305   padding: 3px 10px;
4306 }
4307
4308 #crm-container.crm-public #premiums-listings {
4309   margin-top: 10px;
4310   min-width: 450px;
4311   width: 60%;
4312 }
4313
4314 #crm-container.crm-public #premiums-listings .premium {
4315   margin: 5px 0;
4316 }
4317
4318 #crm-container.crm-public #premiums-listings .premium .premium-short {
4319   padding: 10px;
4320   border: 2px solid #ffffff;
4321   background-color: #f0f0f0;
4322   cursor: pointer;
4323 }
4324
4325 #crm-container.crm-public #premiums-listings .premium .premium-short:hover {
4326   border: 2px solid #b0b0b0;
4327 }
4328
4329 #crm-container.crm-public #premiums-listings .premium .premium-short-thumbnail {
4330   float: left;
4331   width: 50px;
4332 }
4333
4334 #crm-container.crm-public #premiums-listings .premium .premium-short-thumbnail img {
4335   width: 50px;
4336 }
4337
4338 #crm-container.crm-public #premiums-listings .premium .premium-short-content {
4339   text-align: center;
4340   font-size: 20px;
4341   font-weight: bold;
4342   padding: 20px;
4343 }
4344
4345 #crm-container.crm-public #premiums-listings .premium .premium-full {
4346   display: none;
4347   padding: 5px;
4348   border: 2px solid #cfcfcf;
4349   background-color: #ffffff;
4350 }
4351
4352 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-image {
4353   float: left;
4354   width: 200px;
4355   padding: 10px;
4356 }
4357
4358 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-image img {
4359   width: 200px;
4360 }
4361
4362 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-title {
4363   text-align: center;
4364   font-size: 1.5em;
4365   font-weight: bold;
4366   padding: 20px;
4367 }
4368
4369 #crm-container.crm-public #premiums-listings .premium .premium-full .premium-full-min {
4370   font-size: .9em;
4371   font-style: italic;
4372 }
4373
4374 #crm-container.crm-public #premiums-listings .premium.premium-no_thanks .premium-short {
4375   text-align: center;
4376   font-size: 1.3em;
4377   padding: 10px;
4378 }
4379
4380 #crm-container.crm-public #premiums-listings .premium.premium-no_thanks .premium-full {
4381   text-align: center;
4382   font-size: 1.3em;
4383   font-weight: bold;
4384   padding: 10px;
4385 }
4386
4387 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-short,
4388 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-image,
4389 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-title,
4390 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-description,
4391 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-options,
4392 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full .premium-full-min {
4393   opacity: 0.5;
4394 }
4395 #crm-container.crm-public #premiums-listings .premium .premium-full-disabled {
4396   display: none;
4397 }
4398 #crm-container.crm-public #premiums-listings .premium.premium-disabled .premium-full-disabled {
4399   display: block;
4400   color: #ff0000;
4401   text-align: center;
4402   font-weight: bold;
4403   margin-bottom: .5em;
4404 }
4405
4406 #crm-container.crm-public .price-set-row {
4407   font-size: 15px;
4408   margin-bottom: 5px;
4409 }
4410
4411 #crm-container.crm-public .price-set-row input,
4412 #crm-container.crm-public .price-set-row label {
4413   vertical-align: middle;
4414   cursor: pointer;
4415 }
4416
4417 #crm-container.crm-public .price-set-row .crm-price-amount-amount {
4418   font-weight: bold;
4419   min-width: 2em;
4420   color: #333333;
4421 }
4422
4423 #crm-container.crm-public .price-set-row .crm-price-amount-label {
4424   color: #444444;
4425 }
4426
4427 #crm-container.crm-public .price-set-row.highlight label {
4428   color: #000000;
4429   font-weight: bold;
4430 }
4431
4432 #crm-container.crm-public .price-set-row.highlight .crm-price-amount-label {
4433   color: #222222;
4434 }
4435
4436 #crm-container .crm-extensions-upgrade {
4437   background: #ffb;
4438   border: 1px solid #000;
4439   text-align: center;
4440 }
4441
4442 /* Styles for credit card payment logos */
4443 .crm-container .credit_card_type-section .crm-credit_card_type-icons a {
4444   display: block;
4445   float: left;
4446   width: 50px;
4447   height: 30px;
4448   background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
4449   text-indent: -20000px;
4450   margin-right: 10px;
4451   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
4452   border-radius: 3px;
4453   border: 1px solid #FFFFFF;
4454 }
4455
4456 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-visa {
4457   background-position: -50px 0;
4458 }
4459
4460 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-mastercard {
4461   background-position: -100px 0;
4462 }
4463
4464 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-amex {
4465   background-position: -150px 0;
4466 }
4467
4468 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-discover {
4469   background-position: -200px 0;
4470 }
4471
4472 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-jcb {
4473   background-position: -250px 0;
4474 }
4475
4476 .crm-container .credit_card_type-section .crm-credit_card_type-icons .crm-credit_card_type-icon-unionpay {
4477   background-position: -300px 0;
4478 }
4479
4480 .crm-container .cvv2-icon {
4481   display: inline-block;
4482   width: 50px;
4483   height: 30px;
4484   background: url(../i/creditcard-icons.png) no-repeat 0 0 transparent;
4485 }
4486
4487 /* Avoid weird border around the images (some themes will add a border around images) */
4488 #crm-container .credit_card_type-section .crm-credit_card_type-icons a,
4489 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:link,
4490 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:hover,
4491 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:focus,
4492 #crm-container .credit_card_type-section .crm-credit_card_type-icons a:active {
4493   color: #fff;
4494 }
4495
4496 .crm-container .paper-icon {
4497   background-position: -101px -222px;background-image: url("../i/icons/jquery-ui-3E3E3E.gif");
4498 }
4499
4500 .crm-container .survey-completed {
4501   text-decoration: line-through;
4502 }