openboard/resources/library/interactivities/Memory.wgt/css/main.css

#table {
    display: table;
    text-align: center;
}
#table > div {
    display: table-row;
}
#table > div > div {
    display: table-cell;
}

.card-container {
    padding: 20px 10px;
}

.switch {
    display: none;
    color: #FFF;
}

.onEdit .switch {
    display: block;
}

.onEdit .front .switch {
    visibility: hidden;
}

.card {
    position: relative;
    white-space: normal;
    width: 180px;
    height: 180px;

    overflow: hidden;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

.front{
    height: 100%;
    
}

.front .card {
    background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat;
}

.back .card {
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
    -ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65);
    box-shadow: 0 1px 3px rgba(0,0,0, 0.65);

    background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
    background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
    background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
    background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);
    background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%);

    background-image: -webkit-gradient(
        linear,
        50% top,
        50% bottom,
        color-stop(0, rgb(255,255,255)),
        color-stop(1, rgb(204,204,204))
        );
}

.card > div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 180px;
    height: 180px;
}

.card .text {
    padding: 0px 20px;
    font-family: "SFToontimeRegular";
    font-size: 28px;
    color: #000;
}

.usePicture .card .text, .front .card .text {
    display: none;
}

.card .picture {
    display: none;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

.usePicture .card .picture {
    display: block;
}

.card .picture > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
}

.card .picture > div:first-child {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 180px;
    height: 180px;	
}
.card .picture > div img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.card .picture > div.dropzone {
    border: 1px dashed black;
    display: none;
}

.onEdit .card .picture > div.dropzone {
    display: block;
}

.card .picture > div.dropzone div {
    padding: 10px 10px 10px 50px;
    text-align: left;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat;

    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    -ms-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}

.card .picture > div.dropzone.hover div {
    background-image: url("images/drop-label-ondrop-bg.png");
    color: rgba(255, 255, 255, 1);
}

.card-container .actions {
    position: relative;
    margin-top: -35px;
    display: none;
    color: #FFF;
} /*here!!!!!!!!!*/

.onEdit .card-container .actions {
    display: none;
}

.actions button[role="flip"] {
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background: url("images/flip.png") left center no-repeat;
    text-indent: -99999px;
}

.card-container {
    /*-webkit-perspective: 600px;*/
    position: relative;
    width: 180px;
    height: 180px;
}

.onEdit .card-container {
    height: 200px;
}

.cards {
    position: relative;
    width:100%;
    height: 100%;
    overflow: hidden;
}

.cards > div {
    float: left;
}

.csstransforms3d .cards > div {
    -webkit-transition: all .5s ease-in-out;
    /*-webkit-backface-visibility: hidden;*/	
}

.csstransforms3d .cards > div:first-child {
    /*-webkit-transform: rotateY( 0deg );*/
}

.no-csstransforms3d .cards > div:first-child {
    display: block;
}

.csstransforms3d .cards > div:last-child {
    /*    -webkit-transform: rotateY( -180deg );*/
}

.no-csstransforms3d .cards > div:last-child {
    display: none;
}

.csstransforms3d .cards.flip > div:first-child {
    height: 0;
    -webkit-transition-property: height;
    -webkit-transition-duration: 0.5s;
    /*transition-timing-function: ease;*/
}

.no-csstransforms3d .cards.flip > div:first-child {
    display: none;
}

.csstransforms3d .cards.flip > div:last-child {
    /*-webkit-transform: rotateY( 0deg );*/

}

.no-csstransforms3d .cards.flip > div:last-child {
    display: block;
}