/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */
/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);
/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/
:root {
--dt-color-primary: #002F6C;
--dt-color-primary-contrast: #FFFFFF;
--dt-color-primary-dark-text: #002F6C;
--dt-color-secondary: #017ACD;
--dt-color-secondary-contrast: #000000;
--dt-color-secondary-dark-text: #231F20;
--dt-color-accent: #53565A;
--dt-color-accent-contrast: #FFFFFF;
--dt-color-accent-dark-text: #53565A;
--dt-color-gray: #CCCCCC;
--dt-color-gray-contrast: #000000;
--dt-color-gray-dark-text: #636363;
--dt-color-white: #FFFFFF;
--dt-color-white-contrast: #000000;
--dt-color-white-dark-text: #707070;
--dt-color-graybg: #E6E6E6;
--dt-color-graybg-contrast: #000000;
}
/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION *****************/
/*********************************************************************/
/*********************************************************************/
/*This CSS is provided for the CFA Program. */
/*********************************************************************/
/*********************************************************************/
/* Change Log:
* V1: ESG November 2024
* V2: PreBuild CFA Program December 2024
* V3: PreBuild CFA Program February 2025
* V4: CFA Program May 2025
*********************************************************************/
/*********************************************************************/
/* Standard Curriculum Box */
/* Generic styles for all boxes */
/*********************************************************************/
.cfa-curriculum-box-title {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt !important; /* Heading size */
text-align: center !important; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 25px !important; /* Add spacing above the title */
margin-bottom: 20px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
border-top: 2px solid #CCCCCC !important; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none !important; /* Remove right border */
border-left: none !important; /* Remove left border */
}
.cfa-curriculum-box-h1 {
background-color: inherit !important; /* Inherit background color from parent */
text-align: left !important; /* Align left */
font-size: 18pt !important; /* Heading size */
margin-top: .84em !important; /* Set top margin */
border: none !important; /* Remove any inherited border */
padding: 0em !important; /* Remove padding */
}
.cfa-curriculum-box-h2 {
background-color: inherit !important; /* Inherit background color from parent */
text-align: left !important; /* Align left */
font-size: 18pt !important; /* Heading size */
font-style: italic; /* Heading style */
border: none !important; /* Remove any inherited border */
margin-top: .84em !important; /* Set top margin */
padding: 0em !important; /* Remove padding */
}
.cfa-curriculum-box-h3 {
background-color: inherit !important; /* Inherit background color from parent */
font-size: 16pt !important; /* Heading size */
text-align: left !important; /* Align left */
border: none !important; /* Remove any inherited border */
margin-top: .84em !important; /* Set top margin */
padding: 0em !important; /* Remove padding */
}
/* Solution-title tagging. the h#.cfa-curriculum-solution is old L1,L3 content */
.cfa-curriculum-solution-title, h3.cfa-curriculum-solution, h4.cfa-curriculum-solution, h5.cfa-curriculum-solution, h6.cfa-curriculum-solution {
background-color: inherit !important; /* Inherit background color from parent */
font-size: 14pt !important; /* Heading size */
text-align: left !important; /* Align left */
border: none !important; /* Remove any inherited border */
text-align: left !important; /* Align left */
margin-top: .84em !important; /* Set top margin */
margin-bottom: .84em !important; /* Set top margin */
padding: 0em !important; /* Remove padding */
}
div.cfa-curriculum-solution {
background-color: inherit !important; /* Inherit background color from parent */
max-width: 95%; /* sets a max width for the solution div to hopefully contain tables within it...this will not work when it's on the title */
}
.cfa-curriculum-example-box .dp-panel-content,
.cfa-curriculum-exercise-box .dp-panel-content,
.cfa-curriculum-case-study-box .dp-panel-content,
.cfa-curriculum-shaded-box .dp-panel-content {
background: inherit !important; /* overwrite white background from dp-panel-content */
border: 2px solid #CCCCCC !important; /* overwrite the border from dp-panel-content */
max-width: 95%; /* text and tables were escaping */
}
/*********************************************************************/
/* Case Study Box */
/* Styles for the Case Study box, which has a green border
and light green background */
/*********************************************************************/
.cfa-curriculum-case-study-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #9cd6b5;
background-color: #f2fbf7 !important; /* Sets Background color */
}
/*********************************************************************/
/* Discussion Box */
/* Styles for the Discussion box, which has a light purple border
and background */
/*********************************************************************/
.cfa-curriculum-discussion-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #ebe9ff;
background-color: #f5f3ff !important; /* Sets Background color */
}
/*********************************************************************/
/* Example Box */
/* Styles for the Example box, with a solid blue border
and background */
/*********************************************************************/
.cfa-curriculum-example-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #e4f3ff;
background-color: #e4f3ff !important; /* Sets Background color */
}
/*********************************************************************/
/* Exercise Box */
/* Styles for the Exercise box, which has a light orange border
and background */
/*********************************************************************/
.cfa-curriculum-exercise-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #ffeccc;
background-color: #ffeccc !important; /* Sets Background color */
}
/*********************************************************************/
/* Curriculum Table Wrap */
/* Styles for table wraps with borders, padding, and inherited background */
/*********************************************************************/
.cfa-curriculum-table-wrap {
padding: 15px !important;
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 20px;
border: none;
overflow-x: auto; /* Enable horizontal scrolling for wide images */
background-color: #fff; /* White */
max-width: 100%; /* ensure it uses full available space */
padding: 0; /* temporarily disable horizontal padding */
}
.cfa-curriculum-exhibit-table-wrap,
.cfa-curriculum-table-wrap:has(> .cfa-curriculum-exhibit-table-title) {
background-color: #fff !important; /* White */
border: 2px solid #ccc;
padding: 15px;
}
/* Conditional background color when inside specific containers */
.cfa-curriculum-exhibit-box .cfa-curriculum-table-wrap,
.cfa-curriculum-exhibit-box .cfa-curriculum-figure {
background-color: #fff; /* White */
}
.cfa-curriculum-case-study-box .cfa-curriculum-table-wrap,
.cfa-curriculum-case-study-box .cfa-curriculum-figure {
background-color: #f2fbf7; /* Light Green */
}
.cfa-curriculum-example-box .cfa-curriculum-table-wrap,
.cfa-curriculum-example-box .cfa-curriculum-figure {
background-color: #e4f3ff; /* Light Blue */
}
.cfa-curriculum-exercise-box .cfa-curriculum-table-wrap,
.cfa-curriculum-exercise-box .cfa-curriculum-figure {
background-color: #ffeccc; /* Light Orange */
}
.cfa-curriculum-shaded-box .cfa-curriculum-table-wrap,
.cfa-curriculum-shaded-box .cfa-curriculum-figure {
background-color: #f2f9ff; /* Light Grayish Blue */
}
/*********************************************************************/
/* Curriculum Table Container */
/* Styles for table containers with scrolling and centered alignment */
/*********************************************************************/
.cfa-curriculum-table-container {
overflow-x: auto; /* Enable horizontal scrolling for wide tables */
overflow-y: hidden; /* Remove unneeded vertical scrolling */
min-width: 0; /* Helps solve horizontal scrolling issue */
padding: 0; /* remove any padding interference */
margin: 0; /* eliminate collapse or margin-shifting */
width: 100%;
border: none !important;
}
.cfa-curriculum-table-container + .cfa-curriculum-table-container {
margin-top: 20px; /* Adds space only between consecutive elements */
}
.cfa-curriculum-table-container table {
display: block; /* force table to respect width */
min-width: 100%;
border-collapse: collapse;
box-sizing: border-box;
}
/*********************************************************************/
/* Curriculum Table Wrap Foot */
/* Styles for footnotes or content in table wraps within the curriculum */
/*********************************************************************/
.cfa-curriculum-table-wrap-foot {
font-size: 10pt; /* Set font size to 10pt */
}
.cfa.curriculum-table-cell {
padding: 8px; /* All cells get 8px padding */
}
.cfa.curriculum-table-cell-shaded {
background-color: #E6E6E6; /* Light gray shading for certain table cells */
}
.cfa.curriculum-table-cell-left {
text-align: left;
}
.cfa.curriculum-table-cell-right {
text-align: right;
}
.cfa.curriculum-table-cell-center {
text-align: center;
}
.cfa.curriculum-table-cell-vtop {
vertical-align: top;
}
.cfa.curriculum-table-cell-vbottom {
vertical-align: bottom;
}
.cfa.curriculum-table-cell-vcenter {
vertical-align: center;
}
/*/\* Apply styles to .cfa-curriculum-table-wrap only when it is NOT inside a Case Study, Example, or Shaded box
.cfa-curriculum-example-box or .cfa-curriculum-shaded-box *\/
:not(.cfa-curriculum-example-box):not(.cfa-curriculum-shaded-box):not(.cfa-curriculum-case-study-box) .cfa-curriculum-table-wrap {
}*/
/*********************************************************************/
/* Headers within boxes with the values of exhibit-table,
* table, noborder-table, exhibit-figure, figure */
/*********************************************************************/
/* Exhibit Table Title */
/* Styles for exhibit table titles across multiple heading levels */
/* Styles for exhibit table titles across multiple heading levels (old L1 content and new L2 content) */
div.cfa-curriculum-exhibit-table-title, h3.cfa-curriculum-exhibit-table-title, h4.cfa-curriculum-exhibit-table-title, h5.cfa-curriculum-exhibit-table-title, h6.cfa-curriculum-exhibit-table-title {
width: 100%;
display: block;
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
text-align: center !important; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 25px !important; /* Add spacing above the title */
margin-bottom: 20px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
border-top: 2px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
}
/* This is for L3 content where I tried to use this styling and it doesn't look right. */
/* It comes after the div.cfa-curriculum-exhibit-table-title, etc so the simplistic getStyles catches the first one and not this one */
caption.cfa-curriculum-exhibit-table-title {
caption-side: top;
display: table-caption;
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
text-align: center !important; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 25px !important; /* Add spacing above the title */
margin-bottom: 20px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
border-top: 2px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
}
.cfa-curriculum-table-caption-hidden {
display:none;
}
/* Style for first element in h3, h4, h5, and h6 elements with specific classes */
/* any icon as the first child of an element with a class that starts with "cfa-curriculum-" and class ends with "-box" */
/* Universal icon styling for all curriculum titles */
.cfa-curriculum-exhibit-table-title > i:first-child,
.cfa-curriculum-table-title > i:first-child,
.cfa-curriculum-noborder-table-title > i:first-child,
.cfa-curriculum-exhibit-figure-title > i:first-child,
.cfa-curriculum-figure-title > i:first-child,
figure.cfa-curriculum-exhibit-figure > i:first-child,
.cfa-curriculum-unknownType-title > i:first-child,
.cfa-curriculum-box-title > i:first-child {
border: 1px solid #d3d3d3; /* Light gray border */
display: block; /* Block display for layout control */
margin: -1.35em auto 0; /* Negative top margin to overlap */
text-align: center; /* Center content inside */
width: 2em; /* Set width to 2x font size */
box-sizing: border-box; /* Include padding and border in size */
border-radius: 2em; /* Make circular with rounded corners */
height: 2em; /* Set height to 2x font size */
line-height: 2em; /* Vertically align content */
position: relative; /* Enable positioning adjustments */
color: var(--dt-color-primary-dark-text); /* Blue Icon color */
background-color: inherit !important; /* Always match background color */
}
/* Table Title */
/* Styles for table titles across multiple heading levels */
.cfa-curriculum-table-title {
width: 100%;
display: block;
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
text-align: center !important; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 10px !important; /* Add spacing above the title */
margin-bottom: 10px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
border-top: none !important; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
}
/* No border table title */
.cfa-curriculum-noborder-table-title {
width: 100%;
display: block;
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
line-height: 1.5; /* Set line height for better readability */
padding: 15px; /* Add padding inside the heading */
margin-bottom: 20px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
}
/*********************************************************************/
/* Curriculum Attrib */
/* Styles for figure attributes in the curriculum */
/*********************************************************************/
details,
.cfa-curriculum-fig-note,
.cfa-curriculum-fig-attrib {
font-size: 10pt; /* Set font size to 10pt */
text-align: left !important; /* left align content inside */
line-height: 1.2 !important; /* Set line height for better readability */
padding: 0px; /* Add padding around the title for spacing */
margin-top: 5px !important; /* Add spacing above the title */
margin-bottom: 5px; /* Add spacing below the title */
}
/*********************************************************************/
/* Exhibit Box */
/* Styles for the Exhibit box, which has a gray border
and white background */
/*********************************************************************/
.cfa-curriculum-exhibit-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #ccc; /* Default border */
background-color: #fff !important; /* White background */
}
/*********************************************************************/
/* Curriculum Boxed Text Attrib */
/* Styles for attributes in boxed text within the curriculum */
/*********************************************************************/
.cfa-curriculum-boxed-text-attrib {
font-size: 10pt; /* Set font size to 10pt */
font-style: italic; /* Italic text */
}
/*********************************************************************/
/* Overview Box */
/* Styles for the Overview box, which has a light yellow border
and background */
/*********************************************************************/
.cfa-curriculum-overview-box {
border: 2px solid #fdf5e5; /* Light yellow border */
background-color: #fefaf2 !important;/* Light yellow background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/*********************************************************************/
/* Shaded Box */
/* Styles for a generic Shaded box, with a blue tint border
and background */
/*********************************************************************/
.cfa-curriculum-shaded-box {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #e4f3ff; /* Default border */
background-color: #f2f9ff !important;/* Light blue background */
}
/*********************************************************************/
/* Exhibit Figure */
/* Styles for the Exhibit figure, which has a gray border
and white background */
/*********************************************************************/
.cfa-curriculum-exhibit-figure {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid #ccc;
background-color: #fff !important; /* White background color */
overflow-x: auto; /* Enable horizontal scrolling for wide images */
}
/* Non-exhibit Figures */
.cfa-curriculum-figure {
padding: 15px;
margin-top: 20px;
margin-bottom: 20px;
background-color: #fff !important; /* White background color */
overflow-x: auto; /* Enable horizontal scrolling for wide images */
}
/* Exhibit figure title */
.cfa-curriculum-exhibit-figure-title,
figure.cfa-curriculum-exhibit-figure {
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
text-align: center; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 20px !important; /* Add spacing above the title */
margin-bottom: 20px; /* Add spacing below the title */
background-color: white !important; /* Inherit background color from parent */
border-top: 2px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
}
/* Figure title */
.cfa-curriculum-figure-title {
position: relative;
font-family: Arial, sans-serif; /* Set font to Arial with a sans-serif fallback */
font-size: 18pt !important; /* Set font size for visibility */
text-align: center; /* Center content inside */
line-height: 1.5 !important; /* Set line height for better readability */
padding: 15px; /* Add padding around the title for spacing */
margin-top: 20px !important; /* Add spacing above the title */
margin-bottom: 20px; /* Add spacing below the title */
background-color: inherit !important; /* Inherit background color from parent */
border-top: 2px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
}
/* Unknown type title */
.cfa-curriculum-unknownType-title {
width: 100%;
display: block;
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt !important; /* Heading size */
background-color: #fff; /* Match background color */
border-top: none !important; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align: center;
margin-top: .84em !important;
}
/* Images */
.cfa-curriculum-inline-image {
width: clamp(250px, 100%, 600px); /* Responsive width */
height: auto; /* Maintain aspect ratio */
display:block; /* Ensures proper centering */
min-width: 0; /* Override inline min-width */
margin-left:auto;
margin-right:auto;
}
.cfa-curriculum-graphic > img {
display: inline-block; /* Ensures proper centering */
width: clamp(250px, 100%, 600px); /* Responsive width */
height: auto; /* Maintain aspect ratio */
min-width: 0; /* Override inline min-width */
}
.cfa-curriculum-image {
width: clamp(250px, 100%, 600px); /* Responsive width */
height: auto; /* Maintain aspect ratio */
display:block; /* Ensures proper centering */
margin-left:auto;
margin-right:auto;
}
/*********************************************************************/
/* Blockquote */
/* Styles for the Blockquote element */
/*********************************************************************/
.cfa-curriculum-blockquote {
border-left: 4px solid #cccccc; /* Light gray left border */
padding: 10px; /* Padding inside the paragraph */
font-style: italic; /* Italic text */
margin: 10px 0; /* Vertical margin (top and bottom) */
margin-left: 20px; /* Indentation from the left */
}
/*********************************************************************/
/* LOS Box */
/* Styles for the LOS box, with a gray background and rounded corners */
/*********************************************************************/
div.cfa-curriculum-los-box {
background-color: #f9f9f9; /* Light gray background */
padding: 15px; /* Adds inner spacing for content */
border-radius: 8px; /* Rounds the corners for a smooth appearance */
}
/*********************************************************************/
/* LOS Box Heading */
/* Styles for the inside the LOS box, ensuring proper alignment */
/*********************************************************************/
h3.cfa-curriculum-los-box {
background-color: #f9f9f9; /* Matches the box background */
border-top: 1px solid #e0e0e0; /* Adds a subtle top border */
border-radius: 0px; /* No rounded corners */
text-align: center; /* Centers the heading text */
margin-top: 2em; /* Creates spacing above the heading */
padding-top: 0.5em; /* Adds padding above the text */
font-weight: 500; /* Sets a medium font weight */
line-height: 1.2; /* Adjusts line spacing for readability */
color: var(--bs-heading-color); /* Uses the theme's heading color */
}
/*********************************************************************/
/* LOS Box Icon */
/* Styles for the element inside the LOS box, ensuring proper alignment */
/*********************************************************************/
i.cfa-curriculum-los-box i{
color: var(--dt-color-primary-dark-text); /* Uses primary dark text color */
background-color: #f9f9f9 !important; /* Matches the box background */
}
/*********************************************************************/
/* List Item */
/* Styles for list items inside curriculum elements */
/*********************************************************************/
.cfa-curriculum-list-item {
margin-bottom: 10px; /* Space below each list item */
padding-left: 10px; /* Indentation from the left */
position: relative; /* Position for custom styles */
}
/*********************************************************************/
/* CFA Display Formula Container */
/* Container styling for CFA formula display elements */
/*********************************************************************/
.cfa-curriculum-display-formula-container {
display: block;
margin-left: 1.618em; /* Apply left margin for indentation */
overflow-x: auto; /* Enable horizontal scrolling if needed */
padding: 10px 0; /* 20px padding on top and bottom, no side padding */
max-width: 100%;
padding-bottom:.5rem; /* avoid scrollbar‑overlap */
container-type: inline-size;
box-sizing: border-box;
}
.cfa-curriculum-display-formula-container > math{
display: inline-block; /* Treat like a block but retain shrink-to-fit behavior */
min-width: max-content;
white-space: nowrap; /* keep formula one line until scaled */
}
@container (max-width: 600px){
.cfa-curriculum-display-formula-container > math{
transform:scale(.9);
transform-origin:left top;
}
}
math {
display: inline-block;
white-space: nowrap;
}
/*********************************************************************/
/* CFA Display Formula Number */
/* Styles for displaying formula numbers in CFA curriculum */
/*********************************************************************/
.cfa-curriculum-display-formula-number {
font-weight: bold; /* Make the formula number bold */
float: right; /* Align right */
}
.cfa-curriculum-display-formula-number::before {
content: "(Equation "; /* Display "(Equation " before the number */
}
.cfa-curriculum-display-formula-number::after {
content: ")"; /* Display ")" after the number */
}
/*********************************************************************/
/* CFA Display Inline Formula */
/* Styles for inline formulas in CFA curriculum text */
/*********************************************************************/
.cfa-curriculum-display-inline-formula {
display: inline; /* Ensure formula remains inline with text */
}
/*********************************************************************/
/* Curriculum Front Notes */
/* Styles for front notes in curriculum content */
/*********************************************************************/
.cfa-curriculum-front-notes {
border-top: 2px solid #000; /* Add a 2px horizontal bar above the notes */
padding-top: 10px; /* Add padding above the text for spacing */
margin-top: 20px; /* Add margin to separate from content above */
padding-bottom: 40px;
}
/*********************************************************************/
/* CFA Display Small Caps */
/* Styles text in small caps format */
/*********************************************************************/
.cfa-curriculum-display-small-caps {
font-variant: small-caps; /* Apply small caps styling */
}
/*********************************************************************/
/* CFA Display Strikethrough */
/* Adds a line through the text */
/*********************************************************************/
.cfa-curriculum-display-strikethrough {
text-decoration: line-through; /* Apply strikethrough effect */
}
/*********************************************************************/
/* Curriculum Underline */
/* Styles text with an underline decoration */
/*********************************************************************/
.cfa-curriculum-underline {
text-decoration: underline; /* Apply underline to text */
}
/*********************************************************************/
/* Curriculum Pre */
/* Styles for preformatted text blocks in the curriculum */
/*********************************************************************/
.cfa-curriculum-pre {
background-color: #f4f4f4; /* Light gray background for readability */
padding: 10px; /* Add padding around the block */
border-radius: 5px; /* Rounded corners for aesthetics */
overflow-x: auto; /* Enable horizontal scrolling for long lines */
}
/*********************************************************************/
/* Curriculum Code */
/* Styles for inline or block code elements in the curriculum */
/*********************************************************************/
.cfa-curriculum-code {
font-family: monospace; /* Use a monospace font for code */
color: #d6336c; /* Optional: Dark text color for code */
display: inline; /* Ensure code is displayed inline */
}
/* ******************************************************************* */
/* Popup Styles */
/* Common styles for various curriculum popups, including footnotes, */
/* references, glossary terms, display formulas, figures, tables, and */
/* boxed text. Ensures uniform appearance with consistent dimensions, */
/* padding, and background color. */
/* ******************************************************************* */
.cfa-curriculum-popup-fn, /* Footnote popups */
.cfa-curriculum-popup-ref, /* Reference popups */
.cfa-curriculum-popup-glossary, /* Glossary popups */
.cfa-curriculum-popup-disp-formula, /* Display formula popups */
.cfa-curriculum-popup-fig, /* Figure popups */
.cfa-curriculum-popup-table, /* Table popups */
.cfa-curriculum-popup-boxed-text { /* Boxed text popups */
border: 1px solid #A9A9A9; /* Light gray border */
background: #f7f7f7 !important; /* Light gray background */
padding: 10px; /* Inner padding */
width: 800px; /* Default width */
max-width: 100%; /* Ensure responsiveness */
margin: auto; /* Center horizontally */
border-radius: 3px; /* Rounded corners */
overflow: auto; /* Enable scrolling for overflowing content */
}
/*********************************************************************/
/* Glossary Terms */
/*********************************************************************/
.cfa-curriculum-cite-glossary {
font-weight: bold !important; /* Make the glossary term bold */
}
/*********************************************************************/
/* Curriculum Contributor */
/* Styles for contributor section in curriculum content */
/*********************************************************************/
.cfa-curriculum-contrib {
padding-top: 10px; /* Add margin to separate from content above */
padding-bottom: 10px;
}
/*********************************************************************/
/* Curriculum Contrib Group */
/*********************************************************************/
.cfa-curriculum-contrib-group::before {
content: "By "; /* Add "by " before the contributor's name */
font-weight: bold !important; /* Make the glossary term bold */
display: inline; /* Keeps the element inline with adjacent content */
}
.cfa-curriculum-contrib-group {
display: inline; /* Keeps the element inline with adjacent content */
font-weight: bold !important; /* Make the glossary term bold */
}
/*********************************************************************/
/* Curriculum Aff */
/* Placeholder for styling curriculum affiliations */
/*********************************************************************/
.cfa-curriculum-aff {
font-style: italic; /* Make the glossary term bold */
display: revert; /* New Line */
}
/*********************************************************************/
/* Curriculum Question with Label */
/* Styles the question label to ensure proper spacing and bold text. */
/*********************************************************************/
span.cfa-curriculum-question-with-label {
font-weight: bold; /* Ensures the text appears bold */
margin-right: 5px; /* Adds spacing to separate it from the next element */
display: inline; /* Keeps the element inline with adjacent content */
}
/*********************************************************************/
/* First Paragraph in Question Label */
/* Ensures only the first
inside .cfa-curriculum-question-with-label */
/* remains inline with the preceding content. */
/*********************************************************************/
.cfa-curriculum-question-with-label p:first-of-type {
display: inline; /* Keeps the first paragraph inline with preceding content */
}
/*********************************************************************/
/* Curriculum Reference List */
/* Removes any background styling for the reference list */
/*********************************************************************/
.cfa-curriculum-reflist {
background: #f7f7f7 !important;/* Light gray background */
}
.cfa-curriculum-reflist h3 {
background: #f7f7f7 !important;/* Light gray background */
}
.cfa-curriculum-reflist h3 > i:first-child {
background: #f7f7f7 !important;/* Light gray background */
}
/*********************************************************************/
/* Curriculum Reference List Title */
/* No specific styles needed for the reference list title, but a */
/* light gray background is applied for distinction. */
/*********************************************************************/
.cfa-curriculum-reflist-title {
background: #f7f7f7 !important; /* Light gray background */
}
/*********************************************************************/
/* Curriculum Flashcards para styling */
/* Flashcard interactions are handled with another bit of CSS */
/* This only handles the styling of the text on the page. */
/*********************************************************************/
.cfa-curriculum-flashcard-inst {
text-align: center; /* centering text */
font-style: italic; /* Italic text */
}
.cfa-curriculum-flashcard-count {
display: none; /* hiding until we decide on a style */
text-align: center; /* centering text */
font-size: medium; /* smaller text than the definition */
font-style: italic; /* Italic text */
bottom: 20pt; /* bottom of card div */
right: 20pt; /* right of card div */
position: absolute; /* to get positioning to work */
}
/*********************************************************************/
/* LIST STYLES SECTION */
/* This section defines custom list styles for curriculum content. */
/* It includes bullet lists, numbered lists, and lettered lists. */
/*********************************************************************/
/*UL Lists*/
/*********************************************************************/
/* Curriculum List Step */
/* Removes default numbering or bullets for step lists. */
/*********************************************************************/
.cfa-curriculum-list-step {
list-style-type: none; /* No bullets or numbers */
margin-bottom: 15px; /* Adds spacing between steps */
padding-left: 20px; /* Indents steps */
}
/*********************************************************************/
/* Curriculum List Bullet */
/* Applies standard bullet styling for unordered lists. */
/*********************************************************************/
.cfa-curriculum-list-bullet {
list-style-type: disc; /* Uses a standard filled bullet point */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for better readability */
}
/*********************************************************************/
/* Curriculum List Simple */
/* Removes bullet points for an unstyled list. */
/*********************************************************************/
.cfa-curriculum-list-simple {
list-style-type: none; /* Removes bullet points */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for alignment */
}
/*********************************************************************/
/* Curriculum Definition List */
/* Removes default bullets or numbering for definition lists. */
/*********************************************************************/
.cfa-curriculum-definition-list {
list-style-type: none; /* No bullets or numbers */
margin-bottom: 15px; /* Adds spacing between items */
padding-left: 20px; /* Indents definition list */
}
/*OL Lists */
/*********************************************************************/
/* Curriculum List Decimal */
/* Formats list items with standard decimal numbering (1, 2, 3). */
/*********************************************************************/
.cfa-curriculum-list-decimal {
list-style: decimal; /* Uses standard decimal numbering */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for readability */
}
/*********************************************************************/
/* Curriculum List Lower Alpha */
/* Formats list items with lowercase alphabetical markers (a, b, c). */
/*********************************************************************/
.cfa-curriculum-list-lower-alpha {
list-style: lower-alpha; /* Uses lowercase letters as markers */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for readability */
}
/*********************************************************************/
/* Curriculum List Upper Alpha */
/* Formats list items with uppercase alphabetical markers (A, B, C). */
/*********************************************************************/
.cfa-curriculum-list-upper-alpha {
list-style: upper-alpha; /* Uses uppercase letters as markers */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for readability */
}
/*********************************************************************/
/* Curriculum List Lower Roman */
/* Formats list items with lowercase Roman numerals (i, ii, iii). */
/*********************************************************************/
.cfa-curriculum-list-lower-roman {
list-style: lower-roman; /* Uses lowercase Roman numerals */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for readability */
}
/*********************************************************************/
/* Curriculum List Upper Roman */
/* Formats list items with uppercase Roman numerals (I, II, III). */
/*********************************************************************/
.cfa-curriculum-list-upper-roman {
list-style: upper-roman; /* Uses uppercase Roman numerals */
margin-bottom: 15px; /* Adds spacing between list items */
padding-left: 20px; /* Indents the list for readability */
}
/*********************************************************************/
/* Curriculum Future Classes */
/* These classes exist in the content but currently have no styles. */
/* They are placeholders for future styling needs. */
/*********************************************************************/
/* .cfa-curriculum-steplist-item {} /* Step list item placeholder */
/* .cfa-curriculum-question-with-label {} /* Question label container */
/* .cfa-curriculum-style-type-{@style-type} {} /* Dynamic style type */
/* .cfa-curriculum-style-1 {} /* Placeholder for custom style */
/* .cfa-curriculum-table-p {} /* Curriculum table in paragraphs */
/* .cfa-curriculum-styled-content {} */ /* Answer response blanks */
/**************************************************************************************************************************/
/* Certificate in ESG Investing */
/*This CSS group is provided for the Certificate in ESG Investing to standardize classes used between ESG and CFA Program.*/
/* */
/**************************************************************************************************************************/
/* Case Study Box */
/* Styles for the Case Study box, which has a green border and light green background */
.curriculum-case-study-box {
border: 2px solid #9cd6b5; /* Light green border */
background-color: #f2fbf7 !important; /* Light green background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Case Study box */
h3.curriculum-case-study-box, h4.curriculum-case-study-box, h5.curriculum-case-study-box, h6.curriculum-case-study-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
border-top: 2px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align:center;
margin-top: .84em !important
}
/* Overview Box */
/* Styles for the Overview box, which has a light yellow border and background */
.curriculum-overview-box {
border: 2px solid #fdf5e5; /* Light yellow border */
background-color: #fefaf2 !important; /* Light yellow background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Overview box */
h3.curriculum-overview-box, h4.curriculum-overview-box, h5.curriculum-overview-box, h6.curriculum-overview-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
background-color: #fefaf2; /* Match background color */
border-top: 1px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align:center;
margin-top: .84em !important
}
/* Discussion Box */
/* Styles for the Discussion box, which has a light purple border and background */
.curriculum-discussion-box {
border: 2px solid #ebe9ff; /* Light purple border */
background-color: #f5f3ff !important; /* Light purple background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Discussion box */
h3.curriculum-discussion-box, h4.curriculum-discussion-box, h5.curriculum-discussion-box, h6.curriculum-discussion-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
background-color: #f5f3ff; /* Match background color */
border-top: 1px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align:center;
margin-top: .84em !important
}
/* Exhibit Box */
/* Styles for the Exhibit box, which has a gray border and white background */
.curriculum-exhibit-box {
border: 2px solid #ccc; /* Gray border */
background-color: #fff !important; /* White background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Exhibit box */
h3.curriculum-exhibit-box, h4.curriculum-exhibit-box, h5.curriculum-exhibit-box, h6.curriculum-exhibit-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
text-align:center;
background-color: #fff; /* Match background color */
border-top: 1px solid #CCCCCC !important; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
margin-top: .84em !important
}
/* Shaded Box */
/* Styles for a generic Shaded box, with a blue tint border and background */
.curriculum-shaded-box {
border: 1px solid #e4f3ff; /* Light blue border */
background-color: #f2f9ff !important; /* Light blue background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Shaded box */
h3.curriculum-shaded-box, h4.curriculum-shaded-box, h5.curriculum-shaded-box, h6.curriculum-shaded-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
background-color: #f2f9ff; /* Match background color */
border-top: 1px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align:center !important;
margin-top: .84em !important
}
/* Example Box */
/* Styles for the Example box, with a solid blue border and background */
.curriculum-example-box {
border: 2px solid #e4f3ff; /* Light blue border */
background-color: #e4f3ff !important; /* Light blue background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Example box */
h3.curriculum-example-box, h4.curriculum-example-box, h5.curriculum-example-box, h6.curriculum-example-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
background-color: #e4f3ff; /* Match background color */
border-top: 1px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align:center !important;
margin-top: .84em !important
}
/* Exercise Box */
/* Styles for the Exercise box, which has a light orange border and background */
.curriculum-exercise-box {
border: 2px solid #ffeccc; /* Light orange border */
background-color: #fff5e5 !important; /* Light orange background */
padding: 15px; /* Padding inside the box */
margin-bottom: 20px; /* Space below the box */
}
/* Heading inside the Exercise box */
h3.curriculum-exercise-box, h4.curriculum-exercise-box, h5.curriculum-exercise-box, h6.curriculum-exercise-box {
font-family: Arial, sans-serif; /* Font for the heading */
font-size: 18pt; /* Heading size */
background-color: #fff5e5; /* Match background color */
border-top: 1px solid #CCCCCC; /* Top border for the heading */
border-bottom: none !important; /* Remove bottom border */
border-right: none; /* Remove right border */
border-left: none; /* Remove left border */
text-align: center !important;
margin-top: .84em !important
}
.curriculum-blockquote {
border-left: 4px solid #cccccc; /* Light gray left border */
padding: 10px; /* Padding inside the paragraph */
font-style: italic; /* Italic text */
margin: 10px 0; /* Vertical margin (top and bottom) */
margin-left: 20px; /* Indentation from the left */
}
h4.curriculum-case-study-box>i:first-child, h5.curriculum-case-study-box>i:first-child, h6.curriculum-case-study-box>i:first-child,
h4.curriculum-overview-box>i:first-child, h5.curriculum-overview-box>i:first-child, h6.curriculum-overview-box>i:first-child,
h4.curriculum-discussion-box>i:first-child, h5.curriculum-discussion-box>i:first-child, h6.curriculum-discussion-box>i:first-child,
h4.curriculum-exhibit-box>i:first-child, h5.curriculum-exhibit-box>i:first-child, h6.curriculum-exhibit-box>i:first-child,
h4.curriculum-shaded-box>i:first-child, h5.curriculum-shaded-box>i:first-child, h6.curriculum-shaded-box>i:first-child,
h4.curriculum-example-box>i:first-child, h5.curriculum-example-box>i:first-child, h6.curriculum-example-box>i:first-child,
h4.curriculum-exercise-box>i:first-child, h5.curriculum-exercise-box>i:first-child, h6.curriculum-exercise-box>i:first-child {
border: 1px solid #d3d3d3;
display:block;
margin:-1.5em auto 0;
text-align:center;
width:2em;
box-sizing:border-box;
border-radius:2em;
height:2em;
line-height:2em;
position:relative
}
/**************************************/
/***** Flashcards CSS ****************/
/**************************************/
.flashcard-container {
position: relative;
width: 600px;
height: 300px;
perspective: 1500px;
margin: 30px auto;
display: flex;
justify-content: center;
align-items: center;
}
.flashcard {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 0.6s ease-in-out;
cursor: pointer;
display: none; /* JS sets current one to block */
will-change: transform;
}
.flashcard.flip {
transform: rotateY(180deg);
}
.flashcard .front,
.flashcard .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
/* Centered by default */
display: flex;
flex-direction: column;
justify-content: center; /* vertical center by default */
align-items: center; /* horizontal center by default */
font-size: 24px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
padding: 20px;
box-sizing: border-box;
text-align: center; /* keep text centered unless you prefer left */
overflow-y: auto; /* allow scrolling when needed */
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
/* When content overflows, switch to top alignment (but keep text centered) */
.flashcard .front.overflowing,
.flashcard .back.overflowing {
justify-content: flex-start; /* content starts at the top */
align-items: stretch; /* let content span full width */
padding-top: 24px; /* breathing room at the top */
}
.flashcard .front {
background-color: #e3ebf2;
color: #000;
}
.flashcard .back {
background-color: #f9f9f9;
color: #333;
transform: rotateY(180deg);
font-size: 20px;
}
.controls {
margin-top: 20px;
margin-bottom: 30px;
display: flex;
justify-content: center;
gap: 20px;
}
.control-button {
background-color: #3a6d92;
color: white;
padding: 10px 20px;
text-align: center;
border-radius: 5px;
cursor: pointer;
user-select: none;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: background-color 0.3s ease;
}
.control-button:hover {
background-color: #639ec9;
}
.flashcard p {
margin: 0;
line-height: 1.4;
overflow-wrap: break-word;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
.flashcard-container {
width: 80vw;
height: 40vw;
min-height: 150px;
}
.flashcard .front,
.flashcard .back {
font-size: 18px;
padding: 15px;
}
.flashcard .back {
font-size: 16px;
}
.control-button {
padding: 8px 16px;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.flashcard-container {
width: 90vw;
height: 45vw;
min-height: 120px;
}
.flashcard .front,
.flashcard .back {
font-size: 16px;
padding: 10px;
}
.flashcard .back {
font-size: 14px;
}
.control-button {
padding: 6px 12px;
font-size: 12px;
}
}