/*
	Snow Stack 3D CSS Photo Viewer

    Copyright (C) 2009 Charles Ying. All Rights Reserved.
    This source code is available under Apache License 2.0.
*/

.view
{
	position: absolute;
	display: block;
    -webkit-transform-style: preserve-3d;
}

div.page
{
    -webkit-perspective: 600;
	width: 100%;
    height: 100%;
	margin: 0 auto;
	text-align: center;
}

div.origin
{
	left: 50%;
	top: 50%;
}

div.camera
{
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 5s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 0.6, 0.6, 0.9);
	-webkit-transform: translate3d(0, 0, 0);
}

div.dolly
{
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 550ms;
	-webkit-transition-timing-function: ease-out;
	-webkit-transform: translate3d(0, 0, 0);
}

img.reflection
{
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.25, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));
}

div.cell
{
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform,opacity;
	-webkit-transition-duration: 550ms;
	-webkit-transform: translate3d(0, 0, 0);
}

div.cell .media
{
	display: block;
	position: absolute;

	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 550ms;
	-webkit-transform: translate3d(0, 0, 0);

/*
	TODO: This box shadow locks the resolution of the image in (at the low resolution)	
	-webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 0 4px;
*/
}

/* PERF
div.cell .media
{
	-webkit-transition-property: opacity -webkit-transform -webkit-box-shadow border-color;
	border: 1px solid transparent;
}

div.selected img, div.magnify img, div.selected video, div.magnify video
{
	-webkit-box-shadow: 0px 0px 35px #000;
	border-color: black;
}
*/

.mover
{
	-webkit-transition-property: -webkit-transform;
	-webkit-transition-duration: 550ms;
	-webkit-transform: translate3d(0, 0, 0px);
}

div.selected .mover
{
	-webkit-transform: translate3d(0, 0, 40px);
}

div.magnify .mover
{
	-webkit-transform: translate3d(0, 0, 140px);
}

div.magnify img.media, 
div.magnify video.media
{
	-webkit-transform: translate3d(0, 0, 0) scale(2.0);
}