/*
 * Copyright 2013 Google Inc.
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 *   Author: Martin Gorner (mgorner@google.com)
 */
.stage
{
	perspective: 1000px;
	/* perspective-origin: 50% 50%;*/ /* this is the default*/
    transform-style: preserve-3d;
}

.stage2
{
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    transform:  translateZ(100px);
}
.cube
{
	/*background-color: blue;*/
	position: relative;
	left: 0px;
	top: 0px;
	width: 300px;
	height: 300px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -150px;
	transform-style: preserve-3d;
	animation: rotate-cube 15s linear infinite;
}

.cubeface
{
	position: absolute;
	transition: all 600ms;
	top: 15px;
	left: 15px;
}

@keyframes rotate-cube
{
	from
	{
        transform: rotateZ(0Deg) rotateY(0Deg);
	}
	to
	{
		transform: rotateZ(1080Deg) rotateY(360Deg);
	}
}

#tile_bberry   { transform: translateZ(150px); }
#tile_world    { transform: translateX(150px) rotateY(90Deg); }
#tile_user     { transform: translateX(-150px) rotateY(-90Deg); }
#tile_usb      { transform: translateZ(-150px); }
#tile_computer { transform: translateY(150px) rotateX(90Deg); }
#tile_game     { transform: translateY(-150px) rotateX(-90Deg); }

:hover > #tile_bberry   { transform: translateZ(250px); }
:hover > #tile_world    { transform: translateX(250px) rotateY(90Deg); }
:hover > #tile_user     { transform: translateX(-250px) rotateY(-90Deg); }
:hover > #tile_usb      { transform: translateZ(-250px); }
:hover > #tile_computer { transform: translateY(250px) rotateX(90Deg); }
:hover > #tile_game     { transform: translateY(-250px) rotateX(-90Deg); }