/* General layout */
html, body {
font: 16px Arial;
text-align: center;
margin: 0;
padding: 0;
text-align: center;
width: 100%
}
html {
height: 100%;
overflow: hidden
}
body {
background: #f0f9ff;
background: -moz-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f9ff), color-stop(47%,#cbebff), color-stop(100%,#a1dbff));
background: -webkit-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: -o-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: -ms-linear-gradient(top, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
background: linear-gradient(to bottom, #f0f9ff 0%,#cbebff 47%,#a1dbff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=0 );
}
h1 {
margin: 30px 0 0;
padding: 0;
width: 100%;
text-align: center;
color: #777;
}
p {
margin: 20px 0 0;
padding: 0;
width: 100%;
text-align: center;
color: #777;
}
div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
p strong {
display: inline-block;
padding: 5px;
background-color: red;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
line-height: 12px;
text-align: center;
}
#playfield-wrapper {
display: inline-block;
padding: 0;
opacity: 1;
margin: 20px 0 0;
position: relative
}
.win-text {
color: orange;
font-size: 100px;
font-weight: bold;
height: 100%;
left: 0;
margin-top: -50px;
position: absolute;
top: 50%;
width: 100%
}
#levels {
display: block;
width: 360px;
margin: 20px auto 0;
list-style: none;
padding: 0;
overflow: hidden
}
#levels li {
float: left;
width: auto;
border-radius: 3px;
border: solid 1px #DC930B;
margin: 5px 10px 5px 0;
}
#levels li:last-child {
margin-right: 0
}
#levels li.selected {
border: solid 1px #284EAE;
}
#levels li a {
text-decoration: none;
display: inline-block;
border-top: solid 1px #FFC04D;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
width: 25px;
height: 25px;
background-color: orange;
font-size: 18px;
font-weight: bold;
line-height: 25px;
text-align: center;
color: #fff;
}
#levels li.selected a {
border-top: solid 1px #6B88D2;
background-color: #2B54BF
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 120px;
bottom: 0;
background-color: rgba(120, 120, 120, 0.7);
text-align: left;
padding-top: 3px
}
.footer p {
padding: 0 0 0 20px;
margin: 5px 0 0;
line-height: 24px;
display: block;
width: auto;
text-shadow: 1px 1px 0px #333;
}
.footer p,
.footer a {
text-align: left;
color: #fff
}
.footer p span {
display: inline-block;
width: 100px
}
.footer a {
display: inline-block;
background-color: #2B54BF;
color: #fff;
font-weight: bold;
border-radius: 5px;
padding: 0 5px;
text-shadow: 1px 1px 0px #000;
text-decoration: none
}
/* Card layout */
.play-field, .card {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
}
.play-field {
margin: 0;
padding: 0;
border-collapse: collapse;
opacity: 1
}
.play-field td {
padding: 5px;
}
.card {
width: 80px;
height: 80px;
font-size: 64px;
line-height: 70px;
cursor: default;
}
.flipper {
position: relative;
border: solid 1px #aaa;
border-radius: 5px;
background-color: #ccc;
text-align: center;
width: 100%;
height: 100%;
box-shadow: 1px 1px 3px 1px #ccc;
opacity: 1;
}
.face {
border: solid 1px #aaa;
border-radius: 3px;
background-color: #fff;
position: absolute;
width: 70px;
height: 70px;
box-shadow: inset 0px 0px 4px #aaa;
margin: 4px;
}
.front {
opacity: 0;
color: #2B54BF;
text-shadow: 1px 1px 1px rgba(255,255,255,1);
}
.back {
opacity: 1;
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 5px, rgba(255,0,0,.5) 6px, rgba(255,0,0,.5) 6px, rgba(255,255,255,.1) 7px),repeating-linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 5px, rgba(255,0,0,.5) 6px, rgba(255,0,0,.5) 6px, rgba(255,255,255,.1) 7px);
background-image: -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 5px, rgba(255,0,0,.5) 6px, rgba(255,0,0,.5) 6px, rgba(255,255,255,.1) 7px),-webkit-repeating-linear-gradient(135deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 5px, rgba(255,0,0,.5) 6px, rgba(255,0,0,.5) 6px, rgba(255,255,255,.1) 7px);
}
.clicks {
position: absolute;
right: 3px;
bottom: 2px;
color: #777;
font: bold 11px Arial
}
/* Card animation */
.card {
perspective: 100;
-webkit-perspective: 100;
-moz-perspective: 100;
}
.flipper {
transform-style: preserve-3d;
transition: transform 0.15s linear;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.15s linear;
}
.face {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
}
.flipfront {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
box-shadow: -1px 1px 3px 1px #ccc;
}
.flipback {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
.front {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
@-moz-keyframes pulse {
from {
background-color: #fff;
}
to {
background-color: orange;
}
}
@-webkit-keyframes pulse {
from {
background-color: #fff;
}
to {
background-color: orange;
}
}
@keyframes pulse {
from {
background-color: #fff;
}
to {
background-color: orange;
}
}
.pulse {
-moz-animation: pulse 0.2s ease-in-out 5 alternate;
-webkit-animation: pulse 0.2s ease-in-out 5 alternate;
animation: pulse 0.2s ease-in-out 5 alternate;
}
.play-field.win td .flipper {
-webkit-transition: opacity 0.5s ease 1.5s;
transition: opacity 0.5s ease 1.5s;
opacity: 1 !important
}
.win-text {
opacity: 0;
z-index: -1;
font-size: 0;
margin-top: 0;
text-shadow: -1px -1px #C18005, 1px -1px #C18005, -1px 1px #C18005, 1px 1px #C18005;
-webkit-transition: all 1.5s ease 0.5s;
transition: all 1.5s ease 0.5s;
}
#playfield-wrapper.win .win-text {
font-size: 100px;
opacity: 1;
z-index: 1;
margin-top: -50px;
}
|
Download
