#dummy {
	/* DESC: IMPORTANT: DUMMY RULE at Index=0 */
	/* TECH: This will be removed and re-added over-and-over as "@-[webkit|mozilla|o]-keyframes card" */
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 10s;
}

body {
	margin: 0;
	padding: 0; 
}

.titleBox {
	clear: both;
	font-family: arial, helvetica, sans-serif;
	text-align: center;
	margin: 0px;
	padding: 10px;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	border: 3px solid SaddleBrown;
	background: #12ad01;
	background: -webkit-linear-gradient(bottom, #12ad01 1%, #045600 100%);
	background:    -moz-linear-gradient(bottom, #12ad01 1%, #045600 100%);
	background:      -o-linear-gradient(bottom, #12ad01 1%, #045600 100%);
}
.titleBox h1 {
	margin: 10px 0 0 0;
	font-size: 2.25em;
	font-family: "Georgia", serif;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: yellow;
}
.titleBox h3 {
	margin: 10px 0 10px 0;
	font-size: 0.9em;
	font-weight: normal;
	color: orange;
}
.titleBox h3 span {
	font-size: .8em;
	line-height: 1.4em;
	vertical-align: top;
	color: gold;
}
.titleBox p {
	font-size: .75em;
	color: burlywood;
}

.navBox {
	width: auto;
	margin: 0px;
	padding: 0px;
	background: #154c85;
	height: auto;
	text-align: center;
}
nav {
	display: inline-block;
	margin: 0px;
	padding: 4px 8px 8px 8px;
	background: #154c85;
	height: 30px;
	position: relative;
}
nav ul {
	margin: 0px;
	list-style: none;
	background: #154c85;
	position: relative;
	padding: 4px 0 0 0;
	text-align: center;
}
nav ul li { display: inline; }
nav ul li a {
	display: block;
	float: left;
	border-top: 1px solid #96d1f8;
	background: #3e779d;
	background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
	background: -moz-linear-gradient(top,  #65a9d7,  #3e779d);
	height: 17px;
	padding: 6px 10px;
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
	        border-radius: 8px;
	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 3px;
	   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
	       text-shadow: rgba(0,0,0,.4) 0 1px 0;
	-webkit-text-stroke: 1px transparent;
	font: bold 11px/16px "Lucida Grande", "Verdana", sans-serif;
	color: rgba(255,255,255,.85);
	text-decoration: none;
	margin-right: 10px;
}
nav ul li a:hover {
	border-top: 1px solid #4789b4;
	background: #28597a;
	background: -webkit-gradient(linear, left top, left bottom, from(#3d789f), to(#28597a));
	background: -moz-linear-gradient(top,  #3d789f,  #28597a);
	color: rgba(255,255,255,.85);
	text-shadow: 2px 2px rgba(64,64,64,1);
}
nav ul li a:active, nav ul li a.current {
	border-top-color: #245779;
	background: #1b435e;
	position: relative;
	top: 1px;
}
.navTitle {
	font: bold 12px/16px "Lucida Grande", "Verdana", sans-serif;
	display: inline-block;
	text-align: center;
	color: rgba(255,255,255,.85);
	padding-top: 15px;
	margin: 0px;
	position: relative;
	vertical-align: top;
}
.navSelected {
	border-top: 1px solid #4789b4;
	background: #28597a;
	background: -webkit-gradient(linear, left top, left bottom, from(#3d789f), to(#28597a));
	background: -moz-linear-gradient(top,  #3d789f,  #28597a);
	color: rgba(255,255,255,.85);
	text-shadow: 2px 2px rgba(64,64,64,1);
}

.notifBox {
	visibility: hidden;
	background: #ddf;
	width: 890px;
	height: 1px;
	color: yellow;
	background: green;
	font-size: 50px;
	line-height: 120px;
	border: 2px solid #333;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	     -o-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	   -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	     -o-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	        box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

.replayBox {
	visibility: hidden;
	width: 890px;
	height: 1px;
}

.bottomBox {
	clear: both;
	text-align: center;
	margin: 25px;
	padding: 10px;
	background: rgb(240,240,240);
	border: 1px solid rgb(204,204,204);

	font-family: Helvetica, Arial;
	font-size: .75em;

	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

/* This imageless css button was generated by CSSButtonGenerator.com */
.replayBtn {
	-moz-box-shadow:inset 1px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 1px 1px 0px 0px #f29c93;
	box-shadow:inset 1px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:20px;
	font-weight:bold;
	padding:6px 30px;
	text-decoration:none;
	text-shadow:2px 2px 0px #b23e35;
}.replayBtn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}.replayBtn:active {
	position:relative;
	top:1px;
}

#content {
	margin: 50px 25px 50px 25px;
	text-align: center;
	font-family: "Georgia", serif;
	line-height: 1.8em;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

#cardPile {
	margin: 0 auto;
	background: #ffd;
}
#cardSlots {
	margin: 50px auto 0 auto;
	background: #ddf;
}
#cardSlots, #cardPile {
	width: 890px;
	height: 120px;
	padding: 20px;
	border: 2px solid #333;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	     -o-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	   -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	     -o-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
	        box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

/* Individual cards and slots */
#cardSlots div, #cardPile div {
	float: left;
	width: 56px;
	height: 81px;
	padding: 10px;
	padding-top: 40px;
	padding-bottom: 0;
	margin-left: 10px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	     -o-border-radius: 10px;
	        border-radius: 10px;
}
#cardSlots div:first-child, #cardPile div:first-child {
	margin-left: 0;
}

.card {
	position: relative; /* IMPORTANT: Card will only rotate in-place and not return to pile if this is left out! */
	cursor: move;
	border: 2px solid #333;
	background: #666;
	-webkit-background-clip: padding;
	   -moz-background-clip: padding;
	     -o-background-clip: padding;
	        background-clip: padding-box;
	opacity: 1;
	-webkit-transition: opacity .5s ease-in;
	   -moz-transition: opacity .5s ease-in;
	     -o-transition: opacity .5s ease-in;

	/* TEST: iOS D-n-D */
	-webkit-user-drag: element;
	-webkit-user-select: none;
}
.slot {
	border: 2px dashed #000;
}

#cardPile div {
	color: #fff;
	font-size: 50px;
	text-shadow: 0 0 3px #000;
}

.card1_correct  { background: red;    }
.card2_correct  { background: brown;  }
.card3_correct  { background: purple; }
.card4_correct  { background: indigo; }
.card5_correct  { background: green;  }
.card6_correct  { background: cyan;   }
.card7_correct  { background: blue;   }
.card8_correct  { background: yellow; }
.card9_correct  { background: orange; }
.card10_correct { background: violet; }

.slot.over {
	background: yellow;
}
.card.moving {
	opacity: 0.4;
	/* YIKES! Chrome doesnt like this at all!  The card just stays where its dropped on slot half the time!
	-webkit-transform: scale(0.8);
	   -moz-transform: scale(0.8);
	    -ms-transform: scale(0.8);
	     -o-transform: scale(0.8);
	*/
}

.cardCorrect {
	color: #fff;
	font-size: 50px;
	border: 2px solid #333;
	text-shadow: 0 0 3px #000;
}

.animReturn {
	-webkit-animation: card 2s;
	   -moz-animation: card 2s;
	     -o-animation: card 2s;
}

.animScale {
	-webkit-animation-name: scaleCard;
	-webkit-animation-duration: .25s;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in-out;
	   -moz-animation-name: scaleCard;
	   -moz-animation-duration: .25s;
	   -moz-animation-iteration-count: 1;
	   -moz-animation-timing-function: ease-in-out;
	     -o-animation-name: scaleCard;
	     -o-animation-duration: .25s;
	     -o-animation-iteration-count: 1;
	     -o-animation-timing-function: ease-in-out;
}
@-webkit-keyframes scaleCard {
	  0% { -webkit-transform: scale(1)   }
	 50% { -webkit-transform: scale(1.5) }
	100% { -webkit-transform: scale(1)   }
	/* As of 2012-08 (Chrome 21): [SCALE] and [ROTATE] are mutually exclusive acitivites and cannot be combined! */
	/* TODO: try: The matrix() method combines all of the 2D transform methods into one. */
}
@-moz-keyframes scaleCard {
	  0% { -moz-transform:scale(1)   }
	 50% { -moz-transform:scale(1.5) }
	100% { -moz-transform:scale(1)   }
}
@-o-keyframes scaleCard {
	  0% { -o-transform:scale(1)   }
	 50% { -o-transform:scale(1.5) }
	100% { -o-transform:scale(1)   }
}