/* $Id: civicrm.css,v 1.0 2005/03/18 dgg */

/*
** 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 .medium {width: 12em;}
#crm-container .big {width: 15em;}
#crm-container textarea.huge {width: 35em; height: 8em;}
#crm-container .huge {width: 30em;}

/*
** 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 page of Contribution
*/
#crm-container div.solid-border-bottom {
 border-bottom: 2px solid #777;
}

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

#crm-container .ht-two {
  height: 2em;
}

/*
** Classes for form section show/hide links
*/
/*#crm-container .show-section {
  width: 25%;
  font-size: .95em;
  border: 1px solid #abc;
  background-color: #eee;
  padding: .5em;
  margin-bottom: 1em;
  margin-left: 0.5em;
}

#crm-container .hide-section {
  width: 25%;
  font-size: .95em;
  border: 1px solid #abc;
  padding: .5em;
  margin-bottom: 1em;
}
*/
#crm-container .add-remove-link {
  font-size: .9em;
}

/*
** CRM form layout classes (from www.realworldstyle.com)
*/
div.spacer, .spacer {
  clear: both;
  height: 5px;
  }

#crm-container input.form-submit, #crm-container select {
  vertical-align: middle;
}

#crm-container td.compressed select, #crm-container td.compressed input {
  font-size: 0.90em;
}
  
#crm-container fieldset {
 margin: 1em 0em .5em 0em;
}

#crm-container div.form-item {
  margin: 0px;
  padding: 3px 0px 3px 0px;
  clear: both;
}

/* Use this rule for Box-Grey or other themes with very large default label fonts... */
/*
#crm-container div.form-item {
  font-size: 0.90em;
}
*/

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

/* Use definition lists for simple 2 col forms - <dt> for labels, <dd> for fields */
#crm-container div.form-item dt {
  float: left;
  clear: left;
  width: 22%;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  /*white-space: nowrap;*/
  padding: 5px 15px 5px 0px;
}

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

/*
 ** Many times one need to add long descriptions within <dd>.
 ** but limited padding-bottom for <dt> causes bottom lines
 ** in <dd> to move towards left. Hence giving classes
 ** for <dt> which handles such situations.
 */
#crm-container div.form-item dt.extra-long-hundred {
  padding-bottom: 100px;
}

#crm-container div.form-item dt.extra-long-eighty {
  padding-bottom: 80px;
}

#crm-container div.form-item dt.extra-long-sixty {
  padding-bottom: 60px;
}

#crm-container div.form-item dt.extra-long-fourty {
  padding-bottom: 40px;
}

#crm-container div.form-item dt.extra-long-twenty {
  padding-bottom: 20px;
}

#crm-container div.form-item dd, #crm-container .section-hidden dd {
  padding: 5px;
}

#crm-container div.form-item dd.html-adjust{
  float: left;
  width: 48%;
  /*clear: right;*/
}

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

#crm-container div.form-item span.labels {
  float: left;
  width: 25%;
  text-align: left;
}

#crm-container div.form-item span.fields {
  float: right;
  width: 75%;
  text-align: left;
} 

#crm-container table.form-layout, #crm-container table.control-panel, #crm-container table.no-border {
  margin: 0em;
  /* width: auto; */
  width: 98%;	
  border-collapse: collapse;
  border: 0px none;
}

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

#crm-container .form-layout td {
  padding: 3px;
  white-space: nowrap;
  border: 0px none;
}

#crm-container .form-layout td.report {
  white-space: normal;
}

#crm-container .form-layout td, #crm-container .form-layout-compressed td, #crm-container .form-layout-compressed th {
  vertical-align: text-top;
}

#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: 0em 0.50em 0em 0.75em;
  border: 0px none;
}

#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 .bold {
  font-weight: bold;
}

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

#crm-container div.status {
  margin: 0.5em;
  background-color: #ffff99;
  padding: .25em .5em .25em .5em;
  /*border: 1px solid #abc;*/
  border: 1px solid #5A8FDB;
}

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

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

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

#crm-container div.status ul {
  margin: 0;
}

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

#crm-container .messages {
  margin: 1.0em 0em 1.0em;
}

#crm-container .action-link {
  margin: 0.5em 0em 0.5em;
}

#crm-container .header-dark {
  margin: 0.5em 0em 0.5em;
  padding: 0.5em;
  /*background-color: #B0B0B0;*/
  background-color: #4D94E3;
  font-weight: bold;
  /*color: #FFFFFF;*/
  color: #BADAFF;
}

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

/* Data display layouts */
#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;
}

/*
** CSS for links from Drupal Blocks.
*/
/* For our menu block. Drupal displays an extraneous li bullet without this. */
.menu li.no-display {
  list-style-type: none;
}

/* Following styles are used to remove the white bullets from the Garland Theme */
#crm-container li { 
  background-image: none;
}
#crm-container ul li,
div.block-civicrm ul li {
  background-image: none;
}

/* In the above process, leaf <li> loses the image (this is temporary fix, need to find out the exact cause)*/
#crm-container ul li.leaf,
div.block-civicrm ul li.leaf {
  list-style-image: url(menu-leaf.png);
}

/* After all the above changes, the menu-leaf and menu-collapsed links are not aligned. Aligning it now */
#crm-container ul li.leaf, #crm-container ul li.collapsed,
div.block-civicrm ul li.leaf, div.block-civicrm ul li.collapsed {
  padding: 0.2em 0.5em 0 0;
  margin:  0;
}

/* Fix for IE*/
div.block-civicrm ul li.leaf, div.block-civicrm ul li.collapsed, div.block-civicrm ul li.expanded{
  margin: 0 0 0 0.3em;
}
/*
** Styles for formatting text
*/
/* Inline form field 'post-help' */
#crm-container .description {
  padding: 0px 0px 5px;
  font-size: 0.9em;
  white-space: normal;
}

/* Page and form-level 'help' */
#crm-container #help {
  margin: 1em 0em 0.5em;
}

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

#crm-container .labels, .label {
  font-weight: bold;
}

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

.font-italic {
  font-style: italic
}

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

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

.status-pending {
  color: green;
}

.upper {
    text-transform: uppercase;
}

/* 
** Styles for record browser and report tables, and pager bar
*/
#crm-container table {
  margin: .5em 0em .5em;
  width: 100%;
  border-collapse: collapse;
  /*border: 1px solid #000000;*/
  border: 1px solid #4E82CF; /*#4A88DF;*/
}

#crm-container #map-field table, #crm-container table.report  {
    width: auto;
}

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

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

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

#crm-container tr.columnheader {
  /*background-color: #CCCCCC;*/
  background-color: #B3D1FF;
  color: #000000;
  /*border: 1px solid #000000;*/
  border: 1px solid #5A8FDB;
}
#crm-container tr.columnheader-dark {
  /*background-color: #B0B0B0;*/
  background-color: #4D94E3;
  /*color: #FFFFFF;*/
  color: #CDE4FF;
  /*border: 1px solid #000000;*/
  border: 1px solid #5A8FDB;
}
#crm-container th {
  padding: 8px 4px 4px 4px;
  /*border-bottom: 1px solid #000;*/
  border-bottom: 1px solid #5A8FDB;
  text-align: left;
}

#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.columnfooter {
  /*border-top: 2px solid #000000;*/
  border-top: 2px solid #4E82CF; /*#4574BA;*//*#4A88DF;*/
  font-size: 1.1em;
}

#crm-container #map-field th {
    /*border-right: 1px solid #000;*/
    border-right: 1px solid #5A8FDB;
}

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

#crm-container .report td {
  /*border: 1px solid #ddd;*/
  border: 1px solid #92B6EC;
  background-color: #F6F6F6;
}

#crm-container .odd-row, tbody.scrollContent {
  /*background-color: #FAFAF8;*/
  background-color: #FAFAFA;
}
#crm-container .even-row, tbody.scrollContent tr.alternateRow  {
  /*background-color: #EAEAEA;*/
  background-color: #E8F2FF;
}
#crm-container tr.even-row td, #crm-container tr.odd-row td{
  border-collapse: collapse;
  /*border-top: 1px solid #000000;*/
  border-top: 1px solid #92B6EC;
}

#crm-container .selected {
/*  border: 0.5px solid #000000; */
  margin: 0px;
  padding: 3px 0px 3px 0px;
  clear: both;
  background-color: #ffff99;
}

#crm-container .font-red, #crm-container .status-removed, #crm-container .disabled, #crm-container .status-overdue, #crm-container .status-hold {
  color: #FF0105;
}

#crm-container a.sort-ascending:before, #crm-container thead th.selectedDown:before {
   content: url(sort-asc.png);
   margin-right: 5px;
   vertical-align: middle;
}

#crm-container a.sort-descending:before, #crm-container thead th.selectedUp:before {
   content: url(sort-desc.png);
   margin-right: 5px;
   vertical-align: middle;
}

#crm-container a.sort-none:before {
   content: url(sort-none.png);
   margin-right: 5px;
   vertical-align: middle;
}

#crm-container .horizontal-position {
  margin-right: 30px;
  margin-left: 30px;
}

#crm-container .horizontal-center {
  text-align: center;
  margin: 0 auto;
  width: 80%;
}

#crm-container .place-left {
  float: left;
  margin-left: 30px;
  margin-right: 30px;
}

#crm-container .float-right {
  float: right;
  width: auto;
  padding: 0px 5px 10px 0px;
  clear: both;
}

#crm-container .align-right {
    display: block;
    margin-right: 20px;
    text-align: right;
}

#crm-container .element-right {
  position: absolute;
  right: 35px;
}

#crm-container #search-status {
 padding: 0.25em;
 /*background-color: #ccc;*/
 background-color: #B3D1FF;
 font-size: .95em;
 font-weight: bold;
}

#crm-container #search-status ul, #crm-container ul.left-alignment, #crm-container td ul {
 margin: 0em 0em 0em -2.0em;
}

#crm-container #search-status ul li, #crm-container ul.left-alignment li{
 display: list-item;
 margin-left: 2.0em;
 list-style-position: inside;
}

div.crm-pager {
  /*border: thin solid #000000;*/
  border: thin solid #4A88DF; 
  background-color: #2E7ED6;
  /*color: #FFFFFF;*/
  color: #213245;
  position: relative;
  height: 25px;
  margin-left: -1px;
  padding-top: 5px;
}

div.crm-pager a {
  /*color: #FFFFFF;*/
  color: #CDE4FF;/*#BADAFF;*/
}

.crm-pager-nav {
  height: 25px;
  padding-left: 100px;
}

/* 
** Styles for View pages
*/
/*#crm-container .data-group {
  margin: 0px 0px 5px 5px;
  padding: 5px;
  border-bottom: 2px solid #B0B0B0;
}
#crm-container .data-group-no-border {
  margin: 0px 0px 5px 5px;
  padding: 5px;
}*/
#crm-container .section-hidden, #crm-container div.view-content {
  margin: 0px 0px 5px 5px;
  padding: 5px;
}
#crm-container .section-hidden-border {
  border-bottom: 2px solid #B0B0B0;  
}
#crm-container .section-shown { 
  padding: 0px 5px;
}
#crm-container .data-group-first {
  margin: 10px 5px 5px 5px;
  padding: 5px;
  /*border-top: 2px solid #B0B0B0;*/
  border-top: 2px solid #85ACE8;
  clear: both;
}

/* Styles for Wizard Progress Bars */
#crm-container ul.wizard-bar {
  border-collapse: collapse;
  padding: 0em 0em 0em 1em;
  white-space: nowrap;
  list-style: none;
  margin: 10px 0px 20px;
  height: auto;
  width: auto;
  line-height: normal;
  border-top: 3px solid #bbb;
}
#crm-container ul.wizard-bar li {
  display: inline;
  /*background-color: #fff;
  border: 1px solid #bbb;*/
  background-color: #FAFAFA;
  border: 1px solid #92B6EC;
  height: auto;
  margin-right: 2em;
  padding: .5em 1em .5em;
  text-decoration: none;
}
#crm-container ul.wizard-bar li.current-step {
  /*background-color: #fff;
  border-color: #000;*/
  background-color: #FAFAFA;
  border-color: #92B6EC;
  font-weight: bold;
}
#crm-container ul.wizard-bar li.past-step {
  /*background-color: #eee;*/
  background-color: #EDF2FF;
  color: #666;
}

/* Recently Viewed bar */
#crm-container div#recently-viewed {
  margin: 5px 0px 10px;
  font-weight: bold;
  font-size: .95em;
  /*color: #6e6e6e;*/
  color: #4A88DF;
  /*background-color: #eee;*/
  background-color: #EDF2FF;
  /*border: 1px solid #6e6e6e;*/
  border: 1px solid #4A88DF;
  overflow: hidden;
}
#crm-container div#alpha-filter {
  margin: 10px 0px 5px;
  text-align: center;
  width: 100%;
}

#crm-container #recently-viewed ul, #crm-container #alpha-filter ul {
  border-collapse: collapse;
  padding: 0em;
  white-space: nowrap;
  list-style-type: none;
  margin: 3px;
  height: auto;
  width: auto;
}
#crm-container #recently-viewed li {
  display: inline;
  height: auto;
  margin: 0em;
  padding: 5px;
}

#crm-container #alpha-filter li {
  display: inline;
  /*background-color: #eee;*/
  background-color: #EDF2FF;
  /*border: 1px solid #6e6e6e;*/
  border: 1px solid #4A88DF;
  color: #aaa;
  font-size: .95em;
  font-weight: normal;
  height: auto;
  margin: 0px 1px 0px 1px;
  padding: 2px 5px 2px 5px;
}

#crm-container #alpha-filter li.active {
  background-color: #fff;
}

#crm-container #alpha-filter a {
  font-weight: normal;
  color: #000;
}

#crm-container #alpha-filter a.active {
  font-weight: bold;
  color: #000;
}

#crm-container #recently-viewed a {
  font-weight: normal;
  /*color: #6e6e6e;*/
  color: #4A88DF;
  font-size: .95em
}

/*
** overflowing for elements (e.g. Advanced Search page)
*/
#crm-container .listing-box {
  margin: 0.25em 2.0em -0.5em 0em;
  width: auto;
  height: 6.75em;
  overflow: auto;
  /*border: 1px solid #B0B0B0;*/
  border: 1px solid #92B6EC;
}

/* Image Styles */
#crm-container .action-icon {
  vertical-align: middle;
  height: 20px;
  width: 20px;
  margin: 2px 2px 0px 2px;
  cursor: pointer;
  cursor: hand;
}

/*
** Style for hiding blocks or table rows
*/
#crm-container .hide-block, #crm-container .hide-row {
  display: none;
}

/*
** Styles for showing blocks and table rows
*/
#crm-container .show-block {
  display: block;
}

#crm-container .show-row {
  display: table-row;
}

#crm-container input.submit-link {
  color: #285286;
  background-color: transparent;
  /*text-decoration: underline;*/
  border: none;
  cursor: pointer;
  cursor: hand;
  margin: 0em -0.5em 0em -0.5em;
}

#crm-container .underline-effect {
  color: #285286;
}

#crm-container .underline-effect:hover {
  text-decoration: underline;
}

#crm-container .underline-effect:before {
  content: "\00BB";
}

#crm-container div#searchForm {
	height: 100%;
	width: 100%;
	overflow: hidden;
}

#crm-container #main {
	height: 95%;
	width: 95%;
	left: 1%;
	top: 1%;
	position: relative;
}
#crm-container .label-pane {
    margin: 0.25em 0em 0em;
    padding: 0.25em;
    /*background-color: #B0B0B0;*/
    background-color: #6AA8EE;
	cursor: pointer;
	/*color: #fff;*/
        color: #213245;
	font-weight: bold;
}
#crm-container .label-pane :hover {
	cursor: pointer;
}
#crm-container fieldset.collapsible {
  border: 0px;
}
#crm-container .content-pane {
  overflow: auto;
}

/*
** Following styles are used specificaly for dojo based elements
*/

#crm-container tbody.scrollContent tr:hover  {
  /*background-color: #b9caf2;*/
  background-color: #D0E6FD;
}
#crm-container thead tr.columnheader th {
  cursor: pointer;
  vertical-align: top;
}
#crm-container tbody td {
  padding-left: 20px;
}
#crm-container thead th.selectedUp, #crm-container thead th.selectedDown { 
  vertical-align: top;
}