The theme for the BioBeyond course starts with Smart Sparrow's Light Theme as the base.
Any styling unique to this course is covered in the WBE LearnSpark CSS.
The wbe-learnspark.css is applied to the following Lessons:
UNIT 2 - World Biodiversity Expedition
Lesson 1 - How to Classify | ASUPD
Lesson 2 - My Classification | ASUPD
Lesson 3 - Sonoran Desert | ASUPD
Lesson 4 - Antarctica | ASUPD
Lesson 5 - Great Barrier Reef | ASUPD
Lesson 6 - Ocean Floor | ASUPD
Lesson 7 - Yellowstone | ASUPD
Lesson 8 - ASUPD: NYC: Central Park
Note: The wbe-learnspark.css is a duplicate of the lesson-learnspark.css, but with a number of overrides and additons. See lesson-learnspark page for all styles not covered on here.
Below are examples of these course-specfic styles.
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);
Style
Background
background-color:rgba(0,0,0,.7);
width:447px;
height:380px;
Photos/Videos
cursor:pointer;
.photo1 {
top: 96px !important;
left: 24px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.photo2 {
top: 96px !important;
left: 152px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.photo3 {
top: 182px !important;
left: 24px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.photo4 {
top: 182px !important;
left: 152px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.photo5 {
top: 268px !important;
left: 24px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.photo6 {
top: 268px !important;
left: 152px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.video1 {
top: 354px !important;
left: 24px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
.video2 {
top: 354px !important;
left: 152px !important;
width: 115px !important;
height: 74px !important;
z-index: 50 !important;
}
Name Label
font-family: 'Roboto',sans-serif;
text-transform: uppercase;
font-size: 11px;
color: #cccccc;
Name
font-family: 'Roboto',sans-serif;
font-size: 16px;
margin-bottom: 10px;
color: white;
List
font-family: 'Roboto',sans-serif;
font-size: 11px;
color: white;
line-height: 140%;
List Bullet
width: 3px;
height: 3px;
background: white;
border-radius: 50%;
Style
Background
background-color: rgba(0,0,0,0.7);
Image Container
border-color: solid 2px white;
Caption Background
background-color: rgba(0,0,0,0.7);
overflow: hidden;
width: 710px;
Caption Text
padding: 0px;
word-wrap: break-word;
line-height: 1.3;
overflow: hidden;
width: 484px;
font-family: Arial;
Close Button
opacity: .8;
background-color: white;
border-radius: 50%;
width: 25px;
height: 25px;