#tryMeArrow.scratchMe {
    position: absolute;
    width: 226px; height: 116px;
    background: url("/img/try_me_scratch.png") top left no-repeat;
    z-index: 99999;
}

#tryMeArrow.keepScratching {
    position: absolute;
    width: 261px; height: 116px;
    background: url("/img/try_me_keep_scratching.png") top left no-repeat;
    z-index: 99999;
}

#game_container {
    min-width: 1000px; /* because slick otherwise is unhappy when making things narrower otherwise */
}

.game_panel {
    height: 800px !important; /* for some reason, slick the carousel is breaking the height... */
    position: relative;
}

.game_panel .scratch_card { margin: 0 auto ; }
#game_panel_1 .theme { padding-top: 250px; }
#game_panel_2 .theme { padding-top: 100px; }
#game_panel_3 .theme { padding-top: 100px; }
#game_panel_4 .theme { padding-top: 100px; }
#game_panel_5 .theme { padding-top: 100px; }
#game_panel_6 .theme { padding-top: 100px; }
#game_panel_7 .theme { padding-top: 250px; }


#game_panels_after_tour {
    height: 800px;
    position: relative;
}

.scratch_card_dialog .scratch_card_dialog_button {
    /* text-indent: -9999px doesn't work when you put a bunch of scratchcards side by side on a carousel */
    font-size: 0;
}


.slick-arrow {
    z-index: 100000;
    background-color: #002d4b;
    width: 65px; height: 60px;
    border-radius: 3px;
}
.slick-prev { left: -5px; }
.slick-next { right: -5px; }

.slick-arrow:hover { background-color: #004a74; }
.slick-arrow:focus { background-color: #002d4b; }

.slick-prev:before, .slick-next:before {
    font-size: 40px;
}
.slick-prev:before { content: "<" }
.slick-next:before { content: ">" }