/***********************************************************************************
 * CRC-V?.CSS 
 * 
 * A collection of CSS definitions specific to the CRC section of the QID website 
 * 
 * 2019-10-23: Created 
 * 2022-10-14: Added state tabs, table of contents, sources 
 * 2022-10-17: Added section navigation, care area quotes 
 * 2022-10-28: Moved user identification and breadcrumbs to the same line 
 *             Customized object navigation arrows 
 * 2022-11-09: Added styling for H1 
 * 2022-11-20: Added styling for training modules 
 * 2022-12-16: Changed to v1 
 * 2023-08-17: Changed to v2 
 *             Added content tags styling 
 *             Added resource and subsection styling 
 * 2023-12-14: Changed to v3 
 *             Changed structure of user identification and breadcrumbs 
 * 2024-12-18: Added styling for content tag buttons 
 * 2024-01-09: Changed to v4 
 *             Changed select button color to yellow (same as side navigation) 
 * 2026-07-09: Changed to v5 
 *             Added styles for handling long regulation codes 
 ***********************************************************************************/


/***********************************************************************************
 * HTML Tags 
 ***********************************************************************************/
h1 {
  text-align: center;
}


/***********************************************************************************
 * Header 
 ***********************************************************************************/
header { 
	background-color: #97b196; 
	background: linear-gradient(180deg, #97b196, #c1d0c0); 
}


/***********************************************************************************
 * Site Identification (logo/tagline) 
 ***********************************************************************************/
#site-identification { 
	justify-content: flex-start; 
}
#site-tagline { 
	font-size: 1.575rem; 
	margin: 0 0 0 .7em; 
	font-style: italic; 
	font-weight: bold; 
	text-align: center; 
	white-space: nowrap; 
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; 
}

@media only screen and (max-width: 700px) { 
	#site-tagline { 
		font-size: 1rem; 
	}
}

@media only screen and (max-width: 600px) { 
	#site-tagline { 
		font-size: .75rem; 
	}
}


/***********************************************************************************
 * Site Navigation 
 ***********************************************************************************/
#site-navigation-container { 
	background-color: #4B634A; 
	box-shadow: 0px 2px 0px #1a3919, 0px -2px 0px #1a3919;  
}
#site-navigation label, #site-navigation a { 
	color: #ffffff; 
}
#site-navigation label:hover, #site-navigation a:hover { 
	color: #ffffff; 
}
#site-navigation .ddm-menu > .ddm-ul > .ddm-li > .ddm-ul { 
	background-color: #445A43; 
}
#site-navigation .ddm-menu .ddm-toggle-on { 
	background-color: #445A43 !important; 
}


/***********************************************************************************
 * You Are Here (Breadcrumbs and User Identification) 
 ***********************************************************************************/
#you-are-here-container { 
  box-shadow: 0px -2px 0px #1a3919;
}


/***********************************************************************************
 * Collapsible Content - H2 Header 
 ***********************************************************************************/
h2.collapsible-open { 
  border-color: #827f7d; 
  background: #97b196; 
  color: #ffffff; 
}
h2.collapsible-closed { 
  border-color: #858280; 
  background: #8f8f8f; 
  color: #ffffff; 
}
h2.collapsible-open:hover, h2.collapsible-closed:hover { 
  color: #333333; 
}


/***********************************************************************************
 * Filterable Table 
 ***********************************************************************************/
.filterable th { 
  border-color: #ffffff;
  background-color: #4b634a; 
  color: #ffffff;  
}
.filterable td { 
  border-color: #ffffff; 
  border-bottom-color: #4b634a; 
}



/*********************************************************************
 * Quoted Content 
 *********************************************************************/
.quoted-table { margin: 0 0; padding: .5em 1em 1em 1em; border: 1px solid #b4b4b4; background-color: #f8f8f8; border-radius: 4px; }
.quoted-table h2 { font-size: 1.075rem; margin: 0 0 1em 0; padding: 0 0 0 0; border-bottom: none; }
.quoted-table ul, .quoted-table ol { margin: 0 0 0 2em; padding: 0 0 0 0; }
.quoted-table ol ol, .quoted-table ol ul, .quoted-table ul ol, .quoted-table ul ul { margin-left: 1.3em; }
.quoted-table .space-after { margin-bottom: 1em; }
.quoted-table ul ul { margin-left: 0; padding-left: 0; }
.quoted-table ul ul li { margin-left: 1.3em; padding-left: 0; }
.quoted-table .footnote { font-size: .9em; }
.quoted-table-source { margin: 0 .5em 3em .5em; font-style: italic; font-size: .9em; }

.quoted-table .quoted-table-table { border-collapse: collapse; }
.quoted-table .quoted-table-table th { padding: 6px; border: 1px solid #000000; }
.quoted-table .quoted-table-table td { padding: 6px; border: 1px solid #000000; }
.quoted-table .quoted-table-table tbody th { text-align: left; vertical-align: top; }
.quoted-table .quoted-table-table tbody td { text-align: left; vertical-align: top; }
.quoted-table .quoted-table-table th.quoted-table-table-section { text-align: left; background-color: #676767; color: #ffffff; }
.quoted-table .quoted-table-table th.quoted-table-table-section-light { text-align: left; background-color: #9a9a9a; color: #ffffff; }

@media only screen and (max-width: 800px) { 
	.quoted-table { display: table; }
	.quoted-table .quoted-table-table thead th { word-wrap: break-word; }
	.quoted-table .quoted-table-table thead td { word-wrap: break-word; }
	.quoted-table .quoted-table-table tbody th { word-wrap: break-word; }
	.quoted-table .quoted-table-table tbody td { word-wrap: break-word; }
}


/***********************************************************************************
 * Object Navigation 
 ***********************************************************************************/
.object-navigation .previous-arrow a, .object-navigation .next-arrow a { 
	color: #4b634a;
}


/***********************************************************************************
 * Section Navigation (Left Column) 
 ***********************************************************************************/
#section-content { 
  padding: 0 0 0 1em; 
  margin-left: 140px; 
}
#section-navigation { 
  float: left; 
  width: 140px; 
  padding-top: 2em; 
  font-weight: bold; 
  z-index: 99; 
  margin-right: 20px; 
}
#section-navigation ul { 
  margin: 0; 
  padding: 0; 
  width: 100%; 
}
#section-navigation li { 
  margin: 0 0 0 0; 
  padding: 0; 
  list-style: none; 
  display: inline-block; 
  width: 100%; 
}
#section-navigation li a { 
  color: #000000; 
  text-decoration: none; 
  display: block; 
  margin: .5em .5em; 
  padding: 0em .5em; 
  text-align: center;
  min-height: 1.4em; 
  line-height: 1.4em; 
  background-color: #97b196;
  border: 2px solid #f8fef8; 
  border-right-color: #86a085; 
  border-bottom-color: #86a085; 
  background: -webkit-linear-gradient(bottom, #97b196, #e7ede7); 
  background: -moz-linear-gradient(top, #e7ede7, #97b196); 
  background: -o-linear-gradient(#e7ede7, #97b196); 
  background: linear-gradient(top, #97b196, #e7ede7); 
  background: linear-gradient(to bottom, #e7ede7, #97b196); 
  background: -ms-linear-gradient(top, #e7ede7, #97b196); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe7ede7, endColorstr=#ff97b196); 
}
#section-navigation li.current a { 
  background-color: #f4eab7; 
  border: 2px solid #e6d05e; 
  border-left-color: #f8f1d3; 
  border-top-color: #f8f1d3; 
  background: -webkit-linear-gradient(bottom, #f0e199, #f4eab7); 
  background: -moz-linear-gradient(top, #f4eab7, #f0e199); 
  background: -o-linear-gradient(#f4eab7, #f0e199); 
  background: linear-gradient(top, #f0e199, #f4eab7); 
  background: linear-gradient(to bottom, #f4eab7, #f0e199); 
  background: -ms-linear-gradient(top, #f4eab7, #f0e199); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4eab7', endColorstr='#f0e199', GradientType=0); 
}
#section-navigation li a:hover { 
  background-color: #e1e1e1; 
  border: 2px solid #c8c8c8; 
  border-left-color: #ffffff; 
  border-top-color: #ffffff; 
  background: -webkit-linear-gradient(bottom, #e1e1e1, #ffffff); 
  background: -moz-linear-gradient(top, #ffffff, #e1e1e1); 
  background: -o-linear-gradient(#ffffff, #e1e1e1); 
  background: linear-gradient(top, #e1e1e1, #ffffff); 
  background: linear-gradient(to bottom, #ffffff, #e1e1e1); 
  background: -ms-linear-gradient(top, #ffffff, #e1e1e1); 
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e1e1e1', GradientType=0); 
}
#section-navigation li.care-area-intro-link { 
  display: none; 
}

@media only screen and (max-width: 600px) { 
	#section-content { 
    padding: 0 0; 
    margin-left: 0; 
  }
	#section-navigation { 
    font-size: .9375rem; 
    float: none; 
    width: auto; 
    margin: 20px 0; 
    position: relative; 
    min-height: 40px; 
    background-color: #ffffff; 
    z-index: 99; 
    border: none; 
  }	
	#section-navigation ul { 
    margin: 0 0 0 0; 
    width: auto; 
    padding: 5px 0 5px 0; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border: solid 1px #aaa; 
    border-radius: 5px; 
    box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    background: #fff url(/images/icons/icon-menu.png) no-repeat 10px 11px; 
  }
	#section-navigation li { 
    padding: 0 0 0 0; 
    display: none; 
    margin: 0 0 0 0; 
  }
	#section-navigation li a { 
    min-height: 0; 
    line-height: 100%; 
    border: none; 
    background: none; 
    padding: 3px 12px 3px 12px; 
    display: block;
    margin: 5px 5px 5px 32px; 
    text-align: left; 
  }
	#section-navigation li a:hover { 
    border: none; 
    background: none; 
  }
	#section-navigation li.current { 
    display: block; 
  }
	#section-navigation li.current a { 
    background: none; 
    color: #666; 
    border: none; 
  }
	#section-navigation.section-open ul { 
    background-image: none; 
  }
	#section-navigation.section-open ul li { 
    display: block; 
    margin: 0 0 5px; 
  }
	#section-navigation.section-open ul li.current { 
    background: url(/images/icons/icon-check.png) no-repeat 10px 7px; 
  }
} 


/***********************************************************************************
 * State Tabs 
 ***********************************************************************************/
#state-tabs, #state-tabs-no-national { 
  overflow: hidden; 
  background: none; 
  border-width: 0px; 
  display: none;
}
#state-tabs .ui-tabs-nav, #state-tabs-no-national .ui-tabs-nav { 
  padding-left: 0px; 
  background: transparent; 
  border-width: 0px 0px 1px 0px; 
  -moz-border-radius: 0px; 
  -webkit-border-radius: 0px; 
  border-radius: 0px; 
} 
#state-tabs .ui-tabs-panel, #state-tabs-no-national .ui-tabs-panel { 
  border-width: 0px 0px 0px 0px; 
}
#state-tabs .ui-tabs-nav li, #state-tabs-no-national .ui-tabs-nav li { 
  font-size: .7500rem;  
}
#state-tabs .ui-tabs-nav li { 
  margin-top: .5625rem; 
}
#state-tabs-no-national .ui-tabs-nav li { 
  margin-top: 9px; 
}
#state-tabs .ui-tabs-nav li:first-child, #state-tabs-no-national .ui-tabs-nav li:first-child { 
  margin-left: 5px; 
}
#state-tabs .ui-tabs-nav li:first-child { 
  font-size: 1rem; 
  margin-top: 0px; 
  margin-bottom: -1px; 
}
#state-tabs .ui-tabs-nav li:first-child a { 
  padding: .5em 1em; 
}


/***********************************************************************************
 * Table of Contents
 ***********************************************************************************/
div.table-of-contents { 
  margin-bottom: 1.5em; 
  border-bottom: 1px solid #cccccc; 
}


/***********************************************************************************
 * Sources 
 ***********************************************************************************/
span.source, p.source { 
  font-style: italic; 
}
p.source { 
  margin: auto 1em; 
}


/***********************************************************************************
 * Care Area Introduction "Quote" 
 ***********************************************************************************/
.index-quote { 
  margin: 0em 4em; 
  overflow: auto; 
  font-weight: bold; 
  font-style: italic; 
}
.index-quote img { 
  height: 168px; 
  float: right; 
  margin: 0em 0em .5em .5em; 
  border: 8px solid #5b5b5b; 
  padding: 1px; 
  background-color: #ffffff; 
}
.index-quote p.source { 
  font-weight: normal; 
  font-style: normal; 
}
.index-quote+p { 
  clear: right; 
}
.index-quote.no-quote { 
  font-weight: normal; 
  font-style: normal; 
}

@media only screen and (max-width: 800px) { 
	.index-quote { 
    margin: 0 0; 
  }
	.index-quote img { 
    float: none; 
    display: block; 
    margin: 0 auto .5em auto; 
  }
}


/*********************************************************************
 * Old Training Boxes/Tables 
 *********************************************************************/
.red { color: #a30a1e; }

.example { margin: 1em 0em; padding: 8px; background-color: #c1d1c1; border: 3px outset #000000; color: #000000; }
.example p { margin-top: 0em; margin-bottom: 0em; }
.example p+p { margin-top: 1em; }

.exercise { margin: 1em 0em; padding: 8px; background-color: #c1d1c1; border: 3px outset #000000; color: #000000; }
.exercise div p:first-child { margin-top: .1em; }

.quote { margin: 1em 5em; padding: 0px 5px; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc;	
         color: #a30a1e; font-weight: bold; }
.quote img { float: right; margin: .5em 0em .5em .5em; border: 3px solid #a30a1e; }

.box { border: 1px solid #333333; margin: 2em auto; padding: 0px 8px; }
.interview { margin: 1em 0em; padding: 8px; background-color: #ffffcc; border: 2px outset #000000; color: #000000; }
.question { font-weight: bold; font-style: italic; }
.negative { background-color: #97b196; }

.list-table { border-bottom: 2px solid #000000; }
.list-table th { border: 1px solid #000000; border-bottom: 2px solid #cccccc; }
.list-table td { vertical-align: top; padding-top: 1.5em; border-left: 1px solid #000000; border-right: 1px solid #000000; border-top-width: 0; border-bottom-width: 0; }

@media only screen and (max-width: 600px) { 
	.quote { margin: 1em .5em }
	.quote img { margin: 1em 0em 1em .5em; }
}


/*********************************************************************
 * Training Module Lesson 
 *********************************************************************/
table.training-module-lesson { width: 85%; margin-left: auto; margin-right: auto; margin-top: 2em; }

table.training-module-lesson td.training-module-video { width: 502px; }
table.training-module-lesson td.training-module-video p { text-align: center; margin-bottom: .5em; }
table.training-module-lesson td.training-module-video iframe { width: 500px; height: 281px; border: 5px solid #000000; }

table.training-module-lesson td.training-module-links { vertical-align: middle; text-align: center; padding-left: 20px; }
table.training-module-lesson td.training-module-links .quiz-start-button { font-size: 90%; }
table.training-module-lesson td.training-module-links .quiz-document-button { font-size: 90%; }

.training-module-video-links { width: 85%; margin-left: auto; margin-right: auto; margin-top: 1em; font-size: 90%; }
.training-module-video-links p { margin-top: 0px; margin-bottom: 0px; }
.training-module-video-links p+p { margin-top: .5em; }
			
.collapsible-open+div table.training-module-lesson+h3 { margin-top: 3em; }

@media only screen and (max-width: 600px) { 
	table.training-module-lesson { width: 100%; margin-top: 1em; }
	table.training-module-lesson td.training-module-video { display: block; width: 100%; }
	table.training-module-lesson td.training-module-video div { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
	table.training-module-lesson td.training-module-video div iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
	table.training-module-lesson td.training-module-links { display: block;  width: 100%; }
}


/***********************************************************************************
 * 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-question .quiz-question-your-answer { border-top: 1px solid #ffffff; margin-top: 1em; padding-top: .5em; }
.training-quiz .quiz-question .quiz-question-correct-answer { margin-top: .5em; margin-bottom: 1em; }

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






/*********************************************************************
 * F-Tags 
 *********************************************************************/
.ftag-closed { margin: 0 0 .2em 0; padding: 3px 3px 0px 7px; }
.ftag-open { margin: 0 0 .2em 0; padding: 3px 3px 3px 7px; background-color: #e4e4e4; border: 1px solid #e4e4e4; }
.ftag-open span.minus, .ftag-closed span.plus { display: inline-block; width: .8em; }
.ftag-closed span.minus { display: none; }
.ftag-open span.plus { display: none; }
.ftag-open:hover, .ftag-closed:hover { cursor: pointer; color: #333333; }
.ftag-open+div { padding: 0 1.5em .2em 1.5em; background-color: #e4e4e4; border: 1px solid #e4e4e4; margin-bottom: 1em; }

.ftag-footer { margin: 0 0 0 -1.3em !important; padding: 3px 3px 3px 7px; background-color: #e4e4e4; border: 1px solid #e4e4e4; }
.ftag-footer span.minus { display: inline-block; width: .8em; }
.ftag-footer:hover { cursor: pointer; color: #333333; }

.ftag-code { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-intent { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-definitions { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-guidance { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-probes { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-potential-tags { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-deficiency-categorization { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-key-elements-noncompliance { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-procedures { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-investigative-summary { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-general { background-color: #f6f6f6; border: 1px solid #f6f6f6; padding: 10px 10px 10px 10px; margin-top: 1em; margin-bottom: 1em; }
.ftag-change { color: #ff0000; }
.ftag-table { margin: .5em auto 1em auto; border-collapse: collapse; }
.ftag-table th { padding: 3px; border: 1px solid #000000; }
.ftag-table td { padding: 3px; border: 1px solid #000000; }

.regulations { margin-top: 1.5em; }
.regulations h3.ftag-closed { margin-top: 0; margin-bottom: 0; }
.regulations h3.ftag-open { margin-top: 0; margin-bottom: 0; }
.regulations h3 .ftag-change { font-weight: normal; }

.regulations .ftag-open+div .ftag-code > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-intent > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-definitions > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-guidance > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-probes > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-potential-tags > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-deficiency-categorization > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-key-elements-noncompliance > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-procedures > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-investigative-summary > h4:first-child { margin-top: 0em; }
.regulations .ftag-open+div .ftag-general > h4:first-child { margin-top: 0em; }




/******************************************************************
 * Long Regulation Codes 
 * 
 * 2026-07-09: Created 
 ******************************************************************/
.long-reg-code-block {

}
.long-reg-code-content {
  height: 25em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.long-reg-code-content.show-all {
  height: auto;
  mask-image: none;
}
.long-reg-code-toggle {
  padding-left: 1em;
  margin-bottom: 1em;
}
/*
.long-reg-code-toggle button {
  font-size: .9em;
}
*/
.long-reg-code-toggle button {
  text-transform: lowercase;
  background: none;
  border: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 1em;
  color: blue;
  text-decoration: underline;
}


/******************************************************************
 * CSS-COVID.CSS 
 * 
 * A collection of CSS definitions specific to the CRC website 
 * 
 * 2020-08-10: Created 
 ******************************************************************/
h1.covid {
	background-color: #990000; 
	border-color: #000000; 
	background-image: url('/images/covid-19.jpg'); 
	background-size: cover; 
	color: #ffffff; 
	font-size: 1.5em;
	font-weight: bold; 
	text-shadow: -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, 1px 1px 0 #333333;
	line-height: 2em;
}

div.announcement.covid { 
  margin-top: 2em;
	background-color: #990000; 
	border-color: #000000; 
	background-image: url('/images/covid-19.jpg'); 
	background-size: cover;
	color: #ffffff; 
	font-weight: bold; 
	text-shadow: -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, 1px 1px 0 #333333; 
	padding: 0 0 0 0;
}
div.announcement.covid a { 
	color: #ffffff; 
}
div.announcement.covid .title { 
	text-align: center; 
	font-size: 1.5em;  
	padding: .5em .3em 0 .3em; 
  margin-bottom: .3em;
}
div.announcement.covid .learn-more { 
	text-align: center; 
	background-color: rgba(0,0,0,0.4); 
	padding: 1em 2em 1em 2em; 
	font-size: 1.1em;
  font-weight: normal;
}

div#section-navigation div.covid { 
	width: 126px; 
	height: 60px;
	margin-left: .5em; margin-right: .5em; margin-bottom: .5em; 
	background-color: #990000; 
	border: 2px solid #e8e8e8; border-right-color: #333333; border-bottom-color: #333333; 
	background-image: url('/images/covid-19.jpg'); 
	background-size: cover; 
	color: #ffffff; 
	font-weight: bold; 
	text-shadow: -1px -1px 0 #333333, 1px -1px 0 #333333, -1px 1px 0 #333333, 1px 1px 0 #333333; 
	text-align: center; 
}
div#section-navigation div.covid a { 
	color: #ffffff; 
	text-decoration: none; 
}
div#section-navigation div.covid .title { 
	text-align: center; 
	font-size: 1.3em; 
	text-decoration: none; 
	padding: .2em .3em .1em .3em; 
}
div#section-navigation div.covid .learn-more { 
	text-align: right; 
	background-color: rgba(0,0,0,0.4); 
	text-decoration: underline; 
	padding: .1em .3em .1em .3em;
}

@media only screen and (max-width: 600px) { 
	div#section-nav div.covid { 
		margin-top: 2em; 
	}
}

/***********************************************************************************
 * Public Highlight Box 
 ***********************************************************************************/
#public-highlight-box { 
  width: 100%; 
  height: 220px; 
  overflow: hidden; 
}
#public-highlight-navigation { 
  text-align: center; 
  font-size: 4rem; 
  margin-top: -.5em; 
  margin-bottom: -.5em; 
}
#public-highlight-navigation a { 
  text-decoration: none; 
  color: #cccccc; 
}
#public-highlight-navigation a:hover { 
  color: #666666; 
}
#public-highlight-navigation a.selected { 
  color: #000000; 
}
.public-highlight { 
  width: 25%; 
  float: right; 
  padding: 1em; 
  display: none; 
}
.public-highlight .quote-text { 
  font-weight: bold; 
  font-style: italic; 
}
.public-highlight .quote-source { 
  margin-left: 1.5em; 
  text-indent: -1em; 
  font-style: italic; 
}
.public-highlight .amda img { 
  width: 50px; 
  float: left; 
  margin: 0 1em 1em 0; 
}
.public-highlight .wcrc, .public-highlight .thca { 
  text-align: center; 
}
.public-highlight .thca img { 
  width: 100%; 
  max-width: 150px; 
  margin-top: 1em; 
}
.public-highlight .wcceal { 
  font-size: 1em; 
}
.public-highlight .wcceal img { 
  width: 100%; 
  max-width: 160px; 
  display: block; 
}
.public-highlight .copd { 
  text-align: center; 
}
.public-highlight .copd .heading { 
  font-size: 1.3em; 
  font-weight: bold; 
  margin-bottom: .5em; 
}
.public-highlight .copd a {
  color: #ffffff;
}
.public-highlight .uti-toolkit { 
  font-size: 1em; 
}
.public-highlight .uti-toolkit img { 
  width: 110px; 
  float: left; 
  margin: 0 .5em .5em 0; 
}
.public-highlight ul { 
  margin: 0 0 0 0; 
  padding: 0 0 0 1.5em; 
  font-size: .9em 
}
.wide-highlight { 
  width: 66%; 
}


/***********************************************************************************
 * Public Page  
 ***********************************************************************************/
h1.public-page { 
  text-align: left; 
  margin-bottom: 0px; 
  padding-bottom: 0px; 
}
h1.public-page+p { 
  margin-top: 0; 
}
#overview-video-container { 
  float: right; 
  width: 400px; 
  padding: .7em 0 .7em 1em; 
  text-align: center; 
  font-size: 110%; 
}
#overview-video-container .video-container iframe { 
  width: 356px; 
  height: 200px; 
}
.module-list-container { 
  display: flex; 
  flex-direction: row; 
  flex-wrap: no-wrap; 
  justify-content: space-around; 
  align-items: flex-start; 
  align-content: flex-start; 
  padding: 1em 0; 
}
.module-list { 
  padding: 0 1em; 
  width: 48%; 
}
.module-list ul { 
  margin-left: 0; 
  padding-left: 1.5em; 
}


/***********************************************************************************
 * Home Page 
 ***********************************************************************************/
#home-page-container { 
  display: flex; 
  flex-direction: row-reverse; 
  flex-wrap: no-wrap; 
}
.announcement-container { 
  width: 270px; 
  font-size: .9em; 
} 
.announcement { 
  width: 250px; 
  margin: 1em; 
  padding: .5em; 
  background-color: #F1E3A8; 
  text-align: center; 
  border: 1px solid #e3c753; 
}
.announcement.event { 
  background-color: #cdcdcd; 
}
.announcement .announcement-heading { 
  font-weight: bold; 
}
.announcement .announcement-text { 
  clear: both; 
  text-align: justify; 
}
.announcement .announcement-more-info { 
  text-align: right; 
  margin-top: 0; 
  margin-bottom: 0; 
}
.announcement img.state-indicator { 
  float: left; 
  margin: 0px 3px 3px 0px; 
}
.announcement img.state-indicator-balance { 
  float: right; 
  margin: 0px 0px 3px 3px; 
  visibility: hidden; 
}
#announcement-navigation { 
  display: none; 
}
#home-content-container { 
  width: 500px; 
  flex-grow: 1; 
}
.home-page-graphic { 
  width: 100%; 
  text-align: center; 
}
.home-page-graphic-wi {  }
.home-page-graphic-wi img { 
  min-width: 200px; 
}
.home-page-text-wi { 
  min-width: 200px; 
}
.upcoming-events { 
  width: 220px; 
  margin: 0 auto 2em auto; 
  padding: .5em; 
  background-color: #4B634A; 
  border: 4px double #97b196; 
  text-align: center; 
  font-size: 1.2em; 
}
.upcoming-events img.state-indicator { 
  float: left; 
  height: 1.2em; 
  margin: 0px 3px 3px 0px; 
}
.upcoming-events a { 
  color: #ffffff; 
  text-decoration: none; 
}
.upcoming-events:hover { 
  background-color: #5c7a5a; 
}
.upcoming-events:hover a {  }


/***********************************************************************************
 * Resource List Layout 
 * 
 * 2023-08-29: Created 
 ***********************************************************************************/
div.crc-resource {
  margin: 1em 0;
}
div.crc-resource .title {}
div.crc-resource .title.no-link {
  font-style: italic;
}
div.crc-resource .description {}
div.crc-resource .updated {
  font-weight: bold;
}
div.crc-resource .updated.recent {
  background-color: #ffff00;
}
div.crc-resource .source { }
div.crc-resource .source:before {
  content: "Source: ";
}
div.crc-resource .source.no-prefix:before {
  content: "";
}
div.crc-resource .tags {}

div.subsection-heading {
  margin: 0 0 .5em 0;
}
div.subsection-content {
  padding-left: 1.5em;
}
div.subsection-content div:first-child {
  margin-top: 0;
}


/***********************************************************************************
 * Content Tags 
 * 
 * 2023-08-15: Created 
 * 2024-01-09: Changed select button color to yellow (same as side navigation) 
 ***********************************************************************************/
#content-filters {
  font-size: .8em;
}
#content-filters .ui-button {
  padding: .2em .5em;
  font-weight: bold;
}
#content-filters .selected-tag-button {
  color: #000000;
  background: #f4eab7;
  border-color: #e6d05e; 
}

span.tags {
  display: block;
  font-size: .7em;
  margin-top: .5em;
}
span.tags>span {
  display: inline-block;
  background-color: #e1e1e1;
  border-radius: .5em;
  padding: .1em .5em .2em .5em;
}
span.tags>span+span {
  margin-left: .3em;
}


/***********************************************************************************
 * Misc 
 ***********************************************************************************/
p.note { 
  font-size: 80%; 
  margin: auto 1em; 
}


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