/**
 * Styleguide / utility classes from old Drupal 6 site.
 *
 * See: http://www.aamds.org/css-class-samples-and-styleguide
 *
 */

/**
 * Table styles (that go beyond normal bootstrap tables)
 */

/* No borders */
main[role=main] article table.plain,
main[role=main] article table.plain th,
main[role=main] article table.plain td {
  border: none;
}

/* 2 and 3 column tables. */
main[role=main] article table.cols-2 td,
main[role=main] artstandaicle table.cols-2 th {
  width: 50%;
}
main[role=main] article table.cols-3 td,
main[role=main] article table.cols-3 th {
  width: 33%;
}

/* Styles for tables (borders, backgrounds, etc.) */
main[role=main] article table.tablestyle-1,
main[role=main] article table.tablestyle-1 th,
main[role=main] article table.tablestyle-1 td {
  border: none;
}
main[role=main] article table.tablestyle-1 {
  border-collapse: collapse;

  width: 100%;
  margin: var(--size-sm) 0;
  background-color: var(--color-grey-lt);
}
main[role=main] article table.tablestyle-1 th {
  padding: var(--size-sm);

  background-color: var(--color-grey);
  color: var(--color-black);
}
/*main[role=main] article table.tablestyle-1 th.first {}*/
/*main[role=main] article table.tablestyle-1 th.last {}*/
main[role=main] article table.tablestyle-1 tbody tr {
  border-bottom: 1px solid var(--color-grey-dk);
}
main[role=main] article table.tablestyle-1 td {
  padding: 8px;
}

/* tablestyle-2: Very simple - no borders, no background. */
main[role=main] article table.tablestyle-2,
main[role=main] article table.tablestyle-2 th,
main[role=main] article table.tablestyle-2 td
{
  border: none;
}
main[role=main] article table.tablestyle-2 {
  border-collapse: collapse;
  width: 100%;
  margin: var(--size-sm) 0 var(--size-sm) 0;
}
main[role=main] article table.tablestyle-2 th {
  padding: var(--size-sm);
  border-bottom: 2px solid var(--color-grey-dk);
  background-color: var(--color-grey-lt);
}
/*main[role=main] article table.tablestyle-2 th.first {}*/
/*main[role=main] article table.tablestyle-2 th.last {}*/
main[role=main] article table.tablestyle-2 tbody tr {
  border-bottom: 1px solid var(--color-grey-dk);
}
main[role=main] article table.tablestyle-2 td {
  padding: var(--size-sm);
}


/**
 * NRD: Classes for photos inside of content (alternate borders, spacing, etc.)
 */
main[role=main] img.photostyle-1,
main[role=main] img.photostyle-1-fl,
main[role=main] img.photostyle-1-fr
{
  padding: 5px;
  border: 1px solid var(--color-grey-xdk);
  background-color: var(--color-grey-lt);
}
main[role=main] img.photostyle-1-fl {
  margin: 0 1em 0 0;
  float: left;
}
main[role=main] img.photostyle-1-fr {
  margin: 0 0 0 1em;
  float: right;
}

main[role=main] img.photostyle-2,
main[role=main] img.photostyle-2-fl,
main[role=main] img.photostyle-2-fr
{
  padding: 0;
  border: 5px solid var(--color-grey);
  background-color: var(--color-grey-lt);
}
main[role=main] img.photostyle-2-fl {
  margin: 0 1em 0 0;
  float:left;
}
main[role=main] img.photostyle-2-fr {
  margin: 0 0 0 1em;
  float:right;
}

main[role=main] img.photostyle-3,
main[role=main] img.photostyle-3-fl,
main[role=main] img.photostyle-3-fr
{
  padding: 0;
  border: 5px solid var(--color-grey);
    background-color: var(--color-grey-lt);
}
main[role=main] img.photostyle-3-fl {
  margin: 0 1em 0 0;
  float: left;
}
main[role=main] img.photostyle-3-fr {
  margin: 0 0 0 1em;
  float: right;
}


/**
 * NRD: Classes for links inside of content (alternate borders, spacing, etc.)
 */
main[role=main] a.buttonlike
{
  display: block;
  padding: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: var(--color-grey-xdk);
}


/**
 * NRD: Callout boxes (for inside of content)
 */
#content-leader-page-intro div.callout,
main[role=main] div.callout,
.main-container-bottom section.callout {
  background-color: var(--color-grey);
  border: 1px solid var(--color-grey-dk);
  margin: var(--size-md) 0;
}
#content-leader-page-intro div.callout h2,
main[role=main] div.callout h2,
.main-container-bottom section.callout h2 {
  color: var(--color-primary);
  font-family: var(--font-regular-family); font-weight: var(--font-regular-weight); font-style: var(--font-regular-style);
  font-size: var(--size-lg);
  line-height: var(--size-lg-lh);
  margin: 0;
  padding: var(--size-sm);
  border-bottom: 1px solid var(--color-primary);
}
#content-leader-page-intro div.callout p,
#content-leader-page-intro div.callout blockquote,
#content-leader-page-intro div.callout ul,
#content-leader-page-intro div.callout ol,
main[role=main] div.callout p,
main[role=main] div.callout blockquote,
main[role=main] div.callout ul,
main[role=main] div.callout ol,
.main-container-bottom section.callout p,
.main-container-bottom section.callout blockquote,
.main-container-bottom section.callout ul,
.main-container-bottom section.callout ol {
  margin: 0;
  padding: var(--size-sm);
}
#content-leader-page-intro div.callout ul,
#content-leader-page-intro div.callout ol,
main[role=main] div.callout ul,
main[role=main] div.callout ol,
.main-container-bottom section.callout ul,
.main-container-bottom section.callout ol {
  margin-left: var(--size-sm);
  padding-top: 0;
}
/*#content-leader-page-intro div.callout blockquote,
main[role=main] div.callout blockquote,
.main-container-bottom section.callout blockquote {
}*/
#content-leader-page-intro div.callout blockquote img.photostyle-1-fl,
#content-leader-page-intro div.callout blockquote img.photostyle-1-fr,
main[role=main] div.callout blockquote img.photostyle-1-fl,
main[role=main] div.callout blockquote img.photostyle-1-fr,
.main-container-bottom div.callout blockquote img.photostyle-1-fl,
.main-container-bottom div.callout blockquote img.photostyle-1-fr {
  border-color: var(--color-grey);
}

/* Blockquote - quote decorations before only */
.region .block blockquote,
main[role=main] .region-content blockquote {
  font-family: var(--font-light-family); font-weight: var(--font-light-weight); font-style: var(--font-light-style);
  font-size: var(--size-lg);
  line-height: var(--size-lg-lh);
  border: 4px solid var(--color-alt1);
  padding: var(--size-xxl);
}
.region .block blockquote:before,
main[role=main] .region-content blockquote:before {
  display: block;
  height: 0;
  content: '“';
  color: var(--color-primary-xlt);
  margin-left: -40px;
  font-size: 150px;
}

/* Blockquote - quote decorations before only */
.region .block blockquote.size-md,
main[role=main] .region-content blockquote.size-md {
  font-family: var(--ffm-light);
  font-size: var(--size-md);
  line-height: var(--size-md-lh);
  border: 4px solid var(--color-alt1);
  padding: var(--size-lg) var(--size-sm) var(--size-lg) var(--size-lg);
}
@media screen and (max-width: 991px) /* --size-max-width-md */ {
  .region .block blockquote.size-md,
  main[role=main] .region-content blockquote.size-md {
    padding: var(--size-md-alt1) var(--size-sm) var(--size-md-alt1) var(--size-md-alt1);
  }
}

.region .block blockquote.size-md:before,
main[role=main] .region-content blockquote.size-md:before {
  display: block;
  height: 0;
  content: '“';
  color: var(--color-primary-xlt);
  margin-left: -20px;
  font-size: 75px;
}

/* Blockquote - quote decorations before AND after
.region .block blockquote:before,
main[role=main] .region-content blockquote:before {
  content: open-quote;
  color: var(--color-primary-xlt);
  font-size: var(--size-hanging-quote);

  display: block;
  height: 0;
}
.region .block blockquote:after,
main[role=main] .region-content blockquote:after {
  content: close-quote;
  color: var(--color-primary-xlt);
  font-size: var(--size-hanging-quote);

  display: block;
  height: 0;
  float: right;
  margin-top:0.5em;
  margin-right:0.33em;
}
*/

/**
 * NRD: Success tip boxes (for Standing Up section).
 */
main[role=main] div.success-tip-1,
main[role=main] div.success-tip-2,
main[role=main] div.success-tip-3,
main[role=main] div.success-tip-4,
main[role=main] div.success-tip-5
{
  margin: 0 10px 10px 10px;
  padding: 80px 4px 10px 4px; /* Leave room for the background graphic. */
  float: right;
  width: 250px;

  color: var(--color-primary);

  background-repeat: no-repeat;
  background-position: 0 6px;

  /* background-color: #F9F5EA; */
  border-bottom: 2px solid var(--color-grey);
  border-top: 2px solid var(--color-grey);

  /* border-radius: 5px;
  -moz-border-radius: 5px; */
}
main[role=main] div.success-tip-1 a,
main[role=main] div.success-tip-2 a,
main[role=main] div.success-tip-3 a,
main[role=main] div.success-tip-4 a,
main[role=main] div.success-tip-5 a
{
  color: var(--color-secondary);
  font-size: 0.85em;
  line-height: 1.0em;
}

main[role=main] div.success-tip-1 {
  background-image: url("images/backgrounds/successtips_1.gif");
}
main[role=main] div.success-tip-2 {
  background-image: url("images/backgrounds/successtips_2.gif");
}
main[role=main] div.success-tip-3 {
  background-image: url("images/backgrounds/successtips_3.gif");
}
main[role=main] div.success-tip-4 {
  background-image: url("images/backgrounds/successtips_4.gif");
}
main[role=main] div.success-tip-5 {
  background-image: url("images/backgrounds/successtips_5.gif");
}

main[role=main] div.success-tip-1 ul
main[role=main] div.success-tip-1 ol,
main[role=main] div.success-tip-2 ul,
main[role=main] div.success-tip-2 ol,
main[role=main] div.success-tip-3 ul,
main[role=main] div.success-tip-3 ol,
main[role=main] div.success-tip-4 ul,
main[role=main] div.success-tip-4 ol,
main[role=main] div.success-tip-5 ul,
main[role=main] div.success-tip-5 ol
{
  margin: 0 0 0 18px; /* Align content with text in background image. */
}
main[role=main] div.success-tip-1 p,
main[role=main] div.success-tip-2 p,
main[role=main] div.success-tip-3 p,
main[role=main] div.success-tip-4 p,
main[role=main] div.success-tip-5 p
{
  margin: 0 0 0 28px; /* Align content with text in background image. */
}


/**
 * NRD: container for holding floated photos and/or text.
 */
main[role=main] div.photo-and-text img.photostyle-1-fl,
main[role=main] div.photo-and-text img.photostyle-2-fl,
main[role=main] div.photo-and-text img.photostyle-3-fl
{
  margin-left: var(--size-sm);
}
main[role=main] div.photo-and-text img.photostyle-1-fr,
main[role=main] div.photo-and-text img.photostyle-2-fr,
main[role=main] div.photo-and-text img.photostyle-3-fr
{
  margin-right: var(--size-sm);
}


/**
 * NRD: Callout "Full" boxes (for inside of content)
 */
main[role=main] div.callout-full {
  margin: var(--size-sm) 0;
  padding-bottom: var(--size-sm);
  width: 100%;

  background-color: var(--color-grey);
  color: var(--color-primary);
}
main[role=main] div.callout-full h2 {
  background-color: var(--color-primary);
  color: var(--color-primary-inv);

  font-family: var(--font-light-family); font-weight: var(--font-light-weight); font-style: var(--font-light-style);
  font-size: var(--size-lg);
  line-height: var(--size-lg-lh);

  margin: 0;
  padding: var(--size-sm);
}
main[role=main] div.callout-full p,
main[role=main] div.callout-full ul,
main[role=main] div.callout-full ol {
  margin: var(--size-sm);
}


/**
 * NRD: List with checkboxes instead of bullets (for the Standing Up section, or elsewhere)
 */
main[role=main] ul.check-boxes {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
}
main[role=main] ul.check-boxes li {
  background-image: url("images/elements/box_sm.jpg");
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 24px;
}
main[role=main] ul.check-boxes li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;
}
main[role=main] ul.check-boxes li ul li {
  background: none;
  border-bottom: none;
  padding-left: 0.25em;
}


/**
 * NRD: List with checkmarks instead of bullets (for the Standing Up section, or elsewhere)
 */
main[role=main] ul.check-marks {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
}
main[role=main] ul.check-marks li {
  background-image: url("images/elements/check.jpg");
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 36px;
  min-height: 26px; /* Make sure check-mark images are not cut off on small lines of text */
}
main[role=main] ul.check-marks li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;
}
main[role=main] ul.check-marks li ul li {
  background: none;
  border-bottom: none;
  padding-left: 0.25em;
}


/**
 * NRD: Tabular list with checkboxes instead of bullets (for the Standing Up section, or elsewhere)
 */
main[role=main] ul.check-boxes-cols-3 {
  list-style: none;
  list-style-position: inside;

  margin: 0 1em 0 1em;
  padding: 0;

  display: table;
  width: 100%;
}
main[role=main] ul.check-boxes-cols-3 li {
  background-image: url("images/elements/box_sm.jpg");
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 24px;

  display: table-cell;
  width: 33%;
}
main[role=main] ul.check-boxes-cols-3 li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;


}
main[role=main] ul.check-boxes-cols-3 li ul li {
  background: none;
  border-bottom: none;
  padding-left: 0.25em;
}


/**
 * NRD: Table-based "boxy" navigation tables (such as the top of the donation page).
 */
main[role=main] table.box-navigation {
  width: 100%;
  border: none;
  border-spacing: 10px;
  border-collapse: separate;
}
main[role=main] table.box-navigation td,
main[role=main] table.box-navigation th
{
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
main[role=main] table.box-navigation td p {
  padding: 0;
  margin: 0;
}
main[role=main] table.box-navigation td p img {
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
main[role=main] table.box-navigation th a,
main[role=main] table.box-navigation td a
{
  font-style: inherit;
  color: inherit;
}

main[role=main] table.box-navigation th em,
main[role=main] table.box-navigation td em
{
  font-style: inherit;
  color: inherit;
	text-transform: uppercase;
}
main[role=main] table.box-navigation th a.buttonlike,
main[role=main] table.box-navigation td a.buttonlike
{
  /* NRD: These override normal .buttonlike margins. */
  margin-left: 5px;
  margin-right: 5px;
}
/*
main[role=main] table.box-navigation td.navigation-opt-1 {
  background-color: #35678C;
}
main[role=main] table.box-navigation td.navigation-opt-1 a.buttonlike {
  background-color: #5B8DB2;
}
main[role=main] table.box-navigation td.navigation-opt-2 {
  background-color: #AF282E;
}
main[role=main] table.box-navigation td.navigation-opt-2 a.buttonlike {
  background-color: #D94927;
}
main[role=main] table.box-navigation td.navigation-opt-3 {
  background-color: #5B8DB2;
}
main[role=main] table.box-navigation td.navigation-opt-3 a.buttonlike {
  background-color: #35678C;
}
*/

/**
 * NRD: vcard/hcard items in the site content.
 */
/*

main[role=main] .vcard {
  padding: 10px;
  color: #333;
  background-color: var(--color-grey-lt);
}
main[role=main] .vcard .org {
  font-size: 1.1em;
  line-height: 1.33em;
  font-weight: bold;
  margin: 0;
}
main[role=main] .vcard .new-section {
  border-top: 1px solid var(--color-grey);
  padding-top: 1em;
}
*/

/**
 * NRD: Styles for "toggle" items (e.g. FAQ style question/answer toggles).
 */
/*
<div class="toggle-trigger"><a href="#">For more info, click here...</a></div>
<div class="toggle-container">
  <div class="toggle-content">
    <p>More info goes here... Lorem ipsum a lacus tempus volutpat non quis sapien. Proin eget erat at arcu pellentesque tempor non at dolor. Aliquam mattis blandit ante eu cursus. Curabitur congue gravida sapien et venenatis. </p>
  </div>
</div>
*/
main[role=main] div.toggle-trigger {
  /* Same as a.buttonlike. */
  display: block;
  padding: var(--size-sm) var(--size-sm) var(--size-sm) var(--size-md);
  border-radius: var(--size-sm);
  background-color: var(--color-alt1);
  background-image: url("images/icojoy-webdev1/icons/Grey/GIF/maximize.gif");
  background-repeat: no-repeat;
  background-position: 3px 12px;
}
main[role=main] div.toggle-trigger-active {
  background-image: url("images/icojoy-webdev1/icons/Grey/GIF/minimize.gif");
}
main[role=main] div.toggle-trigger a {
  color: var(--color-white);
}
/*main[role=main] div.toggle-trigger a:hover {}*/
main[role=main] div.toggle-container {
  padding: 0 0 0 var(--size-lg);
  border-bottom: 1px solid var(--color-grey);
}
/*main[role=main] div.toggle-content {}*/


/**
 * NRD: Styles for horizontal lists
 */
main[role=main] ul.horiz-nav-auto-active {
  /* horizontal navigation lists should be the same as .breadcrumb */
  border-style: none;
  border-width: 0;

  /* Standard callout / notice styling. */
  border-bottom: 1px solid #e7e6e5;
  background: #faf9f8;
  padding: 0.5em;
  margin: 0 0 1em 0;
  color: #333;

  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

main[role=main] ul.horiz-nav-auto-active li {
  margin-left: 0;
  margin-bottom: 0;
  padding: 2px 15px 5px;
  list-style: none;
  display: inline-block;
  border-right: 1px solid #e7e6e5;
}
main[role=main] ul.horiz-nav-auto-active li a {
  color: #8c3232;
}
main[role=main] ul.horiz-nav-auto-active li a:visited {
  color: #8c6c6c;
}
main[role=main] ul.horiz-nav-auto-active li a:hover,
main[role=main] ul.horiz-nav-auto-active li a:focus {
  color: #989295;
}
main[role=main] ul.horiz-nav-auto-active li a.active {
  color: #999999;
  cursor: default;
}

/**
 * NRD: Styles for columns and rows of logos.
 */
.logogrid {
  /* Variables */
  --size-logo-3by2-base-w: 1440px;
  --size-logo-3by2-base-h: 960px;
  --size-logo-margin: 12px;
  /* These should *include* margins and padding */
  --size-col-default: 110px;
  --size-col-xxl: 100px;
  --size-col-xl: 90px;
  --size-col-lg: 80px;
  --size-col-md: 70px;

  /* DO NOT EDIT */
    --ratio-3by2: 0.6666667;
}
.logogrid {
  /* text-align: center; */
}
.logogrid a {
}
.logogrid a:hover {
  background-color:transparent;
}
.logogrid img {
  background-color: var(--color-grey);
  border: var(--size-logo-margin) solid var(--color-grey-dk);
  margin: 0 0 var(--size-logo-margin) 0;
  padding: var(--size-logo-margin);
}

/* 2024 - 3:2 logos */
.logogrid img.logo-3by2-col-6 {
  width: calc(var(--size-col-default)*6);
  height: calc(var(--size-col-default)*6*var(--ratio-3by2));
}
.logogrid img.logo-3by2-col-4 {
  width: calc(var(--size-col-default)*4);
    height: calc(var(--size-col-default)*4*var(--ratio-3by2));
}
.logogrid img.logo-3by2-col-2 {
  width: calc(var(--size-col-default)*2);
  height: calc(var(--size-col-default)*2*var(--ratio-3by2));
}
@media screen and (min-width: 1400px) /* Above XXL */ {
  .logogrid img { border-color: #f00; }
  .logogrid img.logo-3by2-col-6 {
    width: calc(var(--size-logo-3by2-base-w)/2.33);
    height: calc(var(--size-logo-3by2-base-h)/2.33);
  }
  .logogrid img.logo-3by2-col-4 {
    width: calc(var(--size-logo-3by2-base-w)/4.6);
    height: calc(var(--size-logo-3by2-base-h)/4.6);
  }
  .logogrid img.logo-3by2-col-2 {
    width: calc(var(--size-logo-3by2-base-w)/6.9);
    height: calc(var(--size-logo-3by2-base-h)/6.9);
  }
}
@media screen and (max-width: 1399.98px) /* XXL */ {
  .logogrid img { border-color: #f80; }
  .logogrid img.logo-3by2-col-6 {
    width: calc(var(--size-logo-3by2-base-w)/2.4);
    height: calc(var(--size-logo-3by2-base-h)/2.4);
  }
  .logogrid img.logo-3by2-col-4 {
    width: calc(var(--size-logo-3by2-base-w)/4.8);
    height: calc(var(--size-logo-3by2-base-h)/4.8);
  }
  .logogrid img.logo-3by2-col-2 {
    width: calc(var(--size-logo-3by2-base-w)/7.2);
    height: calc(var(--size-logo-3by2-base-h)/7.2);
  }
}
@media screen and (max-width: 1199.98px) /* XL */ {
  .logogrid img { border-color: #ff0; }
  .logogrid img.logo-3by2-col-6 {
    width: calc(var(--size-logo-3by2-base-w)/2.5);
    height: calc(var(--size-logo-3by2-base-h)/2.5);
  }
  .logogrid img.logo-3by2-col-4 {
    width: calc(var(--size-logo-3by2-base-w)/5.0);
    height: calc(var(--size-logo-3by2-base-h)/5.0);
  }
  .logogrid img.logo-3by2-col-2 {
    width: calc(var(--size-logo-3by2-base-w)/7.5);
    height: calc(var(--size-logo-3by2-base-h)/7.5);
  }
}
@media screen and (max-width: 991.98px) /* LG */ {
  .logogrid img { border-color: #0f0; }
  .logogrid img.logo-3by2-col-6 {
    width: 100%;
    height:auto;
  }

  .logogrid img.logo-3by2-col-4 {
    width: 100%;
    height: auto;
  }

  .logogrid img.logo-3by2-col-2 {
    width: 100%;
    height: auto;
  }
}

/* Deprecated - 7:2 logos */
.logogrid img.logo-7by2-col-6 {
  width: 510px;
  height: 146px;
}
.logogrid img.logo-7by2-col-4 {
  width: 252px;
  height: 72px;
}
.logogrid img.logo-7by2-col-2 {
  width: 123px;
  height: 35px;
}