| 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 |