/***********************************************************************************
 * WINIPP-V?.CSS 
 * 
 * A collection of CSS definitions specific to the WiNIPP section of the QID website 
 * 
 * 2024-09-26: Created 
 * 2025-09-19: Switched to v2 
 *             Added training module quizzes (copied from crc.css) 
 *             Added ip-training-quiz to bring back the close button in dialogs 
 *             Added cdc-training-box 
 *             Modified to start accomodating both single and multiple select 
 *              questions, plus feedback text 
 ***********************************************************************************/


/***********************************************************************************
 * HTML Tags 
 ***********************************************************************************/
h1, h2 {
  color: #002060;
}
h2+p, h3+p, h4+p, h5+p { 
  margin-top: .8em;; 
}


/***********************************************************************************
 * Header 
 ***********************************************************************************/
header { 
	background-color: #ffffff; /*#D2ECF7;*/ 
	background: linear-gradient(180deg, #ffffff, #ffffff); /*linear-gradient(180deg, #D2ECF7, #E3F3FA); */
}


/***********************************************************************************
 * Site Identification (logo/tagline) 
 ***********************************************************************************/
#site-identification { 
	justify-content: flex-start; 
}
#site-logo {
  min-width: 0;
  min-height: 3rem;
}
#site-logo img { 
  /*height: 9rem;*/
  width: 9.5rem;
  padding: .5em .7em .3em 1em; 
}
#site-tagline { 
	font-size: 1.9rem; 
	margin: 0 0 0 0; 
	font-weight: bold; 
	text-align: left; 
  color: #a02321;
}
#site-sub-project { 
	font-size: 1.7rem; 
	margin: 0 0 0 0; 
	font-weight: bold; 
	text-align: left; 
  color: #002060;
}

@media only screen and (max-width: 700px) { 
  #site-logo {
    min-width: auto;
  }
	#site-tagline { 
		font-size: 1.5rem; 
	}
  #site-sub-project { 
		font-size: 1.3rem; 
	}
}

@media only screen and (max-width: 600px) { 
	#site-tagline { 
		font-size: 1.3rem; 
	}
  #site-sub-project { 
		font-size: 1.1rem; 
	}
}


/***********************************************************************************
 * Site Navigation 
 ***********************************************************************************/
#site-navigation-container { 
  box-shadow: none;
}
#site-navigation {
  line-height: 2.5em;
}
#site-navigation label:hover, #site-navigation a:hover { 
  background-color: #002060;
}
#site-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
	background-color: #a02321; 
}
#site-navigation .ddm-menu .ddm-toggle-on { 
  background-color: #002060 !important; 
}
#site-navigation .ddm-menu .ddm-ul .ddm-li:hover { 
  background-color: #002060; 
}
#site-navigation .ddm-menu .ddm-toggle-on label:hover { 
  background-color: #002060; 
}
#site-navigation span.unavailable { 
  display: block;
  color: #ffffff; 
}
#site-navigation a.unavailable:hover, #site-navigation span.unavailable:hover {
  background-color: #bbbbbb;
  color: #888888;
  text-shadow: 1px 1px 1px #999999;
}


/***********************************************************************************
 * You Are Here (Breadcrumbs and User Identification) 
 ***********************************************************************************/
#you-are-here-container { 
  box-shadow: none;
}


/***********************************************************************************
 * Page Content 
 ***********************************************************************************/
#page-content { 
  line-height: 1.5em; 
}


/***********************************************************************************
 * Collapsible Content - H2 Header 
 ***********************************************************************************/
h2.collapsible-open {  
  border-color: #581312; 
  background: #a02321; 
  color: #ffffff;
}
h2.collapsible-closed { 
  border-color: #0d2b6b; 
  background: #002060; 
  color: #ffffff; 
}
h2.collapsible-open:hover { 
  border-color: #581312; 
  background: #a02321; 
  color: #000000; 
}
h2.collapsible-closed:hover { 
  border-color: #581312; 
  background: #a02321; 
  color: #ffffff;
}


/***********************************************************************************
 * Email Us button 
 ***********************************************************************************/
a.email-button {
  background-color: #a02321;
  border: 1px solid #581312;
  border-radius: .3em;
  padding: .5em 1em;
  color: #ffffff;
  text-decoration: none;
}
a.email-button:hover {
  color: #000000;
}


/***********************************************************************************
 * Resource blocks 
 ***********************************************************************************/
#winipp-resources .resource {
  margin: 0 0 2em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  grid-gap: 1em;
}
#winipp-resources .resource a.name, #winipp-resources .resource span.name { 
  width: 18em;
  min-width: 18em;
  text-align: center;
  font-weight: bold;
  padding: .5em; 
  background-color: #002060; /*#D2ECF7;*/ 
  border-radius: 1em;
  /*border: 5px double #0C84AD;*/ 
  font-size: 1em; 
  /*line-height: 1.4em;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 6em;*/
  min-height: 5em;
}
#winipp-resources .resource a.name, #winipp-resources .resource span.name { 
  color: #ffffff; /*#000000;*/ 
  text-decoration: none; 
}
#winipp-resources .resource a.name:hover { 
  background-color: #a02321; /*#8fd0eb;*/
}
#winipp-resources .resource .description p:first-child {  
  margin-top: 0;
}

#winipp-resources .resource.unavailable a.name, #winipp-resources .resource.unavailable a.name:hover, #winipp-resources .resource.unavailable span.name {
  background-color: #cccccc;
  color: #aaaaaa;
}


@media only screen and (max-width: 900px) { 
	/*
  #winipp-resources .resource {
    align-items: flex-start;
  }
  #winipp-resources .resource a.name, #winipp-resources .resource span.name { 
    height: 10em;
  }
  */
}

@media only screen and (max-width: 600px) { 
	#winipp-resources .resource {
    flex-wrap: wrap;
  }
  #winipp-resources .resource a.name, #winipp-resources .resource span.name, #winipp-resources .resource .description { 
    width: 100%; 
    min-width: 100%;
  }
}


/***********************************************************************************
 * Videos 
 ***********************************************************************************/
h2.video-series {
  margin-bottom: 1em;
}
.training-video-container { 
  display: flex;
  flex-flow: column;
}
.training-video-container .description {
  padding-bottom: 2em;
}
.training-video-container .video {
  text-align: center;
}
.training-video-container .video iframe { 
  width: 712px;
  height: 400px;
}
.training-video-container .video .video-powerpoint { 
  font-size: .9em;
  margin: 0 auto;
  width: 712px;
  text-align: left;
}
.training-video-container .video .video-affirmation { 
  margin: 0 auto;
  width: 712px;
  text-align: left;
}

.training-video-container .video-with-quiz {
  display: flex;
  flex-flow: row;
  grid-gap: 2em;
  align-items: center;
}

@media only screen and (max-width: 900px) { 
	.training-video-container .video-with-quiz {
    /*flex-flow: column;*/
  }
}

@media only screen and (max-width: 750px) { 
	.training-video-container .video iframe { 
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
  }
}


/***********************************************************************************
 * Affirmation Checkboxes 
 ***********************************************************************************/
label.affirmation-checkbox {
  display: inline-block;
  margin-left: 1.6em;
  text-indent: -1.6em;
  font-weight: bold;
}


/***********************************************************************************
 * Training Module Quiz 
 ***********************************************************************************/
.training-quiz { font-size: 1rem; }

.training-quiz .quiz-results { min-height: 250px; }
.training-quiz .quiz-results #quiz-score { font-weight: bold; }

.training-quiz .quiz-question { min-height: 250px; }
.training-quiz .quiz-question .quiz-question-number {  }
.training-quiz .quiz-question .quiz-question-text {  }
.training-quiz .quiz-question .quiz-question-options {  }
.training-quiz .quiz-question .quiz-question-options label { display: block; margin-left: 3.4em; text-indent: -3.4em; } 
.training-quiz .quiz-question .quiz-question-options label .quiz-question-option-icon { height: 15px; }

.training-quiz .quiz-buttons { margin: 1em 0em; height: 2.5em; text-align: left; }
.training-quiz .quiz-buttons .quiz-validation-message { color: #990000; font-weight: bold; margin-bottom: .5em; }
.training-quiz .quiz-buttons .quiz-show-answer { display: inline; padding-left: 1em; font-size: 90%; }
.training-quiz .quiz-buttons .quiz-navigation { display: inline; }

.training-quiz .quiz-show-all-answers { min-height: 1px; }
.training-quiz .quiz-show-all-answers+.quiz-show-all-answers { border-top: 1px solid #cccccc; margin-top: 0; padding-top: 1em; }

/*.ip-training-quiz { background-color: #ffff00; }*/
.ip-training-quiz .ui-dialog-titlebar .ui-dialog-titlebar-close { display: block; }


/***********************************************************************************
 * Misc 
 ***********************************************************************************/
.cdc-training-box {
  border: 1px solid #000000;
  background-color: #e6e6e6;
  padding: 0 1em;
}


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