<!DOCTYPE html>
<html lang="en-us" dir="ltr" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=900" />
<title>Golf Solitaire - by Will Jensen</title>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="flip.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<link href="http://fonts.googleapis.com/css?family=Bigelow+Rules|Germania+One" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="loading">
<h1 id="title">Golf Solitaire</h1>
<div id="credit">By Will Jensen 2013</div>
<div id="fountainTextG">
<div id="fountainTextG_1" class="fountainTextG">L</div>
<div id="fountainTextG_2" class="fountainTextG">o</div>
<div id="fountainTextG_3" class="fountainTextG">a</div>
<div id="fountainTextG_4" class="fountainTextG">d</div>
<div id="fountainTextG_5" class="fountainTextG">i</div>
<div id="fountainTextG_6" class="fountainTextG">n</div>
<div id="fountainTextG_7" class="fountainTextG">g</div>
<div id="fountainTextG_8" class="fountainTextG">.</div>
<div id="fountainTextG_9" class="fountainTextG">.</div>
<div id="fountainTextG_10" class="fountainTextG">.</div>
</div>
</div>
<div id="table">
<div id="buttons">
<div id="newGame" class="button">New Game</div>
<div id="restart" class="button">Restart</div>
<br />
<br />
<div id="loopCards" class="button">Ace <-> King</div>
</div>
<h2 id="cardsLeft"></h2>
<div id="discardPile">
Discard <br />
(Tap to Undo)
</div>
<div class="card" id="as">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/vWM3QaJ.jpg" />
</div>
</div>
<div class="card" id="2s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/iNUz238.jpg" />
</div>
</div>
<div class="card" id="3s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/AOcILRH.jpg" />
</div>
</div>
<div class="card" id="4s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/igBxSNu.jpg" />
</div>
</div>
<div class="card" id="5s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/zSxPK3V.jpg" />
</div>
</div>
<div class="card" id="6s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/O19viIM.jpg" />
</div>
</div>
<div class="card" id="7s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/3gKXgAS.jpg" />
</div>
</div>
<div class="card" id="8s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/w9MpT4L.jpg" />
</div>
</div>
<div class="card" id="9s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/KLtrONT.jpg" />
</div>
</div>
<div class="card" id="10s">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/quY2iO8.jpg" />
</div>
</div>
<div class="card" id="js">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/nyQC1LN.jpg" />
</div>
</div>
<div class="card" id="qs">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/1XOwtxe.jpg" />
</div>
</div>
<div class="card" id="ks">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/ay9SB8z.jpg" />
</div>
</div>
<div class="card" id="ac">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/bC98GXZ.jpg" />
</div>
</div>
<div class="card" id="2c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/oW6x72Z.jpg" />
</div>
</div>
<div class="card" id="3c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/hRcsla1.jpg" />
</div>
</div>
<div class="card" id="4c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/dlFJyjU.jpg" />
</div>
</div>
<div class="card" id="5c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/8ibS26U.jpg" />
</div>
</div>
<div class="card" id="6c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/jZoce2U.jpg" />
</div>
</div>
<div class="card" id="7c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/GKui9p4.jpg" />
</div>
</div>
<div class="card" id="8c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/FPPJriR.jpg" />
</div>
</div>
<div class="card" id="9c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/c536bwo.jpg" />
</div>
</div>
<div class="card" id="10c">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/XQqkQM4.jpg" />
</div>
</div>
<div class="card" id="jc">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/Eott6kE.jpg" />
</div>
</div>
<div class="card" id="qc">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/hGg7qIi.jpg" />
</div>
</div>
<div class="card" id="kc">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/QjjLyhT.jpg" />
</div>
</div>
<div class="card" id="ah">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/EygAaIb.jpg" />
</div>
</div>
<div class="card" id="2h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/Sa5doY1.jpg" />
</div>
</div>
<div class="card" id="3h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/w6uDI4g.jpg" />
</div>
</div>
<div class="card" id="4h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/ApVzmBo.jpg" />
</div>
</div>
<div class="card" id="5h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/hel0GeW.jpg" />
</div>
</div>
<div class="card" id="6h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/xy6pT0v.jpg" />
</div>
</div>
<div class="card" id="7h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/6NAUEDw.jpg" />
</div>
</div>
<div class="card" id="8h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/aiGzoO9.jpg" />
</div>
</div>
<div class="card" id="9h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/kqFsBk9.jpg" />
</div>
</div>
<div class="card" id="10h">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/135xGdR.jpg" />
</div>
</div>
<div class="card" id="jh">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/79eDbTs.jpg" />
</div>
</div>
<div class="card" id="qh">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/eBuxqnA.jpg" />
</div>
</div>
<div class="card" id="kh">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/h8n24pt.jpg" />
</div>
</div>
<div class="card" id="ad">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/dGe8K2k.jpg" />
</div>
</div>
<div class="card" id="2d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/nCmQtSk.jpg" />
</div>
</div>
<div class="card" id="3d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/6QqEoqZ.jpg" />
</div>
</div>
<div class="card" id="4d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/F2T5YBq.jpg" />
</div>
</div>
<div class="card" id="5d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/SGp4fc3.jpg" />
</div>
</div>
<div class="card" id="6d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/9AsZ5j5.jpg" />
</div>
</div>
<div class="card" id="7d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/6IIvbTa.jpg" />
</div>
</div>
<div class="card" id="8d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/jYSdewJ.jpg" />
</div>
</div>
<div class="card" id="9d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/QrppiXR.jpg" />
</div>
</div>
<div class="card" id="10d">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/jYgeIzu.jpg" />
</div>
</div>
<div class="card" id="jd">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/odsFioy.jpg" />
</div>
</div>
<div class="card" id="qd">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/FTLBAXi.jpg" />
</div>
</div>
<div class="card" id="kd">
<div class="front">
<img src="http://i.imgur.com/9Ai9ZfW.jpg" />
</div>
<div class="back">
<img src="http://i.imgur.com/9aTtaHU.jpg" />
</div>
</div>
</div>
</body>
</html>
/*
HTML5 Golf Solitaire
Copyright 2013 Will Jensen
https://github.com/themachineswillwin/html5-golf-solitaire
machineboy2045@gmail.com
This file is part of Fast HTML5 Golf Solitaire.
HTML5 Golf Solitaire is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
HTML5 Golf Solitaire is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with HTML5 Golf Solitaire. If not, see <http://www.gnu.org/licenses/>.
*/
$(window).ready(function(){
var CWIDTH = 100;
var CHEIGHT = 150;
var NUM_COLS = 7;
var COLS_SIZE = 5;
var TRANSITION_DURATION = 400; //in milliseconds
var busyTable = false; //during deal and restart
//used by columns
var y_abs = -350;
var x_abs = 0;
var y_offset = CHEIGHT * 0.2;
var x_offset = CWIDTH * 1.2;
var discardPos = {
'left': x_offset * (NUM_COLS-1),
'top': 0
};
var suits = ['s','c','h','d'];
var faces = ['a','2','3','4','5','6','7','8','9','10','j','q','k'];
var deck = [];
var cols = [];
var drawPile = [];
var discardPile = [];
$('#table').on('touchstart click','.card',function(e){
e.stopPropagation();
e.preventDefault();
var el = $(this);
var card = el.data('card');
if( card.busy || busyTable )
return;
busy( card );
if( card.location == 'drawPile' ){
draw( card );
}else if( card.location == 'column' ){
var col = cols[card.col];
var topCard = col[col.length-1];
if( card.num == topCard.num ){
play( card );
}
}else if( card.location == 'discardPile' ){
undo();
}
});
function undo(){
var card = discardPile.pop();
if( card.col != -1 ){
sendToCol( card );
}else{
sendToDrawPile( card );
}
cardsLeft();
}
function cardsLeft(){
$('#cardsLeft').text( drawPile.length );
}
//disable overscroll in ios
// $(document).bind('touchmove', function(e) {
// e.preventDefault();
// });
function sendToDrawPile( card ){
var el = getHtml( card );
el.find('.back').removeClass('shadow');
card.location = 'drawPile';
card.col = -1;
zindex(el, card.num);
drawPile.push( card );
flipDown( card );
el.css("transform","translate(0px, 0px)");
}
function play( card ){
if( discardPile.length ){
var lastDiscard = discardPile[discardPile.length-1];
if( (card.val == lastDiscard.val-1) || (card.val == lastDiscard.val+1) )
discard( card );
//allow ace <-> king
if( $('#loopCards').hasClass('selected') ){
if( ((card.val == 1) && (lastDiscard.val == faces.length)) ||
((card.val == faces.length) && (lastDiscard.val == 1)) )
discard( card );
}
}
}
function discard( card ){
var el = getHtml( card );
var card = (card.location == 'drawPile') ? drawPile.pop() : cols[card.col].pop();
discardPile.push( card );
card.location = 'discardPile';
zindex( el, discardPile.length );
if( discardPile.length > 3 )
el.find('.back').removeClass('shadow');
else
el.find('.back').addClass('shadow');
cardsLeft();
el.css("transform","translate("+discardPos.left+"px, "+discardPos.top+"px)");
}
function draw( card ){
flipUp( card );
setTimeout(function(){
discard( card );
},200);
}
function getHtml( card ){
return $('#'+card.face+card.suit);
}
function sendToCol( card ){
var col = cols[card.col];
var left = x_abs + (x_offset * card.col);
var top = y_abs + (y_offset * col.length);
var el = getHtml(card);
card.location = 'column';
col.push( card );
el.find('.back').addClass('shadow');
zindex( el, col.length + ((COLS_SIZE+1-card.col)*COLS_SIZE) );
el.css("transform","translate("+left+"px, "+top+"px)");
cardsLeft();
}
function dealColumn(i, j){
if(j < COLS_SIZE){
setTimeout(function(){
var card = drawPile.pop();
card.col = i;
flipUp( card );
sendToCol( card );
dealColumn(i, ++j);
},75);
}else{
deal(--i);
}
}
function deal(i){
busyTable = true;
if( i >= 0 ){
dealColumn(i,0);
}else{
busyTable = false;
}
}
function flipUp( card ){
getHtml( card ).addClass('flip');
}
function flipDown( card ){
getHtml( card ).removeClass('flip');
}
function zindex( card, index ){
card.css('z-index', index+100);
setTimeout(function(){
card.css('z-index', index);
}, TRANSITION_DURATION);
}
function busy( card ){
card.busy = true;
setTimeout(function(){
card.busy = false;
}, TRANSITION_DURATION);
}
//fisher yates shuffle
function fisherYates ( myArray ) {
var i = myArray.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = myArray[i];
var tempj = myArray[j];
myArray[i] = tempj;
myArray[j] = tempi;
}
}
function Card( suit, face, val ){
this.suit = suit;
this.face = face;
this.val = val;
this.location = 'drawPile';
this.num;
this.col = -1;
}
function init(){
for(var i = 0, suit; suit = suits[i++];){
for(var j = 0, face; face = faces[j++];){
var card = new Card(suit,face,j);
// printCard( card );
deck.push( card );
getHtml(card).data('card', card);
}
}
resetStacks();
shuffle();
deal(NUM_COLS-1);
}
function reDeal(){
busyTable = true;
if(drawPile.length < deck.length){
var card = deck[drawPile.length];
sendToDrawPile( card );
setTimeout(reDeal,0);
}else{
busyTable = false;
setTimeout(function(){
shuffle();
deal(NUM_COLS-1);
},TRANSITION_DURATION);
}
}
function shuffle(){
fisherYates( deck ); //shuffle
drawPile = [];
for(var i = 0, card; card = deck[i++];){
card.num = i; //number the cards
card.col = -1;
getHtml(card).css('z-index', card.num);
//push cards into draw pile
drawPile.push( card );
}
}
function resetStacks(){
cols = [];
discardPile = [];
drawPile = [];
for(var i = 0; i < NUM_COLS; i++){
cols.push([]);
}
}
function newGame(){
resetStacks();
reDeal();
}
function restart(){
if( discardPile.length ){
undo();
setTimeout(restart,75);
}
}
$('#newGame').on('touchstart click',function(e){
e.stopPropagation();
e.preventDefault();
if(!busyTable && confirm('Start new game?')){
newGame();
}
});
$('#loopCards').on('touchstart click',function(e){
e.stopPropagation();
e.preventDefault();
$(this).toggleClass('selected');
});
$('#restart').on('touchstart click',function(e){
e.stopPropagation();
e.preventDefault();
if( !busyTable && confirm('Restart game?'))
restart();
});
setTimeout(function(){
$('#fountainTextG').fadeOut(1000);
$('#table').addClass('show');
setTimeout(init,1000);
}, 3000);
});
/* Styles go here */
body{
height: 100%;
margin: 0;
background: #012915 url('http://i.imgur.com/KEZmFzj.jpg') center;
overflow: hidden;
font-family: 'Bigelow Rules', 'Georgia';
}
#table{
margin: 40px auto 0 auto;
width: 820px;
height: 570px;
float: none;
position: relative;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0;
/*border: 1px solid white;*/
}
#table.show{
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
#buttons{
width: 100%;
text-align: center;
position: absolute;
left: 0px;
top: 350px;
z-index: 1;
}
.button{
display: inline-block;
padding: 5px 15px;
margin: 0px 10px;
border: 2px solid #59BD32;
text-shadow: 0px 0px 11px #77BB38;
border-radius: 7px;
color: #fff;
opacity: 0.6;
font-size: 2.5em;
font-family: 'Germania One';
}
#loopCards.selected{
background: #8CC556;
}
.button:hover{
opacity: 0.9;
}
#discardPile{
position: absolute;
right: 0px;
top: 350px;
width: 94px;
height: 100px;
z-index: 1;
text-align: center;
padding: 25px 0;
border: 2px solid #59BD32;
text-shadow: 0px 0px 11px #77BB38;
border-radius: 7px;
color: #fff;
opacity: 0.6;
font-size: 2em;
box-shadow: inset 0 0 40px #419155;
}
#cardsLeft{
font-size: 2em;
position: absolute;
left: 0px;
top: 340px;
width: 100px;
text-align: center;
z-index: 900;
color: white;
text-shadow: 0px 5px 5px black;
font-family: 'Germania One';
}
.button, .card{
cursor: pointer;
}
#loading{
position: absolute;
top: 100px;
left: 0;
width: 100%;
text-align:center;
color:#fff;
font-size: 5em;
}
#loading h1{
margin: 0;
font-size: 2em;
opacity: 0.7;
font-weight: normal;
}
#credit{
font-size: 0.6em;
margin-top: -30px;
opacity: 0.7;
color: black;
}
/************* loading text animation ********************/
#fountainTextG{
width: 190px;
margin: auto;
}
.fountainTextG{
float: left;
display: inline-block;
-moz-animation-name:bounce_fountainTextG;
-moz-animation-duration:2.94s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.5);
-webkit-animation-name:bounce_fountainTextG;
-webkit-animation-duration:2.94s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.5);
-ms-animation-name:bounce_fountainTextG;
-ms-animation-duration:2.94s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.5);
-o-animation-name:bounce_fountainTextG;
-o-animation-duration:2.94s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.5);
animation-name:bounce_fountainTextG;
animation-duration:2.94s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.5);
}
#fountainTextG_1{
-moz-animation-delay:0.84s;
-webkit-animation-delay:0.84s;
-ms-animation-delay:0.84s;
-o-animation-delay:0.84s;
animation-delay:0.84s;
}
#fountainTextG_2{
-moz-animation-delay:1.05s;
-webkit-animation-delay:1.05s;
-ms-animation-delay:1.05s;
-o-animation-delay:1.05s;
animation-delay:1.05s;
}
#fountainTextG_3{
-moz-animation-delay:1.26s;
-webkit-animation-delay:1.26s;
-ms-animation-delay:1.26s;
-o-animation-delay:1.26s;
animation-delay:1.26s;
}
#fountainTextG_4{
-moz-animation-delay:1.47s;
-webkit-animation-delay:1.47s;
-ms-animation-delay:1.47s;
-o-animation-delay:1.47s;
animation-delay:1.47s;
}
#fountainTextG_5{
-moz-animation-delay:1.68s;
-webkit-animation-delay:1.68s;
-ms-animation-delay:1.68s;
-o-animation-delay:1.68s;
animation-delay:1.68s;
}
#fountainTextG_6{
-moz-animation-delay:1.89s;
-webkit-animation-delay:1.89s;
-ms-animation-delay:1.89s;
-o-animation-delay:1.89s;
animation-delay:1.89s;
}
#fountainTextG_7{
-moz-animation-delay:2.1s;
-webkit-animation-delay:2.1s;
-ms-animation-delay:2.1s;
-o-animation-delay:2.1s;
animation-delay:2.1s;
}
#fountainTextG_8{
-moz-animation-delay:2.31s;
-webkit-animation-delay:2.31s;
-ms-animation-delay:2.31s;
-o-animation-delay:2.31s;
animation-delay:2.31s;
}
#fountainTextG_9{
-moz-animation-delay:2.52s;
-webkit-animation-delay:2.52s;
-ms-animation-delay:2.52s;
-o-animation-delay:2.52s;
animation-delay:2.52s;
}
#fountainTextG_10{
-moz-animation-delay:2.73s;
-webkit-animation-delay:2.73s;
-ms-animation-delay:2.73s;
-o-animation-delay:2.73s;
animation-delay:2.73s;
}
@-moz-keyframes bounce_fountainTextG{
0%{
-moz-transform:scale(1);
color:#8AE36D;
}
100%{
-moz-transform:scale(.5);
color:#FFFFFF;
}
}
@-webkit-keyframes bounce_fountainTextG{
0%{
-webkit-transform:scale(1);
color:#8AE36D;
}
100%{
-webkit-transform:scale(.5);
color:#FFFFFF;
}
}
@-ms-keyframes bounce_fountainTextG{
0%{
-ms-transform:scale(1);
color:#8AE36D;
}
100%{
-ms-transform:scale(.5);
color:#FFFFFF;
}
}
@-o-keyframes bounce_fountainTextG{
0%{
-o-transform:scale(1);
color:#8AE36D;
}
100%{
-o-transform:scale(.5);
color:#FFFFFF;
}
}
@keyframes bounce_fountainTextG{
0%{
transform:scale(1);
color:#8AE36D;
}
100%{
transform:scale(.5);
color:#FFFFFF;
}
}
.card {
position: absolute;
left:0;
top:350px;
text-align: center;
z-index: 2;
/*background: blue;*/
/*border: 8px solid white;*/
-webkit-perspective: 600px;
-moz-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
/*-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;*/
/*-webkit-transition: translate3d .4s ease-in-out;*/
/*transition: all .4s ease-in-out; */
-webkit-transition-timing-function: ease-in-out;
-webkit-transition-duration: .4s;
/*-moz-transition: z-index 0;*/
-webkit-transition-property:-webkit-transform;
}
.card img, .card{
width: 96px;
height: 150px;
}
.back, .front{
border-radius: 8px;
overflow:hidden;
}
.back, .front{
padding: 5px 2px;
background: white;
}
.back.shadow{
-webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.26);
/*box-shadow: 0px -2px 14px #2D521C;*/
}
/* -- make sure to declare a default for every property that you want animated -- */
/* -- general styles, including Y axis rotation -- */
.card .front {
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: inherit;
height: inherit;
text-align: center;
/*background-image: -webkit-linear-gradient(#2D5EA8, #004A6D);*/
-webkit-transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateX(0deg) rotateY(0deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.card.flip .front {
z-index: 900;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.card .front img{
width: 90px;
height: 148px;
margin-top: 1px;
}
.card .back {
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: inherit;
height: inherit;
/*background-image: -webkit-linear-gradient(#E9E9E9, #CECECE);*/
/*-webkit-box-shadow:5px 5px 5px rgba(0,0,0,0.3);*/
-webkit-transform: rotateY(-180deg);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform: rotateY(-180deg);
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
/* -- transition is the magic sauce for animation -- */
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.card.flip .back {
z-index: 1000;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}