body {background:#FFF; color:#000; padding:0 2em; font-family:helvetica, sans-serif; }

		.panel {
			float: left;
			width: 200px;
			height: 200px;
			margin: 20px;
			position: relative;
			font-size: .8em;
			
			-webkit-perspective: 600;
		}
		/* -- make sure to declare a default for every property that you want animated -- */
		/* -- general styles, including Y axis rotation -- */
		.panel .front {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 900;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #3a3;
			text-align: center;

			box-shadow: 0 1px 1px rgba(0,0,0,0.9);
			-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.9);
			-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.9);
			
			-webkit-transform: rotateY(0deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
		}

		
		.panel .back {
			float: none;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 800;
			width: inherit;
			height: inherit;
			border: 1px solid #ccc;
			background: #888;
			text-shadow: 1px  1px 1px rgba(0,0,0,0.6); 
			
			-webkit-transform: rotateY(-180deg);
			-webkit-transform-style: preserve-3d;
			-webkit-backface-visibility: hidden;

			/* -- transition is the magic sauce for animation -- */
			transition: all .4s ease-in-out;
			-moz-transition: all .4s ease-in-out;
			-webkit-transition: all .4s ease-in-out;
		}
		
		.open  .back {
			z-index: 1000;
			
			-webkit-transform: rotateY(0deg);
			box-shadow: 0 15px 50px rgba(0,0,0,0.7);
			-moz-box-shadow: 0 20px 50px rgba(0,0,0,0.7);
			-webkit-box-shadow: 0 20px 50px rgba(0,0,0,0.7);
		}
		.found .back {
			z-index: 1000;
		
			-webkit-transform: rotateY(0deg);
			
		}
		/* -- X axis rotation for click panel -- */
		.click .front {
			cursor: pointer;
			-webkit-transform: rotateY(0deg);
		}
		.click.open  .front {
			-webkit-transform: rotateY(180deg);
		}
		
		.click.found  .front {
			-webkit-transform: rotateY(180deg);
		}
		
		.click .back {
			cursor: pointer;
			-webkit-transform: rotateY(-180deg);
		}
		.click.open .back {
			-webkit-transform: rotateY(0deg);
		}
		.click.found .back {
			-webkit-transform: rotateY(0deg);
		}
		

		
		/* -- cosmetics -- */
		.panel .pad {padding: 10px; }
		.panel.open .action {display: none; }
		.panel.found .action {display: none; }
		.block ol li {text-align: left; margin: 0 0 0 28px; }
		.block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
		.block:hover .action {opacity: .7; }
		
		
		img.memoryimage {
			max-width: 100%;
			max-height: 100%;
		}