@charset "UTF-8";
/* CSS Document */
/* Div layer for the entire banner. */

/* Hide elements in CSS first */
.cardContainerTop { opacity: 0; }

#container {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 0px;
    left: 0px;
    margin: auto;
    overflow: hidden;
}

.beschuit {
    margin-top: 72px;
    background: url('spritesheet_beschuit.jpg') left top;
    width: 300px;
    height: 250px;
    position: absolute;
    z-index: 800;
}

.beschuitLos {
    margin-top: 72px;
    margin-left: 8px;
    position: absolute;
    background: url('beschuit_los.jpg');
    width: 282px;
    height: 283px;
    z-index: 900;
}

.textMeisje {
    margin: 13px 0 0 13px;
    position: absolute;
    background: url('text_meisje.jpg');
    width: 156px;
    height: 55px;
    z-index: 902;
}

.textJongen {
    margin: 13px 0 0 13px;
    position: absolute;
    background: url('text_jongen.jpg');
    width: 156px;
    height: 55px;
    z-index: 901;
}

#border {
    position: absolute;
    width: 298px;
    height: 248px;
    top: 0px;
    left: 0px;
    border: 1px solid #666666;
    z-index: 999;
}

#clicktag {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 999;
}

#text2 {
    position: absolute;
    top: 134px;
    left: 13px;
    width: 100%;
}

#text3 {
    position: absolute;
    top: 134px;
    left: 13px;
    width: 100%
}

#eindframe {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 0px;
    left: 0px;
    /*background-color: #ffffff;*/
    
    z-index: 900;
}

#eindframe img {
    position: absolute;
    margin: auto;
    top: 107px;
    left: 0;
    right: 0;
    bottom: 0;
}

.cardWrapper1 {
    width: 72px;
    height: 111px;
    position: absolute;
    top: 4px;
    left: 3px;
}

.cardWrapper2 {
    width: 72px;
    height: 111px;
    position: absolute;
    top: 4px;
    left: 76px;
}

.cardWrapper3 {
    width: 72px;
    height: 111px;
    position: absolute;
    top: 4px;
    left: 149px;
}

.cardWrapper4 {
    width: 72px;
    height: 111px;
    position: absolute;
    top: 4px;
    left: 222px;
}

.cardFace1 {
    position: absolute;
    width: 72px;
    height: 111px;
    overflow: hidden;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #6e92db;
}

.cardFace2 {
    position: absolute;
    width: 72px;
    height: 111px;
    overflow: hidden;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #6e92db;
}

.cardFace3 {
    position: absolute;
    width: 72px;
    height: 111px;
    overflow: hidden;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #6e92db;
}

.cardFace4 {
    position: absolute;
    width: 72px;
    height: 111px;
    overflow: hidden;
    border-radius: 7px;
    border-width: 1px;
    border-style: solid;
    border-color: #6e92db;
}

.front {
    background-color: #fff;
}

.back {
    right: 0px;
    background-color: #fff;
}

.button {
    position: absolute;
    border-radius: 4px;
    width: 87px;
    height: 27px;
    right: 6px;
    bottom: 6px;
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
    color: #ffffff;
    border-radius: 4px;
    border-style: none;
    background-color: #3366cc;
    text-decoration: none;
    cursor: pointer;
    z-index: 994;
    outline: none;
}

.button img {
    margin-right: 4px;
}

.button:hover {
    background-color: #6083c8;
}