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