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