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