@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


:root {
	/* Font families */
	--font-serif: georgia, serif;
	--font-sans: "Roboto", "Open Sans", sans-serif;
	--font-condensed: "Roboto Condensed", sans-serif;
	--font-mono: Consolas, Menlo, Monaco, "Courier New", monospace;
	
	/* Font sizes */
	--font-size-large: 1.5rem;
	--font-size-base: 1.25rem;
	--font-size-small: 1rem;
	--font-size-smaller: 0.9rem;

	/* Line heights */
	--line-height-base: 1.8;
	--line-height-tight: 1.5;
	--line-height-heading: 1.2;
	
	/* Font weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
	--font-weight-xbold: 700;
}


/* Root spacing definition - used for some margins and padding */
/***************************************************************/
:root { --space-unit: .75rem; }


/***********************************************************************/
/* Resets                                                              */
/***********************************************************************/

tr { background: none; }
b, strong { font-weight: var(--font-weight-bold); }

/* toolbar icon fix #hack */
.toolbar-tray-horizontal .toolbar-lining .toolbar-toggle-orientation button.toolbar-icon-toggle-vertical::before {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='currentColor' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e");
	color: #757575; /* darken color to meet 4.5:1 */
}

.toolbar-tray-vertical .toolbar-lining .toolbar-toggle-orientation button.toolbar-icon-toggle-horizontal::before {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='currentColor' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
	color: #757575; /* darken color to meet 4.5:1 */
}

/* remove link style for LTI clean title */
.node__title a[href*="/clean"] {
    text-decoration: none!important;
    color: black !important;
}

/* Fix for clean module using H2 as page header */
h2.node__title { margin-top: 0!important; margin-bottom: calc(var(--space-unit) * 1.5)!important;}


/* highilght module styles to implement actual highlight module css */
mark.marker-yellow 	{ background-color: #FDFD77; }
mark.marker-green 	{ background-color: #62F962; }
mark.marker-pink 	{ background-color: #FC7899; }
mark.marker-blue 	{ background-color: #72CCFD; }
mark.pen-red 		{ background: transparent; color: #EB0000; }
mark.pen-green 		{ background: transparent; color: #128A00; }

dl, ol, ul {
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 2);

}

/***********************************************************************/
/* Screen Readers only - hides text in a span to sighted users         */
/***********************************************************************/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* Unpublished node background change */
/**************************************/
.node--unpublished {
	background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #fbe7ea 10px, #fbe7ea 20px);
}

.messages__wrapper {
	padding: 40px 20px;
	border: 2px solid #be0000;
	font-weight: var(--font-weight-bold);
	color: #be0000;
}

html, body {
	height: 100%;
	margin: 0;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body {
	color: #000;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}


/***********************************************************************/
/* Link coloring                                                       */
/***********************************************************************/

a, .link {
	color: #0033a7;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	transition: color 0.2s, border-bottom 0.2s, background-color 0.2s;
}

.main-content a:hover,
.main-content a:focus,
.main-content a:active {
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

.main-content a:visited {
	color: #660099;
}

.main-content a {
	text-decoration: underline;
}

.navbar-dark .nav-link {
  color: #fff;
}

/* remove underline from external link icon */
a:hover svg.ext {
  text-decoration: none;
}


/* Inline Links - the links for Add Child Page and Printer-friendly */
/********************************************************************/
.inline__links {
	font-family: var(--font-condensed);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
}

.inline__links .nav { display: block; }
.inline__links .nav-link { padding: 0; }


/***********************************************************************/
/* Grid adjustments                                                    */
/***********************************************************************/

.layout-main-wrapper  {
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 2rem;
}

.layout-main-wrapper .container {
	max-width: 95%;
}

#sidebar_first {
	padding: 1rem; /* was 2 */
}


/***********************************************************************/
/* Main content area - structure and typography                        */
/***********************************************************************/

#main {
	background: #f2f2f2;
}

#main > .row {
	flex-wrap: nowrap;
}

.main-content {
	padding: 2rem;
	border: 1px solid #ccc;
	background: #fff;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: var(--font-weight-normal);
	flex: 1 0 auto;
	width: 65%;
}

.node__content {
	font-size: var(--font-size-base);
}

/* changed from .main-content p so may have some effects */
.main-content > p {
	margin-top: 0;
	margin-bottom: calc(var(--space-unit) * 2);
}

.node__content {
	margin-top: 0;
}

.node--unpublished {
	padding: 0;
}

/***********************************************************************/
/* Blockquote changes - lengthy due to the content variability of     */
/* what people put in blockquotes over time                            */
/***********************************************************************/
.main-content blockquote {
	padding: 50px;
	width: 100% !important;
	border-left: 10px solid #999;
	margin-top: calc(var(--space-unit) * 4);
	margin-bottom: calc(var(--space-unit) * 4);
	margin-left: 0;
	margin-right: 0;
	background: #f1f1f1;
	text-align: left;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.main-content blockquote.quote {
	font-style: italic;
	font-size: 1.5rem;
	line-height: 1.6;
	overflow: hidden;
}

.main-content blockquote p {
	font-style: italic;
}

.main-content blockquote li {
	font-style: italic;
}

.main-content blockquote > :first-child {
	margin-top: 0;
}

.main-content blockquote.quote {
	padding: 50px;
	width: 100% !important;
	border-left: 10px solid #999;
	margin-top: calc(var(--space-unit) * 4);
	margin-bottom: calc(var(--space-unit) * 4);
	margin-left: 0;
	margin-right: 0;
	background: #f1f1f1;
	text-align: left;
	font-style: italic;
	font-family: var(--font-serif);
	font-size: 1.5rem;
	line-height: 1.6;
	overflow: hidden;
}

.main-content blockquote.quote footer {
	text-align: right;
	font-style: italic;
	font-weight: var(--font-weight-normal);
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.main-content .quote footer p {
	margin-bottom: 0;
}

.main-content .card blockquote,
.main-content .card blockquote.quote {
	background: #fff;
}

.main-content blockquote > :last-child {
	margin-bottom: 0;
}

.main-content blockquote.red {
	border-right: 10px solid red;
}

.main-content blockquote.green {
	border-right: 10px solid green;
}

.main-content blockquote.blue {
	border-right: 10px solid blue;
}

.main-content blockquote.yellow {
	border-right: 10px solid yellow;
}

/***********************************************************************/
/* Bootstrap Tabs overrides                                           */
/***********************************************************************/

.bootstrap-tabs {
	margin-bottom: calc(var(--space-unit) * 2);
}

.bootstrap-tabs .nav-tabs li {
	font-family: var(--font-serif);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.bootstrap-tabs .nav-tabs > li.active > a,
.bootstrap-tabs .nav-tabs > li.active > a:hover,
.bootstrap-tabs .nav-tabs > li.active > a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #939393;
	border-bottom-color: transparent;
}

.bootstrap-tabs .nav-tabs > li > a {
	border: 1px solid transparent;
}

.tab-content > .active {
	display: block;
	border: 1px solid #939393;
	border-top-width: 0;
}

.bootstrap-tabs .nav-tabs {
	border-bottom: 1px solid #939393;
}

.bootstrap-tabs .tab-pane-content {
	padding: 20px;
}


/***********************************************************************/
/* Glossary DL DT DD styling                                           */
/* Note - affects all use of DL DT DD not just glossaries              */
/***********************************************************************/
.main-content dl:not(.ckeditor-accordion) {
	margin-bottom: 20px;
}

.main-content dt:not(.ckeditor-accordion) {
	color: #0058cb;
	font-weight: var(--font-weight-bold);
	font-size: 1.5rem;
}

.main-content dt:not(.ckeditor-accordion) p:first-of-type {
	color: #0058cb;
	margin-bottom: 0;
	font-weight: var(--font-weight-bold);
}

.main-content dd:not(.ckeditor-accordion) {
	margin-bottom: 15px;
	padding-left: 25px;
}

/* CKEditor accordion */
.ckeditor-accordion-container > dl {
	position: relative;
	border: none;
}


/***********************************************************************/
/* Headings - headers, H1, H2, H3, H4, H5, H6                          */
/***********************************************************************/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: #333;
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	font-style: normal;
	overflow: hidden;
}

h1, .h1 { font-size: 3.00rem; line-height: 1.1; margin-bottom: calc(var(--space-unit) * 4.25); }
h2 .h2 { font-size: 2.75rem; line-height: 1.15; margin-top: calc(var(--space-unit) * 6);  margin-bottom: calc(var(--space-unit) * 3.5); }
h3, .h3 { font-size: 2.50rem; line-height: 1.2; margin-top: calc(var(--space-unit) * 5); margin-bottom: calc(var(--space-unit) * 3); }
h4, .h4 { font-size: 2.00rem; line-height: 1.2; margin-top: calc(var(--space-unit) * 3); margin-bottom: calc(var(--space-unit) * 2); }
h5, .h5 { font-size: 1.75rem; line-height: 1.25; margin-top: calc(var(--space-unit) * 2); margin-bottom: calc(var(--space-unit) * 2); }
h6, .h6 { font-size: 1.25rem; line-height: 1.25; margin-top: calc(var(--space-unit) * 1); margin-bottom: calc(var(--space-unit) * 1); }


/***********************************************************************/
/* Remove bolding of headers #hack                                     */
/* Resulting from content editors applying bold or strong to a heading */
/***********************************************************************/
h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b,
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
h4 u {
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

/* Sidebar heading style */
/*************************/
.sidebar h2 {
	background: #dfe2ea;
	padding: 5px;
	font-size: 1.5rem;
	margin-bottom: 10px;
}

/* H3 differentiatoon - background shading */
/*******************************************/
.main-content h3 {
	border: none;
	background: #f1f1f1;
	padding: 5px 5px 5px 10px;
}

/* H3 blockquote exception - change background shading */
/*******************************************************/
.main-content blockquote h3,
.main-content div[aria-label="additional content"] h3 {
	border: none;
	background: #d1d1d1;
}

/* H4 differentiatoon - border bottom */
/**************************************/
.main-content h4 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	color: #000;
}

/* Removes any underlining of H4 so as not to compete with border bottom */
/*************************************************************************/
h4 + u {
	text-decoration: none;
}


/* H1 and H2 margin fixes when one after the other             */
/***************************************************************/
.block-page-title-block + .block-system-main-block h2:first-of-type {
    margin-top: 0;
}



/* H3 and H4 Removes applied border when a list item or a link */
/***************************************************************/
h3 a,
h4 a,
li h3,
li h3 a,
li h4,
li h4 a,
.box-note:has(> h4:only-child) > h4 {
	border: 0;
}



.search-block-form {
	padding-top: 0;
	margin-top: 0;
}

aside nav {
	padding-left:10px;
}

aside nav a {
	color: #0033a7;
	word-break: normal;
	overflow-wrap: break-word;
}


table + h3 {
	margin-top: 40px;
}

.main-content td > ul:last-child {
	margin-bottom: 0;
}

.main-content td > ul {
	margin-top: 10px;
}


/***********************************************************************/
/* ANCHOR LINK ICONS                                                   */
/* add icons to links that go to graphics directly                     */
/* remove them for images in tables due to formatting issues           */
/***********************************************************************/
a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpg'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] {
	padding: 5px 20px 5px 0;
	background: transparent url(https://www.e-education.psu.edu/meteo101/sites/all/modules/iconizer/files_icons/icon_pic.gif) no-repeat center right;
}

/* Exclude links around images inside <td> #hack */
.image-center a[href$='.jpg'], 
.img-center a[href$='.jpg'], 
td a[href$='.jpg'], 
td a[href$='.gif'], 
td a[href$='.png'], 
td a[href$='.bmp'], 
td a[href$='.jpeg'], 
td a[href$='.svg'], 
td a[href$='.eps'] {
    background: none;
    padding: 0;
}

/* Override lightbox use and remove icons after lightbox images #hack */
a.lightbox {
    background: none !important;
    padding: 0 !important;
}


/***********************************************************************/
/* PRE and CODE styling                                                */
/* these have been used interchangably among all courses               */
/***********************************************************************/
pre:not(.line-numbers) > code:not([class^="language-"]),
.code,
.pre,
pre {
	-moz-tab-size: 4;
	background: #fdfedc;
	border-left: 4px solid #d1d1d1;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	color: #000;
	font-family: var(--font-mono);
	font-size: var(--font-size-base);
	line-height: 1.65;
	margin-top: calc(var(--space-unit) * 1);
	max-width: 100%;
	overflow: auto;
	padding: 1rem;
	tab-size: 4;
	white-space: pre;
	word-spacing: normal;
}

/* reset code for cases of <pre><code> */
pre > code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: inherit;
	margin: 0 !important;
}


code[class*=language-], pre[class*=language-] {
	word-break: break-all;
	word-wrap: break-word;
}


/* Override or adjust properties specifically for span.pre */
span.pre, p > code, td > code, td > p > code {
	background: #f5fab5;
	border-radius: 6px;
	border: 1px solid #9d9d9d !important;
	color: #000;
	display: inline;
	font-family: var(--font-mono);
	font-size: var(--font-size-small) !important;
	line-height: normal;
	margin-top: 0;
	padding: 0.2em 0.4em !important;
	white-space: nowrap;
}


/* PRE default behavior has background, this class is for overriding that */
/*************************************************************************/
pre.no-background {background: none;}

/* PRE inside a PRE will have no background to differentiate it */
/****************************************************************/
pre pre {
	background: none;
}



/* Fourish logo fix */
.flourish-credit img {
	width: 20px !important;
	height: auto !important;
}

/***********************************************************************/
/* Trigger Warning style bod and header                                */
/***********************************************************************/
.trigger-warning {
	background-color:#ffcccc;
	border:2px solid red;
	margin:20px 0;
	padding:15px 30px;
	text-align:center;
}

.trigger-warning h5 {
	font-size:28px;
	margin:0;
	padding:0;
}





/***********************************************************************/
/* Math styling                                                        */
/***********************************************************************/

/* General math element styling */
math {
	font-size: 100% !important;
	line-height: 2 !important;
	margin-bottom: calc(var(--space-unit) * 2);
	text-align: center;
}

math[display="inline"] {
	margin-bottom: 0;
}

/* MathJax Display spacing */
.MathJax_Display {
	margin-top: 0;
	margin-bottom: 0;
	border: none;
}

/* First in a sequence of MathJax_Display within the same parent */
.MathJax_Display:nth-of-type(1) {
	margin-bottom: calc(var(--space-unit) * 2.5);
}

/* Last in a sequence of MathJax_Display within the same parent */
.MathJax_Display:nth-last-of-type(1) {
	margin-top: calc(var(--space-unit) * 2.5);
}

/* Middle elements */
.MathJax_Display:nth-of-type(n+2):nth-last-of-type(n+2) {
	margin-top: calc(var(--space-unit) * 2.5);
	margin-bottom: calc(var(--space-unit) * 2.5);
}

/* PATTERN 1: Legacy standalone structure (no container) */
/*********************************************************/
.box-math {
	float: left;
	width: 83%;
	text-align: center;
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.box-math + .box-math-caption {
	float: right;
	width: 16%;
	text-align: right;
	font-size: var(--font-size-small);
	margin-top: calc(var(--space-unit) * 1);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 100%;
}

.box-math-caption {
	align-items: center;
	display: flex;
	float: right;
	font-size: var(--font-size-small);
	justify-content: flex-end;
	margin-top: calc(var(--space-unit) * 1);
	min-height: 100%;
	text-align: right;
	text-align: right; /* #hack fix for improperly nested caption, align right */
	width: 16%;
}

/* Clear floats for legacy pattern */
.box-math-clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	line-height: 0;
	visibility: hidden;
	margin-bottom: 1.5rem; /* #hack add margin for improperly nested math */
}

.box-math-clear::after {
	content: "";
	display: table;
	clear: both;
	width: 100%;
}


/* PATTERN 2: New container-based structure (.box-math-container) */
/******************************************************************/
.box-math-container {
	display: flex;
	align-items: center;
	gap: 1rem; /* Optional: adds space between equation and caption */
	margin-bottom: calc(var(--space-unit) * 2);
}

.box-math-container .box-math {
  float: none;
  width: auto;
  flex: 1;
	flex: 1; /* Takes up remaining space, replaces width: 83% */
	text-align: center;
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.box-math-container .box-math-caption {
	flex-shrink: 0; /* Prevents shrinking */
	width: 16%; /* Keep your desired width */
	text-align: right;
	font-size: var(--font-size-small);
	margin: 0;
}



/* Reset any MathJax scrolling inside .box-math containers */
/***********************************************************/
/* Only target the specific scrolling properties that are causing issues */
.box-math .MathJax,
.box-math .MathJax_Display,
.box-math span.MathJax {
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* Remove scrollbars from MathJax inside .box-math */
.box-math span.MathJax::-webkit-scrollbar {
	display: none !important;
}


.box-math-container {
	margin-bottom: calc(var(--space-unit) * 2);
}


.box-copyright {
	border: 2px solid #0033a7;
	padding: 20px;
	background: #e2e8f5;
	font-family: var(--font-sans);
}

.box-copyright p {
	margin-bottom: 0;
}



/***********************************************************************/
/* Video                                                               */
/***********************************************************************/
video {
	width: 100% !important;
	height: auto !important;
}

.video-wrapper {
	position: relative !important;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	z-index: 499 !important;
	margin-bottom: 20px;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
}

.video-wrapper + .img-credit {
	margin-top: calc(var(--space-unit)* 1);
}












/***********************************************************************/
/* Buttons                                                             */
/***********************************************************************/
.btn-primary {
	background: #0572E6;
	border-radius: 0;
	border: none;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin-bottom: 0;
	padding: 10px 20px;
	white-space: normal;
}

.main-content > .btn-primary {
	margin-bottom: calc(var(--space-unit) * 3);
}


.img-caption  {
	text-align: center;
}

.img-caption .btn-primary > .show {
	margin-bottom: calc(var(--space-unit) * 1);
	text-align: left;
}

.img-center .video-wrapper + .img-caption {
	margin-top: 20px;
}




/***********************************************************************/
/* Image Caption                                                       */
/***********************************************************************/
.img-caption,
.image-caption, /* hack */
figure figcaption {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: 0;
	margin-top: 20px;
	margin-bottom: 0;
	font-family: var(--font-sans);
	text-align: center;
}

.img-caption + .img-caption,
.image-caption + .image-caption {
	  margin-top: 0; /* Set margin-top to 0 for successive elements */
}

/* #hack for toggler button being outside of .image-caption or img-caption */
.img-caption + .btn-primary.collapser,
.image-caption + .btn-primary.collapser {
	  margin-top: 1rem;
}

.collapser,
.collapser + .collapse {
  margin-bottom: 1rem;
}

.img-center .collapser,
.img-center .collapser + .collapse,
.image-center .collapser,
.image-center .collapser + .collapse {
  margin-bottom: 0;
}

.img-credit + .btn-primary,
.image-credit + .btn-primary {
	margin-top: 0;
}




.img-caption b,
.image-caption b,
.img-caption strong,
.image-caption strong
	/* hack to fix double bolding */ {
	font-weight: var(--font-weight-bold);
}

.img-caption p,
.image-caption p {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: 10px 20px 0 20px;
}

.main-content .img-caption p btn {
	margin-bottom: 0;
}

.image-caption + .image-credit,
.img-caption + .img-credit,
.image-caption + .img-credit,
.img-caption + .image-credit {
	margin-top: 20px;
}

.img-caption ul,
.image-caption ul,
.image-center ul /* hack */ {
	text-align: left;
}

div[aria-label="additional content"]	{
	padding: 0 10px;
	text-align: left;
}

div[aria-label="additional content"] > :first-child	{
	margin-top: 0;
}

div[aria-label="additional content"] p	{
	font-weight: normal;
	margin-bottom: calc(var(--space-unit) * 2);
	text-align: left;
	padding: 0px;
}

div[aria-label="additional content"] > :last-child	{
	margin-bottom: 0 !important;
}

div[aria-label="additional content"] ul,
div[aria-label="additional content"] li	{
	text-align: left;
}

div[aria-label="additional content"] h3	{
	margin-top: 0;
}


/***********************************************************************/
/* Boxes                                                               */
/***********************************************************************/
.indent {
	margin-left: 50px
}

.box-bibliography {
	position: relative;
	border: 1px solid #b8c5e5;
	background: #fbfcff;
	border-radius: 0;
	margin: 40px 0;
	padding: 40px;
	overflow: auto;
	display: flow-root; /* clear internal floats */
}

/* If .box-bibliography contains <p>, apply hanging indent to <p> only */
.box-bibliography:has(p) p, .hanging-indent {
	padding-left: 25px;
	text-indent: -25px;
}

/* If .box-bibliography does NOT contain <p>, apply hanging indent to the div itself */
.box-bibliography:not(:has(p, ul, ol)) {
	padding-left: 25px;
	text-indent: -25px;
	display: block; /* Ensure it behaves like a block */
}





.box-note,
.box-note-orange,
.box-reading-required, .box-reading-optional,
.box-activity-required, .box-activity-optional,
.box-image-left, .box-psu-ad, .box-other, .box-bibliography {
	position: relative;
	/* border: 1px solid #6a8bcf; */
	border: 1px solid #b8c5e5;
	/* background: #f7f9ff; */
	background: #fbfcff;
	border-radius: 0;
	margin: 40px 0;
	padding: 40px 40px 40px 50px;
	overflow: auto;
	display: flow-root; /* clear internal floats */
}

.box-note a,
.box-note-orange a,
.box-reading-required a, .box-reading-optional a,
.box-activity-required a, .box-activity-optional a,
.box-image-left a, .box-psu-ad a, .box-other a, .box-bibliography a {
	color: #005485; /* darken link color on blue box background for contrast */
}

.box-note:after, .box-note-orange:after,
.box-reading-required:after, .box-reading-optional:after,
.box-activity-required:after, .box-activity-optional:after,
.box-image-left:after, .box-psu-ad:after, .box-other:after, .box-bibliography:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 10px;
	background: #b8c5e5;
	border-radius: 0;
}

/* address nesting blockquotes in boxes */
.box-note blockquote,
.box-note-orange blockquote,
.box-reading-required blockquote,
.box-reading-optional blockquote,
.box-activity-required blockquote,
.box-activity-optional blockquote,
.box-note blockquote.quote,
.box-note-orange blockquote.quote,
.box-reading-required blockquote.quote,
.box-reading-optional blockquote.quote,
.box-activity-required blockquote.quote,
.box-activity-optional blockquote.quote {
	background: white;
	  border-right: 1px solid #999;
	  border-top: 1px solid #999;
	  border-bottom: 1px solid #999;
	  border-left: 1px solid #999 !important;
}

/* fix margin-top boxes */
.box-activity-optional h3,
.box-activity-optional h4 {
	margin-top: 0;
}

.box-note,
.box-note-orange {
	position: relative;
	border: 1px solid #6a8bcf;
	background: #f7f9ff;
	border-radius: 0;
	margin: 40px 0;
	padding: 40px;
	overflow: auto;
}

.box-note > math:first-child {
	margin: 0;
}

[class^="box-"]:not(.box-casestudy):not(.box-explore):not(.box-keyskill):not(.box-minute):not(.box-motivate):not(.box-prioritize):not(.box-quizyourself):not(.box-read):not(.box-watch):not(.box-wxchallenge) > h3:first-child,
[class^="box-"]:not(.box-casestudy):not(.box-explore):not(.box-keyskill):not(.box-minute):not(.box-motivate):not(.box-prioritize):not(.box-quizyourself):not(.box-read):not(.box-watch):not(.box-wxchallenge) > h4:first-child {
	margin-top: 0;
}

[class^="box-"]:not(.box-casestudy):not(.box-explore):not(.box-keyskill):not(.box-minute):not(.box-motivate):not(.box-prioritize):not(.box-quizyourself):not(.box-read):not(.box-watch):not(.box-wxchallenge) h3 {
	background: #dce5f3;
}

[class^="box-"] > :last-child {
	margin-bottom: 0;
}

/* pattern for alternate box colors */
.box-note-orange {
	border: 1px solid #f8d49d;
	background: #fef6eb;
}

.box-note-orange:after {
	background: #f8d49d;  /* coordinate with box border color and reset */
	border-radius: 0;
}


/***********************************************************************/
/* Navigation at bottom of content - book-navigation, book-pager       */
/***********************************************************************/
.book-navigation .book-pager {
	background: #fff;
	color: #00529f;
	font-family: var(--font-condensed);
	line-height: 1.4;
	margin-bottom: 50px;
	margin-top: 100px;
	padding: 20px 0 15px !important;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.book-navigation > .menu {
	margin-top: calc(var(--space-unit) * 2);
}

.book-navigation .book-pager li {
	font-family: var(--font-condensed);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: 1.3 !important;
}

.book-navigation .book-pager li a {
	color: #00529f;
}


.book-pager__item--center {
	text-align: center;
	width: 8%;
	padding: 0 !important;
	margin: 0 !important;
}

.book-pager__item--previous,
.book-pager__item--next {
	width:45%;
	max-width:45%;
	border: 0;
	margin: 0 !important;
}

.menu-item--active-trail > a {
	background: #dfdfdf;
	font-weight: var(--font-weight-bold);
	padding: 2px 5px;
	position: relative;
	color: #0033a7;
}

aside .menu a  {
	color: #0033a7;
}

aside .menu a:visited  {
	color: #660099;
}





/***********************************************************************/
/* Navigation at the left of the content - course book navigation      */
/***********************************************************************/
.sidebar_first .block-book-navigation .menu li {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	margin-bottom: 10px;
}
.sidebar_first .block-book-navigation .menu  {
	padding: 0 10px;
}
.sidebar_first .menu-item--expanded > li   {
	padding: 0 20px;
}
.sidebar_first li.menu-item--expanded::before {
	content: "" !important;
}
.sidebar_first .block-book-navigation .menu li .menu {
	margin-left: 20px;
}
.sidebar .block {
	border: none;
	margin: 0 0 2rem;
}
.sidebar .menu-item--expanded:first-of-type ul {
	margin-top: 10px;
}
.search-block-form .form-type-search {
	flex: 1;
}
.search-block-form .form-type-search input,
.search-block-form .form-type-search .form-control,
.form-control
 {
	border: #939393 1px solid !important;
}
.search-block-form .container-inline {
	width: 100%;
	padding-left: 3px;
	padding-right: 3px;
}
.search-block-form .form-submit {
	margin-bottom: 0;
	padding: 6px 20px;
	text-transform: uppercase;
}
.sidebar-links {
	margin: 0;
}
.sidebar-links a {
	color: #0033a7;
}
.sidebar-links ul {
	padding-left: 20px;
	margin: 0;
}
.sidebar-links li,  .sidebar-links li a {
	font-family: var(--font-sans);
  font-size: var(--font-size-small);
	color: #0033a7;
}


/***********************************************************************/
/* Table Checklist code                                                */
/***********************************************************************/
.table-checklist {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	text-align: left;
	margin-bottom: calc(var(--space-unit) * 2);
}

.table-checklist thead tr,
.table-checklist tbody tr th {
	background: #132e82;
	color: #fff;
	text-align: center;
	font-weight: var(--font-weight-bold);
}

.table-checklist tbody tr th {
	text-align: left;
}

.table-checklist th,
.table-checklist td {
	font-family: var(--font-serif);
	font-size: var(--font-size-small);
	padding: 10px;
	border: 1px solid #ccc;
}

.table-checklist ul,
.table-checklist ol {
	padding-left: 20px;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	text-align: left;
	margin-bottom: calc(var(--space-unit) * 1);
}

.table-checklist > :last-child {
	margin-bottom: 0;
}


/************************************************************************/
/* Table Auto Width - creates a table whose width is defined by content */
/************************************************************************/
.table-auto-width {
	width: auto;
	table-layout: auto;
	margin: 0 auto;
	display: table;
}


/************************************************************************/
/* Table Footer - caption and credit for table footer                   */
/* until CK Editor allows tfoot tag                                     */
/************************************************************************/
.table-footer {
	margin-bottom: calc(var(--space-unit) * 4);
	margin-top: calc(var(--space-unit) * 2);
	border-bottom: 1px solid #999;
	padding-bottom: 20px;
}

table:has(+ div.table-footer) {
    margin-bottom: 0;
}


/***********************************************************************/
/* Table Data and Table Numeric code                                   */
/***********************************************************************/
.table-data,
.table-numeric {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	margin-bottom: calc(var(--space-unit) * 2);
}

.two-columns td, .two-columns th {
	width: 50%;
}

.three-columns td, .three-columns th {
	width: 33%;
}

.four-columns td, .four-columns th {
	width: 25%;
}

.table-data th,
.table-data td,
.table-numeric th,
.table-numeric td {
	font-size: var(--font-size-small);
	padding: 10px;
	border: 1px solid #ccc;
	line-height: 1.4;
	vertical-align: top;
}

.table-data tbody td,
.table-data tbody td a,
.table-data tbody td p,
.table-data tbody td p strong,
.table-data tbody td p b,
.table-numeric tbody td,
.table-numeric tbody td a,
.table-numeric tbody td p,
.table-numeric tbody td p strong,
.table-numeric tbody td p b {
	font-size: var(--font-size-small);
	font-family: var(--font-sans);
	line-height: 1.4;
}


/***********************************************************************/
/* Table No Hover - removed table cell default hover color             */
/***********************************************************************/
/* Restore zebra striping on hover for no-hover tables */
.main-content table.no-hover tbody tr:nth-child(even):hover,
.main-content table.no-hover tbody tr:nth-child(even):hover td,
.main-content table.no-hover tbody tr:nth-child(even):hover th {
    background: #eee ; /* matches your zebra stripe color */
}

.main-content table.no-hover tbody tr:nth-child(odd):hover,
.main-content table.no-hover tbody tr:nth-child(odd):hover td,
.main-content table.no-hover tbody tr:nth-child(odd):hover th {
    background: #fff ; /* matches your zebra stripe color */
}

/* For rows with inline styles, this will be overridden by the higher specificity of inline styles */
.main-content table.no-hover tbody tr[style*="background"]:hover,
.main-content table.no-hover tbody tr[style*="background"]:hover td,
.main-content table.no-hover tbody tr[style*="background"]:hover th {
    background: inherit !important;
}

.table-numeric tbody td:first-child {
	text-align: left;
}

.table-numeric tbody td:not(:first-child) {
	text-align: right;
}

.main-content table tfoot,
.main-content table tfoot tr td,
.main-content table tfoot  td,
.table-numeric tfoot,
.table-numeric tfoot tr td,
.table-numeric tfoot td,
.table-data tfoot,
.table-data tfoot tr td,
.table-data tfoot td {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	padding: 25px 0 25px;
}

.main-content table img a:hover {
	border:0;
}

.table-data ul,
.table-data ol,
.table-numeric ul,
.table-numeric ol {
	margin-left: 20px;
	padding-left: 10px;
}

.table-data ul li,
.table-data ol li,
.table-numeric ul li,
.table-numeric ol li {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
}

.table-data td,
.table-numeric td {
	vertical-align: top;
}

.table-data td p,
.table-numeric td p {
	margin-top: 0;
}

.table-data img,
.table-numeric img {
	margin: 0;
}






/***********************************************************************/
/* OL UL Lists                                                         */
/***********************************************************************/

/***********************************************************************/
/*   DEFAULT LIST BEHAVIOR FOR ALL OL/UL                               */
/***********************************************************************/
.main-content .block-system-main-block ul,
.main-content .block-system-main-block ol {
	list-style-position: outside;
	padding-left: 2.5em;
	margin-bottom: calc(var(--space-unit) * 2);
}

.main-content .block-system-main-block > ul,
.main-content .block-system-main-block > ol {
	list-style-position: outside;
	padding-left: 2.5em;
	margin-top: calc(var(--space-unit) * 1);
}

.main-content .block-system-main-block ul,
.main-content .block-system-main-block ol {
	list-style-position: outside;
	padding-left: 2.5em;
	margin-bottom: calc(var(--space-unit) * 3);
}

.main-content .block-system-main-block blockquote ul:last-child,
.main-content blockkquote ul:last-child {
	margin-bottom: 0;
}



.main-content .block-system-main-block ul ul,
.main-content .block-system-main-block ol ol,
.main-content .block-system-main-block ul ol,
.main-content .block-system-main-block ol ul {
	/* margin-top: calc(var(--space-unit) * 1); */
	margin-bottom: 0;
}

.main-content .block-system-main-block li {
	line-height: 2rem;
	margin-bottom: calc(var(--space-unit) * 1);
}


/***********************************************************************/
/*   DEFAULT LIST BEHAVIOR FOR UL IN NAV SIDEBAR                       */
/***********************************************************************/

#sidebar_first aside.section ul.nav {
  list-style-type: disc;
  display: block ! important;
  margin-left: 19px;
  padding-left: 0px;
}
#sidebar_first aside.section ul.nav li {
}
#sidebar_first aside.section ul.nav li a {
  padding-left: 0px ! important;
  margin-left:  0px ! important;
  text-decoration: underline;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
}




/***********************************************************************/
/*   SPACING AROUND HEADINGS & LISTS                                   */
/***********************************************************************/
/* Add spacing before H4 if preceded by P or UL (common cleanup case) */
.main-content p + h4,
.main-content ul + h4 {
	margin-top: calc(var(--space-unit) * 4);
}

/* Fix spacing issue when UL follows a paragraph (tightens grouping) */
.main-content p + ul {
	margin-top: calc(var(--space-unit) * -1);
}

/* Lists (UL/OL) - baseline spacing inside main-content */
.main-content > ul,
.main-content > ol {
	margin-bottom: calc(var(--space-unit) * 5);
}

/* Nested list inside list item - extra spacing */
.main-content li > ul {
	/* margin-top: calc(var(--space-unit) * 1); */
}

/***********************************************************************/
/*   LIST ITEM STYLING                                                 */
/***********************************************************************/
/* Line height and spacing between list items */
.main-content .block-system-main-block li {
	line-height: 2rem;
}

/* Remove margin from last list item */
.main-content li:last-child {
	margin-bottom: 0;
}



/***********************************************************************/
/*   IMAGES AND MATH INSIDE LIST ITEMS                                 */
/***********************************************************************/
/* Add space above image-centered content inside LI */
.main-content li .img-center,
.main-content li .image-center {
	margin-top: calc(var(--space-unit) * 1.5);
}

/* Top margin if a <p> wraps an <img> in a list */
.main-content li > p > img {
	margin-top: calc(var(--space-unit) * 1.5);
}

/* Remove weird spacing from MathML in list items */
.main-content li > math {
	margin: 0;
	margin-bottom: 15px;
}

/***********************************************************************/
/*   UNCLASSED NESTED LISTS (Fallback Styles)                         */
/***********************************************************************/


/* Slight top spacing between nested OLs */
.main-content ol ol {
	margin-top: 10px;
}


/***********************************************************************/
/*   SPECIFIC LIST CLASS DECLARATIONS                                  */
/***********************************************************************/

/* Legacy Classes Defined */
.main-content .list-alpha-lower	{ list-style-type: lower-alpha; }
.main-content .list-alpha-upper	{ list-style-type: upper-alpha; }
.main-content .list-roman-lower	{ list-style-type: lower-roman; }
.main-content .list-roman-upper	{ list-style-type: upper-roman; }

/* Roman Upper */
.main-content .roman-upper { list-style-type: upper-roman; } 			/* Roman - 1st level uppercase */
.main-content .roman-upper ol { list-style-type: lower-roman; } 		/* Roman - 2nd level lowercase */
.main-content .roman-upper ol ol { list-style-type: upper-alpha; } 		/* Roman - 3rd level upper alpha */
.main-content .roman-upper ol ol ol { list-style-type: lower-alpha; } 	/* Roman - 4th level lower alpha */

/* Alpha Upper */
.main-content .alpha-upper { list-style-type: upper-alpha; } 			/* Alpha - 1st level uppercase */
.main-content .alpha-upper ol { list-style-type: lower-alpha; } 		/* Alpha - Second level lowercase */
.main-content .alpha-upper ol ol { list-style-type: upper-roman; } 		/* Alpha - Third level uppercase roman */
.main-content .alpha-upper ol ol ol { list-style-type: lower-roman; } 	/* Alpha - Fourth level lowercase roman */

/* Decimal - One to Five Levels */
/********************************/
/* Root: reset counter */
.main-content .decimal {
	counter-reset: section;
}

.main-content .decimal,
.main-content .decimal ol {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

/* Level 1 */
.main-content .decimal > li {
	counter-increment: section;
	counter-reset: subsection;
	position: relative;
	margin-left: 0;
	padding-left: 2.5em;
}
.main-content .decimal > li::before {
	content: counter(section) ". ";
	position: absolute;
	left: 0;
	width: 2.5em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 2 */
.main-content .decimal > li > ol > li {
	counter-increment: subsection;
	counter-reset: subsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 3em;
}
.main-content .decimal > li > ol > li::before {
	content: counter(section) "." counter(subsection) ". ";
	position: absolute;
	left: 0;
	width: 3em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 3 */
.main-content .decimal > li > ol > li > ol > li {
	counter-increment: subsubsection;
	counter-reset: subsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 3.5em;
}
.main-content .decimal > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
	position: absolute;
	left: 0;
	width: 3.5em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 4 */
.main-content .decimal > li > ol > li > ol > li > ol > li {
	counter-increment: subsubsubsection;
	counter-reset: subsubsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 4em;
}
.main-content .decimal > li > ol > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) "." counter(subsubsubsection) ". ";
	position: absolute;
	left: 0;
	width: 4em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 5 */
.main-content .decimal > li > ol > li > ol > li > ol > li > ol > li {
	counter-increment: subsubsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 4.5em;
}
.main-content .decimal > li > ol > li > ol > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) "." counter(subsubsubsection) "." counter(subsubsubsubsection) ". ";
	position: absolute;
	left: 0;
	width: 4.5em;
	text-align: right;
	padding-right: 0.25em;
}




/***********************************************************************/
/* Table Default and Highchart                                         */
/***********************************************************************/
.main-content table,
table.highchart {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	margin-top: calc(var(--space-unit) * 2);
	margin-bottom: calc(var(--space-unit) * 3);
}

.main-content table thead tr,
.main-content table tbody tr th,
table.highchart thead tr,
table.highchart tbody tr th {
	color: #000;
	text-align: center;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	vertical-align: top;
}


.main-content table tbody td,
.main-content table tbody td a,
.main-content table tbody td p,
.main-content table tbody td p strong,
.main-content table tbody td p b,
.main-content table tbody td li {
	font-size: var(--font-size-small);
	font-family: var(--font-sans);
	line-height: 1.4;
}

.main-content table th,
.main-content table td {
	font-size: var(--font-size-small);
	padding: 10px;
	border: 1px solid #7c8baa;
	line-height: 1.4;
	font-family: var(--font-sans);
	font-weight: var(--font-weight-normal);
	line-height: 1.4;
	vertical-align: top;
}

.main-content table thead tr td,
.main-content table thead tr th {
	background: #b9cbee;
	color: #000;
	font-weight: var(--font-weight-bold);
}

.main-content table tbody tr th {
	background: #d0daef;
	color: #000;
	text-align: left;
	line-height: 1.4;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	vertical-align: top;
}



.main-content table tr th a,
.main-content table tr th a:hover,
.main-content table tr th a:focus {
	color: #000;
}

.main-content table thead tr th a,
.main-content table thead tr th a:hover,
.main-content table thead tr th a:focus {
	color: #000;
}

table.highchart {
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: var(--font-weight-normal);
}

table.highchart td,
table.highchart th {
	padding: 10px;
}

/* Fix for Assignment table center text */
/****************************************/
td[data-label|="Assignment"] {
	text-align: center;
}












.main-content textarea {
	display:block;
	min-height: 40px;
	overflow: auto;
	resize: vertical;
	width: 100%;
 }








/***********************************************************************/
/* Highcharts                                                          */
/***********************************************************************/
.Xhighcharts-container   {
	border: 1px solid #333;
	border-radius: 0;
	padding: 25px;
	margin-top: calc(var(--space-unit) * 2);
	margin-bottom: calc(var(--space-unit) * 2);
}

.highcharts-container  .highcharts-title {
	font-family: var(--font-condensed);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-medium);
}

table caption {
	font-family: var(--font-condensed);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-medium);
	text-align: center;
	caption-side: top;
	padding: .75rem;
	color: #000;
}

table caption p,
.main-content table caption p
 {
	font-family: var(--font-condensed);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-medium);
	text-align: center;
	caption-side: top;
	padding: .75rem .75rem 0;
	color: #000;
	margin-bottom: 0;
}

table td h3,
.main-content table td h3
 {
	margin-top: 0;
}




/***********************************************************************/
/* IMAGES (content)                                                    */
/***********************************************************************/

/* flow-root removes need for clearfix container */
.img-left,
.img-left-35,
.image-left-35,
.img-left-45,
.image-left-45,
.img-right,
.img-right-35,
.image-right-35,
.img-right-45,
.image-right-45 {
	display: flow-root; /* clear internal floats */
}


.imgnofloat {
	width: 100%;
	max-width: 100%;
	height: auto;
}

figure.caption-img.align-left {
	margin-right: 25px;
}

.main-content .img-right,
.main-content .image-right {
	border: 0;
	padding: 0;
	float: right;
	margin: 0px 0px 25px 25px;
	max-width: 50%;
	text-align:center;
	background: none;
}

.main-content .img-left,
.main-content .image-left {
	border: 0;
	padding: 0;
	float:  left;
	margin: 0px 25px 25px 0;
	max-width: 50%;
	text-align:center;
	background: none;
}

.img-left img,
.image-left img,
.img-right img,
.image-right img  {
	max-width: 100%;
	height: auto;
	padding: 0;
}


.box-psu-ad .img-left,
.box-psu-ad .image-left {
	border: 0;
	margin-bottom: 15px;
}


img {
	max-width:100%;
	height:auto !important;
}

/* hack image-center img-center */
.img-center,
.image-center {
	width: 100%;
	background: #fff;
	border: 1px solid #999;
	border-radius: 0;
	text-align: center;
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 1.5);
	display: inline-block;
	padding: 20px; /* try padding here not on contained objects */
}

.box-keyskill iframe,
.img-center iframe,
.image-center iframe {
	display: block;
	margin: 0;
	vertical-align: bottom;
}




.video-wrapper > p:first-child {
	margin: 0;
}




.img-center > :last-child,
.image-center > :last-child {
	margin-bottom: 0 !important;
}

.img-center + p,
.image-center + p,
.img-center + h4,
.image-center + h4 {
	margin-top: calc(var(--space-unit) * 3);
}

.img-center p + .img-credit {
	margin-top: calc(var(--space-unit) * 3);
}






.img-center > p:first-child > iframe,
.image-center > p:first-child > iframe {
	margin-bottom: 0;
}

.img-center img + img {
	/* hack for two images in a box */
	margin-top: 20px;
}

.img-center  > p:first-child,
.image-center  > p:first-child {
	margin-bottom: 0;
}



.img-credit,
.image-credit {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	/* margin-bottom: calc(var(--space-unit) * 1.5); */
	padding: 0;
	text-align: center;
 }



.img-center .img-credit,
.img-center  .image-credit,
.img-center  .credit /* hack */ {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	padding: 0;
	text-align: center;
	margin-bottom: 0;
 }

/* #hack covers multiple spellings of img and image */
.img-center .img-caption .img-credit,
.img-center .image-caption .image-credit {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	padding: 0;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
 }

.img-credit .collapse,
.image-credit .collapse  {
	border-radius: 0;
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin: 1rem 0 0 0;
	text-align: left;
}

.img-credit .collapse p:last-of-type,
.image-credit .collapse p:last-of-type,
.collapse .card-body div p:last-of-type {
	margin-bottom: 0;
}

.img-center .collapse + .img-credit,
.image-center .collapse + .image-credit {
	margin-top: calc(var(--space-unit) * 1);
}




.main-content .collapse {
	transition: opacity 6s ease;
	opacity: 0;
}

.main-content .collapse.show {
	opacity: 1;
}

.main-content .block-system-main-block .card {
	border-radius: 0 !important;
}


.main-content .block-system-main-block .card-body {
	padding: calc(var(--space-unit) * 2);
}



.img-center .card,
.image-center .card {
	border-radius: 0;
	margin: 20px;
	padding: 20px;
	text-align: left;
}


img + .image-credit,
img + .img-credit {
	margin-bottom: calc(var(--space-unit) * 1.5);
	margin-top: calc(var(--space-unit) * 1.5);
}


/* #hack for two images in img-center or image-center */
.image-center > p:nth-of-type(2):has(img),
.img-center > p:nth-of-type(2):has(img) {
	/* has pseudo questionable */
	margin-top: 1rem;
}

.img-center > :last-child:not([class$="caption"]):not([class$="credit"]),
.image-center > :last-child:not([class$="caption"]):not([class$="credit"]),
.img-caption > :last-child,
.image-caption > :last-child,
.img-credit > :last-child,
.image-credit > :last-child {
	margin-bottom: 0;
}





/***********************************************************************/
/* Image left / right                                                  */
/***********************************************************************/
.image-right-45,
.img-right-45 {
	border: 1px solid #999;
	float: right;
	width: 45%;
	margin: 0 0 30px 30px;
	padding: 10px;
	text-align:center;
}

.img-right-45 img,
.image-right-45 img {
	max-width: 100%;
	height: auto;
}

.img-left-45,
.image-left-45 {
	border: 1px solid #999;
	float: left;
	width: 45%;
	margin: 0 30px 30px 0;
	padding: 10px;
	text-align:center;
}

.img-left-45 img,
.image-left-45 img,
.img-right-45 img,
.image-right-45 img,
.img-left-35 img,
.image-left-35 img,
.img-right-35 img,
.image-right-35 img {
	max-width: 100%;
	height: auto;
}

.img-right-45 .img-credit,
.img-right-45 .image-credit,
.image-right-45 .img-credit,
.image-right-45 .image-credit,
.img-right-35 .img-credit,
.img-right-35 .image-credit,
.image-right-35 .img-credit,
.image-right-35 .image-credit,
.img-left-45 .img-credit,
.img-left-45 .image-credit,
.image-left-45 .img-credit,
.image-left-45 .image-credit,
.img-left-35 .img-credit,
.img-left-35 .image-credit,
.image-left-35 .img-credit,
.image-left-35 .image-credit {
	padding: 0 10px;
}


.img-right-45,
.image-right-45,
.img-right-35,
.image-right-35,
.img-left-45,
.image-left-45,
.img-left-35,
.image-left-35 {
	padding: 10px;
	background: #fff;
}

/***********************************************************************/
/* ck-editor escape fix for left and right floats :has                 */
/***********************************************************************/
.ck-widget:has(> .img-left-45) {
	width: 45%;
	float: left;
	margin: 0 30px 30px 0;
}
.ck-widget:has(> .img-left-35) {
	width: 35%;
	float: left;
	margin: 0 30px 30px 0;
}

.ck-widget:has(> .img-left) {
	width: auto;
	float: left;
	margin: 0 30px 30px 0;
}

.ck-widget:has(> .img-right-45) {
	width: 45%;
	float: right;
	margin: 0 30px 30px 0;
}
.ck-widget:has(> .img-right-35) {
	width: 35%;
	float: right;
	margin: 0 30px 30px 0;
}

.ck-widget:has(> .img-right) {
	width: auto;
	float: right;
	margin: 0 30px 30px 0;
}

.ck-widget {
	margin-bottom: calc(var(--space-unit) * 3);
}

/* METEO image floats */
.image-right-35, .img-right-35,
.image-left-35, .img-left-35 {
	border: 1px solid #999;
	width: 35%;
	padding: 10px;
	text-align:center;
}

.image-right-35, .img-right-35 {
	float: right;
	margin: 0 0 20px 20px;
}

.image-left-35, .img-left-35 {
	float: left;
	margin: 0 20px 20px 0;
}

.image-right-35 img,
.img-right-35 img,
.img-left-35 img,
.image-left-35 img {
	max-width: 100%;
	margin-bottom: 10px;
	padding: 0;
}






/***********************************************************************/
/* Image Decorative                                                    */
/***********************************************************************/
.image-decorative-100 {
	width: 100%;
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 3);
}

.image-decorative {
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 3);
}






/***********************************************************************/
/* Book Navigation                                                     */
/***********************************************************************/
.book-navigation {
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	margin-bottom: calc(var(--space-unit) * 5);
	margin-top: calc(var(--space-unit) * 5);
	padding-top: 0;
}

.book-navigation .menu {
	padding-bottom: 0;
	padding-top: 0;
}

.book-navigation .menu {
	border-top: 0;
}

.book-navigation li {
	margin-bottom: 0;
	padding-bottom: 0;
}

.book-navigation li a {
	text-decoration: underline;
}
.book-navigation li a:active,
.book-navigation li a:hover,
.book-navigation li a:focus {
	background: #ffffcc;
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

.book-navigation li a:visited {
	color: #660099;
}

.book-navigation li a:active .node_is_hidden,
.book-navigation li a:hover .node_is_hidden,
.book-navigation li a:focus .node_is_hidden {
	background: #ffffcc;
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

/* fix for hidden nodes css overwrite of edit tabs */
aside .tabs .nav-tabs .nav-item .node_is_hidden {
	  display: block;
	  padding: .5rem 1rem;
	  border: 1px solid transparent;
	  border-top-left-radius: .25rem;
	  border-top-right-radius: .25rem;
	  color: #495057;
	  background-color: #fff;
	  border-color: #dee2e6 #dee2e6 #fff;
}

.menu .menu-item a.node_is_hidden:hover,
.menu .menu-item a.node_is_hidden:active,
.menu .menu-item a.node_is_hidden:visited {
	text-decoration: line-through;
}

ul.menu li.menu-item {
	margin-bottom: 0;
}

#block-oerstatus {
	padding: 40px;
}

#navbar-main {
	background: #4c4c4c;
}

.navbar-brand {
	color: #fff;
}
.navbar {
	padding: .5rem 1rem .5rem 1rem;
}

#edit-submit {
	font-weight: var(--font-weight-xbold);
	margin-left: 5px;
}


/* BREADCRUMBS - override of breadcrumbs.css */
.breadcrumb,
ol.breadcrumb {
	position: relative;
	display: flex;  /* <- Use regular flex instead */
	flex-wrap: wrap;
	align-items: center;
	padding: 10px;
	margin-left: 0 !important;
	margin-bottom: calc(var(--space-unit) * 3);
	background: #efefef;
	width: 100%;
}

/* Hide the first breadcrumb item (e.g., Home) - temporary #hack */
ol.breadcrumb li.breadcrumb-item:first-child {
    display: none;
}

/* Hide items with empty links */
ol.breadcrumb li.breadcrumb-item a:empty {
    display: none;
}

/* Show first item when there are only 2 items and second is empty */
ol.breadcrumb:has(li:nth-child(2) a:empty) li.breadcrumb-item:first-child {
    display: list-item;
}


/* Remove the slash on the new first visible item */
ol.breadcrumb li.breadcrumb-item:nth-child(2)::before {
	content: none;
}

ol.breadcrumb:has(li.breadcrumb-item:only-child) {
	display: none;
}


li.breadcrumb-item {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	padding: 0;
	margin-bottom: 0 !important;
	white-space: nowrap;  /* Prevents text wrapping within items */
	flex-shrink: 0;       /* Prevents items from shrinking */
	margin-right: 0.5rem; /* horizontal spacing only */
}

.breadcrumb-item,
.breadcrumb-item a {
	speak: never;
	-webkit-user-select: none;
	user-select: none;
}

.breadcrumb-item+.breadcrumb-item {
	padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: " / ";
	color: #555;
}






/* Utility Styles */
.text-highlight { color: #eb0000; }
.background-highlight { background-color: #ffd100; }
.faculty-note { color: #bd0000; background-color: #ffe675; font-size: var(--font-size-large); }
.clearfix { clear:both;}


.box-casestudy,
.box-explore,
.box-keyskill,
.box-minute,
.box-motivate,
.box-prioritize,
.box-quizyourself,
.box-read,
.box-watch,
.box-wxchallenge {
	background: #fff;
	border: 1px solid #0033a7;
	border-radius: 0;
	margin-bottom: 20px;
	padding: 25px 25px 25px 25px;
}

.header-motivate,
.header-prioritize,
.header-read,
.header-explore,
.header-keyskill,
.header-casestudy,
.header-quizyourself,
.header-watch,
.header-minute,
.header-wxchallenge {
	height: 65px !important;
	padding-left: 80px !important;
	margin-top: 10px;
}

.header-motivate { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-motivate-box.png) no-repeat left top !important; }
.header-prioritize { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-prioritize-box.png) no-repeat left top !important; }
.header-read { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-reading-box.png) no-repeat left top !important; }
.header-explore { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-explore-box.png) no-repeat left top !important; }
.header-keyskill { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-keyskill-box.png) no-repeat left top !important; }
.header-casestudy { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-casestudy-box.png) no-repeat left top !important; }
.header-quizyourself { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-quizyourself-box.png) no-repeat left top !important; }
.header-watch { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-watch-box.png) no-repeat left top !important; }
.header-minute { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-minute-box.png) no-repeat left top !important; }
.header-wxchallenge { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-wxchallenge-box.png) no-repeat left top !important; }


figure.align-left.medium_300_copyright {
	border:0px rgb(47, 0, 255) solid;
	min-width: 150px;
	padding: 0;
	margin: 0 40px 60px 0;
	display: inline-block;
}

figure.align-left.medium_300_copyright img {
	width:300px;
}

figure.align-left.medium_300_copyright figcaption,
figure.align-left.medium_300_copyright .license_blurb  {
	max-width: 300px;
	padding: 0;
}

figure.align-left.medium_300_copyright figcaption {
	padding-bottom: 10px;
	font-size: .9em;
}

figure.align-left.medium_300_copyright .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
}

.main-content textarea {
	display:block;
	margin-bottom: 10px;
}

figure.align-right.medium_300_copyright  {
	border:0px rgb(47, 0, 255) solid;
	min-width: 150px;
	padding: 0;
	margin: 0 0 60px 40px;
	display: inline-block;
}

figure.align-right.medium_300_copyright img {
	width:300px;
}

figure.align-right.medium_300_copyright figcaption,
figure.align-right.medium_300_copyright .license_blurb  {
	max-width: 300px;
	padding: 0;
}

figure.align-right.medium_300_copyright figcaption {
	padding-bottom: 10px;
	font-size: .9em;
}

figure.align-right.medium_300_copyright .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
 }

.align-center.media_image_embed  {
	margin: 60px 0 0 0;
}

.align-center.media_image_embed .field--type-image {
	float:none;
}

.align-center.media_image_embed img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figure.align-center.media_image_embed figcaption  {
	padding-bottom: 10px;
	font-size: .9em;
}

.image-center .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
	margin-bottom: 60px;
 }

 .main-content .card-body {
	background: #efefef;
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
	margin-top: calc(var(--space-unit) * 2);
	margin-bottom: calc(var(--space-unit) * 2);
}



.main-content .card-body p {
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base)!important;
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
}

.main-content .img-center .card-body,
.main-content .image-center .card-body {
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
	margin-bottom: calc(var(--space-unit) * 2);
}

.main-content .img-center .card-body p,
.main-content .image-center .card-body p {
 background: inherit;
 font-style: initial;
 font-family: var(--font-serif);
 font-size: var(--font-size-base);
 line-height: 2rem;
 font-weight: var(--font-weight-normal);
}

.main-content .img-center .card-body blockquote p {
	background: inherit;
 }


.main-content .card-body p + ul {
	margin-top: calc(var(--space-unit) * 1);
}

.main-content .img-caption .card-body,
.main-content .image-caption .card-body {
	margin-top: calc(var(--space-unit) * 2);
}

.main-content .card-body > :first-child {
	margin-top: 0px;
}

/* Attempt to remove bottom margin from last item in toggler cards */
.main-content .card-body .clicktip > :last-child,
.main-content .card-body > div > :last-child,
.main-content .card-body > :last-child  {
	margin-bottom: 0!important;
}

.btn + .collapse .card-body {
    margin-top: 0;
}

.main-content .card-body .clicktip > :first-child {
	margin-top: 0;
}

.node .field--type-image {
	margin: 0;
}


/* LEFT NAV */

#block-booknavigation {
	background: #e9ecef;
}

#block-booknavigation .menu,
#block-booknavigation li,
#block-booknavigation li a {
	font-size: 15px;
	line-height: 1.4;
}

#block-booknavigation .menu {
	text-indent: -12px;
	margin-left: 0;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
}

#block-booknavigation li {
	list-style: none;
	list-style-position: outside;
}

#block-booknavigation li.menu-item--collapsed::before {
	content: "\25B8";
}

.sidebar_first li.menu-item--expanded::before {
	content: "\25BE";
}

#block-booknavigation .menu .menu-item--expanded .menu li.menu-item::before {
	content: "\25AA";
}

.site-footer__bottom {
	max-width: 100%;
	padding: 0 50px;
}


/* RESPONSIVE FIXES */
.navbar-brand {
	white-space: inherit;
}

.container-fluid {
	padding-right: 0;
	padding-left: 0;
}


/* BRANDING HEADER */

.header-topbar {
	background: #172f56;
}

#navbar-top {
	background: #172f56;
	min-height: 90px;
}

.header-topbar2 .container  {
	margin-left:auto;
	margin-right:auto;
	position: relative;
	width: 95%;
}

#block-headinbgbranding {
	flex: 1 1 auto;
}

.header-btn-collapse-nav {
	display: none;
}



/* UI header styles */

.course-title {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 24px;
	color: #fff;
}

.course-title a,.course-title a:hover  {
	text-decoration: none;
	color: #fff;
}


/* SVG logos - Penn State EMS, Dutton */

.dutton-logo p a img,
.penn-state-ems-logo p a img {
	width: 202px !important;
	height: auto;
}

.penn-state-ems-logo svg {
	width: 205px !important;
	height: auto !important;
	max-width: 205px;
}

.dutton-logo svg {
	width: 400px !important;
	height: auto !important;
	max-width: 205px;
}

.dutton-logo .pugh-blue,
.penn-state-ems-logo .pugh-blue {
	fill: #96bee6 !important;
}

.dutton-logo .white,
.penn-state-ems-logo .white {
	fill: #fff !important;
}

.dutton-logo .beaver-blue,
.penn-state-ems-logo .beaver-blue {
	fill: #1e407c !important;
}

.dutton-logo .clickable-area,
.penn-state-ems-logo .clickable-area {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.dutton-logo .clickable-area:hover,
.penn-state-ems-logo .clickable-area:hover {
	opacity: 0.8;
}


/* Invisible hit areas */
.dutton-logo .hit-area,
.penn-state-ems-logo .hit-area {
	fill: transparent;
	cursor: pointer;
}


.search-bar {
	align-items: center; /* Aligns items vertically centered */
	display: flex;
	justify-content: space-between; /* Adjusts spacing between the items */
}

.course-login  {
	color: #fff;
	display: inline;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	margin-right: 20px;
}

.course-login  a {
	color: #fff;
}
.course-login  a:hover,
.course-login  a:active {
	color: yellow;
}

.course-login {
	color: #fff;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-bold);
}

.department-title p:first-of-type {
	margin: 0;
	padding: 0;
}

.department-of {
	color: #fff;
	font-family: var(--font-condensed);
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 5px;
	margin: 0;
	text-align: right;
	text-transform: uppercase;
}

.department-name {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-normal);
	font-size: 2.25em;
	color: #fff;
	text-align: right;
	margin: 0;
	margin-top: -10px;
}

.department-of a,
.department-name a {
	text-decoration: none;
	color: #fff;
}

.department-of a:hover,
.department-name a:hover {
	text-decoration: none;
	color: #fff;
}

.dutton-logo {
	border: 0;
	padding-left: 25px;
}

.dutton-logo img {
	width: 200px;
	height: auto;
}

.featured-bottom {
	margin-top: calc(var(--space-unit) * 10);
	background: #232e46;
	padding: 25px;
}

.partners-title {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	font-size: 24px;
	color: #fff;
}

.partners {
	text-align: center;
	background: #2a3551;
	padding: 20px;
}

.partners img {
	margin: 0 50px;
}

.course-authors, .oer-statement, .dutton-links, .accessibility-statement,
.course-authors p, .oer-statement p, .dutton-links p, .accessibility-statement p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
}

.course-authors, .dutton-links, .oer-statement {
	margin-top: 0;
}

.course-authors p:last-of-type,
.dutton-links p:last-of-type,
.oer-statement p:last-of-type,
.accessibility-statement p:last-of-type {
	margin-bottom: 0;
}

.site-footer {
	background: #14161e;
	bottom: 0;
	display: flow-root; /* clear internal floats */
	flex-shrink: 0;  /* Prevents footer from shrinking */
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.region-footer-second p a {
	color: #80a9d5;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
	text-decoration: underline;
}

.region-footer-second p a:hover,
.region-footer-second p a:focus,
.region-footer-second p a:active {
	border-bottom: 2px solid yellow;
	color: yellow !important;
	text-decoration: none;
}

.region-footer-third {
	padding-right: 25px;
}

.dutton-links p a,
.oer-statement p a {
	color: #80a9d5;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
	text-decoration: underline;
 }

.oer-footer-image:hover {
	border: 0 !important;
}

#block-base-course-theme-duttonlinks {
	padding-top: 0;
}

.site-footer > .container > .row:first-of-type {
	background: #131e36;
}

.site-footer > .container > .row:last-of-type {
	background: #000;
}

.site-footer__top {
	background: #202634;
}

.site-footer__top .row {
	margin-top: 20px;
}

.site-footer .block {
	margin: 0 20px 20px;
	border: 0;
	padding: 10px;
}

.site-footer {
	padding-top: 20px;
}

.site-footer,
.site-footer .container,
.site-footer .container .row {
	max-width: 100%;
}

.site-footer .container .row {
	margin-left: 0;
	margin-right: 0;
}

.site-footer section {
	padding-top: 20px;
}

.oer-statement img {
	width: 150px;
	height: auto;
}

.department-image img {
	width: 680px;
	height: auto;
}

.site-footer .content {
	color: #fff;
	font-size: var(--font-size-small);
}

.site-footer .container {
	margin: 0;
	max-width: 100% !important;
	padding: 0;
}

.site-footer__bottom {
	border-top: 5px solid #4f5056;
	margin: 0;
	padding: 0;
	width: 100%;
}

.site-footer__bottom .region-footer-fifth {
	margin: 0;
	width: 100%;
}

.region-footer-fifth div {
	margin: 0;
	width: 100%;
}

.penn-state-footer {
	color: #fff;
	display: flex;
	font-family: var(--font-sans);
	font-size: var(--font-size-smaller);
	justify-content: center;
	padding: 30px 0 40px;
}

.penn-state-footer p:last-of-type {
	margin-bottom: 0;
}

.penn-state-footer a {
	text-decoration: underline;
}

.penn-state-footer img {
	margin-right: 20px;
}

.block-simple-blockpenn-state-footer {
	margin: 0 !important;
}

.footer-container {
	align-items: start;
	display: flex;
	justify-content: space-between;
	margin: 0;
	max-width: 80%;
}

.footer-container p {
	margin: 0;
	margin-bottom: 5px;
}

.footer-logo {
	max-width: 300px;
}

.footer-left {
	text-align: left;
	width:45%
}

.footer-right {
	text-align: right;
	width:45%
}

.footer-container a {
	color: white;
	text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
	border-bottom: 2px solid yellow;
	color: yellow !important;
	text-decoration: none;
}

.site-footer .dutton-logo a:hover,
.site-footer .dutton-logo a:focus,
.site-footer .dutton-logo a:active {
	border-bottom: 0;
	text-decoration: none;
}


/***********************************************************************/
/* Search Results                                                      */
/***********************************************************************/

.search_exclude_node_search-results {
	padding: 0 !important;
	margin-bottom: calc(var(--space-unit) * 3);
}

.search_exclude_node_search-results .list-group-item {
	border: none !important;
	margin-bottom: calc(var(--space-unit) * 4);
	padding: 0;
}

.search_exclude_node_search-results .list-group-item h3 {
	margin: 0;
	background: none;
	padding: 0;
}


.search_exclude_node_search-results .list-group-item h3 a:hover,
.search_exclude_node_search-results .list-group-item h3 a:active,
.search_exclude_node_search-results .list-group-item h3 a:focus {
	border-bottom: none !important;
}

.search_exclude_node_search-results .list-group-item h3:hover,
.search_exclude_node_search-results .list-group-item h3:active,
.search_exclude_node_search-results .list-group-item h3:focus {
	background: #ffffcc;
	color: #660099 !important;
	display: inline;
	text-decoration: none;
}

.js-pager__items li {
	float: left;
}


.main-content .search-form .js-form-submit {
	background: #0572E6;
	border-radius: 0;
	border: none;
	font-family: var(--font-sans) !important;
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin-bottom: 0;
	padding: 7px 20px;
	text-transform: uppercase;
	white-space: normal;
}


.details-wrapper {
	background: #efefef;
	padding: 10px 20px;
	margin-top: 10px;
}

.details-wrapper legend {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: var(--font-weight-medium);
}

/***********************************************************************/
/* Development Note                                                    */
/***********************************************************************/

.dev-note::before {
	content: "DEVELOPMENT NOTE:";
	font-weight: var(--font-weight-bold);
	color: red;
	display: block;
	margin-bottom: 20px;
}
.dev-note {
	border: 5px dashed red;
	padding: 20px;
	margin: 10px 0;
	font-weight: var(--font-weight-bold);
	color: red;
}

/***********************************************************************/
/* SVG External Link Icon                                              */
/***********************************************************************/

svg.ext {
	padding: 0 4px;
	margin: 0;
	width: 22px;
	height: 22px;
	fill: #000;
	font-weight: 900;
}


/***********************************************************************/
/* Accordions - CKEditor and D7 version                                */
/***********************************************************************/

.ckeditor-accordion-container > dl dt.active > a {
	background-color: #0572E6;
}

/* contents */
.ckeditor-accordion-container > dl dd {
	display: none;
	padding: 10px;
	/* margin: 0; */
}

.ckeditor-accordion-container > dl dd > .img-center,
.ckeditor-accordion-container > dl dd > .image-center {
	margin-top: 0;
	margin-bottom: 0;
}

.main-content .ui-accordion-header,
.ckeditor-accordion-container > dl dt > a,
.ckeditor-accordion-container > dl dt > a:not(.button) {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	font-size: 24px;
	text-decoration: none;
	color: #000;
	display: block;
	padding: 10px 15px 10px 50px;
	background-color: #b8c5e5;
	/* background-color: #0572E6; prev color */
	cursor: pointer;
	-webkit-transition: background-color 300ms;
	transition: background-color 300ms;
	border-bottom: 1px solid #fff;
}

.ui-accordion .ui-accordion-content,
.ckeditor-accordion-container > dl dd {
	border: 1px solid #b8c5e5;
}



.main-content .ui-accordion-header {
	padding-left: 20px;
}

.main-content .ui-accordion-header:hover,
.ckeditor-accordion-container > dl dt > a:hover,
.ckeditor-accordion-container > dl dt > a:not(.button):hover {
	background-color: #98B0EC;
	color: #000;
	/* background-color: #0256b1; prev color */
}




.main-content .ui-accordion .ui-accordion-header {
	margin: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br,
.ui-corner-left,
.ui-corner-bl,
.ui-corner-top,
.ui-corner-tr,
.ui-corner-tl {
	  border-radius: 0;
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before,
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
	background: #000;
}


/* Prism css overrides */
code[class*=language-], pre[class*=language-] {
	font-family: var(--font-mono);
}

/* LINE NUMBERS WORK:
	 Reset the counter for each <pre> element */

pre.line-numbers {
	counter-reset: line;
	position: relative;
	padding-left: 40px; /* Space for the line numbers */
	margin-bottom: calc(var(--space-unit) * 2);
}

/* Style for each <code> line */
pre.line-numbers code {
	display: block;
	white-space: pre-wrap;
	font-family: var(--font-mono);
}

/* Style to bold keywords in python */
.line-numbers .keyword {
	font-weight: var(--font-weight-xbold) !important;
}







div[class^="box-"] > :first-child {
	margin-top: 0;
}


div[class^="box-"] > :last-child {
	margin-bottom: 0;
}




td > :last-child {
	margin-bottom: 0!important;
}

.main-content iframe + p,
.main-content iframe + script + p {
	margin-top: 20px;
}


/* table zebra striping */
main table tbody tr:nth-child(even) {
	background: #eee; /* old color e7eaf2, swapped odd - even */
}

/* table no zebra striping */
main table.no-striping tbody tr:nth-child(even) {
	background: #fff; /* old color e7eaf2, swapped odd - even */
}


main table tbody tr:nth-child(odd) {
	background: #fff;
}

/*  table row hover set to all tables
	remove generic table lines to confine to specific table types */
.main-content table tbody tr:hover,
.main-content table tbody tr:hover td,
.main-content table tbody tr:hover th,
.main-content table tbody tr td:hover,
.main-content table tbody tr th:hover,
.main-content .table-checklist tbody tr:hover,
.main-content .table-data tbody tr:hover,
.main-content .table-numeric tbody tr:hover,
.main-content .table-responsive tbody tr:hover,
.main-content .auto-width tbody tr:hover {
	background: #fffde6;
}

/* Table dark-over adds a yellow opacity to table rows to respect inline styles */
.main-content table.dark-hover tbody tr:hover,
.main-content table.dark-hover tbody tr:hover td,
.main-content table.dark-hover tbody tr:hover th,
.main-content table.dark-hover tbody tr td:hover,
.main-content table.dark-hover tbody tr th:hover {
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 0, 0.25) !important;
}




/* Two-column content template 
.main-content .container {
	padding: 0;
	margin-bottom: 25px;
}

.main-content .container .row {
	max-width: 100%;
	padding: 0;
	margin: 0;
} */



/***********************************************************************/
/* Partnerships                                                        */
/***********************************************************************/

/* Parent container */
.partner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* Allows wrapping for smaller screens */
	padding: 20px;
}

/* Individual logo divs */
.logo-item {
	display: flex;
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */
	padding: 0 15px;
}

.logo-item img {
	max-width: 100%;
	height: auto;
}






/***********************************************************************/
/* Migration review #hacks for helping find issues                    */
/***********************************************************************/
.img-center:empty,
.image-center:empty {
	border:2px solid green;
	height: 25px;
	font-size: 14px;
}

.img-center:empty::before,
.image-center:empty::before {
	content: "Empty image center";
}

h3:empty {
	border:2px solid red;
	height: 25px;
	font-size: 14px;
}

h3:empty::before {
	content: "Empty H3";
}

h4:empty {
	border:2px solid red;
	height: 25px;
	font-size: 14px;
}

h4:empty::before {
	content: "Empty h4";
}

p:empty {
	border:2px solid purple !important;
	font-size: 14px !important;
	height: 25px !important;
}

p:empty::before {
	content: "Empty P tag";
}



/* Hide div created by Ckeditor escape hack */
.ck-reset_all {
	display:none
}

/* Flex container CSS for multiple vertically aligned top columns */
.flex-container {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.flex-container > * {
    flex: 1; /* Each child gets equal width automatically */
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    background: none;
}






/************************************************************************/
/* MOBILE size responsiveness styles                                    */
/************************************************************************/

/* Screen size 768px and smaller - generally mobile devices             */
/************************************************************************/
@media (max-width: 768px) {
	.layout-main-wrapper {
		margin-top: 20px;
		margin-bottom: 20px;
		padding: 1rem;
	}

	.layout-main-wrapper .container {
		max-width: 100% !important;
	}

	.main-content {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin: 0;
		padding: 1rem;
	}

	.row {
		margin-left: 0;
		margin-right: 0;
	}

	header .navbar {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.region-secondary-menu,
	.navbar-form {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 10px 0;
	}

	.department-title {
		padding-right: 0;
	}

	.department-name {
		text-align: center;
		padding-right: 0;
		margin-top: 0;
		line-height: normal;
	}

	.department-title p:first-of-type {
		margin-top: 15px;
    	margin-bottom: 10px!important;	
		text-align: center;
		padding-right: 0;
		line-height: normal;
	}

	/* table scroll */
	.main-content table,
	.main-content .table-data {
		display: block;
		overflow-x: auto;
		width: fit-content;
		max-width: 100%;
		-webkit-overflow-scrolling: touch; /* For older iOS */
		margin-left: auto;
		margin-right: auto;
	}

	.main-content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.main-content .container .col-md-6 img {
		padding-bottom: 20px;
	}

	.partner-container {
		align-items: center;
		flex-direction: column;
	}

	.logo-item {
		padding: 20px 0;
	}

	.img-right {
		float: none;
		margin: 20px 0;
		max-width: 100%;
		width: 100%;
	}

	.box-activity-optional,
	.box-activity-required,
	.box-bibliography,
	.box-image-left,
	.box-note-orange,
	.box-note,
	.box-other,
	.box-psu-ad,
	.box-reading-optional,
	.box-reading-required {
		padding: 20px;
	}


	.book-navigation {
    	margin-top: calc(var(--space-unit) * 1);
	}

	.book-navigation .book-pager {
		margin-top: 0;
	}

	.book-navigation li {
		margin-bottom: 10px;
		padding-bottom: 0;
		float: none;
		width:100%;
		max-width: 100%;
	}

	.book-pager li {
		text-align: center;
	}

	.site-footer .block {
		margin: 0;
	}

	.site-footer section {
		padding-top: 0;
	}

	.region-footer-first {
		width: 100%;
		max-width: 100%;
		text-align: center;
		display: block;
		margin-top: 20px;
	}

	/* stack two column container vertically */
	.two-column-container {
		flex-wrap: wrap;
	}
	.column-left, .column-right {
		flex: 1 1 100%;
		gap: 0;
	}

	/* Mobile content margin/padding alternations */
	.img-center .card,
	.image-center .card {
		margin: 0;
		padding: 10px;
	}

	.main-content .img-caption .card-body,
	.main-content .image-caption .card-body {
		margin-top: 0;
	}

	.img-center, .image-center {
		padding: 10px;
	}

	.box-note .img-center, .box-note .image-center {
		padding: 0;
		border: none;
	}

	.box-note:after, .box-note-orange:after, .box-reading-required:after, .box-reading-optional:after, .box-activity-required:after, .box-activity-optional:after, .box-image-left:after, .box-psu-ad:after, .box-other:after {
		width: 5px;
	}

	.breadcrumb,
	ol.breadcrumb {
		display: block !important;
		padding: 8px 10px;
		background: #efefef;
		font-family: var(--font-sans);
		font-size: 0.875rem;
		line-height: 1.4;
		margin: 0;
		margin-bottom: calc(var(--space-unit) * 2);
		list-style: none !important;
	}

	li.breadcrumb-item {
		display: inline;
		margin: 0;
		padding: 0;
	}

	/* Hide the first breadcrumb item (e.g., Home) - temporary #hack */
	ol.breadcrumb li.breadcrumb-item:first-child {
		display: none;
	}
	
	.breadcrumb-item::before,
	.breadcrumb-item::after {
		content: "" !important;
		display: none !important;
	}

	/* Add separators to the a elements instead */
	.breadcrumb-item a {
		color: inherit;
		text-decoration: none !important;
		display: inline;
	}

	.breadcrumb-item:not(:last-child) a::after {
		content: " / ";
		display: inline;
	}

	h1, h2, h3, h4, h5 {
		word-break: keep-all;
		word-break: normal;
	}

	.search-block-form.form-row {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	#search-block-form .js-form-type-search {
		margin-bottom: 0 !important;
	}

	.search-block-form .form-control {
		width: 100%;
		box-sizing: border-box;
	}

	.search-block-form .btn {
		width: 100%;
		box-sizing: border-box;
	}

	.row>* {
		padding-left: 0;
	}
	#sidebar_first {
		padding: 0;
	}
	.sidebar .block {
		padding: 15px 0;
	}
	.search-block-form .container-inline {
		padding-left: 0;
		padding-right: 0;
	}


	.main-content .block-system-main-block .card-body {
		padding: 0;
	}

	.main-content .block-system-main-block ul, .main-content .block-system-main-block ol {
		list-style-position: outside;
		padding-left: 1.5em;
		margin-bottom: calc(var(--space-unit) * 3);
	}

	/* reduce indent to 25px from 50 */
	.indent {
		margin-left: 25px;
	}

}
/* end max-width 768px ***************************************************/


/* Screen size 1280px and smaller - generally tablets and mobile devices */
/*************************************************************************/
@media (max-width: 1280px) {

	/* #Hack to hide hamburger menu in primary menu area and show log in/log out link */
	/* This was done to avoid having to place the menu in a different block and       */
	/* re-configure the CSS and our theme at the late date.                           */

	.navbar-toggler.collapsed { display: none; }
	.navbar .collapse:not(.show) { display: flex !important; }

	#block-base-course-theme-useraccountmenu .nav .nav-item a.nav-link {
		text-transform: uppercase;
		color: yellow;
		text-decoration: underline;
	}

	/* reposiiton navigation below content */
	#main > .row {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	.sidebar-offcanvas {
		position: static;
		top: auto;
		width: 100%;
		order: 2;
	}
	
	.main-content {
		display: flex;
		flex-direction: column;
	}

	.main-content {
		order: 1;
	}

	.sidebar_first,
	.main-content {
		width: 100%;
		align-self: flex-start;
		display: flex;
		padding: 1rem;
	}

	.sidebar .block {
		border: none;
		margin: 0;
	}
	
	/* Stack footer on tablets and phones */
	.sidebar_first aside {
		width: 100%;
	}

	.site-footer .col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	.site-footer .col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}

	.dutton-logo img {
		max-width: 300px;
		margin-bottom: 20px;
		height: auto;
	}
	
	.penn-state-footer img {
		float: none;
		display: block;
		margin-bottom: 10px;
	}
	
	.penn-state-footer img, .penn-state-footer p  {
		text-align: center;
		margin: 0 auto;
		padding-bottom: 20px;
	}
	
	.main-content blockquote {
		  padding: 20px;
	}

	.main-content blockquote.quote {
		padding: 20px;
	}

	/* #hack to address iframes without containers */
	iframe[src*="youtube.com"],
	iframe[src*="youtu.be"] {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	/* @supports for browsers that don't supposet aspect-ratio */
	@supports not (aspect-ratio: 16/9) {
		iframe[src*="youtube.com"],
		iframe[src*="youtu.be"] {
		height: 56.25vw;
		}
	}

	h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; }


	/* Fix to remove floats on image left and image right on mobile */
	.main-content .img-left,
	.main-content .image-left,
	.main-content .img-left-45,
	.main-content .image-left-45,
	.main-content .img-left-35,
	.main-content .image-left-35,
	.main-content .img-right,
	.main-content .image-right,
	.main-content .img-right-45,
	.main-content .image-right-45,
	.main-content .img-right-35,
	.main-content .image-right-35,
	.main-content .ck-widget:has(> .img-left),
	.main-content .ck-widget:has(> .img-left-45),
	.main-content .ck-widget:has(> .img-left-35),
	.main-content .ck-widget:has(> .img-right),
	.main-content .ck-widget:has(> .img-right-45),
	.main-content .ck-widget:has(> .img-right-35) {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.main-content .img-left img,
	.main-content .image-left img,
	.main-content .img-right img,
	.main-content .image-right img {
		float: none;
		max-width: 100%;
		height: auto !important; /* #hack override inline height declarations */
		padding: 10px;
	}

	div[aria-label="additional content"] > :first-child {
		margin-top: 15px;
	}

	div[aria-label="additional content"] h3 {
		background: #dce5f3;
	}

	.book-navigation > .menu {
		margin-top: calc(var(--space-unit) * 5);
	}

	span.pre {
		white-space: pre-wrap;
		word-break: break-word;
	}

	/* css rescue overwrites tables with a defined width at tablet size */
	table[style*="width:" i][style*="px" i] {
		width:auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: table;
	}

	/* Mobile and tablet Math */
	.box-math-container {
    	flex-direction: column; /* Stack vertically instead of side-by-side */
    	align-items: stretch; /* Full width for both items */
		gap: 0;
		margin-bottom: calc(var(--space-unit) * 4);
		margin-top: calc(var(--space-unit) * 4);
  	}

   .box-math-container .box-math {
    	width: 100%;
    	margin-bottom: 0.5rem;
    	text-align: center;
    	overflow-x: auto;
    	overflow-y: hidden;
    	-webkit-overflow-scrolling: touch;
	  }

    .box-math-container .box-math-caption {
    	width: 100%;
    	text-align: center;
    	margin-top: 0.5rem;
	}

	/* Legacy pattern - stack vertically */
	.box-math + .box-math-caption {
		display: block;
		float: none;
		width: 100%;
		text-align: center;
		margin-top: 0.5rem;
	}
	
	.box-math:has(+ .box-math-caption),
	.box-math {
		display: block;
		float: none;
		width: 100%;
		margin-bottom: 0.5rem;
		text-align: center;
	}

	/* Add margin only to legacy pattern captions */
	.box-math + .box-math-caption {
		margin-bottom: calc(var(--space-unit) * 2);
	}

	/* attempt to add scrollbar to mathjax not put in a container */
	.MathJax_Display {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		margin: 0;
	}

	.MathJax_Display:nth-last-of-type(1),
	.MathJax_Display:nth-of-type(1) {
		margin: 0;
	}

	.dutton-logo {
		padding-left: 0;
		margin-bottom: 25px;
	}

	.header-casestudy,
	.header-explore,
	.header-keyskill,
	.header-minute,
	.header-motivate,
	.header-prioritize,
	.header-quizyourself,
	.header-read,
	.header-watch,
	.header-wxchallenge {
		height: 100px !important;
	}


	.department-title, .department-of {
    	text-align: center!important;
	}

}
/* end max-width 1280px */



/* Screen size 1280px and larger - tablets and desktop                   */
/*************************************************************************/
@media (min-width: 1280px) {
	.main-content .container .col-md-6:first-of-type {
		padding-left: 0;
	}
	
	.main-content .container .col-md-6:last-of-type {
		padding-right: 0;
	}

	.layout-main-wrapper .container {
		max-width: 1600px !important;
		margin: 0 auto;
		width: 100%;
	}

	.sidebar_first {
		flex: 0 0 25%;
		width: 25%;
		max-width: 25%;
	}
	
	#main {
		padding-left: 0;
		padding-right: 0;
	}
	
	.main-content {
		flex: 0 0 75%;
		width: 75%;
		max-width: 75%;
		padding: 2rem;
	}
}
/* end min-width 1280px */


/************************************************************************/
/* END of MOBILE size responsiveness styles                             */
/************************************************************************/