OLD | NEW |
| (Empty) |
1 /** | |
2 * Copyright 2013 Google Inc. All Rights Reserved. | |
3 * | |
4 * Licensed under the Apache License, Version 2.0 (the "License"); | |
5 * you may not use this file except in compliance with the License. | |
6 * You may obtain a copy of the License at | |
7 * | |
8 * http://www.apache.org/licenses/LICENSE-2.0 | |
9 * | |
10 * Unless required by applicable law or agreed to in writing, software | |
11 * distributed under the License is distributed on an "AS IS" BASIS, | |
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 * See the License for the specific language governing permissions and | |
14 * limitations under the License. | |
15 */ | |
16 /*TODO: | |
17 - incorperate object notation (JSON) varibles for the test so it is easier to c
all | |
18 */ | |
19 | |
20 #main { | |
21 margin: 100px auto; | |
22 width: 80%; | |
23 } | |
24 #tryIt { | |
25 width: 90%; | |
26 margin: 30px auto; | |
27 clear: both; | |
28 } | |
29 .heading { | |
30 background-color: #AFA; | |
31 border-radius: 10px; | |
32 padding: 20px; | |
33 margin: 5px; | |
34 font: bold 1.2em Arial; | |
35 height: 25px; | |
36 clear: both; | |
37 } | |
38 #update { | |
39 border-radius: 10px; | |
40 background-color: white; | |
41 float: right; | |
42 width: 10%; | |
43 font: 1em Arial; | |
44 padding: 3px; | |
45 } | |
46 .code { | |
47 margin: 0 auto; | |
48 border-radius: 2px; | |
49 border: 1px solid black; | |
50 height: 600px; | |
51 width: 55%; | |
52 float: left; | |
53 overflow: auto; | |
54 } | |
55 #htmlCode { | |
56 width: 99%; | |
57 height: 28%; | |
58 | |
59 } | |
60 #jsCode { | |
61 width: 99%; | |
62 height: 28%; | |
63 overflow-x: hidden; | |
64 } | |
65 #cssCode { | |
66 width: 99%; | |
67 height: 28%; | |
68 float: left; | |
69 overflow-x: hidden; | |
70 } | |
71 #display { | |
72 position: relative; | |
73 height: 100%; | |
74 width: 100%; | |
75 float: none; | |
76 } | |
77 .display { | |
78 border-radius: 2px; | |
79 width: 44%; | |
80 height: 600px; | |
81 clear: right; | |
82 float: right; | |
83 } | |
84 .label { | |
85 font: bold 1em Arial; | |
86 padding: 1%; | |
87 height: 2%; | |
88 float: left; | |
89 clear: both; | |
90 } | |
91 .description { | |
92 font: 1em sans-serif, "Comic Sans MS", cursive; | |
93 margin: 10px; | |
94 clear: both; | |
95 padding: 10px; | |
96 } | |
97 #title { | |
98 font: bold 2em Verdana; | |
99 color: #680; | |
100 text-align: center; | |
101 padding: 10px; | |
102 margin: 2px; | |
103 } | |
104 .content{ | |
105 padding: 3px; | |
106 width: 80%; | |
107 margin: 3px auto; | |
108 text-align: justify; | |
109 } | |
110 .subTitle { | |
111 background-color: #ABCDEF; | |
112 padding: 10px; | |
113 } | |
114 code { | |
115 color: #94704D; | |
116 font-size: 1.1em; | |
117 } | |
118 .exercises { | |
119 font: bold 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
120 background: #FFFF00; | |
121 width: 30%; | |
122 float: left; | |
123 padding: 10px; | |
124 margin: 30px 3px; | |
125 } | |
126 a { | |
127 text-decoration: none; | |
128 color: black; | |
129 } | |
130 a:visited { | |
131 color: black; | |
132 } | |
133 .separator { | |
134 height: 50px; | |
135 } | |
136 .sideMenu { | |
137 list-style-type: none; | |
138 position: absolute; | |
139 top: 18%; | |
140 z-index: 0; | |
141 } | |
142 .sideMenu li:hover { | |
143 background-color: #E6E6E6; | |
144 color: #222; | |
145 cursor: pointer | |
146 } | |
147 .sideMenu li { | |
148 display: block; | |
149 width: 81%; | |
150 background-color: #737373; | |
151 padding: 20px; | |
152 color: #CCC; | |
153 border: 1px solid black; | |
154 z-index: 0; | |
155 } | |
156 .sideMenu li, #alphabet-menu li { | |
157 font: 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
158 z-index: 0; | |
159 } | |
160 #menuLabel { | |
161 background-color: #222; | |
162 width: 81%; | |
163 padding: 20px; | |
164 color: #DDD; | |
165 } | |
166 #toggleText { | |
167 width: 60%; | |
168 display: none; | |
169 position: relative; | |
170 float: right; | |
171 clear: both; | |
172 font-size: 0.9em; | |
173 margin-bottom: 10px; | |
174 } | |
175 #toggleText:after { | |
176 content: '.'; | |
177 clear: both; | |
178 display: block; | |
179 height: 0px; | |
180 text-indent: -999999em; | |
181 } | |
182 .codeSamples { | |
183 padding: 10px; | |
184 border: 1px solid black; | |
185 background-color: #EEE; | |
186 width: 80%; | |
187 clear: both; | |
188 margin-left: 10%; | |
189 display: block; | |
190 } | |
191 #hideLabel { | |
192 width: 10%; | |
193 height: 20px; | |
194 float: right; | |
195 background-color: #999999; | |
196 padding: 5px; | |
197 margin: 10px; | |
198 font: 0.8em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
199 color: black; | |
200 text-align: center; | |
201 border-radius: 10px; | |
202 cursor: pointer; | |
203 } | |
204 .topMenu { | |
205 list-style-type: none; | |
206 float: left; | |
207 position: absolute; | |
208 z-index: 5; | |
209 top: 0; | |
210 left: 0; | |
211 margin: 0; | |
212 } | |
213 .topMenu li { | |
214 float: left; | |
215 margin-right: 5px; | |
216 position: relative; | |
217 } | |
218 .topMenu a { | |
219 padding: 10px; | |
220 top: 0px; | |
221 display: block; | |
222 background-color: #222; | |
223 width: 150px; | |
224 color: #DDD; | |
225 text-align: center; | |
226 border: 1px solid black; | |
227 text-decoration: none; | |
228 font: 1.1em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
229 } | |
230 .topMenu a:hover { | |
231 background-color: #EEE; | |
232 color: black; | |
233 } | |
234 .topMenu .subMenu { | |
235 list-style-type: none; | |
236 position: absolute; | |
237 left: -9999px; | |
238 font-size: 0.8em; | |
239 z-index: 990; | |
240 } | |
241 .topMenu .subMenu li { | |
242 padding-top: 1px; | |
243 float: none; | |
244 z-index: 1; | |
245 } | |
246 .topMenu .subMenu a { | |
247 white-space: nowrap; | |
248 background-color: rgba(34,34,34, 0.1); | |
249 color: #222; | |
250 z-index: 1; | |
251 } | |
252 .topMenu li:hover .subMenu { | |
253 left: -40px; | |
254 z-index: 1; | |
255 } | |
256 .topMenu .subMenu li:hover a { | |
257 background-color: rgba(34,34,34,0.9); | |
258 color: #EEE; | |
259 } | |
260 .line-separator { | |
261 height: 2px; | |
262 background: #717171; | |
263 border-bottom: 1px solid #313030; | |
264 clear: both; | |
265 } | |
266 .demos { | |
267 height: 800px; | |
268 width: 110%; | |
269 border: 0px; | |
270 } | |
271 #alphabet-menu { | |
272 list-style-type: none; | |
273 } | |
274 #alphabet-menu a { | |
275 float: left; | |
276 padding: 15px; | |
277 margin-bottom: 10px; | |
278 display: inline; | |
279 border: 1px solid white; | |
280 background-color: #FF3333; | |
281 color: black; | |
282 font-weight: bold; | |
283 } | |
284 #alphabet-menu a:hover { | |
285 background-color: #FFE6E6; | |
286 color: black; | |
287 } | |
288 .note { | |
289 color: red; | |
290 font-size: 0.9em; | |
291 } | |
292 .alphabet-title { | |
293 float: left; | |
294 clear: left; | |
295 width: 100%; | |
296 font: bold 1.5em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
297 color: #6699FF; | |
298 margin-top: 10px; | |
299 border-bottom: 3px dotted #334C80; | |
300 } | |
301 .keywords { | |
302 color: red; | |
303 } | |
304 .datatype { | |
305 color: #009933; | |
306 } | |
307 .animViewerText { | |
308 top: 500px; | |
309 } | |
310 .backToTop { | |
311 float: right; | |
312 clear: both; | |
313 font: 0.6em "Lucida Sans Unicode", "Lucida Grande", sans-serif; | |
314 color: #6699FF; | |
315 margin-bottom: 0; | |
316 } | |
317 .content li { | |
318 line-height: 170%; | |
319 } | |
320 .properties-table { | |
321 margin: 3% auto; | |
322 border: 2px solid #EBEBEB; | |
323 font: 0.9em Georgia, serif; | |
324 } | |
325 .properties-table td { | |
326 padding: 8px; | |
327 border-bottom: 2px double #CFCFCF; | |
328 } | |
329 .properties-table-title td { | |
330 font-weight: bold; | |
331 } | |
332 .pass { | |
333 background-color: #AFA; | |
334 border-radius: 10px; | |
335 padding: 20px; | |
336 margin: 5px; | |
337 font: bold 50pt Arial; | |
338 height: 1em; | |
339 clear: both; | |
340 text-align: center; | |
341 } | |
342 .fail { | |
343 visibility: hidden; | |
344 } | |
OLD | NEW |