.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;
}

.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;
    background-size: 100%;
    width: 60px;
    height: 60px;
    margin: -30px -30px;
}

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

.character.puck1 {
    background-image: url(../img/puck/puck1.svg);
}

.character.puck2 {
    background-image: url(../img/puck/puck2.svg);
}

.character.puck3 {
    background-image: url(../img/puck/puck3.svg);
}

.character.puck4 {
    background-image: url(../img/puck/puck4.svg);
}

.character.puck5 {
    background-image: url(../img/puck/puck5.svg);
}

.character.puck6 {
    background-image: url(../img/puck/puck6.svg);
}

.character.puck7 {
    background-image: url(../img/puck/puck7.svg);
}

.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;
}

/* 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: cover;
    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
}