/* memory.css */

@CHARSET "UTF-8";

.gemischtesdoppel {
    margin: 20px 0 0 0;
}

.gemischtesdoppel .memorypart {
    margin: 0 20px 0 20px;
}


.gemischtesdoppel .front {
  background-image: url('memory_bg.jpg');
}

.gemischtesdoppel #checkbutton {
    color: white;
    font-size: 17px;
    font-weight: normal;
    height: 44px;
    width: 144px;
    border: none;
    display: inline-block;
    margin: 0 1% 0 10px;
    font-family: 'PTSerif-Med' !important;
    background: url(btn_gray_left.png) no-repeat 0% 50%,
    url(btn_gray_right.png) no-repeat 100% 50%,
    url(btn_gray_center.png) repeat-x 0% 50%;
}
 

 
.gemischtesdoppel .teaser {
    font: 24px/28px "ClassGarmnd BT";
}



.gemischtesdoppel h1 {
    margin-bottom: 5px;
}

.gemischtesdoppel .ficha {
    width:200px;
    height:200px;
    float:right;
    position:relative;
    -webkit-perspective:1000;
    -moz-perspective:1000;
    perspective:1000;
    z-index:1;
    margin:1%;
}
.gemischtesdoppel .ficha-cover {
    height:100%;
    width:100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 200ms linear;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 200ms linear;
    transform-style: preserve-3d;
    transition: all 200ms linear;
}

 .gemischtesdoppel .face {
    height:100%;
    position:absolute;
    width:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.ficha-cover .face.front,
.ficha-cover .face.back {
    width: 100%;
}

.gemischtesdoppel .face {
    height:100%;
    position:absolute;
    width:100%;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.gemischtesdoppel .face.back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    visibility: hidden;
}


/* Alternative Implementierung
   des Gemischten Doppels
--------------------------------*/

.gemischtesdoppel .card {
    width:200px;
    height:200px;
    position:relative;
    margin-right:1%;
    float:right;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.gemischtesdoppel .card div {
    position:absolute;
    width:100%;
    height:100%;

    -webkit-transition: -webkit-transform 200ms ease-in-out;
    -moz-transition:    -moz-transform 200ms ease-in-out;
    -ms-transition:     -ms-transform 200ms ease-in-out;
    -o-transition:      -o-transform 200ms ease-in-out;
    transition:         transform 200ms ease-in-out;
}

.gemischtesdoppel .card .backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: perspective(1000px) rotateY(0deg);
    -moz-transform: perspective(1000px) rotateY(0deg);
    -ms-transform: perspective(1000px) rotateY(0deg);
    -o-transform: perspective(1000px) rotateY(0deg);
    transform: perspective(1000px) rotateY(0deg);
}

.gemischtesdoppel .card .frontside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transform: perspective(1000px) rotateY(-180deg);
    -moz-transform: perspective(1000px) rotateY(-180deg);
    -ms-transform: perspective(1000px) rotateY(-180deg);
    -o-transform: perspective(1000px) rotateY(-180deg);
    transform: perspective(1000px) rotateY(-180deg);
}

.gemischtesdoppel .card.flipped .backside {
    -webkit-transform: perspective(1000px) rotateY(180deg);
    -moz-transform: perspective(1000px) rotateY(180deg);
    -ms-transform: perspective(1000px) rotateY(180deg);
    -o-transform: perspective(1000px) rotateY(180deg);
    transform: perspective(1000px) rotateY(180deg);
}

.gemischtesdoppel .card.flipped .frontside {
    -webkit-transform: perspective(1000px) rotateY(0);
    -moz-transform: perspective(1000px) rotateY(0);
    -ms-transform: perspective(1000px) rotateY(0);
    -o-transform: perspective(1000px) rotateY(0);
    transform: perspective(1000px) rotateY(0);
}


/* Responsive Layout
--------------------------------*/

/* jqModal base Styling courtesy of;
  Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
  the Window's z-index value will be set to 3000 by default (in jqModal.js). You
  can change this value by either;
    a) supplying one via CSS
    b) passing the "zIndex" parameter. E.g.  (window).jqm({zIndex: 500}); */
.gemischtesdoppel .jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -200px;
    width: 400px;
    
    background-color: #FFF;
    color: #333;
    border: 2px solid RED;
    padding: 9px;
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html  .gemischtesdoppel .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}







.portrait .gemischtesdoppel .header {
    width: 475px;
}

.landscape .gemischtesdoppel .header {
    width: 690px;
}

.landscape .gemischtesdoppel .teaser {
    font: 24px/28px "ClassGarmnd BT";
}

.gemischtesdoppel .vSpace, .landscape .vSpace {
    padding-top: 20px;
}

/* Einspaltig */
@media screen and (max-width:569px) and (orientation:portrait), screen and (max-width:699px) and (orientation:landscape) {

    .portrait .gemischtesdoppel .ficha, .portrait .gemischtesdoppel .card {
        width: 47%; /* 2 card */
    }

    .landscape .gemischtesdoppel .ficha, .landscape .gemischtesdoppel .card {
        width: 31%; /* 3 card */
    }
}

/* Dreispaltig */
@media screen and (min-width:570px) and (orientation:portrait), screen and (min-width:700px) and (orientation:landscape) {

    .landscape .gemischtesdoppel .memorypart {
        margin: 20px 120px 0 120px;
    }

    .portrait .gemischtesdoppel .memorypart{
        margin: 20px 70px 0 70px;
    }

    .landscape .gemischtesdoppel .ficha, .landscape .gemischtesdoppel .card {
        width: 23%; /* 4 card */
    }

    .portrait .gemischtesdoppel .ficha {
        width: 31%; /* 3 card */
    }

    .portrait .gemischtesdoppel .card {
        width: 31%; /* 3 card */
        height: 280px; /* fix ie11 win8.1 */
    }
}