civicrm.css

/**
 * @file: CiviCRM Stylesheet
 *
 * NOTE: The main civicrm container has both class and id of crm-container
 * Other civi blocks outside the main container also have the class crm-container (but not the id)
 * All styles should start with .crm-container unless they are specific to the main div only
 */

div.crm-container label {
  font-weight: normal;
  display: inline;
}

div.crm-container fieldset label{
  float: none;
}

.crm-container .crm-quickSearchField {
  font-weight: normal;
}

#crm-container .hiddenElement,
.crm-container .hiddenElement {
  display: none;
}

#crm-container .clear,
.crm-container .clear {
  clear: both;
}

.crm-container a,
.crm-container a:link,
.crm-container a:visited {
  color: #2786c2;
  text-decoration: none;
}

#crm-container .crm-content-block {
  padding: 0px;
}

/* TABLE STYLING */

.crm-container table {
  margin: 0em 0em 1em;
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}

.crm-container table.criteria-group {
  margin-bottom: .1em;
}

.crm-container table.crm-address-element {
  border: none;
  margin-bottom: .25em;
}

.crm-container th,
.crm-container table.display thead th,
.crm-container table thead.sticky th,
.crm-container table.caseSelector tr.columnheader th {
  background-color: #FFFFFF;
  border-color: #FFFFFF #FFFFFF #CFCEC3;
  border-style: solid;
  border-width: 1px 1px 2px;
  color: #A7A7A7;
  font-size: 12px;
  font-weight: bold;
  padding: 4px;
  text-align: left;
  vertical-align: top;
}
/* Styles for Sticky Header */
.crm-container table thead.sticky {
  background-color: #FFF;
}

.crm-container thead div.sticky-header {
  height: 15px;
  border-bottom: 2px solid #CFCEC3;
  background-color: #FFF;
  z-index: 10;
}

/* Styles for Sorting Header */
.crm-container table.display thead th.sorting_asc,
.crm-container table.display thead th.sorting_desc,
.crm-container table .sticky th a.sort-ascending,
.crm-container table .sticky th a.sort-descending,
.crm-container table.caseSelector tr.columnheader th a.sort-ascending,
.crm-container table.caseSelector tr.columnheader th a.sort-descending {
  color: #3e3e3e;
  background-color: #FFF;
}

/* Set background back to normal gray for form labels which use <th>. Temporary fix until we standardize form layout markup. */
.crm-container table.form-layout-compressed tbody th.label {
  background-color: #F7F7F7;
}

.crm-container tbody {
  border-top: none;
}

.crm-container tr {
  font-size: .95em;
  background: none;
}

.crm-container td {
  padding: 4px;
  vertical-align: top;
}

.crm-container tr.even-row td,
.crm-container tr.odd-row td,
.crm-container table.display td,
.crm-container table.pagerDisplay td {
  border-collapse: collapse;
}

.crm-container .crm-row-selected {
  margin: 0px;
  padding: 3px 0px 3px 0px;
  clear: none;
  background-color: #FFFFCC !important;
}

.crm-container .crm-row-child {
  margin: 0px;
  padding: 3px 0px 3px 0px;
  clear: none;
  background-color: #F1F8EB !important;
}

.crm-container .row-highlighted {
  margin: 0px;
  padding: 3px 0px 3px 0px;
  clear: none;
  background-color: #FFFFCC;
}

/*
** Size input fields in crm-container by class. Classes are assigned by the
** module in relation to the data object max size.
*/
.crm-container .two {
  width: 2em;
}
.crm-container .four {
  width: 4em;
}
.crm-container .six {
  width: 6em;
}
.crm-container .eight {
  width: 8em;
}
.crm-container .twelve {
  width: 12em;
}
.crm-container .twenty {
  width: 20em;
}
.crm-container .medium {
  width: 12em;
}
.crm-container .big {
  width: 15em;
}
.crm-container .huge {
  width: 25em;
}
.crm-container .huge40 {
  width: 40em;
}
.crm-container textarea.big {
  width: 35em;
  height: 4em;
}
.crm-container textarea.huge {
  width: 45em;
  height: 16em;
}
.crm-container textarea.huge12 {
  width: 40em;
  height: 12em;
}
.crm-container textarea.huge40 {
  width: 40em;
  height: 16em;
}
.crm-container textarea.nowrap {
  width: 45em;
  height: 4.5em;
  white-space: nowrap;
  overflow: auto;
}
.crm-container .bigSelect {
  width: 15em;
  height: 12em;
}


/* Override line-height from style.css */
#crm-container,
.crm-container {
  line-height: 135%;
}

/* Base crm-container styles */
.crm-container hr {
  background-color: #B0B0B0;
}

.crm-container select {
  vertical-align: middle;
  border: 1px solid #999;
}

.crm-container .crm-form-block {
  padding: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  background-color: #E6E6DC;
  color: #3E3E3E;
}

/* crm advanced select styling */
.crm-container .crmasmContainer,
.crm-container .crmasmSelect,
.crm-container .crmasmSelectCampaigns,
.crm-container .crmtagContainer,
.crm-container .crmtagSelect {
  width: 160px;
}

.crm-container .crmasmSelect,
.crm-container .crmtagSelect,
.crm-container .crmasmSelectCampaigns {
  padding: 2px;
}

.crm-container .crmasmSelect .child-1 {
  padding-left: 1em;
}
.crm-container .crmasmSelect .child-2 {
  padding-left: 2em;
}

.crm-container .crmasmHighlight,
.crm-container .crmtagHighlight {
  display: block;
  padding: 2px 4px;
  background-color: #EEF4B8;
}

.crm-container .crmasmList,
.crm-container .crmtagList {
  margin: 0px;
  padding: 0px;
}

.crm-container .crmasmList li,
.crm-container .crmtagList li {
  background-color: #3E3E3E;
  background-image: none;
  padding: 2px 4px;
  list-style-type: none;
  margin: 1px 0px;
  color: #F5F6F1;
}

.crm-container .crmasmListItem,
.crm-container .crmtagListItem {
  position: relative;
}

.crm-container .crmasmListItemRemove,
.crm-container .crmtagListItemRemove {
  padding: 5px;
  position: absolute;
  right: 5px;
  top: 2px;
  font-size: 11px;
  margin: 0px;
  padding: 0px;
}

.crm-container textarea {
  border: 1px solid #999;
}

/*
** class for hiding the text box;
  it is used in the OtherActivity template
** for showing the descrition of activity type element.
*/
.crm-container .texttolabel,
.crm-container .no-border {
  border-style: none;
}

/*
** Class for giving solid line at the bottom of the <div>(block level element)
** Currently it is used on the dashboard pages - CiviContribute, CiviMember...
*/
.crm-container div.solid-border-bottom {
  border-bottom: 2px solid #777;
}

.crm-container div.solid-border-top,
.crm-container .attachment-fieldset {
  margin-top: 15px;
  border-top: 1px solid #696969;
}

/* Size the verticle heights in crm-containers by class. */
.crm-container .ht-one {
  height: 1em;
}

.crm-container .add-remove-link,
.crm-container .map-link,
.crm-container .font-small {
  font-size: .9em;
}

/* Ensures max-width is reset to css default for the images in the maps */
#Map img {
  max-width: none;
}

.crm-container .required {
  color: inherit;
}

/* CRM form layout classes (from www.realworldstyle.com) */
.crm-container .spacer {
  clear: left;
  height: 5px;
}

.crm-container td.compressed select,
.crm-container td.compressed input {
  font-size: 0.90em;
  font-weight: bold;
}

.crm-container td.Int input {
  width: 6em;
}

.crm-container input[type="text"],
.crm-container input[type="password"] {
  border: 1px solid #999;
  vertical-align: middle;
  padding-left: 1px;
}

.crm-container .form-submit {
  margin: .25em 0.5em 0.25em 0;
}

.crm-container .form-submit-inline {
  margin: 0em 0.5em 0.25em 0em;
}

.crm-container div.crm-inline-button {
  padding-left: 6px;
  padding-top: 6px;
  margin-bottom: 28px;
}

.crm-container span.crm-lock-button {
  float: right;
}

.crm-container fieldset {
  background: none;
  padding: 4px 0px;
  margin: 10px 0px;
  border: none;
  border-top: 1px solid #CFCEC3;
}

.crm-container fieldset.no-border {
  border-top: none;
}

.crm-container fieldset legend {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 4px;
  background: none;
  border: medium none;
  background-color: transparent;
  color: #3E3E3E;
  position: relative;
  text-indent: 0px;
  width: auto;
}

.crm-container fieldset.form-layout {
  margin: .25em 0em .5em 0em;
  padding: 1px 10px 1px 10px;
}

.crm-container fieldset.collapsible {
  border: 0px;
}

.crm-container div.form-item {
  border-top-style: none;
  margin: 0px;
  padding: 3px 0px 5px 0px;
  clear: none;
  height: 100%;
}

.crm-container div.form-item dl,
.crm-container .section-hidden dl,
.crm-container .crm-form-block dl {
  margin: 0;
}

/* contribution page styles */
.crm-container #Main fieldset table td {
  background-color: transparent;
  border: none;
}

.crm-container .crm-section,
.crm-container-snippet .crm-section {
  margin-bottom: 1em;
}

.crm-container .crm-section .label,
.crm-container-snippet .crm-section .label {
  float: left;
  width: 17%;
  text-align: right;
}

.crm-container .label-left .label {
  text-align: left;
}

.crm-container .crm-section .content,
.crm-container-snippet .crm-section .content {
  margin-left: 19%;
}

.crm-container .no-label .content {
  margin-left: 0px;
}

#crm-container #cvv2 {
  vertical-align: top;
}

/* Use definition lists for simple 2 col forms - <dt> for labels, <dd> for fields */
.crm-container div.form-item dt,
.crm-container .crm-form-block dt {
  float: left;
  clear: left;
  width: 150px;
  text-align: right;
  vertical-align: top;
  padding: 5px 15px 5px 0px;
  font-size: .95em;
  white-space: normal;
}

.crm-container .section-hidden dt {
  float: left;
  clear: left;
  width: 150px;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  padding: 5px 15px 5px 0px;
}

.crm-container div.form-item dd,
.crm-container .crm-form-block dd,
.crm-container .section-hidden dd {
  padding: 3px;
  margin-left: 160px;
}

.crm-container div.form-item dd.html-adjust,
.crm-container div.form-item dl.html-adjust dd,
.crm-container div.crm-form-block dl.html-adjust dd,
.crm-container div.crm-form-block dd.html-adjust {
  width: 57%;
}

.crm-container div.form-item dd.description,
.crm-container div.crm-form-block dd.description {
  padding: 0px 0px 5px;
  white-space: normal;
}

.crm-container div.form-item span.labels,
.crm-container div.crm-form-block span.labels {
  float: left;
  width: 15%;
  text-align: right;
}

.crm-container div.form-item span.fields,
.crm-container div.crm-form-block span.fields {
  width: 84%;
  text-align: left;
  margin-left: 16%;
  display: block;
}

.crm-container table.form-layout,
.crm-container table.control-panel,
.crm-container table.no-border {
  margin: 0em;
  border-collapse: collapse;
  border: 0px none;
}

.crm-container table.form-layout-compressed {
  margin: 0em 0em .5em;
  width: auto;
  border-collapse: collapse;
  border: 1px none;
}

.crm-container table.crm-profile-tagsandgroups>tbody>tr>td {
  padding: 0;
}

.crm-container table.crm-profile-tagsandgroups,
.crm-container table.crm-profile-tagsandgroups table {
  margin: 0;
}

.crm-container table.advmultiselect {
  margin: 0em;
  width: auto;
  border-collapse: collapse;
  border: 1px solid #696969;
}

.crm-container table.advmultiselect td {
  padding: 10px;
}

.crm-container table.advmultiselect td select {
  width: 150px;
}

.crm-container .form-layout td {
  vertical-align: top;
  padding: 5px;
  white-space: normal;
  border: none;
}

.crm-container .form-layout td.report,
.crm-container .form-layout td.description,
.crm-container .form-layout-compressed td.description {
  white-space: normal;
}

.crm-container .form-layout-compressed td,
.crm-container .form-layout-compressed th {
  vertical-align: text-top;
  padding: 2px 5px;
  border: none;
}

.crm-container .control-panel td {
  padding: 3px;
  width: 25%;
  white-space: nowrap;
  border: 0px none;
  text-align: center;
}

.crm-container .form-layout td.label,
.crm-container .form-layout-compressed td.label,
.crm-container .selector td.label,
.crm-container .form-layout-compressed th.label {
  text-align: right;
  padding: 4px 4px 4px 6px;
  border: 0px none;
  vertical-align: top;
}

.crm-container td.op-checkbox label {
  font-weight: normal;
  font-style: italic;
}

.crm-container .form-layout td.label-left,
.crm-container .form-layout-compressed td.label-left {
  text-align: left;
  padding: 4px 4px 4px 6px;
  border: 0px none;
  vertical-align: top;
}

.crm-container table.selector td {
  border-right: 1px solid #dddddd;
}

.crm-container .form-layout td.view-value,
.crm-container .form-layout-compressed td.view-value {
  text-align: left;
  padding: 4px;
  border: 0px none;
  vertical-align: top;
}

#crm-submit-buttons {
  width: 100%;
  /* fix ie7/ie8 bug where page goes bananas */
}

.crm-container .form-layout .buttons,
.crm-container .form-layout-compressed .buttons {
  padding-top: 10px;
}

.crm-container .button-disabled {
  color: #CFCEC3!important;
}

.crm-container .form-layout-compressed td.describe-image {
  vertical-align: top;
  padding: 0.5em 0em 0em 0em;
  font-size: .9em;
}

.crm-container .right {
  text-align: right;
}

.crm-container .form-layout-compressed td.option-label {
  vertical-align: top;
  text-align: right;
  padding: 0.75em 0.5em 0em 0.75em;
  color: #7a7a60;
}

.crm-container td.price_set_option-label {
  padding-left: 3em;
}

/* messages and status */
.crm-container .messages {
  margin: 1.0em 0em 1.0em;
  border: none;
  font-weight: normal;
}

.crm-container .messages .msg-title {
  font-weight: bold;
}

.crm-container .messages table {
  width: auto;
}

.crm-container .messages table td {
  background-color: #F7F7F7;
  border-bottom: 1px solid #DDDDDD;
}

.crm-container .status {
  background-color: #FFFFCC;
  background-image: none;
  border: 1px solid #FFFF66;
  margin: 0.5em 0px;
  padding: 0.25em 0.5em;
  color: #3e3e3e;
  font-weight: normal;
}

.crm-container .status dl {
  margin: 2px 5px;
}

.crm-container div.status dt {
  clear: none;
  float: left;
  width: 20px;
}

.crm-container div.status dd {
  margin-left: 0px;
}

.crm-container div.status ul {
  margin: 0 0 1em 16px;
}

.crm-container .status-pending {
  color: green;
}

.crm-container .status-completed {
  color: #000080;
}

.crm-container .crm-marker,
.crm-container-snippet .crm-marker {
  color: #8A1F11;
  font-weight: bold;
  margin-right: 5px;
}

.crm-container .crm-error,
.crm-container .crm-inline-error {
  background: #FBE3E4 none repeat scroll 0 0;
  border: none;
  color: #8A1F11;
}
.crm-container .crm-error {
  padding: 4px;
}

.crm-container div.view-data {
  padding: .25em .5em .25em .5em;
  border: 1px solid DimGray;
  width: auto;
  background-color: #ffffff;
}

.crm-container .crm-footer {
  font-size: 0.8em;
}

#civicrm-footer {
  margin-top: 2em;
  border-top: 1px solid #ddd;
  padding: 0.8em;
  text-align: center;
}

#crm-record-log {
  padding: 0.8em 0.8em 0em 0em;
  text-align: right;
}

.crm-container #access {
  padding: 0.8em 0.8em 0em 0em;
  text-align: right;
}

.crm-container .header-dark {
  margin: 0.5em 0em 0.5em;
  padding: 0.5em;
  background-color: #999999;
  font-weight: bold;
  color: #FAFAFA;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -khtml-border-radius: 2px;
}

.crm-container div.display-block {
  font-weight: normal;
  margin: 1.0em 2.0em 1.0em 2.0em;
}

/* Data display layouts */
.crm-container h3 {
  /* h3 used as table header for civicrm */
  background-color: #CDE8FE;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #121A2D;
  padding: 4px 6px;
  margin: 0 0 0.3em;
}

.crm-container h3.nobackground,
.crm-container .crm-form-block h3 {
  background-color: transparent;
}

#crm-container .col1 {
  float: left;
  vertical-align: top;
  width: 40%;
  text-align: left;
  margin: 0px 25px 0px 25px;
}

#crm-container .col2 {
  float: right;
  vertical-align: top;
  width: 50%;
  text-align: left;
  margin: 0px;
}

#crm-container ul.indented {
  padding-left: 3em;
}

#crm-container tr.subevent td.event-title,
#crm-container tr.subevent td.event-info {
  padding-left: 3em;
}

#crm-container span.child-indent {
  padding-left: 1em;
}

/*
** CSS for links from Drupal Blocks.
*/
/* Following styles are used to remove the white bullets from the Garland Theme */
.crm-container ul li {
  background-image: none;
}

/* But allow them for the help at the top of forms
*/
.crm-container #help ul li {
  background-image: url(menu-leaf.png);
}

.crm-container .crm-form-block .crm-loading-element {
  background-image: url("../i/loading-E6E6DC.gif");
}

.crm-container .crm-loading-element {
  padding-left: 30px;
  height: 30px;
  background: transparent url("../i/loading.gif") no-repeat 0px 0px;
}

.crm-container div div.crm-msg-loading div.icon {
  background: transparent url("../i/loading-2f2f2e.gif") no-repeat 0px 0px;
}

/*
 * Styles for formatting text
 */

/* Inline form field 'post-help' and radio-button unselect */
.crm-container .description,
.crm-container .crm-clear-link {
  font-size: 0.9em;
  font-weight: normal;
  white-space: normal;
  width: auto;
  color: #696969;
  line-height: inherit;
  padding: 0;
  margin: 0;
}

.crm-container .form-layout-compressed td.description,
.crm-container .form-layout td.description {
  padding: 0 5px 5px 5px;
  font-size: 1em;
}

/* Page and form-level 'help' */
.crm-container .help,
.crm-container #help {
  background-color: #F1F8EB;
  border: 1px solid #B0D730;
  color: #3E3E3E;
  font-size: 12px;
  margin: 0 0 8px;
  padding: 4px;
}

.crm-container .help p {
  margin: 4px;
}

/* Set display: inline to over-ride drupal.css which sets label tags to display: block */
#crm-container .notorg {
  font-weight: normal;
}

.crm-container .font-light {
  font-weight: lighter;
}

.crm-container .bold {
  font-weight: bold;
}

.crm-container .font-italic {
  font-style: italic;
}

.crm-container .font-size11pt {
  font-size: 1.1em;
}

.crm-container .font-size12pt {
  font-size: 1.2em;
}

.crm-container .qill {
  font-weight: normal;
  line-height: 1.1em;
}

/* Styles for record browser and report tables, and pager bar */
#crm-container #map-field table,
#crm-container table.report,
#crm-container table.chart {
  width: auto;
}

#crm-container .crm-flashchart {
  overflow: scroll;
}

#crm-container td.enclosingNested {
  padding: 0px;
}

#crm-container .nowrap {
  white-space: nowrap;
}

#crm-container tr.columnheader {
  background-color: #E6E6E6;
  color: #000000;
  border: 1px solid #DDD;
}

#crm-container tr.columnheader a {
  color: #000;
  text-decoration: none;
  vertical-align: top;
}

#crm-container tr.columnheader-dark th {
  background-color: #999999;
  color: #FAFAFA;
  border: 1px solid #696969;
}

#crm-container tr.columnheader-dark td,
#crm-container tr.columnheader-dark th,
#crm-container tr.columnheader td,
#crm-container tr.columnfooter td {
  font-size: 1.1em;
  font-weight: bold;
}

#crm-container tr.columnheader-dark th span.extra {
  font-size: .95em;
  font-weight: normal;
}

#crm-container tr.columnfooter {
  border-top: 2px solid #999999;
  font-size: 1.1em;
}

#crm-container #map-field th {
  border-right: 1px solid #999999;
}

#crm-container #map-field td,
#crm-container .report td,
#crm-container .chart td {
  padding: 10px 10px 4px 10px;
}

#crm-container .report td {
  border: 1px solid #999999;
  background-color: #F6F6F6;
}

/* double line right border for last cell in a horizontal grouping */
#crm-container table.report td.splitter {
  border-right: 5px double #999999;
}

#crm-container .report td.separator {
  padding-top: 1em;
  background-color: #FFFFFF;
  border-left-color: #FFFFFF;