Celestial Jukebox

Lesson Styles

Download Lesson Style

⇩ Download CSS

The Celestial Jukbox course uses a Smart Sparrow theme.

Original Source

Content Background

Background Image

Instruction Containers

Half Width

One Line - 470 x 52

Two Lines - 470 x 72

Three Lines - 470 x 92

Four Lines?? - 470 x 112

Five Lines?? - 470 x 72

Full Width

One Line - 712 x 52

Two Lines - 712 x 72

Three Line - 712 x 92

Four Lines?? - 712 x 112

Other Containers

Warnings and Alerts

Orange Container - 400 x 80

Red Container - 260 x 130

Yellow Container - 260 x 130

Tables

2x5 - 170x162

3x5 - 250x162

Typography

Paragraph

Style

font-family: Arial, sans-serif;
font-size: 18px;
color: #d6d6d6;
line-height: 120%;

Paragraph on Whiteboard

Style

color: #333333;

Highlight

Style

color: #f5ec04;

Instruction

Style

color: #0356d6;

Instruction on Whiteboard

Style

color: #0356d6;

Reference

Style

color: #ff8647;

Buttons

Navigation Button

Style

background-color: #2E9FFF;

border-radius:5px;

color: rgb(255, 255, 255);

padding: 0px 20px;
text-align: center;

cursor: pointer;
min-height: 40px;

font-size: 14px;

font-weight: 600;

letter-spacing: 1px;

text-transform: uppercase;

Popup Button

Style

Container

border:solid 1px #00C7FC;
background-color: #000000;
text-align: center;

Text

color:#00C7FC;
font-size:16px;
font-family: Arial;

Popup Windows

Container

border-radius: 5px;
background-color: black;

Default

border:
solid 1px #e1eaee;

box-shadow:
inset 0 0 10px #2788be, 0 0 10px #2788be;

Highlight

border:
solid 1px #c5c716;

box-shadow:
inset 0 0 4px #c9cb15, 0 0 6px #ccce16;

Warning

border:
solid 1px #bc5106;

box-shadow:
inset 0 0 4px #ff8647, 0 0 6px #ff8647;

Alert

border:
solid 1px #d27171;

box-shadow:
inset 0 0 10px #ff0000, 0 0 10px #ff0000;

Close button

width: 20px;
border-radius: 0 5px;
color:#000000;

Default

background-color:
#2788be;

box-shadow:
inset 0 0 10px #2788be, 0 0 10px #2788be;

Highlight

background-color:
#f1f41a;

box-shadow:
inset 0 0 4px #c9cb15, 0 0 6px #ccce16;}

Warning

background-color:
#eb6201;

box-shadow:
inset 0 0 4px #ff8647, 0 0 6px #ff8647;}

Alert

background-color:
#d30000;

box-shadow:
inset 0 0 10px #ff0000, 0 0 10px #ff0000;

Inputs

Dropdown

Style

Label

transform: translateY(-100%);
color: #ebebeb;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 13px;
padding-bottom: 5px !important;
font-family: Arial, sans-serif !important;
width: 100%;
box-sizing: border-box;

Label:empty

display: none !important;

Select

padding: 0px;
font-family: Arial;
font-size: 13px;
border-width: 1px;
border-color: grey;
border-style: solid;
height: 18px;
width:100%;
box-sizing: border-box;

MCQ

Style

Input

padding: 0px;
width: 12px;
font-family: Arial;
position: absolute;
margin: 3px 0;
left:0;

Label

margin-right: 2px;
display: inline-block;
cursor: auto;
padding: 0px;
font-family: Arial;
color: #ebebeb;
margin-left: 22px;

MCQ on Whiteboard

Label

color: #ebebeb;

Text Input

Style

Label

font-family: 'Arial',sans-serif;
padding-bottom: 5px;
color: #ebebeb;
position: absolute;
left: 0;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
width: 100%;
box-sizing: border-box;

Input Textarea

font-family: 'Arial',sans-serif;
border: 1px solid #d9d9de;
border-radius: 0;
box-shadow: none;
float: left;
clear: both;
padding: 0;
color: #333333;
font-size: 14px;

Units

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

Page updated

Report abuse