/* CSS REVISION 2021-05-17 */

/* superscripts, for things like numbered in-text citations */

sup {
  	color: #646569;
    font-size: 0.7em;
}


/* *** TEXT HIGHLIGHT BOXES *** */

/* placed in between other content blocks and with a dashed border, that are either transparent (csbox-x) or filled/solid (csbox-x-x) */

.csbox-blue {
   padding: 1.25em;
   border: 1px dashed #007298;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-blue-blue {
   padding: 1.25em;
   border: 1px dashed #007298;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #e5faff;
}

.csbox-gray {
   padding: 1.25em;
   border: 1px dashed #646569;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-gray-gray {
   padding: 1.25em;
   border: 1px dashed #646569;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #ebebeb;
}

.csbox-green {
   padding: 1.25em;
   border: 1px dashed #63b101;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-green-green {
   padding: 1.25em;
   border: 1px dashed #63b101;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #ddedc8;
}

.csbox-orange {
   padding: 1.25em;
   border: 1px dashed #ff9601;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-orange-orange {
   padding: 1.25em;
   border: 1px dashed #ff9601;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #ffe7c4;
}

.csbox-purple {
   padding: 1.25em;
   border: 1px dashed #800080;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-purple-purple {
   padding: 1.25em;
   border: 1px dashed #800080;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #e6e6fa;
}

.csbox-red {
   padding: 1.25em;
   border: 1px dashed #ff0000;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
}

.csbox-red-red {
   padding: 1.25em;
   border: 1px dashed #ff0000;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #ffd7d7;
}

.csbox-yellow-gray {
   padding: 1.25em;
   border: 1px dashed #a0acaa;
   border-radius: 0.5em;
   margin: 2em 0 2em 0;
   background-color: #fdfcbd;
}


/* *** IMAGE CAPTIONS *** */

/* for caption text (below the image) for images, to match with .csimage and .cstitle classes */

.cscaption1000 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 1000px;
    min-width: 300px;
  	width: 100%;
}

.cscaption900 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 900px;
    min-width: 300px;
  	width: 100%;
}

.cscaption800 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 800px;
    min-width: 300px;
  	width: 100%;
}

.cscaption700 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 700px;
    min-width: 300px;
  	width: 100%;
}

.cscaption600 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 600px;
    min-width: 300px;
  	width: 100%;
}

.cscaption500 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 500px;
    min-width: 250px;
  	width: 100%;
}

.cscaption400 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 400px;
    min-width: 200px;
  	width: 100%;
}

.cscaption300 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 300px;
    min-width: 150px;
  	width: 100%;
}

.cscaption200 {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 200px;
    min-width: 100px;
  	width: 100%;
}


/* *** IMAGES *** */

/* numbers at the end equal the maximum horizontal pixel width of the image */
/* using the width of the actual image file, round it to nearest hundred pixel width in size */
/* for example, round a 278 width image to 300 or round a 236 width image to 200 */
/* if the image has a caption, use the -caption version */

/*

Example HTML embed code (no caption):

<div style="text-align: center;">
<p class="cstitleXXX">Image Title Goes Here</p>
<div align="center"><img alt="Descriptive text goes here" class="csimageXXX" src="images/image_file.ext" /></div>
</div>

-------------------------------------

Example HTML embed code (with caption):

<div style="text-align: center;">
<p class="cstitleXXX">Image Title Goes Here</p>
<div align="center"><img alt="Descriptive text goes here" class="csimageXXX-caption" src="images/image_file.ext" /></div>
<p class="cscaptionXXX">Caption text goes here.</p>
</div>

*/

.csimage1000 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 1000px;
    min-width: 300px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage1000-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 1000px;
    min-width: 300px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage900 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 900px;
    min-width: 300px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage900-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 900px;
    min-width: 300px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage800 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 800px;
    min-width: 300px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage800-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 800px;
    min-width: 300px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage700 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 700px;
    min-width: 300px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage700-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 700px;
    min-width: 300px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage600 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 600px;
    min-width: 300px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage600-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 600px;
    min-width: 300px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage500 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 500px;
    min-width: 250px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage500-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 500px;
    min-width: 250px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage400 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 400px;
    min-width: 200px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage400-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 400px;
    min-width: 200px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage300 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 300px;
    min-width: 150px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage300-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 300px;
    min-width: 150px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}

.csimage200 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 200px;
    min-width: 100px;
    padding: 0.7em 0 2.25em 0;
    width: 100%;
}

.csimage200-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 200px;
    min-width: 100px;
    padding: 0.7em 0 0.7em 0;
    width: 100%;
}


/* *** IMAGE TITLES *** */

/* title text paired with csimage classes */
/* use the same title width number that matches the image width number */

.cstitle1000 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 1000px;
    min-width: 300px;
  	width: 100%;
}

.cstitle900 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 900px;
    min-width: 300px;
  	width: 100%;
}

.cstitle800 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 800px;
    min-width: 300px;
  	width: 100%;
}

.cstitle700 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 700px;
    min-width: 300px;
  	width: 100%;
}

.cstitle600 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 600px;
    min-width: 300px;
  	width: 100%;
}

.cstitle500 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 500px;
    min-width: 250px;
  	width: 100%;
}

.cstitle400 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 400px;
    min-width: 200px;
  	width: 100%;
}

.cstitle300 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 300px;
    min-width: 150px;
  	width: 100%;
}

.cstitle200 {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 200px;
    min-width: 100px;
  	width: 100%;
}


/* *** KALTURA VIDEO PLAYERS (embedded iframe code) *** */

/*

Example HTML embed code (no caption), replace XXX and YYY with the same unique number, and replace Z_ZZZZZZZZ with the alphanumeric Kaltura entry ID for the video:

<div style="text-align: center;">
<p class="csvidtitle">This is the video title</p>

<div align="center" class="csvideo1">
<div class="csvideo2"><iframe class="csiframe" allow="autoplay *; fullscreen *; encrypted-media *" allowfullscreen="" frameborder="0" id="kaltura_player_XXX" mozallowfullscreen="" src="https://cdnapisec.kaltura.com/p/389581/sp/38958100/embedIframeJs/uiconf_id/44130842/partner_id/389581?iframeembed=true&amp;playerId=kaltura_player_YYY&amp;entry_id=Z_ZZZZZZZZ" webkitallowfullscreen=""></iframe></div>
</div>
</div>

-------------------------------------

Example HTML embed code (with caption), replace XXX and YYY with the same unique number, and replace Z_ZZZZZZZZ with the alphanumeric Kaltura entry ID for the video:

<div style="text-align: center;">
<p class="csvidtitle">This is the video title</p>

<div align="center" class="csvideo1-caption">
<div class="csvideo2"><iframe class="csiframe" allow="autoplay *; fullscreen *; encrypted-media *" allowfullscreen="" frameborder="0" id="kaltura_player_XXX" mozallowfullscreen="" src="https://cdnapisec.kaltura.com/p/389581/sp/38958100/embedIframeJs/uiconf_id/44130842/partner_id/389581?iframeembed=true&amp;playerId=kaltura_player_YYY&amp;entry_id=Z_ZZZZZZZZ" webkitallowfullscreen=""></iframe></div>
</div>

<p class="csvidcaption">This is the caption for the video.</p>
</div>

*/

/* first container class - should be a <div align="center"> */

.csvidtitle {
    color: #646569;
  	display: inline-block;
  	text-align: center;
    font-size: 1.15em;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
  	margin: 0.5em 0 0 0;
  	max-width: 1000px;
    min-width: 320px;
  	width: 100%;
}

.csvideo1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 1000px;
    min-width: 320px;
    padding: 1em 0 2.25em 0;
    width: 100%;
}

.csvideo1-caption {
    display: block;
    margin-left: auto;
    margin-right: auto;
  	height: auto;
    max-width: 1000px;
    min-width: 320px;
    padding: 1em 0 0.7em 0;
    width: 100%;
}

/* second container class, inside csvideo1 - should just be a plain <div> */

.csvideo2 {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.27%;
}

/* put this class within the Kaltura iframe tag */

.csiframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.csvidcaption {
    color: #646569;
  	display: inline-block;
  	text-align: left;
    font-size: 0.85em;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
  	margin: 0 0 2em 0;
  	max-width: 1000px;
    min-width: 320px;
  	width: 100%;
}


/* *** YOUTUBE VIDEO PLAYERS (embedded iframe code) *** */

/*

Example HTML embed code (no caption), replace ZZZZZZZZZZZ with the YouTube alphanumeric code for the video:

<div style="text-align: center;">
<p class="csvidtitle">This is the video title</p>

<div align="center" class="csvideo1">
<div class="youtube"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/ZZZZZZZZZZZ"></iframe></div>
</div>
</div>

-------------------------------------

Example HTML embed code (with caption), replace ZZZZZZZZZZZ with the YouTube alphanumeric code for the video:

<div style="text-align: center;">
<p class="csvidtitle">This is the video title</p>

<div align="center" class="csvideo1-caption">
<div class="youtube"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/ZZZZZZZZZZZ"></iframe></div>
</div>

<p class="csvidcaption">This is the caption for the video.</p>
</div>

*/

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.youtube iframe, .youtube object, .youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*

Add custom code below here, after all other CSS.
Also, you can add a space and !important just before the
semicolon of each CSS element to "force" the browser to use
that CSS element. (Dreamweaver should auto-fill important if
you just type the exclamation point before the semicolon.)
For example:

.customclass {
    position: relative !important;
    width: 50% !important;
    height: 50% !important;
}

*/