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