.canvas-snapshot {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

/* -- Header ---------------------------------------------------------------- */
#logo.puck {
    background-image: url(../img/icon-mendelssohn.svg);
}

/* -- Instrument Picker ----------------------------------------------------- */
.instrument-picker.puck {
    background: url(../img/puck-splash-sky.svg) center/100%;
}

.instrument-picker.puck .title {
    background: #5f2684;
}

.instrument-picker.puck .title h2 {
    background-image: url(../img/icon-mendelssohn.svg);
}

.instrument-picker.puck .prompt {
    background: url(../img/puck-splash.svg) bottom/100% no-repeat;
}

.instrument-picker.puck .credits {
    background: #0033cc;
}

.play-area {
    height:100%;
}

.card-palette {
    background-position: bottom;
    background-repeat: no-repeat;
    background-color: #ccc;
}

.card-palette-container.day .card-palette {
    background-image: url(../img/forest_day.svg), url(../img/puck_day.svg);
}

.card-palette-container.night .card-palette {
    background-image: url(../img/forest_day.svg), url(../img/puck_night.svg);
}

.card-palette .card.puck {
    width: calc((100% - 18px) / 4) !important;
    border: 1px solid red;
    /*border-color: red !important;*/
}

.card-palette-container.labeled .card {
    border-width: 1px;
    border-style: dotted;
    border-color: #fff !important;
    border-radius: 2px;
}

/*.fl {*/
    /*background-image: url(../img/instruments/flute.svg);*/
/*}*/

/*.tpt {*/
    /*background-image: url(../img/instruments/trumpet.svg);*/
/*}*/

/*.vn {*/
    /*background-image: url(../img/instruments/violin.svg);*/
/*}*/

/* override from style.css; TODO: not sure why, and still not quite right */
button.large {
    padding: 0px;
    /*font-size: 18px;*/
}

/* Background Cello Score */
.cello-score-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cello-score-overlay .note {
    width: 18px;
    height: 18px;
    position: absolute;
    border-radius: 9px;
    background: #fff;
    opacity: 0.8;
    margin: -9px 0 0 -9px;
}

/* Character Stage */
.current-cell {
    position: absolute;
    box-sizing: border-box;
    border: solid 2px white;
}

.character-overlay {
    width: 100%;
    height: 100%;
    position: relative;
    top: -100%;
    overflow: hidden;
}

.character {
    position: absolute;
    width: 120px;
    height: 120px;
    margin: -60px -60px;
}

.character .body {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 83px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/character/body.svg);
}

.character.row-1 .body {
    transform: scaleY(-1);
}

.character .eyes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../img/character/eyes.svg);
}

.character .leg {
    position: absolute;
    top: 65px;
    width: 22px;
    height: 44px;
    background-repeat: no-repeat;
    background-image: url(../img/character/leg.svg);
    transform-origin: 11px 11px;
}

.character .leg.left {
    left: 30px;
}

.character .leg.right {
    left: 70px;
}

.character .mouth {
    position: absolute;
    top: 32px;
    left: 21px;
    width: 75px;
    height: 36px;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: transform 0.2s;
    transform: scale(0) rotate(0) translateX(0);
}

.character .mouth.happy {
    background-image: url(../img/character/mouth-happy.svg);
}

.character.happyA .mouth.happy {
    transform: scale(0.2) rotate(0) translateX(0);
}

.character.happyB .mouth.happy {
    transform: scale(1) rotate(0) translateX(0);
}

.character.sillyA .mouth.happy {
    transform: scale(0.2) rotate(-30deg) translateX(10px);
}

.character.sillyB .mouth.happy {
    transform: scale(1) rotate(-20deg) translateX(15px);
}

.character .mouth.sad {
    background-image: url(../img/character/mouth-sad.svg);
}

.character.sadA .mouth.sad {
    transform: scale(0.2) rotate(0) translateX(0);
}

.character.sadB .mouth.sad {
    transform: scale(0.7) rotate(0) translateX(0);
}

.character.sadA .eyes, .character.sadB .eyes {
    background-image: url(../img/character/eyes_sad.svg);
}

.character .mouth.scary {
    background-image: url(../img/character/mouth-scary.svg);
}

.character.scaryA .mouth.scary {
    transform: scale(0.4) rotate(0) translateX(0);
}

.character.scaryB .mouth.scary {
    transform: scale(1) rotate(0) translateX(0);
}







.character:hover, .character.active {
    opacity: 1 !important;
}

.fairy-dust {
    position: absolute;
    margin: -250px -250px;
}

/* Character Prompt */
.character-prompt {
    width: 300px;
    position: absolute;
    left: -130px;
    top: -50px;
    background: white;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.character-prompt::after {
    content: " ";
    display: block;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background: white;
    position: absolute;
    left: 152px;
    top: 30px;
}

/* Character Space */
#hsss-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
}

#hsss-bg .row {
    height: 50%;
    display: flex;
}

#hsss-bg .col {
    width: 50%;
    position: relative;
}

#hsss-bg .half {
    height: 100%;
    width: 50%;
    position: absolute;
    left: 50%;
}

#hsss-bg .landscape {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100% 100%;
}

#hsss-bg .col.happy {
    background: #F2818F;
}

#hsss-bg .col.happy.intense {
    background: #F73C5C;
}

#hsss-bg .col.happy .half {
    background: #E86C99;
}

#hsss-bg .col.happy.intense .half {
    background: #E21066;
}

#hsss-bg .col.happy .landscape {
    background-image: url(../img/backgrounds/happy.svg);
}

#hsss-bg .col.happy.intense .landscape {
    background-image: url(../img/backgrounds/happy-intense.svg);
}

#hsss-bg .col.sad {
    background: #8FE5E2;
}

#hsss-bg .col.sad.intense {
    background: #1BCEC1;
}

#hsss-bg .col.sad .half {
    background: #69DCD9;
}

#hsss-bg .col.sad.intense .half {
    background: #1BBFB7;
}

#hsss-bg .col.sad .landscape {
    background-image: url(../img/backgrounds/sad.svg);
}

#hsss-bg .col.sad.intense .landscape {
    background-image: url(../img/backgrounds/sad-intense.svg);
}

#hsss-bg .col.silly {
    background: #F1816E;
}

#hsss-bg .col.silly.intense {
    background: #EA371F;
}

#hsss-bg .col.silly .half {
    background: #E4897C;
}

#hsss-bg .col.silly.intense .half {
    background: #DD4333;
}

#hsss-bg .col.silly .landscape {
    background-image: url(../img/backgrounds/silly.svg);
}

#hsss-bg .col.silly.intense .landscape {
    background-image: url(../img/backgrounds/silly-intense.svg);
}

#hsss-bg .col.scary {
    background: #5ED4E4;
}

#hsss-bg .col.scary.intense {
    background: #17BAC6;
}

#hsss-bg .col.scary .half {
    background: #6BCADA;
}

#hsss-bg .col.scary.intense .half {
    background: #1DA4B2;
}

#hsss-bg .col.scary .landscape {
    background-image: url(../img/backgrounds/scary.svg);
}

#hsss-bg .col.scary.intense .landscape {
    background-image: url(../img/backgrounds/scary-intense.svg);
}

/* Timeline */
.timeline.puck {
    padding: 0 10px;
    display:inline-block;
}

.timeline.puck .timeline-card-wrapper {
    margin: 0;
    height: 100%;
}

.timeline.puck .card {
    width: 130px;
    height: 106px;
    background-size: 100% auto;
    background-position: center center;
    border-color: #963A85;
}
/*
.timeline.puck .card.day {
    background-image: url(../img/puck_day.svg);
}

.timeline.puck .card.night {
    background-image: url(../img/puck_night.svg);
}*/

.timeline-tray .title {
    display:inline-block;
    vertical-align: 32px;
    transition: margin 0.5s;
    margin-left:-98px;
    padding-right:7px;
    width:88px;
    vertical-align: 25px;
}

.timeline-tray.labeled .title {
    display:inline-block;
    margin-left:9px;
    padding-right:0px
}

/* TODO: Move this later */
.wrapper {
    height: calc(100% - 140px - 66px);
}

.timeline-tray {
    bottom: 20px;
}

.card {
    background-image: url(../img/card-bg.svg);
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #ddd;
    font-size: 16px;
    text-align: center;
    height: 20px;
    line-height: 20px;
}