The theme for the BioBeyond course starts with Smart Sparrow's Light Theme as the base.
Styling unique to this course is covered in the Inspark Bio Styles CSS.
The inspark-bio-styles.css is applied to the following Lessons:
BioBeyond Pre-Quiz Spring
Below are examples of these course-specfic styles.
Style
background-color:#ffffff;
width: 900px;
border-radius: 10px;
border: none !important;
Style
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 36px;
color: #1db4c2;
Style
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 20px;
font-weight: 700;
color: #333333;
Style
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 14px;
color: #333333;
line-height: 140%;
Style
UL - container
list-style: none;
margin-top: 0;
padding-left: 19px;
LI - list item
margin-bottom: 13px;
margin-left: 0;
position: relative;
margin-left: 50px;
padding: 0px;
color: rgba(51,51,51,1.0);
text-decoration: inherit;
display: list-item;
font-size: 14px;
font-family: Arial;
line-height: inherit;
font-style: inherit;
list-style: disc;
Style - Container
color: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
Style - Label
font-family: Arial, sans-serif;
left: 0;
text-transform: uppercase;
padding-bottom: 5px !important;
color: rgba(0,0,0,0.6);
letter-spacing: .05em;
position: absolute;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
Style - Input/Textarea
font-family: Arial, sans-serif;
min-height: 30px;
border: 1px solid #d9d9de !important;
border-radius: 0 !important;
box-shadow: none;
padding: 0 !important;
box-sizing: inherit;
color: #333333;
font-size: 13px !important;
Style - Units
position: absolute;
left: 100%;
bottom: 0;
padding: 0;
margin-left: 5px;
line-height: 35px;
font-family: Arial, sans-serif;
font-size: 14px;
white-space: nowrap;
Style
Container of Input
vertical-align: top;
margin: 0 6px 13px 0;
Label
display: inline-block;
padding: 0px;
padding-left: 30px;
position: relative;
cursor: pointer;
margin: 0px;
font-family: 'Open Sans',Arial,sans-serif !important;
font-size: 12px;
line-height: 140% !important;
Input
opacity: 1;
pointer-events: none;
position: absolute;
margin: 5px 0;
height: 0;
input[type="radio"]:before
content: "";
width: 15px;
height: 15px;
background-color: white;
border: solid 1.5px #333333;
display: inline-block;
position: relative;
top: -5px;
left: -28px;
box-sizing: border-box;
input[type="radio"]:after
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
width: 6px;
height: 6px;
background-color: #333333;
top: -0.5px;
left: -23.5px;
border-radius: 100%;
input[type="checkbox"]:before
content: "";
border-radius: 0;
width: 18px;
height: 18px;
background-color: white;
border: solid 1px rgba(0, 0, 0, 0.3);
display: inline-block;
position: relative;
top: -5px;
left: -28px;
box-sizing: border-box;
input[type="checkbox"]:checked:after
content: "";
display: inline-block;
position: absolute;
box-sizing: border-box;
width: 5px;
height: 10px;
transform: rotate(45deg);
border-width: 0px 2.5px 2.5px 0px;
border-style: solid solid;
border-color: #333333 #333333;
top: -4px;
left: -23px;