@CHARSET "UTF-8";

.myDiv {
	margin:auto;
	margin-top:50px;
	padding: 20px;
	padding-bottom:50px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	border: 1px solid #F0F0F0;
	width: 550px;
	height: 480px;
	font-family: Courgette;
	background: -webkit-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.4)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.4)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.4)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to 45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.4)); /* Standard syntax (must be last) */
}

.mySpan {
	font-size: 18px;
	font-family: Courgette;
}

.myH3 {
	border-top: 3px double #e6e6e6;
	border-bottom: 3px double #e6e6e6;
	text-align: center;
	color: #0A7BC1;
	font-size:200%;
	font-family: Courgette;
}

.myImg {
	margin: 20px;
	margin-top: 20px;
	margin-right: 40px;
	width: 240px;
	height: auto;
	float: left;
	box-shadow: 10px 10px 8px -8px #999;
	border-radius: 15px;
}

.myDeck {
	margin:auto;
	margin-top:50px;
	padding: 20px;
	padding-bottom:50px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	border: 1px solid #F0F0F0;
	width: 550px;
	height: 480px;
	font-family: Courgette;
	background: -webkit-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.5)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.5)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.5)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to 45deg, rgba(255, 204, 204, 0),
		rgba(255, 204, 204, 0.5)); /* Standard syntax (must be last) */
}

.mySelect {
	margin-left: 300px;
	padding: 20px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	background: white;
	font-family: Courgette;
}

.myNew {
	margin:auto;
	margin-top:20px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 42px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	width: 550px;
	border-top: 3px double #006699;
	border-bottom: 3px double #006699;
	border-color: #006699;
	color: #006699;
	text-align: center;
	font-family: Courgette;
}

.myNew:hover {
	margin:auto;
	margin-top:20px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 42px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
	width: 550px;
	border-top: 3px double #006699;
	border-bottom: 3px double #006699;
	border-color: #006699;
	color: #006699;
	background: #FFCCCC;
	text-align: center;
	font-family: Courgette;
}

.myCard {
	width: 60px;
	height: auto;
	box-shadow: 10px 10px 8px -8px #999;
	border-radius: 8px;
	border: 1px ridge #3E7693;
}

.myCard:hover {
	width: 60px;
	height: auto;
	box-shadow: 10px 10px 8px -8px #999;
	border-radius: 8px;
	border: 1px ridge #3E7693;
	animation: rotateCard 500ms ease 0ms infinite alternate;
	-moz-animation: rotateCard 500ms ease 0ms infinite alternate;
	-webkit-animation: rotateCard 500ms ease 0ms infinite alternate;
}

#card00 {
	position: absolute;
	margin-top: 0px;
	z-index: 0;
}

#card01 {
	position: absolute;
	margin-top: 10px;
	margin-left: 20px;
	z-index: 1;
}

#card02 {
	position: absolute;
	margin-top: 20px;
	margin-left: 40px;
	z-index: 2;
}

#card03 {
	position: absolute;
	margin-top: 30px;
	margin-left: 60px;
	z-index: 3;
}

#card04 {
	position: absolute;
	margin-top: 40px;
	margin-left: 80px;
	z-index: 4;
}

#card05 {
	position: absolute;
	margin-top: 50px;
	margin-left: 100px;
	z-index: 5;
}

#card06 {
	position: absolute;
	margin-top: 60px;
	margin-left: 120px;
	z-index: 6;
}

#card07 {
	position: absolute;
	margin-top: 70px;
	margin-left: 140px;
	z-index: 7;
}

#card08 {
	position: absolute;
	margin-top: 80px;
	margin-left: 160px;
	z-index: 8;
}

#card09 {
	position: absolute;
	margin-top: 90px;
	margin-left: 180px;
	z-index: 9;
}

#card10 {
	position: absolute;
	margin-top: 100px;
	margin-left: 200px;
	z-index: 10;
}

#card11 {
	position: absolute;
	margin-top: 110px;
	margin-left: 220px;
	z-index: 11;
}

#card12 {
	position: absolute;
	margin-top: 120px;
	margin-left: 240px;
	z-index: 12;
}

#card13 {
	position: absolute;
	margin-top: 130px;
	margin-left: 260px;
	z-index: 13;
}

#card14 {
	position: absolute;
	margin-top: 140px;
	margin-left: 280px;
	z-index: 14;
}

#card15 {
	position: absolute;
	margin-top: 150px;
	margin-left: 300px;
	z-index: 15;
}

#card16 {
	position: absolute;
	margin-top: 160px;
	margin-left: 320px;
	z-index: 16;
}

#card17 {
	position: absolute;
	margin-top: 170px;
	margin-left: 340px;
	z-index: 17;
}

#card18 {
	position: absolute;
	margin-top: 180px;
	margin-left: 360px;
	z-index: 18;
}

#card19 {
	position: absolute;
	margin-top: 190px;
	margin-left: 380px;
	z-index: 19;
}

#card20 {
	position: absolute;
	margin-top: 200px;
	margin-left: 400px;
	z-index: 20;
}

#card21 {
	position: absolute;
	margin-top: 210px;
	margin-left: 420px;
	z-index: 21;
}

#card22 {
	position: absolute;
	margin-top: 220px;
	margin-left: 440px;
	z-index: 22;
}

#card23 {
	position: absolute;
	margin-top: 230px;
	margin-left: 460px;
	z-index: 23;
}

#card24 {
	position: absolute;
	margin-top: 240px;
	margin-left: 480px;
	z-index: 24;
}

@keyframes rotateCard /*W3C and Opera*/
{
		from {transform: none }
		to   {transform: rotate(-30deg) translateX(-10px) scale(1.2,1.2)}
}
@-moz-keyframes rotateCard /*Firefox*/
{
		from {-moz-transform: none }
		to   {-moz-transform: rotate(-30deg) translateX(-10px) scale(1.2,1.2)}
}
@-webkit-keyframes rotateCard /*Safari and Chrome*/
{
		from {-webkit-transform: none }
		to   {-webkit-transform: rotate(-30deg) translateX(-10px) scale(1.2,1.2)}
}