/***********************************************************************************
 * 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 
 * 2025-11-24: Switched to v3 
 *             Modified quizzes to work with more verbose questions and feedback 
 *             Added classes for IP Training (transcripts, objectives, quizzes) 
 * 2025-12-03: Added classes for course navigation 
 ***********************************************************************************/


/***********************************************************************************
 * 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; 
}


/***********************************************************************************
 * Course Navigation 
 ***********************************************************************************/
#course-sidebar-navigation {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items:  flex-start;
  grid-gap: 1em;
  
}
#course-sidebar-navigation #course-list {
  flex-basis: 15em;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: .9em;
  padding-top: 2em;
}
#course-sidebar-navigation #course-list a {
  display: block;
  margin: 0 0;
  padding: .3em .3em .3em .3em;
  line-height: 1.3em;
  text-decoration: none;
}
#course-sidebar-navigation #course-list a+a {
  border-top: 1px solid #000000;
}
#course-list a, #course-list a:visited {
  color: #000000;
}
#course-list a:hover, #course-list a:active {
  background-color: #a02321;
  color: #ffffff;
}
#course-list a.current-course, #course-list a.current-course:visited {
  background-color: #002060;
  color: #ffffff;
}

#course-navigation {
  margin-top: 2em;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}


/***********************************************************************************
 * 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;*/
  aspect-ratio: 16/9;
  width: 100% !important;
  max-width: 712px;
}
.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-transcript {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}
.training-video-container .video-transcript h3 {
  font-size: 1em;
  margin-bottom: .2em;
}
.training-video-container .video-transcript p {
  margin: 0 0 0 0;
}
.training-video-container .video-transcript p+p {
  margin-top: .2em;
}

.training-video-container .video-with-quiz {
  display: flex;
  flex-flow: row;
  grid-gap: 2em;
  align-items: center;
}
.training-video-container .video-with-quiz .video {
  width: 90%;
  max-width: 712px;
}

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

.training-quiz .quiz-question { 
  padding-bottom: 1em;
}
.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 .quiz-question-option {
  display: flex;
  flex-flow: row nowrap;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-input { 
  padding-right: .3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-prefix { 
  padding-right: .3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-icon { 
  padding-right: .3em;
  width: 1.3em;
  min-width: 1.3em;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-icon img { 
  width: 100%;
}
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-text {  }
.training-quiz .quiz-question .quiz-question-options .quiz-question-option .quiz-question-option-text .quiz-question-option-feedback { 
  font-style: italic;
  color: #666666;
}
.training-quiz .quiz-question .quiz-question-feedback { 
  font-style: italic;
  color: #666666;
  padding-top: 1em;
}

.training-quiz .quiz-show-answer { 
  font-size: 90%; 
}
.training-quiz .quiz-validation-message { 
  color: #990000; 
  font-weight: bold; 
  margin-bottom: .5em;
  text-align: right;
}

.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: 0; 
}

.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;
}

.pre-post-test-buttons {
  text-align: right;
  margin: 1em 0;
}

.course-objectives h2 {
  font-size: 1em;
  font-style: italic;
  margin: 1em 0 .2em 0;
}
.course-objectives p {
  margin: 0 0 0 0;
}
.course-objectives ol {
  margin-top: .2em;
}

.training-activity h3 {
  margin: 2em 0 .2em 0;
}
.training-activity h3+p {
  margin-top: .2em;
}


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