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