/**
 * 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-container article table.plain,
.main-container article table.plain th,
.main-container article table.plain td {
  border: none;
}

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

/* Styles for tables (borders, backgrounds, etc.) */
.main-container article table.tablestyle-1,
.main-container article table.tablestyle-1 th,
.main-container article table.tablestyle-1 td {
  border: none;
}
.main-container article table.tablestyle-1 {
  border-collapse: collapse;
  
  width: 100%;
  margin: 10px 0 10px 0;
  background-color: #faf9f8;
}
.main-container article table.tablestyle-1 th {
  padding: 8px 4px 8px 8px;  
  
  background-color: #D9D5CA;
  color: #333; 
}
.main-container article table.tablestyle-1 th.first {
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
}
.main-container article table.tablestyle-1 th.last {
  border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
}
.main-container article table.tablestyle-1 tbody tr {
  border-bottom: 1px solid #e7e6e5;
}
.main-container article table.tablestyle-1 td {
  padding: 8px;
}

/* tablestyle-2: Very simple - no borders, no background. */
.main-container article table.tablestyle-2,
.main-container article table.tablestyle-2 th,
.main-container article table.tablestyle-2 td
{
  border: none;
}
.main-container article table.tablestyle-2 {
  border-collapse: collapse;
  
  width: 100%;
  margin: 10px 0 10px 0;
}
.main-container article table.tablestyle-2 th {
  padding: 8px 4px 8px 8px;  
  border-bottom: 2px solid #e7e6e5;
  background-color: #faf9f8;
}
.main-container article table.tablestyle-2 th.first {
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
}
.main-container article table.tablestyle-2 th.last {
  border-top-right-radius: 5px;
  -moz-border-radius-topright: 5px;
}
.main-container article table.tablestyle-2 tbody tr {
  border-bottom: 1px solid #e7e6e5;
}
.main-container article table.tablestyle-2 td {
  padding: 8px;
}


/** 
 * NRD: Classes for photos inside of content (alternate borders, spacing, etc.)
 */ 
.main-container img.photostyle-1,
.main-container img.photostyle-1-fl,
.main-container img.photostyle-1-fr
{
  padding: 5px;
  border: 1px solid #e7e6e5;
  background-color: #faf9f8;
}
.main-container img.photostyle-1-fl {
  margin: 0 1em 0 0;
  .pull-left; 
}
.main-container img.photostyle-1-fr { 
  margin: 0 0 0 1em;
  .pull-right;
}

.main-container img.photostyle-2,
.main-container img.photostyle-2-fl,
.main-container img.photostyle-2-fr
{
  padding: 0;
  border: 5px solid #e7e6e5;
  background-color: #faf9f8;
}
.main-container img.photostyle-2-fl {
  margin: 0 1em 0 0;
  .pull-left;
}
.main-container img.photostyle-2-fr { 
  margin: 0 0 0 1em;
  .pull-right;
}

.main-container img.photostyle-3,
.main-container img.photostyle-3-fl,
.main-container img.photostyle-3-fr
{
  padding: 0;
  border: 10px solid #e7e6e5;
  background-color: #faf9f8;
}
.main-container img.photostyle-3-fl {
  margin: 0 1em 0 0;
  .pull-left;
}
.main-container img.photostyle-3-fr { 
  margin: 0 0 0 1em;
  .pull-right;
}


/**
 * NRD: Classes for links inside of content (alternate borders, spacing, etc.)
 */
.main-container a.buttonlike
{
  display: block;
  padding: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #faf9f8;
}


/** 
 * NRD: Callout boxes (for inside of content)
 */
 
 
 
 /*
   background-color: lighten(@grayLighter,3%);
  border: 1px solid @grayLighter;
*/
#content-leader-page-intro div.callout,
.main-container div.callout,
.main-container-bottom section.callout {
  /* NRD: Warm grey
  background-color: @section_color_combo_one_offwhite;
  color: darken(@section_color_combo_one_offwhite, 50%);
  */
  background-color: #faf9f8;
  border: 1px solid #e7e6e5;
  margin: 1em 0;
}
#content-leader-page-intro div.callout h2,
.main-container div.callout h2,
.main-container-bottom section.callout h2 {
  /* NRD: Warm grey
  background-color: darken(@section_color_combo_one_offwhite, 50%);
  color: @section_color_combo_one_offwhite;
  */
  background-color: #faf9f8;
  border: 1px solid #e7e6e5;
  font-size: 1.1em;
  line-height: 1.33em;
  margin: 0;
  padding: 1em;
}
#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-container div.callout p,
.main-container div.callout blockquote, 
.main-container div.callout ul,
.main-container 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: 1em;
}
#content-leader-page-intro div.callout ul,
#content-leader-page-intro div.callout ol,
.main-container div.callout ul,
.main-container div.callout ol,
.main-container-bottom section.callout ul,
.main-container-bottom section.callout ol {
  margin-left: 1em;
  padding-top: 0;
}
#content-leader-page-intro div.callout blockquote,
.main-container div.callout blockquote,
.main-container-bottom section.callout blockquote, {
  /* NRD: Warm grey
  background-color: darken(@section_color_combo_one_offwhite, 20%);
  border-bottom: 1px solid darken(@section_color_combo_one_offwhite, 40%);
  */
  /*
  background-color: #faf9f8;
  border: 1px solid #e7e6e5;
  border-right: 5px solid #e7e6e5;

  padding-bottom: 0.75em;
  font-size: 0.85em;
  line-height: 1.4em;
  */
}

#content-leader-page-intro div.callout blockquote img.photostyle-1-fl, 
#content-leader-page-intro div.callout blockquote img.photostyle-1-fr,
.main-container div.callout blockquote img.photostyle-1-fl, 
.main-container 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: #e7e6e5;
}

/* hanging opening quote */
.main-container .region-content blockquote:before {
	display: block;
	height: 0;
	content: '“';
	margin-left: -.95em; font: italic 400%/1 Cochin,Georgia,"Times New Roman", serif;
	color: #999;
}
.main-container .region-content blockquote p {
  font-size: 116%;
}

/** 
 * NRD: Success tip boxes (for Standing Up section).
 */
.main-container div.success-tip-1,
.main-container div.success-tip-2,
.main-container div.success-tip-3,
.main-container div.success-tip-4,
.main-container 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: #444;

  background-repeat: no-repeat;
  background-position: 0 6px;
  
  /* background-color: #F9F5EA; */
  border-bottom: 2px solid #e9e5dA;
  border-top: 2px solid #e9e5dA;
  
  /* border-radius: 5px;
  -moz-border-radius: 5px; */
}
.main-container div.success-tip-1 a,
.main-container div.success-tip-2 a,
.main-container div.success-tip-3 a,
.main-container div.success-tip-4 a,
.main-container div.success-tip-5 a
{
  font-color: #BE3219;
  font-size: 0.85em;
  line-height: 1.0em;
}

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

.main-container div.success-tip-1 ul
.main-container div.success-tip-1 ol,
.main-container div.success-tip-2 ul,
.main-container div.success-tip-2 ol,
.main-container div.success-tip-3 ul,
.main-container div.success-tip-3 ol,
.main-container div.success-tip-4 ul,
.main-container div.success-tip-4 ol,
.main-container div.success-tip-5 ul,
.main-container div.success-tip-5 ol
{
  margin: 0 0 0 18px; /* Align content with text in background image. */
}
.main-container div.success-tip-1 p,
.main-container div.success-tip-2 p,
.main-container div.success-tip-3 p, 
.main-container div.success-tip-4 p, 
.main-container 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-container div.photo-and-text {
  margin: 10px 0 10px 0;
  padding: 10px 0 10px 0;

  background-color: darken(@section_color_combo_one_offwhite, 20%);
  color: #444;

  border-radius: 5px;
  -moz-border-radius: 5px;

  /* Clear floats (such as photostyle-1-fl and photostyle-1-fr) */
  overflow: auto;
  width: 100%;
}
.main-container div.photo-and-text img.photostyle-1-fl,
.main-container div.photo-and-text img.photostyle-2-fl,
.main-container div.photo-and-text img.photostyle-3-fl
{
  margin-left: 10px;
}
.main-container div.photo-and-text img.photostyle-1-fr,
.main-container div.photo-and-text img.photostyle-2-fr,
.main-container div.photo-and-text img.photostyle-3-fr
{
  margin-right: 10px;
}


/** 
 * NRD: Callout "Full" boxes (for inside of content)
 */
.main-container div.callout-full {
  margin: 10px 0 10px 0;
  padding-bottom: 5px;
  width: 100%;
  
  background-color: #f9f5eA;
  color: #444;

  border-radius: 5px;
  -moz-border-radius: 5px;
}
.main-container div.callout-full h2 {
  background-color: #d9d5cA;
  color: #333;
  
  font-size: 1.1em;
  line-height: 1.33em;
  margin: 0;
  padding: 10px;
  	
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
}
.main-container div.callout-full p, 
.main-container div.callout-full ul,
.main-container div.callout-full ol {
  margin: 10px;
}


/** 
 * NRD: List with checkboxes instead of bullets (for the Standing Up section, or elsewhere)
 */
.main-container ul.check-boxes {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
}
.main-container ul.check-boxes li {
  background-image: url("images/elements/box_sm.jpg");
  background-repeat: no-repeat;
  background-position: 0 1px;
  padding-left: 24px;
}
.main-container ul.check-boxes li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;
}
.main-container 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-container ul.check-marks {
  list-style: none;
  list-style-position: inside;
  padding-left: 0;
}
.main-container 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-container ul.check-marks li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;
}
.main-container 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-container ul.check-boxes-cols-3 {
  list-style: none;
  list-style-position: inside;

  margin: 0 1em 0 1em;
  padding: 0;
  
  display: table;
  width: 100%;
}
.main-container 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-container ul.check-boxes-cols-3 li ul {
  list-style-image: none;
  list-style: round;
  padding-left: 0;
  

}
.main-container 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-container table.box-navigation {
  width: 100%;
  border: none;
  border-spacing: 10px;
  border-collapse: separate;
}
.main-container table.box-navigation td,
.main-container table.box-navigation th 
{
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
}
.main-container table.box-navigation td p {
  padding: 0;
  margin: 0;
}
.main-container table.box-navigation td p img {
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.main-container table.box-navigation th a,
.main-container table.box-navigation td a
{
  font-style: inherit;
  color: inherit;
}

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


/** 
 * NRD: vcard/hcard items in the site content.
 */
.main-container .vcard {
  padding: 10px;
  
  /* background-color: #E9E5DA;
  color: #444;
  border-radius: 5px;
  -moz-border-radius: 5px; */

  color: #333;
  background-color: #faf9f8;
}

.main-container .vcard .org {
  
  font-size: 1.1em;
  line-height: 1.33em;
  font-weight: bold;
  margin: 0;
}
.main-container .vcard .new-section {
  border-top: 1px solid #ccc;
  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-container div.toggle-trigger {
  /* Same as a.buttonlike. */
  display: block;
  /* padding: 5px 5px 5px 20px; */
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #5B8DB2; /* Medium blue */
  /* background-color: #D9D5CA; *//* Warm grey */
  /* background-color: #ccc; *//* Cool grey */
  /* margin-bottom: 4px; */

  background-image: url("images/icojoy-webdev1/icons/Grey/GIF/maximize.gif");
  background-repeat: no-repeat;
  /* background-position: 3px 6px; */
  background-position: 3px 12px;
}
.main-container div.toggle-trigger-active {
  background-image: url("images/icojoy-webdev1/icons/Grey/GIF/minimize.gif");
}
.main-container div.toggle-trigger a {
  color: #f6ffff; /* Use with medium blue or other darker backgrounds. */
}
.main-container div.toggle-trigger a:hover {
}
.main-container div.toggle-container {
  padding: 0 0 0 40px;
  border-bottom: 1px solid #e7e6e5;
}
.main-container div.toggle-content {
}


/**
 * NRD: Styles for "notice" items.
 */
.main-container p.intro,
.main-container p.notice,
.main-container p.audience, 
.main-container p.important {
  font-size: 133%;
  /* Standard callout / notice styling. */
  /* border-top: 1px solid #e7e6e5; */
  /* border-radius: 5px; */
  border-bottom: 1px solid #e7e6e5;
  background: #faf9f8;
  padding: 1em;
  margin: 0 0 1em 0;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.main-container p.notice {
  background: #e5e5db;
}

.main-container p.important {
  background: #544a4f;
  color: #fff;
}
.main-container p.important a {
  color: #e7e6e5;
}

.main-container p.audience-patients,
body.context-patients-section .main-container p.audience {
  background: #e3d0d2;
}
.main-container p.audience-caregivers,
body.context-caregivers-section .main-container p.audience {
  background: #d5dbde;
}
.main-container p.audience-professionals,
body.context-professionals-section .main-container p.audience {
  background: #e3ebf0;
}

.main-container p.audience-patients a.lexicon-term,
body.context-patients-section .main-container p.audience a.lexicon-term,
.main-container p.audience-caregivers a.lexicon-term,
body.context-caregivers-section .main-container p.audience a.lexicon-term,
.main-container p.audience-professionals a.lexicon-term,
body.context-professionals-section .main-container p.audience a.lexicon-term {
  color: #555453;
}

/**
 * NRD: Styles for horizontal lists
 */
#content ul.horiz-nav-auto-active {
  margin-left: 0;
  padding-left: 0;
  display: inline;
  color: #444;
  padding: 10px;
} 
#content ul.horiz-nav-auto-active li {
  margin-left: 0;
  margin-bottom: 0;
  padding: 2px 15px 5px;
  list-style: none;
  display: inline;

  border-radius: 5px;
  -moz-border-radius: 5px;
  background-color: #336892;
}
#content ul.horiz-nav-auto-active li a {
  color: #fff;
}
#content ul.horiz-nav-auto-active li a.active {
  color: #5b8db2;
}

/**
 * NRD: Styles for columns and rows of logos.
 */
.logogrid {
}
.logogrid img {
  border: 1px solid #f0f0f0;
  margin: 0 0 3px 0;
  padding: 2px;
}
.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;
}
.logogrid a {
  color: #f0f0f0;
}