/**************************************************************************************
 * WWFH-V?.CSS 
 * 
 * A collection of CSS definitions specific to the WWFH WI website. 
 * 
 * 2026-05-1: Created 
 **************************************************************************************/


/**************************************************************************************
 * WWFH Color Scheme 
 **************************************************************************************
Dark Green: #325125 
Med Dark Green: #5c7d20 
Med Light Green: #88ab3e 
Light Green: #a3bb6c 

Orange: #cd441b
Dark Red: #701a00

Dark Gray: #4d4d4d
Light Gray: #f4f4f4

Dark Blue: #003c69;
Dark Orange: #8d4833;


/**************************************************************************************
 * HTML Tags 
 * 
 * These are custom styling for basic HTML tags. 
 **************************************************************************************/
* {
  box-sizing: border-box;
}

html {
  font-family: "Lato", Arial, Helvetica, sans-serif;
  font-size: 100%;
  line-height: 1.65;
  color: #4d4d4d;
  height: 100%;
  overflow-y: scroll;
}

body {
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

input[type=submit], input[type=button] {
  padding: .5em;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffffff;
  border-color: #1b70b6;
  background-color: #1b70b6;
  cursor: pointer;
}

h1, h4 {
  color: #003c69;
}
h2 {
  color: #8d4833;
}
h3 {
  color: #4d4d4d;
}


/**************************************************************************************
 * JQuery UI 
 * 
 * These styles override the default styling from JQuery UI. 
 **************************************************************************************/
.ui-tooltip {
  max-width: 500px;
}
.ui-tooltip a {
  color: -webkit-link;
  text-decoration: underline;
}


/**************************************************************************************
 * Dropdown Navigation 
 * 
 * This navigation bar allows for nested menus and is triggered via a mouse click 
 * using hidden radio buttons. 
 **************************************************************************************/
.ddm-menu a { 
  display: block; 
  text-decoration: none; 
}
.ddm-menu label { 
  display: block; 
  padding: 0 .7em 0 .7em; 
}
.ddm-menu .ddm-ul { 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}
.ddm-menu .ddm-ul .ddm-li { 
  position: relative; 
  padding: 0; 
  margin: 0; 
  display: block; 
}
.ddm-menu .ddm-ul .ddm-li:hover { 
  background-color: #000000; 
}
.ddm-menu input { 
  display: none; 
}
.ddm-menu input+.ddm-ul { 
  display: none; 
}
.ddm-menu input:checked+.ddm-ul { 
  display: block; 
}

.ddm-menu > .ddm-ul { 
  float: left; 
  display: block; 
}
.ddm-menu > .ddm-ul > .ddm-li { 
  float: left; 
  width: auto; 
}
.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
  z-index: 99; 
  position: absolute; 
  max-width: 16em; 
  background-color: #f4f4f4; 
  list-style-type: none; 
}
.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul > .ddm-li { 
  padding: .5em .7em .5em 1.4em; 
  line-height: 1.3em; 
  list-style-type: none; 
}

.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-long { 
  min-width: 16em; 
}
.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-medium { 
  min-width: 13em; 
}
.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-short { 
  min-width: 100%; 
}

.ddm-menu .ddm-toggle { 
  cursor: pointer; 
  white-space: nowrap; 
}
.ddm-menu .ddm-arrow { 
  font-size: .6875em; 
  line-height: 0%; 
}
.ddm-menu .ddm-main a { 
  white-space: nowrap; 
}
.ddm-menu .ddm-top-level { 
  display: none; 
  padding-left: .2em; 
}
.ddm-menu .ddm-top-level+input+.ddm-ul { 
  display: block; 
}
.ddm-menu .ddm-no-toggle { 
  padding: 0 .7em 0 .7em; 
}
.ddm-menu .ddm-toggle-on { 
  background-color: #f4f4f4 !important; 
}
.ddm-menu .ddm-toggle-on label:hover { 
  background-color: #000000; 
}


@media only screen and (max-width : 1200px) { 
	.ddm-menu > .ddm-ul { 
    float: none; 
  }
	.ddm-menu > .ddm-ul > .ddm-li { 
    float: none; 
  }
	.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
    position: relative; 
    max-width: 100%; 
  }
	.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-long { 
    min-width: auto; 
  }
	.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-medium { 
    min-width: auto; 
  }
	.ddm-menu > .ddm-ul > .ddm-li > .ddm-ul.ddm-short { 
    min-width: auto; 
  }
  
	.ddm-menu .ddm-top-level { 
    display: block; 
  }
	.ddm-menu .ddm-top-level+input+.ddm-ul { 
    display: none; 
  }
	.ddm-menu .ddm-top-level+input:checked+.ddm-ul { 
    display: block; 
  }
}


/**************************************************************************************
 * Environment Banner 
 * 
 * The environment banner appears on the development and staging websites as a 
 * reminder that you are not viewing the production website and that the data is not 
 * necessarily up-to-date. 
 **************************************************************************************/
#environment-banner { 
  width: 100%;
  padding: 1em;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
}

#environment-name {
  font-size: 1.375rem;
  font-weight: bold;
}

#environment-info {
  
}


/**************************************************************************************
 * Site Banner 
 * 
 * The site banner appears on every page and includes the WWFH logo and main 
 * navigation bar. 
 **************************************************************************************/
#site-banner { 
  width: 100%;
  padding: 1em;
  text-align: left;
  background-color: #003c69;
  color: #ffffff;
  font-size: 1.375rem;
}

#site-banner-content {
  width: 1200px;
  margin: 0 auto;
}

#site-logo {
  
}

#site-logo img {
  max-height: 100px;
}

#site-tagline {
  line-height: 1.3;
  font-weight: 300;
}

#main-site-nav { 
	font-size: 1.125rem; 
  font-weight: normal; 
  width: 100%; 
  background-color: #cd441b; /*#333333;*/ 
  text-shadow: none; /*1px 1px 1px #1a3919;*/
  box-shadow: none; /*0px 2px 0px #1a3919, 0px -2px 0px #1a3919;*/ 
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: flex-start; 
  margin-bottom: 1em; 
}
#main-site-nav { 
  margin: 0 0; 
  padding: 0; 
  line-height: 2em; 
}  /* width: auto; == centered */
#main-site-nav label, #main-site-nav a { 
  color: #ffffff; 
}
#main-site-nav label:hover, #main-site-nav a:hover { 
  color: #ffffff;
}

#main-site-nav .ddm-menu {
  width: 1200px;
  margin: 0 auto;
}

#main-site-nav .ddm-menu .ddm-ul .ddm-li:hover { 
  background-color: #701a00 !important; /*#393939;*/
}
#main-site-nav .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
  background-color: #701a00 !important; /*#666666;*/
}
#main-site-nav .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul > .ddm-li { 
  border-top: 1px solid #ffffff; 
}
#main-site-nav .ddm-menu .ddm-toggle-on { 
  background-color: #701a00 !important; /*#666666 !important;*/
}
#main-site-nav .ddm-menu .ddm-toggle-on label:hover { 
  background-color: #701a00 !important; /*#393939;*/
}

#main-site-nav .ddm-subheading { 
  color: #ffffff; 
  background-color: #701a00 !important; /*#666666 !important;*/ 
}
#main-site-nav .ddm-indent-item a { 
  padding-left: 1em; 
}

@media only screen and (max-width: 800px) { 
	#site-logo img {
    /*max-height: 60px;*/
  } 
}

@media only screen and (max-width: 1000px) { 
	#main-site-nav { 
    width: 100%; margin: 0 0; 
  } 
}

@media only screen and (max-width: 1200px) { 
  #site-banner-content {
    width: 100%;
  }
  
	#main-site-nav { 
    justify-content: flex-start; 
  }
	#main-site-nav .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul > .ddm-li { 
    border-top: none; 
  }
}


/**************************************************************************************
 * Main Content 
 * 
 * This is where the content that is specific to each page lives. 
 **************************************************************************************/
main {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 2em;
  flex: 1 0 auto;
}

@media only screen and (max-width: 1200px) {
  main {
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
  }
}


/**************************************************************************************
 * Footer 
 * 
 * The footer appears at the bottom of every page. 
 **************************************************************************************/
footer { 
  width: 100%;
  padding: 1em;
  text-align: left;
  background-color: #003c69;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 300;
  flex-shrink: 0;
}

#footer-content {
  width: 1200px;
  margin: 0 auto;
}

#uwphi-branding img {
  height: 3.5em;
}

@media only screen and (max-width: 1200px) {
  #footer-content {
    width: 100%;
  }
}


/**************************************************************************************
 * Drawers 
 * 
 * These are blocks of content with a heading that will show/hide the content when the 
 * heading is clicked. 
 **************************************************************************************/
.drawer-block {
  border-bottom: 1px solid #d4d4d4;
}

.drawer-block .drawer-heading {
  color: #1b70b6;
  font-weight: 400;
  font-size: 20px;
  line-height: 2em;
  position: relative; 
  padding: 0 3.4375rem 0 0;
}
.drawer-block .drawer-heading:hover { 
  cursor: pointer; 
}

.drawer-block .drawer-heading.drawer-open span.minus, 
.drawer-block .drawer-heading.drawer-closed span.plus {
  display: inline-block; 
  font-size: 2em;
  font-weight: 300;
  position: absolute;
  right: .5em;
  top: 0;
  padding-left: .5em; 
}
.drawer-block .drawer-heading.drawer-closed span.minus, 
.drawer-block .drawer-heading.drawer-open span.plus { 
  display: none; 
}

.drawer-block .drawer-heading.drawer-open .drawer-subheading, 
.drawer-block .drawer-heading.drawer-closed .drawer-subheading {
  display: block;
  font-size: 1rem;
  font-weight: normal;
  color: #4d4d4d;
  padding-left: 1em;
}

.drawer-block .drawer-content {
  padding-left: 1em;
  padding-bottom: 2em;
  margin-bottom: 1em;
}

.drawer-block .drawer-content h4 {
  color: #8d4833;
  font-size: 1.25rem;
  font-weight: 400;
  margin-top: 2em;
  margin-bottom: 1em;
}
.drawer-block .drawer-content h4:first-child {
  margin-top: 1em;
}
.drawer-block .drawer-content p { 
  margin: 0; 
}
.drawer-block .drawer-content p+p { 
  margin-top: .7em; 
}


/**************************************************************************************
 * Informational Tables 
 * 
 * These are tables that display information is best viewed in columns. 
 **************************************************************************************/
.info-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d3d3d3;
}

.info-table thead {
  background-color: #f4f4f4;
  border: 1px solid #e4e4e4;
}
.info-table thead th {
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
  vertical-align: top;
  line-height: 1.35em;
  padding: 1em;
}

.info-table tbody {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
}
.info-table tbody tr:nth-child(even) {
  background-color: #f4f4f4;
}
.info-table tbody td {
  vertical-align: top;
  padding: 1em;
}


/**************************************************************************************
 * Ratings Table 
 **************************************************************************************/
.ratings-table thead {
  background-color: #ffffff;
  border-width: 0;
}
.ratings-table thead th {
  border-bottom: 2px solid #cd441b;
}
.ratings-table thead.additional-heading th {
  padding-top: 2em;
}

.ratings-table img {
  width: 200px;
}

@media only screen and (max-width: 650px) { 
  .ratings-table img {
    width: 150px;
  }
}


/**************************************************************************************
 * Strategy Search Results Table 
 **************************************************************************************/
.result-count {
  margin-bottom: .2em;
}

#strategy-table .hidden-column {
	display: none;
}

#strategy-table th span.sort-arrows {
	display: block;
  font-family: "Red Hat Text", "Lato", Arial, Helvetica, sans-serif;
}
#strategy-table th.ascending span.sort-arrows, #strategy-table th.descending span.sort-arrows {
	color: #cd441b;
}

#strategy-table td p {
  margin: 0;
}
#strategy-table td p+p {
  margin-top: 1em;
}


/**************************************************************************************
 * Strategy Search Form 
 **************************************************************************************/
#strategy-search-form .search-options {
  width: 100%;
  display: flex; 
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  border: 1px solid #d3d3d3;
  background-color: #f4f4f4;
}

#strategy-search-form .search-options > div {
  width: 50%;
  padding: 0 1em 1em 1em;
}

#strategy-search-form .search-options > div h3 {
  margin-bottom: .5em;
}

#strategy-search-form .search-options input[type=text] {
  width: 100%;
}

#strategy-search-form input[type=submit] {
  width: 100%;
  font-size: 1.125em;
  padding: .5em;
}

@media only screen and (max-width: 500px) { 
  #strategy-search-form .search-options {
    flex-wrap: wrap;
  }
  #strategy-search-form .search-options > div {
    width: 100%;
  }
}


/**************************************************************************************
 * Strategy Search Results Summary 
 **************************************************************************************/
#search-results-summary {
  display: flex; 
  justify-content: space-between;
}

#search-results-summary #filter-summary {
  margin: 0 0 1em 0;
}
#search-results-summary #filter-summary .search-filter {
  display: flex;
  flex-flow: row nowrap;
  grid-gap: .5em;
}
#search-results-summary #filter-summary .search-filter .filter-name {
  font-weight: bold;
  width: 7.5em;
}
#search-results-summary #filter-summary .search-filter .filter-value {

}

#search-results-summary #strategy-refine-form {
  display: flex;
  flex-wrap: nowrap;
}
#search-results-summary #strategy-refine-form input[type=submit], #search-results-summary #strategy-refine-form input[type=button] {
  margin: auto .1em;
}


/**************************************************************************************
 * Strategy Detail Page 
 **************************************************************************************/
.strategy-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  grid-gap: 2rem;
}
.strategy-sidebar {
  flex: 0 0 250px;
}
.strategy-main {
  flex: 1;
}

.strategy-sidebar #return-to-search {
  margin-top: 1em;
  height: 3em;
}
.strategy-sidebar #return-to-search input[type=button] {
  margin-top: 1.5em;
}

.strategy-sidebar .strategy-field {
  padding-top: 2em;
}
.strategy-sidebar .rating-title {
  color: #003c69;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.3;
  padding-bottom: .5em;
}
.strategy-sidebar .rating-icon img {
  width: 100%;
  max-width: 220px;
}
.strategy-sidebar .rating-description {
  font-size: .875rem;
}
.strategy-sidebar .field-title {
  color: #4d4d4d;
  font-weight: bold;
  line-height: 1.3;
  padding-bottom: .5em;
}
.strategy-sidebar .authors {
  font-size: .875rem;
}

#benefits-container {
  display: flex;
  grid-gap: 2em;
}
#benefits-container > div {
  flex: 1;
}
#benefits-container > div h3 {
  margin-top: 0;
  padding-top: 0;
  font-size: 1.5rem;
  font-weight: 400;
}

#equity-historical-header, #equity-considerations-header {
  padding-left: 2rem;
}
#equity-historical-content, #equity-considerations-content {
  padding-left: 3rem;
}

@media only screen and (max-width: 700px) { 
  .strategy-layout {
    flex-wrap: wrap;
  }
  .strategy-sidebar { 
    width: 100%;
    flex: initial;
  }
  .strategy-main {
    width: 100%;
    flex: initial;
  }
}

@media only screen and (max-width: 500px) { 
  #benefits-container {
    flex-wrap: wrap;
  }
  #benefits-container > div {
    width: 100%;
    flex: initial;
  }
}


/**************************************************************************************
 * Misc
 **************************************************************************************/
a.text-tip {
  cursor: pointer; 
  text-decoration: underline;
  color: -webkit-link;
}

img#model-of-health {
  float: right;
  margin: 0 0 1em 1em;
  width: 50%;
}

.equity-considerations+ul {
  margin-top: 0;
}

@media only screen and (max-width: 900px) { 
  #wwfh-methods-graphic {
    width: 100%;
  }
}


/**************************************************************************************
 * End of WWFH-V?.CSS 
 **************************************************************************************/