lesson-learnspark

Lesson Styles

The theme for the BioBeyond course starts with Smart Sparrow's Light Theme as the base.

Download Light Theme CSS

Orignal Source

Any styling unique to this course is covered in the Lesson LearnSpark CSS.

Download Lesson LearnSpark CSS

Original Source

The lesson-learnspark.css is applied to the following 33 lessons:

ASUPD Specific Lessons

Lesson 1 - ASUPD: Galapagos Exploration Part 2
Lesson 2 - ASUPD: Galapagos Exploration Part 3
Lesson 3 - ASUPD: Galapagos Exploration Part 4
Lesson 4 - ASUPD: Galapagos Exploration Part 5
Lesson 5 - ~~ASUPD - Cellular Transport~~ See this page
Lesson 6 - ASUPD: A Change of Heart
Lesson 7 - ASUPD: Case Study - Treatment of Abnormal Cell Function
Lesson 8 - ASUPD: Chemical Basis of Life
Lesson 9 - ASUPD: Fueling Your Team
Lesson 10 - ASUPD: Proteins and Protein Technology
Lesson 11 - ASUPD: Transfer of Matter and Energy

UNIT 1 - Biology Bootcamp

Lesson 1 - A Course Like No Other | ASUPD
Lesson 2 - Scientific Reasoning | ASUPD
Lesson 3 - Scientific Tools | ASUPD
Lesson 4 - Graphing Skills | ASUPD
Lesson 5 - Scientific Skills | ASUPD

UNIT 3 - Journey to the Galapagos

Lesson 1 - Why You Look the Way You Do | ASUPD
Lesson 2 - Disease Detectives | ASUPD
Lesson 3 - Peer Pressure In Nature | ASUPD
Lesson 4 - The Birds And The Moths | ASUPD
Lesson 5 - Galapagos Exploration | ASUPD

UNIT 5 - Into the Cell

Lesson 1 - Into the Animal Cell | ASUPD
Lesson 2 - Into the Plant Cell | ASUPD
Lesson 3 - Into the Bacteria Cell | ASUPD

UNIT 6 - Searching for Signatures

Lesson 1 - Graphing Remediation | ASUPD
Lesson 2 - Chemical Basis of Life | ASUPD
Lesson 3 - Gathering Energy | ASUPD
Lesson 4 - Energy Challenge: Respiration |
Lesson 5 - Energy Challenge: Photosynthesis | ASUPD
Lesson 6 - Genetic Blueprints | ASUPD
Lesson 7 - Cellular Replication | ASUPD
Lesson 8 - Genetic Replication | ASPUD
Lesson 9 - Making Proteins | ASUPD

UNIT 8 - A Mission Beyond

Lesson 1 - Getting Started | ASUPD
Lesson 2 - Making the Dream Team | ASUPD
Lesson 3 - Unseen Danger: Radiation | ASUPD
~~Lesson 4 - End of Semester BioBeyon Survey~~ See this page
Lesson 5 - The Bare Bones | ASUPD
Lesson 6 - Lifting Tons and Skeletons | ASUPD
Lesson 7 - Getting Under Your Skin | ASUPD
Lesson 8 - Maintaining Peak Performance | ASUPD
Lesson 9 - Counting Calories | ASUPD
Lesson10 - Fueling Your Team | ASUPD
Lesson11 - Knocked Out | ASUPD
Lesson12 - A Change of Heart | ASUPD
~~Lesson 13 - Launch Simulator~~ See this page

Below are examples of these course-specific styles.

Content Container

Style

margin: 20px auto 0;
box-shadow: rgba(0,0,0,0.8) 0 2px 30px -2px;
border: none;
padding-bottom: 60px;
min-height: calc((100vh - 69px) - 81px);
background-color:white;
border-radius: 6px 6px 0 0 ;

Style - Dark

margin: 20px auto 0;
box-shadow: rgba(0,0,0,0.8) 0 2px 30px -2px;
border: none;
padding-bottom: 60px;
min-height: calc((100vh - 69px) - 81px);
background-color:#4d4d4d;
border-radius:0;

Cover Background Image

Style

background-image: linear-gradient(0deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(image-link);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Darken Background

Style

background-color: rgba(0,0,0,0.5) !important;

Typography

Download Fonts

Roboto
Base font in this Lesson.

Download from Google Fonts

Merriweather
Subheading font in this lesson.

Download from Google Fonts

Oswald
Numbering font in this lesson.

Download from Google Fonts

Cover Title

Style

font-weight: 100;
font-family: 'Roboto',sans-serif;
font-size: 110px;
text-shadow: 0 0 7px rgba(0,0,0,0.6);
color: rgba(255,255,255,1.0);

Cover Subtitle

Style

font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
font-size: 24px;
opacity: .85;
text-shadow: 0 0 7px rgba(0,0,0,0.6);

Intro/Outro Text

Style

font-family: 'Roboto',sans-serif;
font-size: 72px;
color: #ffffff;

Style

Container

font-family: 'Roboto',sans-serif;
line-height: 1.3;

Label - "Contents"

color: rgba(255,255,255,1.0);
font-size: 12px;

List - ul

padding: 0 !important;

List item - li

color: white;
font-size: 12px;
margin:0 0 8px 21px !important;
counter-increment: customlistcounter;
margin-bottom: 20px !important;
text-transform: uppercase;

Bullet numbering

content: counter(customlistcounter);
position: absolute;
top: -4px;
background: none;
font-family: "Oswald",sans-serif;
font-size: 18px;

Top border - ul:before

width: 252px;
height: 1px;
border-top: 1px solid rgba(255,255,255,0.5);

Bottom border - ul:after

width: 50px;
height: 6px;
border-bottom: 5px solid rgba(255,255,255,0.95);

Section Marker

Style

border: 3px solid #2e9fff !important;
display: inline-block !important;
padding: 7px 12px !important;
font-weight: 700 !important;
font-family: 'Oswald',sans-serif !important;
letter-spacing: 3px !important;
text-transform: uppercase;
color: #2e9fff !important;

font-size: 16px;

Section Marker Mini

Style

Section Title

Style

font-size: 48px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8) /* use #ffffff if on dark background */;

Section Subtitle

Style

Text

font-size: 22px;
font-weight: 400;
font-style: italic;
font-family: 'Merriweather',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8) /* use #ffffff if on dark background */;

Top Bar

.bracketed::before {
content: '';
width: 50px;
height: 1px;
position: absolute;
top: -30px;
border-bottom: 1px solid #2e9fff;
}

Bottom Bar

.bracketed::after{
content: '';
width: 50px;
height: 5px;
position: absolute;
top: -50px;
border-bottom: 1px solid #2e9fff;
}

Sub-heading

Style

font-family: 'Roboto',sans-serif;
color: #0e9fff;
font-size: 18px;
text-transform: uppercase;

Paragraph

Style

font-size: 16px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);

Link to external site

Style

font-size: 13px;
font-family: 'Roboto',sans-serif;
color: #2196F3;
border-bottom: 1px solid #2196F3;

Link as a trigger

Style

font-size: inherit;
font-family: inherit;
color: #ff8647;
border-bottom: 1px solid #ff8647;

Unordered List - Default

Style

List - ul

ul{
list-style: none;
margin-top: 0;
padding-left: 19px;
}

List item - li

li{
margin-bottom: 13px;
margin-left: 0;
position: relative;

}

Bullet

li::before {
content: '';
width: 8px;
height: 8px;
background: #2e9fff;
display: block;
position: absolute;
left: -19px;
top: 6px;
}

Unordered List - Introduction

Style

Label

text-transform: uppercase;

List - ul

padding: 0px;

List - li

margin: 0;

List - p

margin: 0;

List - span

font-size: 14px;

Ordinal List

Style

font-family: 'Oswald',sans-serif !important;
letter-spacing: 3px !important;
padding: 0px;
color: rgba(102,102,102,1.0);
text-decoration: inherit;
font-size: 36px;
font-weight: 400 !important;

Instruction Text

Style

padding: 0px;
font-size: 22px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(0, 0, 0, 0.8);

Caption Text

Style

font-size: 14px;
font-family: 'Roboto',sans-serif;
line-height: 140%;
color: rgba(51,51,51,1.0);

Ordered Instruction

Style

font-family: 'Roboto',sans-serif;

Number

color: #2d9fff;
font-size: 22px;

Action

color: #4d4d4d;
font-size: 16px;

Instruction

color: #666666;
font-size: 12px;

Textual Description

Style

font-family: 'Roboto',sans-serif;

Name

text-transform: uppercase;
font-size: 11px;
color: rgb(204, 204, 204);

Title

font-size: 16px
color:white;

List item

font-size: 11px;
color:white;

List bullet

width: 3px;
height: 3px;
background: white;
border-radius: 50%;

Background

width: 3px;

Conclusion Title

Style

font-family: 'Roboto',sans-serif;
font-size: 72px;
color: #ffffff;

Conclusion Text

Type 1

Style

font-family: 'Roboto',sans-serif;
font-size: 18px;
line-height: 140%;
color:#333333;

Type 2

Style

padding: 0px;
font-family: 'Roboto',sans-serif;
font-size: 22px;
line-height: 140%;
color: #ffffff;

Style - Background

background-color: rgba(77,77,77,0.85);

Buttons

Popup Button - Default

Style

width: 32px;
height: 32px;
src:"https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/question_mark_orange_32x32.png"

Popup Button - ? Circle

Found only in the following lessons:

UNIT 6 - Searching for Signatures

Lesson 3 - Gathering Energy

Style

width: 32px;
height: 32px;
src:"https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/popup-orange.jpg"

Popup Button - i Circle

Found only in the following lessons:

UNIT 8 - A Mission Beyond

Lesson 9 - Counting Calories

Popup Button - Arrow

Found only in the following lessons:

UNIT 6 - Searching for Signatures

Lesson 2 - Chemical Basis of Life
Lesson 4 - Energy Challenge: Respiration
Lesson 5 - Energy Challenge: Photosynthesis

Style

width: 32px;
height: 32px;
src:"https://etx-nec.s3-us-west-2.amazonaws.com/css/etx-resource/images/popup-arrow-orange.png"

Popup Window

Style

No Arrow

.info-icon-popup.no-arrow:after{
display:none
}

Popup Navigation

Style

Container

background-color:black;
border:solid 1px white;
border-radius:10px;
padding: 20px 40px;
box-sizing: border-box;

Header

color: #2d9fff;
font-size: 36px;

Subheader

color: #2d9fff;
font-size: 36px;

Paragraph

color:white;
font-size: 16px;

Navigation

Style

background-color: #2E9FFF;

Location Trigger

Style

Trigger

width: 40px;
height: 40px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12p
background-color: rgb(255, 255, 255);
transform-origin: center center;
opacity: 0.8;
border-radius: 50%;
transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;

Trigger:before

content: "";
width: 120%;
height: 120%;
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 12px;
left: -50%;
top: -50%;
bottom: -50%;
right: -50%;
border-radius: 50%;
border-width: 2px;
border-style: solid;

Default

background-color: #ffffff;

Visited

background-color: #14b9c2;

Visited:before

border-color: #14b9c2;
animation: none;
transform: scale(1.2);

Inputs

Single Line, Multiline, Number Text Input

Style - Container

color: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;

Style - Label

font-family: 'Roboto',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: 'Roboto',sans-serif;

Style - Units

position: absolute;
left: 100%;
bottom: 0;
padding: 0;
margin-left: 5px;
line-height: 35px;
font-family: 'Roboto',sans-serif;
font-size: 14px;
white-space: nowrap;

Multiple Choice, Multiselect

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;

Input

display: inline-block;
opacity: 1;
pointer-events: none;
position: absolute;
margin: 5px 0;
height: 0;

Input:checked:before

background-color: rgba(46, 159, 255, 0.2);
border-color: rgba(46, 159, 255, 0.6);

input[type="radio"]:before

content: "";
width: 18px;
height: 18px;
background-color: white;
border: solid 1px rgba(0, 0, 0, 0.3);
border-radius: 100%;
display: inline-block;
position: relative;
top: -5px;
left: -28px;
box-sizing: border-box;

input[type="radio"]:after

content: "";
width: 8px;
height: 8px;
background-color: rgb(46, 159, 255);
top: 0px;
left: -23px;
border-radius: 100%;
display: inline-block;
position: absolute;
box-sizing: border-box;

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: 8px;
height: 16px;
transform: rotate(45deg);
border-width: 0px 3px 3px 0px;
border-style: solid solid;
border-color: rgb(46, 159, 255) rgb(46, 159, 255);
top: -8px;
left: -18px;

Multiselect Rows - Marked for Possible Deletion

Style

Container of Input

margin: 0 0 8px 0;
display: block;
position: static;
min-height: 20px;
line-height: normal;
vertical-align: middle;

Input

position: absolute;
opacity: 0;
pointer-events: none;
margin: 5px 0;
height: 0;

Label

padding: 10px 16px;
background: #EFF8FF;
transition: background .3s ease,box-shadow .3s ease;

Label (with input:checked)

background: #2196F3;

Label text

display: block;
margin: 0;
font-size: 16px;
line-height: 140%;
color: #072D4E;
transition: color .3s ease;

Label Text (with input:checked)

color: white;

Dropdown

Style - Select

transition: all 250ms ease;
height: 30px;
min-height: 30px;
border: 1px solid #d9d9de;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
padding: 0 10px;
width: 100%;
font-family: 'Roboto',sans-serif;
color: rgba(0,0,0,0.7);
font-size: 14px;

Range Slider

Style

Values

font-family: Arial;
font-size:13px;
color: #333333;

Selected value

transform: translateX(100%);
margin-left: -0.1em;
background: rgb(235, 235, 235);
border-radius: 0px;

Selected value tail

width: 8px;
height: 8px;
content: "";
position: absolute;
transform: rotate(45deg);
left: -5px;
top: 9px;
background: rgb(235, 235, 235);

Slider bar

width: variable;
height: 6px !important;
background: rgba(0, 0, 0, 0.1) !important;
margin: 0px 15px !important;

Slider thumb

cursor: grab;
width: 20px !important;
height: 20px !important;
transition: transform 250ms ease 0s, -webkit-transform 250ms ease 0s;
border-radius: 50%;
border: 1px solid rgb(0, 121, 225);
background: rgb(46, 159, 255) !important;

Components

Image MCQ

Style

Label - Default

text-transform: uppercase;
font-family: 'Oswald',sans-serif;
font-weight: 300;
letter-spacing: .15em;
text-align: center;
font-size: 18px;
color: rgba(255,255,255,0.9);
padding: 13px 0;
background: rgba(0,0,0,0.4);

Label - Selected

background: rgba(74, 211, 172, 0.8);