Style Sheet Code

/* headers */
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
margin-top: 1em !important;
margin-bottom: 1em !important;
}

.part-title {
color: #000000 !important;
}

.chapter-title {
color: #000000 !important;
}

/*Icons in textbox headers*/

h3.textbox__title {

margin: 0;

}

.web-only {
display: block;
}

.non-web {
display: none;
}

.textbox–learning-objectives .textbox__header::before,

.textbox–exercises .textbox__header::before,

.textbox–examples .textbox__header::before,

.textbox–key-takeaways .textbox__header::before{

content: “”;

display: block;

float: left;

background-size: 50px 50px !important;

width: 50px;

height: 50px;

margin: 5px 10px 0 0;

}

.textbox–sidebar {
min-width: 400px;
}

/* Learning Objectives Box */

.textbox–learning-objectives .textbox__header::before {

background: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4058/2024/03/Pressbooks_Icon_Objectives_OG-White.png”) no-repeat;

}

/* Question/Exercises Box */

.textbox–exercises .textbox__header::before {

background: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4058/2024/03/Pressbooks_Icon_learning-assesment_OG-White.png”) no-repeat;

}

/* Examples Box */

.textbox–examples .textbox__header::before {

background: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4058/2024/03/Pressbooks_Icon_Examples_OG-White.png”) no-repeat;

}

/* Key Takeaways Box */

.textbox–key-takeaways .textbox__header::before {

background: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4058/2024/03/Pressbooks_Icon_Key_OG-White.png”) no-repeat;

}

/* No-Icon */

.textbox-no-icon::before {

display: none !important;

background: none !important;

}
/*End of icons in textbox headers*/

/* Suppress Pressbooks rendering
of chapter titles in screaming caps */
section.chapter header h1 {
text-transform: none !important;
}

/* rounded textboxes */

.textbox, .textbox p {
hyphens: none;
border-radius: 1.5em !important;
}

.textbox__header {
border-radius: 1.5em 1.5em 0 0 !important;
}
/*end of rounded textboxes */

/* Get rid of large margins some themes apply to textbox headings */
h2.textbox__title, h3.textbox__title, h4.textbox__title {
margin: 0;
}

.textbox__header h2, h3, h4 {
margin: 0;
}

/* Make headings bold by default */
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
}

/* Make sure lists inside tables match table font defaults */
table li {
font-size: 0.9em !important;
font-weight: normal !important;
line-height: 1 !important;
}

table ul, ol {
margin-top: 1.5em !important;
}/*End of table list formatting */

/*normal word wrap in tables*/
td, th {
word-break: normal !important;
overflow-wrap: normal !important;
}

/*flow chart */
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
}

.flowchart .step {
border: 2px solid #000;
padding: 20px;
margin: 10px;
border-radius: 10px;
width: 200px;
text-align: center;
}

.flowchart .arrow {
margin: 10px;
}

/*what to look for chart*/
.what-to-look-for-chart {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

.what-to-look-for-chart .item {
border: 2px solid #000;
padding: 20px;
border-radius: 10px;
text-align: center;
background-color: #f9f9f9;
}

/* ATS Chart */
.ats-table {
width: 100%;
border-collapse: collapse;
margin: 20px auto;
font-family: Arial, sans-serif;
}

.ats-table th, .ats-table td {
border: 2px solid #000;
padding: 10px;
text-align: left;
}

.ats-table th {
background-color: #f2f2f2;
}

.ats-table td {
background-color: #f9f9f9;
}

/* Formatting for assessment questions */
ol.assessment-questions > li {
margin-top: 1em;
}

/*Fancy Accordion*/

.fancy-accordion-wrapper {

margin-bottom: 60px;

position: relative;

}

details.fancy-accordion {

margin-bottom: -45px;

border-radius: 15px;

border: 1px solid #207b25;

padding: 0px;

}

details.fancy-accordion > summary {

padding: 10px;

font-size: 1.25em;

text-indent: 30px;

background-color: #207b25;

color: #fff;

border: none;

cursor: pointer;

border-radius: 10px 10px 10px 10px; }

details.fancy-accordion[open] > summary {

background-color: #207b25;

color: #fff;

border-radius: 10px 10px 0 0;

}

.collapsed {

/*border-radius: 10px;

border: 2px solid #0b6396;*/

padding: 20px;

margin-bottom: 10px; }

/* # The Rotating Marker # */

details.fancy-accordion summary::marker {

display: none;

content: “”; }

details.fancy-accordion summary::before {

content: “▶”;

left: -0.6em;

position: absolute;

transform: rotate();

transform-origin: 70% 50%;

transition: 0.2s transform ease; }

details.fancy-accordion[open] > summary:before {

transform: rotate(90deg);

transform: ease 1s; }

/* # The Sliding Summary # */

@keyframes details-show {

from {

opacity: 0;

transform: var(–details-translate, translateY(-0.5em)); } }

details.fancy-accordion[open] > *:not(summary) {

animation: details-show 750ms ease-in-out; }

/* End of Accordion */

/* What Would You Do*/
.w-w-y-d {
border-right: 3px solid gray !important;
border-bottom: 3px solid gray !important;
border-left: 3px solid gray !important;
position: relative;
padding: 2em;
padding-top: 3em;
border-radius: 1em;
margin: 10px;
}

.w-w-y-d::before {
content: “”;
position: absolute;
top: 0;
right: -0.4%;
width: 90%;
height: 20%;
border-top: 3px solid gray !important;
border-right: 3px solid gray !important;
border-radius: 0 1em 0 0;
}

.wwyd_title {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
}

.wwyd_body {
padding-top: 20px;
}

.wwyd_icon {
content: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4058/2024/05/d37f39b2-ddee-4cfe-a7e1-0e8a1a4db818.png”);
position: absolute;
display: inline-block;
width: 65px;
left: 2px;
top: -10px;
transform: rotate(-50deg);
}

/* Vertical table cell */
.vertical-cell-bottom-up {
writing-mode: vertical-rl !important;
transform: rotate(180deg) !important;
}

//Steps in selction process 6.1
.stepbox {
border: 2px solid #1A512E;
padding: 15px;
margin: 10px 0;
border-radius: 10px;
position: relative;
background-color: #F1F8E9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.stepbox h4 {
margin-top: 0;
}
.step-number {
font-size: 2em;
color: white;
background-color: #1A512E;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 50%;
position: absolute;
top: -25px;
left: -25px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

//Selction Process Table 6.2
.selection-process-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.selection-process-table, .selection-process-table th, .selection-process-table td {
border: 2px solid #1A512E;
}
.selection-process-table th, .selection-process-table td {
padding: 15px;
text-align: left;
}
.selection-process-table th {
background-color: #1A512E;
color: white;
}
.selection-process-table ul {
margin: 0;
padding-left: 20px;
}
.selection-process-table th span, .selection-process-table td span {
font-size: 16px;
font-weight: 400;
}
///////////////////////////////////////
// 7.1 Recruitment char
.chart {
display: flex;
flex-direction: column;
align-items: center;
font-size: 16px;
width: 80%;
margin: auto;
text-align: center;
}

.chart p, .chart ul {
margin: 10px 0;
width: 100%;
}

.chart ul {
list-style-type: none;
padding: 0;
}

@media (max-width: 625px) {
.chart {
width: 100%;
}

.chart ul {
width: 100%;
}
}

.recruitment, .screening, .selection, .reference-checks, .hire {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.recruitment {
background-color: #2A2A2A;
color: #FFFFFF;
}

.screening {
background-color: #404040;
color: #FFFFFF;
}

.selection {
background-color: #555555;
color: #FFFFFF;
}

.reference-checks {
background-color: #2A7D2A;
color: #FFFFFF;
}

.hire {
background-color: #005500;
color: #FFFFFF;
}
///////////////////////////////
///9.3 OCEAN Figure
.traits-table {
width: 100%;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
border-collapse: collapse;
}

.traits-table thead {
background-color: #4a7c59 !important;
color: white;
border: 1px solid #ccc;
}

.traits-table .header {
padding: 10px;
font-size: 1.2em;
text-align: center;
border: 1px solid #ccc;
}

.traits-table tbody tr:nth-child(odd) {
background-color: #eaf4ec;
}

.traits-table tbody tr:nth-child(even) {
background-color: #d0e4d1;
}

.traits-table td {
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
}

.traits-table .trait {
font-weight: bold;
border: 1px solid #ccc;
}

/////////////////////////////////////////
/////9.6 Employment Steps
.process-chart {
width: 100%;
margin: 10px auto;
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.step {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #ddd;
}

.step:last-child {
border-bottom: none;
}

.icon {
width: 60px;
height: 60px;
background-color: #4a7c59;
border-radius: 50%;
margin-right: 15px;
padding: 6px;
}

.description {
font-size: 1em;
color: #333;
}

///////////////////////////////////
////Highlight Box
.highlight-box {
width: 100%;
border-radius: 1em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px auto;
flex-direction: row;
border-left: 20px solid #207b25; /* Change this to change highlight colour */
}

.highlight-box h2 {
margin: 10px !important;
text-align: center !important;
}

.highlight-box .content {
flex: 2;
display: flex;
flex-direction: column;
justify-content: center;
}

.content {
padding: 10px;
}

.highlight-box p {
margin: 0;
line-height: 1.6;
font-size: 1em;
}

.highlight-box .example-image {
flex: 1;
}

.highlight-box .example-image figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin: 0 !important;
}

@media (max-width: 768px) {
.highlight-box {
flex-direction: column;
margin: 10px auto;
align-items: center;
}

.highlight-box .content {
margin-left: 0;
margin-top: 10px;
text-align: center !important;
}

.content p {
text-align: center !important;
}

.example-image {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}

//////////////////////////////////
///Info-box
.info-box {
width: 100%;
border-radius: 1em;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 20px auto;
flex-direction: row;
}

.info-box h2 {
margin: 10px !important;
text-align: center !important;
}

.info-box .content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}

.content {
padding: 10px;
}

.rounded-image {
border-radius: 2em;
}

@media (max-width: 768px) {

.info-box {
flex-direction: column;
margin: 10px auto;
align-items: center;
}

.info-box .content {
margin-left: 0;
margin-top: 10px;
text-align: center !important;
}

.content p {
text-align: center !important;
}

.example-image {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.rounded-image {
margin: auto;
width: auto;
}
}

/* Link to learning boxes */
.link-to-learning {
border: 2px solid #207b25 !important;
position: relative;
}

.link-to-learning > h3 {
text-align: center;
}

.link-to-learning_icon {
content: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4292/2024/06/GreenLink-e1718824246687.png”);
position: absolute;
display: inline-block;
width: 45px;
left: -22px;
top: 50%;
transform: translateY(-50%);
}

/////////////////////////////////////////
/////10.7 Step Containers
.step {
margin-bottom: 0px;
}
.step-header {
background-color: #207b25;
color: white;
padding: 10px;
border-radius: 5px;
}
.step-content {
border-left: 5px solid #207b25;
padding: 10px;
background-color: #f0f4f0;
border-radius: 0 5px 5px 0;
}
//////////
//// 3.5 Tips Boxes
.tip-box {
border: 2px solid #2E7D32; /* Darker green */
border-radius: 10px;
background-color: #ffffff; /* White background for better contrast */
padding: 15px;
margin: 20px 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tip-box h3 {
margin-top: 0;
color: #2E7D32;
font-size: 1.25em;
}

.tip-box p {
color: #333333;
font-size: 1em;
margin: 10px 0 0 0;
}

.what-wrong {
color: #C62828;
font-weight: bold;
}

//////////////////////////////
////2.1 Job Analysis Flowchart
.flowchart {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding: 10px;
border-radius: 10px;
color: white !important;
text-align: center;
}

.flowchart-box {
background-color: #207b25;
padding: 20px;
border-radius: 5px;
text-align: center;
width: 100%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.arrow-down {
border: solid #000;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
////////////////////////
//2.2 Flow chart
.flowchart {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
margin: auto;
}
.flowchart h3{
color: white !important;
text-align: center !important;
}

.flowchart p {
color: white !important;
text-align: center !important;
}

.flowchart-box {
background-color: #207b25;
color: white !important;
padding: 20px;
margin-bottom: 15px;
border-radius: 5px;
text-align: center;
position: relative;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
}

.flowchart-row {
display: flex;
gap: 5px;
justify-content: center;
width: 100%;
}

.flowchart-row .flowchart-box {
width: 49%;
}

.arrow-down-left {
position: absolute;
top: 100%;
left: 0;
width: 20px;
height: 20px;
border-top: 3px solid #000;
border-left: 3px solid #000;
transform: translateX(200px) translateY(-10%) rotate(223deg);
}

.arrow-down-right {
position: absolute;
top: 100%;
right: 0;
width: 20px;
height: 20px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateX(-200px) translateY(-10%) rotate(133deg);
}
//////////////////3.2 Human Rights Protections by Jurisdiction
.checked::before {
content: ‘✓’;
color: black;
}

.red-checked::before {
content: ‘✓’;
color: red;
}

/* quote-box styling */
.quote-box {
position: relative;
border-color: #2E7D32 !important;
border-width: 4px;
}

.quote-box_icon {
content: url(“https://ecampusontario.pressbooks.pub/app/uploads/sites/4292/2024/08/quotesgreen.png”);
position: absolute;
display: inline-block;
width: 45px;
left: -22px;
top: 50%;
transform: translateY(-50%);
}

.quote-box p {
font-style: italic;
/*You may have to play with margin and padding values for desired look*/
margin-left: 5em;
padding: 2em;

}

.quote-box p:first-of-type:first-letter {
font-size: 24px;
font-weight: bold;
line-height: 0.2em;
}

/* end of quote-box */

/* Change lightbox background colour */

.lity-content {

background-color: white !important;

padding: 2rem;

}
.box-chart {
margin: 0 auto;
margin-top: 10px;
}

.box-chart > .title {
color: #3B5372;
text-align: center;
}

.box-row {
display: flex;
flex-direction: row;
margin-bottom: 10px
}

.box-container-rounded {
background-color: #ffffff;
border-radius: 5px;
padding: 10px;
margin-right: 10px;
flex: 1;
color: #000000;
}

.box-container-rounded.bordered {
border: 0px solid #000;
}

.box-container-rounded h1,
.box-container-rounded h2,
.box-container-rounded h3,
.box-container-rounded h4,
.box-container-rounded h5,
.box-container-rounded h6 {
color: #000000;
}

@media screen and (max-width: 500px) {
.box-row {
flex-direction: column;
margin-bottom: 0;
}

.box-container-rounded {
margin-right: 0;
margin-bottom: 10px;
}
}
.non-web {
display: none;
}