1/*
2 * Copyright (C) 2013 Google Inc. All rights reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are
6 * met:
7 *
8 *     * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 *     * Redistributions in binary form must reproduce the above
11 * copyright notice, this list of conditions and the following disclaimer
12 * in the documentation and/or other materials provided with the
13 * distribution.
14 *     * Neither the name of Google Inc. nor the names of its
15 * contributors may be used to endorse or promote products derived from
16 * this software without specific prior written permission.
17 *
18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 */
30
31.accelerometer-stage {
32    -webkit-perspective: 700px;
33    -webkit-perspective-origin: 50% 50%;
34    width: 200px;
35    height: 130px;
36}
37
38.accelerometer-box {
39    pointer-events:none;
40    margin-top: -54px;
41    margin-left: -40px;
42    position: absolute;
43    top: 50%;
44    left: 50%;
45    width: 80px;
46    height: 108px;
47    -webkit-transform-style: preserve-3d;
48}
49
50.accelerometer-box section {
51    margin-top: -54px;
52    margin-left: -40px;
53    position: absolute;
54    display: block;
55    overflow: hidden;
56    top: 50%;
57    left: 50%;
58    -webkit-transform-style: flat;
59    -webkit-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.7);
60}
61
62.accelerometer-box .front {
63    border:15px solid black;
64    width: 80px;
65    height: 107px;
66    background-color: gray;
67    -webkit-transform: translate3d(0px, 0px, 10px);
68}
69
70.accelerometer-box .back {
71    width: 80px;
72    height: 107px;
73    background-color: black;
74    -webkit-transform: rotateY(-180deg) translate3d(0px, 0px, 10px);
75}
76
77.accelerometer-box .top {
78    overflow: hidden;
79    width: 80px;
80    height: 20px;
81    background-color: #75CE89;
82    -webkit-transform: rotateX(-90deg) translate3d(0px, 0px, -10px);
83}
84
85.accelerometer-box .bottom {
86    overflow: hidden;
87    width: 80px;
88    height: 20px;
89    background-color: #865C6C;
90    -webkit-transform: rotateX(90deg) translate3d(0px, 0px, -97px);
91}
92
93.accelerometer-box .left {
94    width: 20px;
95    height: 107px;
96    background-color: #7992CB;
97    -webkit-transform: rotateY(90deg) translate3d(0px, 0px, 70px);
98}
99
100.accelerometer-box .right {
101    width: 20px;
102    height: 107px;
103    background-color: #7992CB;
104    -webkit-transform: rotateY(-90deg) translate3d(0px, 0px, 10px);
105}
106
107.accelerometer-axis-input-container {
108    margin-bottom: 10px;
109}
110
111.accelerometer-inputs-cell {
112    vertical-align: top;
113}
114
115.accelerometer-reset-button {
116    width: 100%;
117}