← Back to branch summary

~chromium-team/chromium-browser/trusty-beta

« back to all changes in this revision

Viewing changes to debian/tests/data/HTML5test/css/main.css

  • Committer: Olivier Tilloy
  • Date: 2017-10-23 16:46:53 UTC
  • mfrom: (1172.1.38 trusty-stable)
  • Revision ID: olivier.tilloy@canonical.com-20171023164653-zmpfzblxxnkj0jhj
Merge back changes from stable branch:
  * debian/control: bump Standards-Version to 4.1.1
  * debian/patches/set-rpath-on-chromium-executables.patch: updated
  * debian/tests/*:
    - removed stale autopkgtests
    - added new autopkgtests based on chromium's new headless mode
  * debian/source/include-binaries: updated to reflect new binary data in tests

Show diffs side-by-side

added added

removed removed

Lines of Context:
debian/tests/data/HTML5test/css/main.css
 
1
 
 
2
/********************************************
 
3
 *
 
4
 *   Import fonts
 
5
 */
 
6
 
 
7
@font-face {
 
8
        font-family: 'html5test';
 
9
        src:url('/fonts/html5test.eot');
 
10
        src:url('/fonts/html5test.eot?#iefix') format('embedded-opentype'),
 
11
                url('/fonts/html5test.woff') format('woff'),
 
12
                url('/fonts/html5test.ttf') format('truetype'),
 
13
                url('/fonts/html5test.svg#html5test') format('svg');
 
14
        font-weight: normal;
 
15
        font-style: normal;
 
16
}
 
17
 
 
18
@font-face {
 
19
    font-family: 'League Gothic';
 
20
    src: url('/fonts/leaguegothic-regular-webfont.eot');
 
21
    src: url('/fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
 
22
         url('/fonts/leaguegothic-regular-webfont.woff') format('woff'),
 
23
         url('/fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
 
24
         url('/fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
 
25
    font-weight: normal;
 
26
    font-style: normal;
 
27
 
 
28
}
 
29
 
 
30
 
 
31
 
 
32
 
 
33
 
 
34
 
 
35
/********************************************
 
36
 *
 
37
 *   Basic styles
 
38
 *
 
39
 *   Background:        #d9d9d9
 
40
 *       Blue:                  #0092bf
 
41
 *   Orange:            #ec6534
 
42
 */
 
43
 
 
44
* {
 
45
        padding: 0;
 
46
        margin: 0;
 
47
 
 
48
        -webkit-text-size-adjust: none;
 
49
        -webkit-tap-highlight-color: rgba(0,0,0,0);
 
50
}
 
51
 
 
52
html {
 
53
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
54
        font-weight: 200;
 
55
        font-size: 1.1em;
 
56
        overflow-x: hidden;
 
57
}
 
58
 
 
59
body {
 
60
        background: #d9d9d9;
 
61
}
 
62
 
 
63
h2 {
 
64
    font-family: 'League Gothic', Impact;
 
65
    font-weight: normal;
 
66
        font-size: 3.8em;
 
67
        line-height: 100%;
 
68
        text-transform: uppercase;
 
69
 
 
70
        color: #0092bf;
 
71
}
 
72
h3 {
 
73
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
74
        font-size: 1.05em;
 
75
}
 
76
th, h4, strong, b {
 
77
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
78
}
 
79
button {
 
80
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
81
        font-size: 0.75em;
 
82
}
 
83
 
 
84
input, textarea {
 
85
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
86
}
 
87
 
 
88
button, input, textarea {
 
89
        -webkit-appearance: none;
 
90
        border-radius: 0;
 
91
        box-sizing: border-box;
 
92
}
 
93
 
 
94
img {
 
95
        border: none;
 
96
}
 
97
 
 
98
table {
 
99
        border-collapse: collapse;
 
100
        width: 100%;
 
101
}
 
102
tbody tr:hover > td, tbody tr:hover > th {
 
103
        background-color: #f6f6f6;
 
104
}
 
105
tbody tr:hover th.details {
 
106
        /* background-color: inherit; */
 
107
}
 
108
 
 
109
 
 
110
/********************************************
 
111
 *
 
112
 *   Content wrapper
 
113
 */
 
114
 
 
115
body > div#contentwrapper {
 
116
        -webkit-transition: -webkit-transform .4s, -webkit-filter 1.2s, opacity 1.2s;
 
117
        transition: transform .4s, filter 1.2s, opacity 1.2s;
 
118
        background: #d9d9d9;
 
119
}
 
120
body.indexVisible > div#contentwrapper {
 
121
        opacity: 0.7;
 
122
        -webkit-transform: translateX(240px);
 
123
        transform: translateX(240px);
 
124
        -webkit-filter: brightness(75%) saturate(0%);
 
125
        filter: brightness(65%) saturate(15%);
 
126
}
 
127
 
 
128
@media (max-width: 680px) {
 
129
    body > div#contentwrapper {
 
130
        margin: auto;
 
131
    }
 
132
}
 
133
 
 
134
/********************************************
 
135
 *
 
136
 *   Header and navigation
 
137
 */
 
138
 
 
139
.header {
 
140
        background: #eee;
 
141
}
 
142
.header h1 {
 
143
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
144
        font-weight: bold;
 
145
        font-size: 0.9em;
 
146
        text-align: left;
 
147
        text-transform: uppercase;
 
148
        color: #666;
 
149
        padding: 8px 40px;
 
150
        margin: 0 auto;
 
151
        max-width: 900px;
 
152
}
 
153
.header h1 span {
 
154
        margin-right: 10px;
 
155
}
 
156
.header h1 span,
 
157
.header h1 em {
 
158
        zoom: 1;
 
159
        display: inline-block;
 
160
        *display: inline;
 
161
}
 
162
 
 
163
.header h1 strong {
 
164
        font-family: html5test;
 
165
        font-weight: normal;
 
166
        font-size: 1.8em;
 
167
        color: #ec6534;
 
168
        -webkit-font-smoothing: antialiased;
 
169
 
 
170
        position: relative;
 
171
        top: 7px;
 
172
}
 
173
 
 
174
.header h1 em {
 
175
        font-style: normal;
 
176
        text-transform: lowercase;
 
177
        font-size: 1.15em;
 
178
        color: #bbb;
 
179
}
 
180
.header div {
 
181
        margin: 10px auto 0;
 
182
        overflow: hidden;
 
183
        max-width: 900px;
 
184
        padding: 0 40px;
 
185
}
 
186
.header ul {
 
187
        list-style-type: none;
 
188
        margin-bottom: 8px;
 
189
}
 
190
.header ul.left {
 
191
        float: left;
 
192
}
 
193
.header ul.right {
 
194
        float: right;
 
195
}
 
196
 
 
197
.header ul li {
 
198
        display: block;
 
199
        float: left;
 
200
        margin: 0 3px 0 0;
 
201
        padding: 0 10px;
 
202
        line-height: 32px;
 
203
        color: #fff;
 
204
        font-size: 0.9em;
 
205
        text-transform: lowercase;
 
206
        background: #aaa;
 
207
}
 
208
.header ul li.selected {
 
209
        background: #0092bf;
 
210
}
 
211
.header ul li:hover {
 
212
        box-shadow: inset 0 32px 0px rgba(0,0,0,0.05);
 
213
}
 
214
.header ul li a {
 
215
        color: #fff;
 
216
        text-decoration: none;
 
217
}
 
218
 
 
219
@media (max-width: 680px) {
 
220
        .header h1 {
 
221
                width: 400px;
 
222
                padding-left: 0;
 
223
                padding-right: 0;
 
224
                text-align: center;
 
225
        }
 
226
        .header h1 em {
 
227
                font-size: 1em;
 
228
        }
 
229
 
 
230
        .header div {
 
231
                width: auto;
 
232
        }
 
233
        .header ul {
 
234
                padding: 0 !important;
 
235
                margin: 0 0 12px 0 !important;
 
236
                width: 50%;
 
237
        }
 
238
        .header ul li {
 
239
                line-height: 30px;
 
240
                margin-bottom: 3px;
 
241
                clear: left;
 
242
        }
 
243
        .header ul.right {
 
244
                padding-left: 10px;
 
245
        }
 
246
        .header ul.left li {
 
247
                float: right;
 
248
                clear: right;
 
249
                margin-right: 6px;
 
250
        }
 
251
        .header ul.right li {
 
252
                margin-left: 6px;
 
253
        }
 
254
}
 
255
 
 
256
@media (max-width: 432px) {
 
257
        .header h1 {
 
258
                width: auto;
 
259
                padding-left: 16px;
 
260
                padding-right: 16px;
 
261
        }
 
262
        .header h1 em {
 
263
                font-size: 0.9em;
 
264
        }
 
265
        .header ul {
 
266
                font-size: 0.85em;
 
267
        }
 
268
        .header ul.left {
 
269
                padding-left: 16px;
 
270
        }
 
271
        .header ul li {
 
272
                padding: 0 8px;
 
273
                line-height: 28px;
 
274
        }
 
275
}
 
276
 
 
277
 
 
278
 
 
279
/********************************************
 
280
 *
 
281
 *   Index
 
282
 */
 
283
 
 
284
body > div#index {
 
285
        display: block;
 
286
        position: fixed;
 
287
        top: 0px;
 
288
        left: 0px;
 
289
}
 
290
body > div#index div#indexmenu {
 
291
        display: block;
 
292
        position: fixed;
 
293
        top: 0px;
 
294
        left: -240px;
 
295
        width: 220px;
 
296
        height: 100%;
 
297
    margin: -10px 0px 0px 0px;
 
298
        padding: 20px 10px 10px;
 
299
        background-color: rgb(0, 146, 191);
 
300
        color: #FFFFFF;
 
301
        z-index: 1;
 
302
 
 
303
        -webkit-overflow-scrolling: touch;
 
304
        overflow-y: auto;
 
305
 
 
306
        -webkit-transition: -webkit-transform .4s;
 
307
        transition: transform .4s;
 
308
}
 
309
body.indexVisible > div#index div#indexmenu {
 
310
        -webkit-transform: translateX(240px);
 
311
        transform: translateX(240px);
 
312
}
 
313
body > div#index div#indexmenu li {
 
314
        display: block;
 
315
        float: none;
 
316
        background-color: rgb(0, 146, 191);
 
317
        font-size: 14px;
 
318
        font-weight: bold;
 
319
    margin-left: 10px;
 
320
    line-height: 150%;
 
321
    text-transform: lowercase;
 
322
}
 
323
body > div#index div#indexmenu li a {
 
324
    text-decoration: none;
 
325
}
 
326
body > div#index div#indexmenu li a::before {
 
327
        font-family: html5test;
 
328
        font-weight: normal;
 
329
        font-size: 1.2em;
 
330
        padding-right: 4px;
 
331
        vertical-align: middle;
 
332
 
 
333
        -webkit-font-smoothing: antialiased;
 
334
}
 
335
body > div#index div#indexmenu li.category {
 
336
    margin-top: 10px;
 
337
}
 
338
body > div#index div#indexmenu li.category.semantics a:before { content: ''; }
 
339
body > div#index div#indexmenu li.category.offlinestorage a:before { content: ''; }
 
340
body > div#index div#indexmenu li.category.deviceaccess a:before { content: ''; }
 
341
body > div#index div#indexmenu li.category.connectivity a:before { content: ''; }
 
342
body > div#index div#indexmenu li.category.multimedia a:before { content: ''; }
 
343
body > div#index div#indexmenu li.category.graphicseffects a:before { content: ''; }
 
344
body > div#index div#indexmenu li.category.performanceintegration a:before { content: ''; }
 
345
 
 
346
body > div#index div#indexmenu li a {
 
347
        display: block;
 
348
        color: #FFFFFF;
 
349
}
 
350
body > div#index div#indexmenu li ul li {
 
351
        line-height: 25px;
 
352
        background-color: rgb(0, 146, 191);
 
353
    line-height: 160%;
 
354
        font-size: 12px;
 
355
        font-weight: normal;
 
356
    margin-left: 20px;
 
357
    text-transform: none;
 
358
}
 
359
body > div#index div#indexmenu li ul li:first-child {
 
360
        margin-top: 5px;
 
361
}
 
362
body > div#index div#indexmenu li ul li a {
 
363
        display: block;
 
364
        color: #FFFFFF;
 
365
}
 
366
body > div#index div#indexmenu li ul li a::before {
 
367
    content: '' !important;
 
368
}
 
369
body > div#index button#indexbutton {
 
370
        position: fixed;
 
371
        top: 10px;
 
372
        left: 0px;
 
373
        width: 36px;
 
374
        height: 40px;
 
375
 
 
376
        font-family: html5test;
 
377
        font-size: 1.4em;
 
378
        color: #999;
 
379
 
 
380
        background-color: transparent;
 
381
        border: none;
 
382
        outline: none;
 
383
        z-index: 100000;
 
384
        cursor: pointer;
 
385
 
 
386
        -webkit-transition: -webkit-transform .4s, color .5s, text-indent .5s;
 
387
        transition: transform .4s, color .5s, text-indent .5s;
 
388
}
 
389
body.indexVisible > div#index button#indexbutton {
 
390
        -webkit-transform: translateX(240px);
 
391
        transform: translateX(240px);
 
392
        color: #eee;
 
393
}
 
394
 
 
395
@media (max-width: 1010px) {
 
396
        body > div#index button#indexbutton {
 
397
                text-indent: -28px;
 
398
        }
 
399
}
 
400
 
 
401
@media (max-width: 680px) {
 
402
        body > div#index button#indexbutton {
 
403
                text-indent: 0;
 
404
        }
 
405
}
 
406
 
 
407
@media (max-width: 488px) {
 
408
        body > div#index button#indexbutton {
 
409
                text-indent: -28px;
 
410
        }
 
411
}
 
412
 
 
413
/********************************************
 
414
 *
 
415
 *   Footer
 
416
 */
 
417
 
 
418
.footer {
 
419
        background: #eee;
 
420
        margin-top: 30px;
 
421
        padding: 20px;
 
422
        overflow: hidden;
 
423
        min-height: 43px;
 
424
}
 
425
.footer > div {
 
426
        position: relative;
 
427
        padding-right: 300px;
 
428
}
 
429
.footer > div .copyright {
 
430
        font-size: 0.75em;
 
431
        color: #777;
 
432
}
 
433
.footer > div .copyright a {
 
434
        color: #888;
 
435
}
 
436
.footer > div .copyright p {
 
437
        margin-bottom: 0.8em;
 
438
}
 
439
 
 
440
#cloudvps a {
 
441
        position: absolute;
 
442
        top: 0;
 
443
        right: 0;
 
444
        border-left: 1px solid #ccc;
 
445
 
 
446
        display: block;
 
447
        background: url(/images/sponsors/cloudvps.png) no-repeat 10px top;
 
448
        background-size: 59px 43px;
 
449
        padding-top: 0px;
 
450
        padding-left: 80px;
 
451
 
 
452
        text-decoration: none;
 
453
        color: #04446d;
 
454
        font-size: 90%;
 
455
        min-height: 43px;
 
456
}
 
457
#cloudvps a b {
 
458
        font-size: 110%;
 
459
}
 
460
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 
461
        #cloudvps a {
 
462
                background-image: url(/images/sponsors/cloudvps@2x.png);
 
463
                background-size: 59px 43px;
 
464
        }
 
465
}
 
466
 
 
467
@media (max-width: 680px) {
 
468
        .footer > div {
 
469
                padding-right: 0;
 
470
                padding-bottom: 60px;
 
471
        }
 
472
 
 
473
        #cloudvps a {
 
474
                top: auto;
 
475
                left: 0;
 
476
 
 
477
                border-left: none;
 
478
                border-top: 1px solid #ccc;
 
479
                padding-top: 12px;
 
480
                padding-left: 70px;
 
481
                background-position: left 12px;
 
482
        }
 
483
}
 
484
 
 
485
 
 
486
 
 
487
/*******************************************************************************
 
488
 *
 
489
 *   Global: Page grid
 
490
 */
 
491
 
 
492
.page {
 
493
        margin: 2.5em auto 0;
 
494
        max-width: 900px;
 
495
        padding: 0 40px;
 
496
}
 
497
.page > .column {
 
498
        position: relative;
 
499
 
 
500
        zoom: 1;
 
501
        display: inline-block;
 
502
        *display: inline;
 
503
        vertical-align: top;
 
504
}
 
505
.page > .column .left,
 
506
.page > .column .right {
 
507
        width: 50%;
 
508
 
 
509
        zoom: 1;
 
510
        display: inline-block;
 
511
        *display: inline;
 
512
 
 
513
        vertical-align: top;
 
514
        box-sizing: border-box;
 
515
        -moz-box-sizing: border-box;
 
516
}
 
517
.page > .column .left > div {
 
518
        padding-right: 10px;
 
519
}
 
520
.page > .column .right > div {
 
521
        padding-left: 10px;
 
522
}
 
523
 
 
524
@media (max-width: 680px) {
 
525
        .page {
 
526
                width: 100%;
 
527
                text-align: center;
 
528
                padding: 0;
 
529
        }
 
530
        .page > .column {
 
531
                width: auto;
 
532
                max-width: 400px;
 
533
                overflow: hidden;
 
534
                text-align: left;
 
535
        }
 
536
        .page > .column .left,
 
537
        .page > .column .right {
 
538
                width: 100%;
 
539
        }
 
540
        .page > .column .left > div,
 
541
        .page > .column .right > div {
 
542
                padding: 0;
 
543
        }
 
544
}
 
545
 
 
546
@media (max-width: 432px) {
 
547
        .page > .column {
 
548
                width: 90% !important;
 
549
        }
 
550
}
 
551
 
 
552
 
 
553
/********************************************
 
554
 *
 
555
 *   Global: Text styles
 
556
 */
 
557
 
 
558
.message {
 
559
        background: #f6f6f6;
 
560
        color: #000;
 
561
 
 
562
        font-size: 0.75em;
 
563
        line-height: 165%;
 
564
        margin: 0;
 
565
        padding: 10px;
 
566
}
 
567
 
 
568
.paper {
 
569
        position:relative;
 
570
        background: #fff;
 
571
        color: #000;
 
572
 
 
573
        font-size: 0.75em;
 
574
        line-height: 165%;
 
575
 
 
576
        margin-bottom: 60px;
 
577
}
 
578
.paper.hasNavigation {
 
579
        top: 32px;
 
580
        margin-bottom: 52px;
 
581
}
 
582
.paper > ul.navigation {
 
583
        position:absolute;
 
584
        top: -32px;
 
585
 
 
586
        margin: 0;
 
587
        overflow:hidden;
 
588
        list-style-type: none;
 
589
        width: 100%;
 
590
}
 
591
.paper > ul.navigation li {
 
592
        display: block;
 
593
        float: left;
 
594
 
 
595
        margin: 0 3px 0 0;
 
596
        padding: 0 10px;
 
597
        line-height: 32px;
 
598
        color: #fff;
 
599
        font-size: 1.1em;
 
600
        text-transform: lowercase;
 
601
 
 
602
        background: #aaa;
 
603
}
 
604
.paper > ul.navigation li.more {
 
605
        float: right;
 
606
        margin: 0 0 0 3px;
 
607
}
 
608
.paper > ul.navigation li.selected {
 
609
        background: #fff;
 
610
}
 
611
.paper > ul.navigation li a {
 
612
        color: #fff;
 
613
        text-decoration: none;
 
614
}
 
615
.paper > ul.navigation li.selected a {
 
616
        color: #000;
 
617
}
 
618
.paper > div {
 
619
        padding: 20px;
 
620
}
 
621
.paper > div h2 {
 
622
        clear: both;
 
623
        margin-bottom: 10px;
 
624
}
 
625
.paper > div h3 {
 
626
        margin: 1em 0 0.5em;
 
627
}
 
628
.paper > div p {
 
629
        margin: 0 0 0.5em;
 
630
}
 
631
.paper > div p + h3 {
 
632
        margin-top: 1.5em;
 
633
}
 
634
.paper > div hr {
 
635
        clear: both;
 
636
        margin: 20px -20px;
 
637
        border: none;
 
638
        border-top: 8px solid #d9d9d9;
 
639
}
 
640
.paper > div .text {
 
641
        -moz-column-count: 3;
 
642
        -moz-column-gap: 16px;
 
643
        -webkit-column-count: 3;
 
644
        -webkit-column-gap: 16px;
 
645
        column-count: 3;
 
646
        column-gap: 16px;
 
647
}
 
648
 
 
649
.paper > div .text.no-columns {
 
650
        -webkit-column-count: 1 !important;
 
651
        -moz-column-count: 1 !important;
 
652
        column-count: 1 !important;
 
653
}
 
654
 
 
655
.break-2 {
 
656
        -webkit-column-break-before: always;
 
657
        break-before: always;
 
658
}
 
659
 
 
660
.break-3 {
 
661
        -webkit-column-break-before: always;
 
662
        break-before: always;
 
663
}
 
664
 
 
665
@media (max-width: 767px) {
 
666
        .paper > div .text {
 
667
                -webkit-column-count: 2;
 
668
                -moz-column-count: 2;
 
669
                column-count: 2;
 
670
        }
 
671
 
 
672
        .break-3 {
 
673
                margin-top: 1.5em !important;
 
674
                -webkit-column-break-before: auto;
 
675
                break-before: auto;
 
676
        }
 
677
}
 
678
 
 
679
@media (max-width: 680px) {
 
680
        .paper > div .text {
 
681
                -webkit-column-count: 1;
 
682
                -moz-column-count: 1;
 
683
                column-count: 1;
 
684
        }
 
685
 
 
686
        .break-2 {
 
687
                margin-top: 1.5em !important;
 
688
                -webkit-column-break-before: auto;
 
689
                break-before: auto;
 
690
        }
 
691
 
 
692
        .paper ul.navigation li span {
 
693
                display: none;
 
694
        }
 
695
}
 
696
 
 
697
.paper > div .text a {
 
698
        color: #0092bf;
 
699
        text-decoration: none;
 
700
}
 
701
.paper > div .text a:hover {
 
702
        color: #0092bf;
 
703
        text-decoration: underline;
 
704
}
 
705
.paper > div .text a.button {
 
706
        color: inherit;
 
707
}
 
708
.paper > div .text a.button:hover {
 
709
        text-decoration: inherit;
 
710
}
 
711
.intro {
 
712
        font-size: 1.05em;
 
713
        line-height: 150%;
 
714
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
715
        font-weight: bold;
 
716
        color: #555;
 
717
}
 
718
 
 
719
 
 
720
.paper > div .text dl {
 
721
}
 
722
.paper > div .text dl dt {
 
723
        margin: 1em 0 0;
 
724
 
 
725
}
 
726
.paper > div .text dl dd {
 
727
        font-size: 0.9em;
 
728
}
 
729
 
 
730
.break {
 
731
        -webkit-column-break-before: always;
 
732
        break-before: always;
 
733
}
 
734
 
 
735
 
 
736
 
 
737
 
 
738
.text table {
 
739
        margin: 1em 0;
 
740
}
 
741
.text table th,
 
742
.text table td {
 
743
        font-weight: 200;
 
744
        text-align: left;
 
745
 
 
746
        border-top: 1px solid #ddd;
 
747
        padding: 4px 0;
 
748
        vertical-align: top;
 
749
        font-size: 1em;
 
750
        padding-left: 10px;
 
751
        padding-right: 10px;
 
752
}
 
753
.text table thead th {
 
754
        text-align: left;
 
755
        padding-left: 10px;
 
756
        padding-bottom: 10px;
 
757
        border-top: none;
 
758
        font-weight: bold;
 
759
        position: relative;
 
760
}
 
761
.text table thead th::after {
 
762
        display: block;
 
763
        position: absolute;
 
764
        content: '';
 
765
        width: 0px;
 
766
        height: 10px;
 
767
        border-right: 1px solid #ddd;
 
768
        left: 0;
 
769
        bottom: 0;
 
770
}
 
771
.text table thead th:last-child::before {
 
772
        display: block;
 
773
        position: absolute;
 
774
        content: '';
 
775
        width: 10px;
 
776
        height: 10px;
 
777
        border-right: 1px solid #ddd;
 
778
        right: 0;
 
779
        bottom: 0;
 
780
}
 
781
 
 
782
 
 
783
.text ul {
 
784
        list-style-type: square;
 
785
        padding: 0 0 0 20px;
 
786
}
 
787
 
 
788
 
 
789
/********************************************
 
790
 *
 
791
 *   Global: UI elements > Popup
 
792
 */
 
793
 
 
794
.popupPanel {
 
795
        position: absolute;
 
796
        background: #fff;
 
797
        z-index: 1;
 
798
        border: 4px solid #aaa;
 
799
 
 
800
        width: auto !important;
 
801
        overflow: visible !important;
 
802
}
 
803
 
 
804
.popupPanel.pointsLeft::before,
 
805
.popupPanel.pointsRight::before {
 
806
        content: '';
 
807
        display: block;
 
808
 
 
809
        position: absolute;
 
810
        width: 0;
 
811
        height: 0;
 
812
        top: -13px;
 
813
        left: 7px;
 
814
        z-index: 10;
 
815
 
 
816
        border-bottom: 11px solid #aaa;
 
817
        border-right: 11px solid transparent;
 
818
        border-left: 11px solid transparent;
 
819
}
 
820
.popupPanel.pointsLeft::after,
 
821
.popupPanel.pointsRight::after {
 
822
        content: '';
 
823
        display: block;
 
824
 
 
825
        position: absolute;
 
826
        width: 0;
 
827
        height: 0;
 
828
        top: -7px;
 
829
        left: 10px;
 
830
        z-index: 11;
 
831
 
 
832
        border-bottom: 8px solid #fff;
 
833
        border-right: 8px solid transparent;
 
834
        border-left: 8px solid transparent;
 
835
}
 
836
 
 
837
.popupPanel.pointsRight::before {
 
838
        left: auto;
 
839
        right: 7px;
 
840
}
 
841
.popupPanel.pointsRight::after {
 
842
        left: auto;
 
843
        right: 10px;
 
844
}
 
845
.popupPanel.pointsLeft.hasSearch::after, .popupPanel.pointsRight.hasSearch::after {
 
846
        border-bottom: 8px solid #f6f6f6;
 
847
}
 
848
 
 
849
 
 
850
/********************************************
 
851
 *
 
852
         *   Global: UI elements > Search
 
853
 */
 
854
 
 
855
.search {
 
856
        position: relative;
 
857
        width: 100%;
 
858
        height: 40px;
 
859
        line-height: 40px;
 
860
        background: #eee;
 
861
}
 
862
.filters .search {
 
863
        width: 200px;
 
864
}
 
865
.search input {
 
866
        position: absolute;
 
867
        top: 0;
 
868
        left: 0;
 
869
        right: 0;
 
870
        height: 40px;
 
871
        padding-left: 40px;
 
872
        width: 100%;
 
873
 
 
874
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
875
        font-size: 1em;
 
876
 
 
877
        border: none;
 
878
        background: none;
 
879
}
 
880
.search:after {
 
881
        content: '';
 
882
        display: block;
 
883
        position: absolute;
 
884
        top: 0;
 
885
        left: 0;
 
886
        width: 40px;
 
887
        height: 40px;
 
888
        font-family: html5test;
 
889
        text-align: center;
 
890
        font-size: 1.2em;
 
891
        color: #666;
 
892
        -webkit-font-smoothing: antialiased;
 
893
}
 
894
.search button {
 
895
        position: absolute;
 
896
        top: 4px;
 
897
        right: 4px;
 
898
        height: 32px;
 
899
        width: 32px;
 
900
 
 
901
        font-size: 1.2em;
 
902
        color: #bbb;
 
903
 
 
904
        background: none;
 
905
        border: none;
 
906
        cursor: pointer;
 
907
}
 
908
 
 
909
#searchResults {
 
910
        width: 100%;
 
911
}
 
912
 
 
913
#searchBusy #loading {
 
914
        min-height: inherit;
 
915
        height: 0px;
 
916
        overflow: hidden;
 
917
 
 
918
        -webkit-transition: all .3s ease-in-out;
 
919
        -moz-transition: all .3s ease-in-out;
 
920
        -ms-transition: all .3s ease-in-out;
 
921
        -o-transition: all .3s ease-in-out;
 
922
        transition: all .3s ease-in-out;
 
923
}
 
924
#searchBusy.visible #loading {
 
925
        height: 300px;
 
926
}
 
927
#searchBusy #loading div {
 
928
        font-size: 22px !important;
 
929
}
 
930
.popupPanel .toolbar {
 
931
        background: none;
 
932
        margin: 0;
 
933
        padding: 0;
 
934
}
 
935
.popupPanel .search {
 
936
        height: 36px !important;
 
937
        line-height: 36px;
 
938
        border-bottom: 4px solid #eee;
 
939
        background: #f6f6f6;
 
940
}
 
941
.popupPanel .search input {
 
942
        height: 36px;
 
943
        padding-left: 30px;
 
944
        font-size: 0.9em;
 
945
}
 
946
.popupPanel .search:after {
 
947
        width: 30px;
 
948
        height: 36px;
 
949
        font-size: 1.0em;
 
950
}
 
951
.popupPanel .search button {
 
952
        height: 28px;
 
953
        width: 22px;
 
954
        font-size: 1em;
 
955
}
 
956
.popupPanel .less,
 
957
.popupPanel .more {
 
958
        margin: 32px 0 -10px;
 
959
        line-height: 32px;
 
960
        height: 32px;
 
961
        border-top: 4px solid #eee;
 
962
        background: #f6f6f6;
 
963
        text-align: center;
 
964
        text-transform: uppercase;
 
965
        font-size: 0.75em;
 
966
}
 
967
 
 
968
/********************************************
 
969
 *
 
970
 *   Global: UI elements > Toggle
 
971
 */
 
972
 
 
973
.toggle {
 
974
        display: block;
 
975
        cursor: pointer;
 
976
 
 
977
        position: relative;
 
978
        width: 200px;
 
979
        height: 40px;
 
980
 
 
981
        line-height: 40px;
 
982
        text-align: center;
 
983
        background: #eee;
 
984
}
 
985
.toggle .part {
 
986
        position: absolute;
 
987
        top: 0;
 
988
        left: 0;
 
989
        bottom: 0;
 
990
        width: 100px;
 
991
 
 
992
        -webkit-transition: all .3s ease-in-out;
 
993
        -moz-transition: all .3s ease-in-out;
 
994
        -ms-transition: all .3s ease-in-out;
 
995
        -o-transition: all .3s ease-in-out;
 
996
        transition: all .3s ease-in-out;
 
997
}
 
998
.toggle .first {
 
999
        color: #fff;
 
1000
}
 
1001
.toggle.selected .first {
 
1002
        color: inherit;
 
1003
}
 
1004
.toggle .second {
 
1005
        left: 100px;
 
1006
}
 
1007
.toggle.selected .second {
 
1008
        color: #fff;
 
1009
}
 
1010
 
 
1011
.toggle .background {
 
1012
        position: absolute;
 
1013
        top: 0;
 
1014
        left: 0;
 
1015
        bottom: 0;
 
1016
        width: 100px;
 
1017
 
 
1018
        background: #0092bf;
 
1019
 
 
1020
        -webkit-transition: all .3s ease-in-out;
 
1021
        -moz-transition: all .3s ease-in-out;
 
1022
        -ms-transition: all .3s ease-in-out;
 
1023
        -o-transition: all .3s ease-in-out;
 
1024
        transition: all .3s ease-in-out;
 
1025
}
 
1026
.toggle.selected .background {
 
1027
        left: 100px;
 
1028
}
 
1029
 
 
1030
 
 
1031
/********************************************
 
1032
 *
 
1033
 *   Global: UI elements > Buttons
 
1034
 */
 
1035
 
 
1036
.button {
 
1037
        display: block;
 
1038
        box-sizing: border-box;
 
1039
        -moz-box-sizing: border-box;
 
1040
        width: 100%;
 
1041
        border: none;
 
1042
        padding: 10px 0;
 
1043
        margin: 0;
 
1044
        cursor: pointer;
 
1045
        vertical-align: top;
 
1046
 
 
1047
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1048
        font-size: 1em;
 
1049
        text-decoration: none;
 
1050
        text-align: left;
 
1051
}
 
1052
.button:hover {
 
1053
        box-shadow: inset 0 50px 0px rgba(0,0,0,0.05);
 
1054
}
 
1055
.button > span {
 
1056
        margin: 0 2px 0 10px;
 
1057
        vertical-align: middle;
 
1058
        white-space: nowrap;
 
1059
}
 
1060
.button > span::before {
 
1061
        font-family: html5test;
 
1062
        font-weight: normal;
 
1063
        font-size: 1.4em;
 
1064
        margin-right: 6px;
 
1065
        vertical-align: top;
 
1066
 
 
1067
        -webkit-font-smoothing: antialiased;
 
1068
}
 
1069
 
 
1070
.button.website { background: #444; color: #fff; }
 
1071
.button.website > span::before { content: ''; }
 
1072
.button.followme { background: #0092bf; color: #fff; }
 
1073
.button.followme > span::before { content: ''; }
 
1074
.button.donate { background: #ffd500; color: #000; }
 
1075
.button.donate > span::before { content: ''; }
 
1076
.button.developed { background: #ccc; color: #000; }
 
1077
.button.developed > span::before { content: ''; }
 
1078
.button.compare { background: #33af33; color: #fff; }
 
1079
.button.compare > span::before { content: '⚏'; }
 
1080
.button.save { background: #0092bf; color: #fff; }
 
1081
.button.save > span::before { content: '☁'; }
 
1082
.button.latest { background: #0092bf; color: #fff; }
 
1083
.button.latest > span::before { content: ''; }
 
1084
.button.share { background: #ec6534; color: #fff; }
 
1085
.button.share > span::before { content: ''; }
 
1086
.button.contact { background: #ec6534; color: #fff; }
 
1087
.button.contact > span::before { content: '☎'; }
 
1088
.button.schedule { background: #ec6534; color: #fff; }
 
1089
.button.schedule > span::before { content: ''; }
 
1090
.button.labs { background: #33af33; color: #fff; }
 
1091
.button.labs > span::before { content: '☟'; }
 
1092
.button.info { background: #33af33; color: #fff; }
 
1093
.button.info > span::before { content: ''; }
 
1094
 
 
1095
 
 
1096
 
 
1097
 
 
1098
/********************************************
 
1099
 *
 
1100
 *   Global: UI elements > Tables
 
1101
 */
 
1102
 
 
1103
.detailsTable .check,
 
1104
.detailsTable .ballot,
 
1105
.detailsTable .buggy,
 
1106
.detailsTable .partial,
 
1107
.detailsTable .unknown {
 
1108
        position: relative;
 
1109
        display: inline-block;
 
1110
 
 
1111
        top: -1px;
 
1112
 
 
1113
        color: #888;
 
1114
        font-size: 1.2em;
 
1115
        margin: 0 0 0 6px;
 
1116
        width: 1em;
 
1117
        text-align: center;
 
1118
        vertical-align: middle;
 
1119
}
 
1120
.detailsTable .check {
 
1121
        font-family: html5test;
 
1122
        font-weight: normal;
 
1123
        color: #1c8c1d;
 
1124
}
 
1125
.detailsTable .ballot {
 
1126
        font-family: html5test;
 
1127
        font-weight: normal;
 
1128
        color: #853333;
 
1129
}
 
1130
.detailsTable .buggy {
 
1131
        font-family: html5test;
 
1132
        font-weight: normal;
 
1133
        color: #ec6534;
 
1134
}
 
1135
.detailsTable .partial {
 
1136
        font-family: html5test;
 
1137
        font-weight: normal;
 
1138
}
 
1139
.detailsTable .partially {
 
1140
        color: #888;
 
1141
}
 
1142
 
 
1143
 
 
1144
 
 
1145
 
 
1146
 
 
1147
 
 
1148
 
 
1149
 
 
1150
 
 
1151
 
 
1152
 
 
1153
/*******************************************************************************
 
1154
 *
 
1155
 *   Your Browser: Loading
 
1156
 */
 
1157
 
 
1158
@keyframes loader {
 
1159
  from {
 
1160
    transform: rotate(0deg);
 
1161
  }
 
1162
  to {
 
1163
    transform: rotate(360deg);
 
1164
  }
 
1165
}
 
1166
 
 
1167
@-webkit-keyframes loader {
 
1168
  from {
 
1169
    -webkit-transform: rotate(0deg);
 
1170
        }
 
1171
  to {
 
1172
    -webkit-transform: rotate(360deg);
 
1173
  }
 
1174
}
 
1175
 
 
1176
#loading {
 
1177
        min-height: 500px;
 
1178
        position: relative;
 
1179
}
 
1180
 
 
1181
#loading div {
 
1182
        display: block;
 
1183
 
 
1184
        position: absolute;
 
1185
        top: 100px;
 
1186
        left: 50%;
 
1187
        width: 100px;
 
1188
        height: 100px;
 
1189
        margin-left: -50px;
 
1190
 
 
1191
        font-family: html5test;
 
1192
        font-size: 100px;
 
1193
        line-height: 100px;
 
1194
        text-align: center;
 
1195
        color: #bbb;
 
1196
 
 
1197
    -webkit-animation: loader 1s steps(8) infinite;
 
1198
    animation: loader 1s steps(8) infinite;
 
1199
}
 
1200
 
 
1201
 
 
1202
 
 
1203
/*******************************************************************************
 
1204
 *
 
1205
 *   Your Browser: Score
 
1206
 */
 
1207
 
 
1208
#score {
 
1209
        z-index: 10;
 
1210
}
 
1211
 
 
1212
.pointsPanel {
 
1213
        background: #fff;
 
1214
        min-height: 145px;
 
1215
        padding: 0 155px 0 0;
 
1216
}
 
1217
.saved .pointsPanel {
 
1218
        padding: 0;
 
1219
}
 
1220
.pointsPanel h2 {
 
1221
        font-size: 2.3em;
 
1222
        color: #aaa;
 
1223
        text-align: center;
 
1224
        line-height: 40px;
 
1225
        margin: 0;
 
1226
 
 
1227
}
 
1228
.pointsPanel h2 > strong,
 
1229
.pointsPanel h2 > span {
 
1230
        display: inline-block;
 
1231
        vertical-align: middle;
 
1232
 
 
1233
        -webkit-transform: translateY(6px);
 
1234
        -moz-transform: translateY(6px);
 
1235
        -ms-transform: translateY(6px);
 
1236
        -o-transform: translateY(6px);
 
1237
        transform: translateY(6px);
 
1238
}
 
1239
.pointsPanel h2 > strong {
 
1240
    font-family: 'League Gothic', Impact;
 
1241
    font-weight: normal;
 
1242
        font-size: 3.8em;
 
1243
        color: #0092bf;
 
1244
        line-height: 145px;
 
1245
        margin: 0 10px;
 
1246
}
 
1247
.pointsPanel hr {
 
1248
        border: none;
 
1249
        border-top: 8px solid #d9d9d9;
 
1250
}
 
1251
.blocked {
 
1252
        background: #ec6534;
 
1253
        padding: 20px;
 
1254
        margin-bottom: 40px;
 
1255
}
 
1256
.blocked h2 {
 
1257
        color: #fff;
 
1258
        font-size: 2.6em;
 
1259
}
 
1260
.blocked p {
 
1261
        color: #fff;
 
1262
        font-size: 0.8em;
 
1263
        line-height: 150%;
 
1264
}
 
1265
.blocked button {
 
1266
        margin-top: 10px;
 
1267
        background: rgba(0,0,0,0.3);
 
1268
        color: #fff;
 
1269
        border: none;
 
1270
        padding: 10px;
 
1271
}
 
1272
.wrapper {
 
1273
        margin: 8px 0 20px;
 
1274
        position: relative;
 
1275
}
 
1276
 
 
1277
@media (max-width: 900px) {
 
1278
        .pointsPanel {
 
1279
                font-size: 90%;
 
1280
        }
 
1281
 
 
1282
        .blocked {
 
1283
                font-size: 90%;
 
1284
        }
 
1285
}
 
1286
@media (max-width: 820px) {
 
1287
        .pointsPanel {
 
1288
                font-size: 80%;
 
1289
        }
 
1290
}
 
1291
 
 
1292
@media (max-width: 767px) {
 
1293
        .pointsPanel {
 
1294
                font-size: 100%;
 
1295
        }
 
1296
        .pointsPanel h2 {
 
1297
                padding: 10px 0;
 
1298
        }
 
1299
        .pointsPanel h2 > span,
 
1300
        .pointsPanel h2 > strong {
 
1301
                display: block;
 
1302
        }
 
1303
}
 
1304
 
 
1305
@media (max-width: 680px) {
 
1306
        .pointsPanel {
 
1307
                padding: 0;
 
1308
        }
 
1309
 
 
1310
        .blocked {
 
1311
                margin-left: 20px;
 
1312
                margin-right: 20px;
 
1313
        }
 
1314
}
 
1315
 
 
1316
 
 
1317
 
 
1318
 
 
1319
 
 
1320
/********************************************
 
1321
 *
 
1322
 *   Your Browser: Feedback
 
1323
 */
 
1324
 
 
1325
.popupPanel.feedback {
 
1326
        width: 210px;
 
1327
        margin-top: 10px;
 
1328
        margin-left: -130px;
 
1329
        padding: 10px 10px 10px;
 
1330
 
 
1331
        text-align: left;
 
1332
        color: #000;
 
1333
        cursor: auto;
 
1334
        font-size: 1.1em;
 
1335
}
 
1336
.popupPanel.feedback h3 {
 
1337
        margin: 0;
 
1338
}
 
1339
 
 
1340
.popupPanel.feedback textarea {
 
1341
        width: 100%;
 
1342
        height: 160px;
 
1343
        padding: 10px;
 
1344
        margin: 10px 0;
 
1345
 
 
1346
        font-size: 1em;
 
1347
 
 
1348
        border: none;
 
1349
        background: #eee;
 
1350
}
 
1351
.popupPanel.feedback button {
 
1352
        width: 100%;
 
1353
        border: none;
 
1354
        background: #33af33;
 
1355
 
 
1356
        text-align: left;
 
1357
        font-size: 1em;
 
1358
        color: #fff;
 
1359
        padding: 10px;
 
1360
 
 
1361
        cursor: pointer;
 
1362
}
 
1363
.popupPanel.feedback button span {
 
1364
        font-family: html5test;
 
1365
        font-size: 1.2em;
 
1366
        margin-right: 4px;
 
1367
}
 
1368
/*
 
1369
.popupPanel.save a {
 
1370
        color: #0092bf;
 
1371
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1372
        font-weight: bold;
 
1373
        text-decoration: none;
 
1374
}
 
1375
.popupPanel.save a:hover {
 
1376
        text-decoration: underline;
 
1377
}
 
1378
.popupPanel.save p {
 
1379
        margin-bottom: 1em;
 
1380
}
 
1381
.popupPanel.save code {
 
1382
        font-size: 1.5em;
 
1383
}
 
1384
*/
 
1385
 
 
1386
/********************************************
 
1387
 *
 
1388
 *   Your Browser: Save
 
1389
 */
 
1390
 
 
1391
.popupPanel.save {
 
1392
        width: 210px;
 
1393
        margin-top: 21px;
 
1394
        padding: 20px 10px 10px;
 
1395
 
 
1396
        text-align: center;
 
1397
        color: #000;
 
1398
        cursor: auto;
 
1399
}
 
1400
.popupPanel.save a {
 
1401
        color: #0092bf;
 
1402
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1403
        font-weight: bold;
 
1404
        text-decoration: none;
 
1405
}
 
1406
.popupPanel.save a:hover {
 
1407
        text-decoration: underline;
 
1408
}
 
1409
.popupPanel.save p {
 
1410
        margin-bottom: 1em;
 
1411
}
 
1412
.popupPanel.save code {
 
1413
        font-size: 1.5em;
 
1414
}
 
1415
 
 
1416
 
 
1417
 
 
1418
/********************************************
 
1419
 *
 
1420
 *   Your Browser: Share
 
1421
 */
 
1422
 
 
1423
.popupPanel.share {
 
1424
        width: 210px !important;
 
1425
        margin-top: 21px;
 
1426
}
 
1427
#share {
 
1428
        display: block;
 
1429
        height: 94px;
 
1430
        position: relative;
 
1431
        overflow: hidden;
 
1432
}
 
1433
#share #twitter {
 
1434
        position: absolute;
 
1435
        top: 15px;
 
1436
        left: 15px;
 
1437
}
 
1438
#share #facebook {
 
1439
        position: absolute;
 
1440
        top: 15px;
 
1441
        left: 82px;
 
1442
}
 
1443
#share #google {
 
1444
        position: absolute;
 
1445
        top: 15px;
 
1446
        left: 141px;
 
1447
}
 
1448
 
 
1449
 
 
1450
 
 
1451
/********************************************
 
1452
 *
 
1453
 *   Your Browser: Action buttons
 
1454
 */
 
1455
 
 
1456
.wrapper .buttons {
 
1457
        font-size: 0.75em;
 
1458
 
 
1459
}
 
1460
.wrapper .buttons > * {
 
1461
        width: 25%;
 
1462
        display: inline-block;
 
1463
        overflow: hidden;
 
1464
}
 
1465
 
 
1466
@media (max-width: 680px) {
 
1467
        .wrapper .buttons > * {
 
1468
                width: 50%;
 
1469
        }
 
1470
}
 
1471
 
 
1472
@media (max-width: 280px) {
 
1473
        .wrapper .buttons > * {
 
1474
                width: 100%;
 
1475
        }
 
1476
 
 
1477
        .wrapper .buttons .donate {
 
1478
                display: none;
 
1479
        }
 
1480
}
 
1481
 
 
1482
 
 
1483
 
 
1484
/********************************************
 
1485
 *
 
1486
 *   Your Browser: Useragent
 
1487
 */
 
1488
 
 
1489
.useragent {
 
1490
        position: relative;
 
1491
        box-sizing: border-box;
 
1492
        border-top: 8px solid #d9d9d9;
 
1493
        display: block;
 
1494
 
 
1495
        text-align: left;
 
1496
        text-transform: none;
 
1497
        font-size: 0.8em;
 
1498
        color: #222;
 
1499
        padding: 10px 100px 10px 10px;
 
1500
        background: #eee;
 
1501
}
 
1502
.saved .useragent {
 
1503
        position: relative;
 
1504
        left: auto;
 
1505
        border-left: 0;
 
1506
        padding: 0;
 
1507
        cursor: pointer;
 
1508
}
 
1509
.saved .useragent p {
 
1510
        padding: 10px;
 
1511
}
 
1512
 
 
1513
.useragent > span {
 
1514
        position: absolute;
 
1515
        right: 10px;
 
1516
        top: 8px;
 
1517
        font-size: 0.85em;
 
1518
        color: #aaa;
 
1519
        line-height: 20px;
 
1520
}
 
1521
.useragent > span a {
 
1522
        font-family: html5test;
 
1523
        font-weight: normal;
 
1524
        font-size: 1.6em;
 
1525
        padding: 0 0 0 6px;
 
1526
        cursor: pointer;
 
1527
 
 
1528
        -webkit-transition: all .3s ease-in-out;
 
1529
        -moz-transition: all .3s ease-in-out;
 
1530
        -ms-transition: all .3s ease-in-out;
 
1531
        -o-transition: all .3s ease-in-out;
 
1532
        transition: all .3s ease-in-out;
 
1533
}
 
1534
.useragent > span a.correct:hover {
 
1535
        color: #1c8c1d;
 
1536
}
 
1537
.useragent > span a.wrong:hover {
 
1538
        color: #853333;
 
1539
}
 
1540
 
 
1541
@media (max-width: 680px) {
 
1542
        .useragent {
 
1543
                position: relative;
 
1544
                border-left: 0;
 
1545
                font-size: 0.75em;
 
1546
                min-height: 1.7em;
 
1547
        }
 
1548
}
 
1549
 
 
1550
 
 
1551
.useragent .expandWidget {
 
1552
        position: absolute;
 
1553
        top: 0;
 
1554
        right: 0;
 
1555
 
 
1556
        width: 38px;
 
1557
        height: 38px;
 
1558
        line-height: 38px;
 
1559
        text-align: center;
 
1560
 
 
1561
        color: #888;
 
1562
 
 
1563
        -webkit-transition: all .3s ease-in-out;
 
1564
        -moz-transition: all .3s ease-in-out;
 
1565
        -ms-transition: all .3s ease-in-out;
 
1566
        -o-transition: all .3s ease-in-out;
 
1567
        transition: all .3s ease-in-out;
 
1568
}
 
1569
.useragent .expandedPanel {
 
1570
        border-top: 4px solid #d9d9d9;
 
1571
        margin: 0;
 
1572
        box-sizing: border-box;
 
1573
        overflow: hidden;
 
1574
        height: 0;
 
1575
 
 
1576
        -webkit-transition: all .3s ease-in-out;
 
1577
        -moz-transition: all .3s ease-in-out;
 
1578
        -ms-transition: all .3s ease-in-out;
 
1579
        -o-transition: all .3s ease-in-out;
 
1580
        transition: all .3s ease-in-out;
 
1581
}
 
1582
.useragent.expanded .expandedPanel {
 
1583
        height: 100px;
 
1584
}
 
1585
.useragent.expanded .expandWidget {
 
1586
        -webkit-transform: rotate(180deg);
 
1587
        -moz-transform: rotate(180deg);
 
1588
        -ms-transform: rotate(180deg);
 
1589
        -o-transform: rotate(180deg);
 
1590
        transform: rotate(180deg);
 
1591
}
 
1592
.useragent table {
 
1593
        margin: 10px;
 
1594
        width: auto;
 
1595
}
 
1596
 
 
1597
.useragent table th {
 
1598
        padding-right: 16px;
 
1599
        white-space: nowrap;
 
1600
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1601
}
 
1602
 
 
1603
.useragent table td,
 
1604
.useragent table th {
 
1605
        vertical-align: top;
 
1606
        font-size: 0.9em;
 
1607
        padding-bottom: 5px;
 
1608
        text-align: left;
 
1609
}
 
1610
 
 
1611
 
 
1612
 
 
1613
/********************************************
 
1614
 *
 
1615
 *   Your Browser: Details
 
1616
 */
 
1617
 
 
1618
.resultsTable {
 
1619
        margin-bottom: 40px;
 
1620
}
 
1621
 
 
1622
.resultsTable .category {
 
1623
        border-top: 1px solid rgba(0,0,0,0);
 
1624
}
 
1625
.resultsTable .category h2 {
 
1626
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1627
        text-transform: lowercase;
 
1628
}
 
1629
.resultsTable .category h2::before {
 
1630
        font-family: html5test;
 
1631
        font-weight: normal;
 
1632
        font-size: 1.2em;
 
1633
        padding-right: 4px;
 
1634
        vertical-align: middle;
 
1635
 
 
1636
        -webkit-font-smoothing: antialiased;
 
1637
}
 
1638
.resultsTable .category.semantics h2::before { content: ''; }
 
1639
.resultsTable .category.offlinestorage h2::before { content: ''; }
 
1640
.resultsTable .category.deviceaccess h2::before { content: ''; }
 
1641
.resultsTable .category.connectivity h2::before { content: ''; }
 
1642
.resultsTable .category.multimedia h2::before { content: ''; }
 
1643
.resultsTable .category.graphicseffects h2::before { content: ''; }
 
1644
.resultsTable .category.performanceintegration h2::before { content: ''; }
 
1645
 
 
1646
.resultsTable table {
 
1647
        border-spacing: 0;
 
1648
 
 
1649
        position: relative;
 
1650
        margin: 0 0 24px;
 
1651
 
 
1652
        background: #fff;
 
1653
        color: #000;
 
1654
 
 
1655
        border-collapse: separate;
 
1656
}
 
1657
.resultsTable table thead tr {
 
1658
        color: #fff;
 
1659
        background: #0092bf;
 
1660
}
 
1661
.resultsTable table thead tr > * {
 
1662
        border-bottom: 8px solid #d9d9d9;
 
1663
}
 
1664
.resultsTable table thead th {
 
1665
        position: relative;
 
1666
 
 
1667
        padding: 0px 10px;
 
1668
        height: 44px;
 
1669
 
 
1670
    font-family: 'League Gothic', Impact;
 
1671
    font-weight: normal;
 
1672
 
 
1673
        font-size: 2em;
 
1674
        text-align: left;
 
1675
}
 
1676
.resultsTable table thead td {
 
1677
        position: relative;
 
1678
 
 
1679
        padding: 0px 10px;
 
1680
        width: 44px;
 
1681
 
 
1682
        text-align: right;
 
1683
}
 
1684
.resultsTable table thead th div.grade {
 
1685
        position: absolute;
 
1686
        top: 0;
 
1687
        right: 0;
 
1688
}
 
1689
.resultsTable table thead th div > span {
 
1690
        display: block;
 
1691
        height: 100%;
 
1692
        line-height: 44px;
 
1693
        padding: 0 10px;
 
1694
    font-family: 'League Gothic', Impact;
 
1695
    font-size: 0.8em;
 
1696
}
 
1697
.resultsTable table thead th span.none {
 
1698
        background-color: #853333;
 
1699
}
 
1700
.resultsTable table thead th span.badly {
 
1701
        background-color: #d68533;
 
1702
}
 
1703
.resultsTable table thead th span.reasonable {
 
1704
        background-color: #e7c333;
 
1705
}
 
1706
.resultsTable table thead th span.good {
 
1707
        background-color: #88b038;
 
1708
}
 
1709
.resultsTable table thead th span.great {
 
1710
        background-color: #33af33;
 
1711
}
 
1712
 
 
1713
.resultsTable table tbody th {
 
1714
        padding: 5px 10px;
 
1715
 
 
1716
        font-size: 0.75em;
 
1717
        font-weight: normal;
 
1718
        text-align: left;
 
1719
        position: relative;
 
1720
}
 
1721
.resultsTable table tbody td {
 
1722
        padding: 5px 10px;
 
1723
 
 
1724
        font-size: 0.75em;
 
1725
        text-align: right;
 
1726
        white-space: nowrap;
 
1727
}
 
1728
.resultsTable table tbody tr:first-child th,
 
1729
.resultsTable table tbody tr:first-child td {
 
1730
        padding-top: 8px;
 
1731
}
 
1732
.resultsTable table tbody tr:last-child th,
 
1733
.resultsTable table tbody tr:last-child td {
 
1734
        padding-bottom: 8px;
 
1735
}
 
1736
 
 
1737
.resultsTable table tbody th code {
 
1738
        font-size: 12px;
 
1739
}
 
1740
.resultsTable table th.details {
 
1741
        padding: 16px 40px 5px 10px;
 
1742
}
 
1743
.resultsTable table tr:first-child th.details {
 
1744
        padding-top: 8px;
 
1745
}
 
1746
.resultsTable table th.details em {
 
1747
        color: #666;
 
1748
        font-size: 90%;
 
1749
}
 
1750
.resultsTable table tr.hasChild th {
 
1751
        cursor: pointer;
 
1752
        padding-left: 28px;
 
1753
}
 
1754
.resultsTable table tr th.hasLink:hover {
 
1755
        cursor: pointer;
 
1756
}
 
1757
.resultsTable table tr th.hasLink:hover > div > span {
 
1758
        text-decoration: underline;
 
1759
}
 
1760
.resultsTable table tr.hasChild th > * {
 
1761
        position: relative;
 
1762
}
 
1763
.resultsTable table tr.hasChild th > ::before {
 
1764
        position: absolute;
 
1765
        top: 2px;
 
1766
        left: -18px;
 
1767
 
 
1768
        display: block;
 
1769
        font-family: html5test;
 
1770
        font-size: 11px;
 
1771
        content: '▼';
 
1772
        color: #888;
 
1773
 
 
1774
        -webkit-transition: -webkit-transform 200ms ease;
 
1775
        -moz-transition: -moz-transform 200ms ease;
 
1776
        -ms-transition: -ms-transform 200ms ease;
 
1777
        transition: transform 200ms ease;
 
1778
}
 
1779
.resultsTable table tr.hasChild.hidden th > ::before {
 
1780
        -webkit-transform: rotate(-90deg) translateX(-1px);
 
1781
        -moz-transform: rotate(-90deg) translateX(-1px);
 
1782
        -ms-transform: rotate(-90deg) translateX(-1px);
 
1783
        transform: rotate(-90deg) translateX(-1px);
 
1784
}
 
1785
.resultsTable table tr.hasChild th,
 
1786
.resultsTable table tr.hasChild td {
 
1787
        border-bottom: 1px solid #ccc;;
 
1788
}
 
1789
.resultsTable table tr.hasChild.hidden th,
 
1790
.resultsTable table tr.hasChild.hidden td {
 
1791
        border-bottom: none;
 
1792
}
 
1793
.resultsTable table tr.isChild {
 
1794
        display: none;
 
1795
}
 
1796
.resultsTable table tr.isChild th div,
 
1797
.resultsTable table tr.isChild td div {
 
1798
}
 
1799
.resultsTable table tr.isChild.expanded {
 
1800
        display: table-row;
 
1801
}
 
1802
.resultsTable table tr.isChild.expanded th div,
 
1803
.resultsTable table tr.isChild.expanded td div {
 
1804
}
 
1805
.resultsTable table tr.isChild th {
 
1806
        background: #f6f6f6;
 
1807
        font-size: 0.7em;
 
1808
        padding: 5px 10px 3px 28px;
 
1809
}
 
1810
.resultsTable table tr.isChild td {
 
1811
        background: #f6f6f6;
 
1812
        font-size: 0.7em;
 
1813
        padding: 5px 10px;
 
1814
}
 
1815
.resultsTable table tr.isChild th code {
 
1816
        font-size: 11px;
 
1817
}
 
1818
.resultsTable h2 {
 
1819
        font-size: 1.2em;
 
1820
        font-weight: bold;
 
1821
        color: #aaa;
 
1822
        margin: 2em 0 0.5em;
 
1823
}
 
1824
.resultsTable a {
 
1825
        color: #000;
 
1826
        text-decoration: none;
 
1827
}
 
1828
.resultsTable a:hover {
 
1829
        text-decoration: underline;
 
1830
}
 
1831
 
 
1832
.linksPanel {
 
1833
        max-width: 120%;
 
1834
        min-width: 291px;
 
1835
        padding: 4px 0;
 
1836
        margin-top: 9px;
 
1837
        margin-left: -2px;
 
1838
}
 
1839
.linksPanel.popupPanel.pointsLeft::after, .linksPanel.popupPanel.pointsRight::after {
 
1840
        border-bottom: 8px solid #f6f6f6;
 
1841
}
 
1842
 
 
1843
.linksPanel .info {
 
1844
        position: relative;
 
1845
        border-bottom: 4px solid #eee;
 
1846
        background: #f6f6f6;
 
1847
        top: -4px;
 
1848
        font-size: 0.75em;
 
1849
        height: 66px;
 
1850
        margin-bottom: 6px;
 
1851
        line-height: 15px;
 
1852
}
 
1853
.linksPanel .info .column {
 
1854
        position: absolute;
 
1855
        width: 33%;
 
1856
        height: 66px;
 
1857
        top: 0;
 
1858
        cursor: default;
 
1859
        box-sizing: border-box;
 
1860
        border-left: 2px solid #eee;
 
1861
        border-right: 2px solid #eee;
 
1862
}
 
1863
.linksPanel .info .left {
 
1864
        left: 0;
 
1865
        border-left: none;
 
1866
}
 
1867
.linksPanel .info .middle {
 
1868
        left: 33%;
 
1869
        width: 34%;
 
1870
}
 
1871
.linksPanel .info .right {
 
1872
        left: 67%;
 
1873
        border-right: none;
 
1874
}
 
1875
.linksPanel .info .column span {
 
1876
        color: #000;
 
1877
        text-decoration: none;
 
1878
}
 
1879
.linksPanel .info .column a {
 
1880
        display: block;
 
1881
        width: 100%;
 
1882
        height: 66px;
 
1883
        color: #000;
 
1884
        text-decoration: none;
 
1885
}
 
1886
.linksPanel .info .column a:hover {
 
1887
        background: #eee;
 
1888
}
 
1889
.linksPanel .info .column span {
 
1890
        position: absolute;
 
1891
        left: 0;
 
1892
        width: 100%;
 
1893
        top: 46px;
 
1894
        text-align: center;
 
1895
        text-transform: uppercase;
 
1896
        text-decoration: none;
 
1897
        font-size: 0.9em;
 
1898
        font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
 
1899
}
 
1900
.linksPanel .info .left h2 {
 
1901
        text-align: center;
 
1902
        padding-top: 0.3em;
 
1903
}
 
1904
.linksPanel .info .middle em {
 
1905
        position: absolute;
 
1906
        top: 10px;
 
1907
        left: 50%;
 
1908
        margin-left: -16px;
 
1909
 
 
1910
        display: block;
 
1911
        width: 32px;
 
1912
        height: 32px;
 
1913
        color: #fff;
 
1914
        text-align: center;
 
1915
        line-height: 34px;
 
1916
        font-style: normal;
 
1917
    font-family: 'League Gothic', Impact;
 
1918
    font-weight: normal;
 
1919
    font-size: 2.5em;
 
1920
        z-index: 2;
 
1921
}
 
1922
.linksPanel .info .middle em::before {
 
1923
        position: absolute;
 
1924
        top: 0;
 
1925
        display: block;
 
1926
        content: '';
 
1927
        width: 0;
 
1928
        height: 0;
 
1929
        border: 16px solid #0092bf;
 
1930
        border-radius: 16px;
 
1931
        z-index: -1;
 
1932
}
 
1933
.linksPanel .info .middle.none em::before {
 
1934
        border: 16px solid #aaa;
 
1935
}
 
1936
.linksPanel .info .middle.none em {
 
1937
        font-family: html5test;
 
1938
        font-size: 1.5em;
 
1939
}
 
1940
.linksPanel .info .status::after {
 
1941
        position: absolute;
 
1942
        top: 19px;
 
1943
        width: 100%;
 
1944
        text-align: center;
 
1945
        display: block;
 
1946
        content: '';
 
1947
        font-family: html5test;
 
1948
        font-size: 29px;
 
1949
}
 
1950
.linksPanel .info .status.recommendation::after {
 
1951
        content: '';
 
1952
        color: #33af33;
 
1953
}
 
1954
.linksPanel .info .status.stable::after {
 
1955
        content: '';
 
1956
        color: #33af33;
 
1957
}
 
1958
.linksPanel .info .status.proposal::after {
 
1959
        content: '';
 
1960
        color: #88b038;
 
1961
}
 
1962
.linksPanel .info .status.experimental::after {
 
1963
        content: '';
 
1964
        color: #ec6534;
 
1965
}
 
1966
.linksPanel .info .status.controversial::after {
 
1967
        content: '';
 
1968
        color: #ec6534;
 
1969
}
 
1970
.linksPanel .info .status.optional::after {
 
1971
        content: '';
 
1972
        color: #aaa;
 
1973
}
 
1974
.linksPanel .info .status.rejected::after {
 
1975
        content: '';
 
1976
        color: #853333;
 
1977
}
 
1978
.linksPanel .info .column a.compare::before {
 
1979
        position: absolute;
 
1980
        top: 19px;
 
1981
        width: 100%;
 
1982
        text-align: center;
 
1983
        display: block;
 
1984
        content: '⚏';
 
1985
        font-family: html5test;
 
1986
        font-size: 30px;
 
1987
        color: #33af33;
 
1988
}
 
1989
.linksPanel .info .column a.timeline::before {
 
1990
        position: absolute;
 
1991
        top: 19px;
 
1992
        width: 100%;
 
1993
        text-align: center;
 
1994
        display: block;
 
1995
        content: '';
 
1996
        font-family: html5test;
 
1997
        font-size: 30px;
 
1998
        color: #33af33;
 
1999
}
 
2000
 
 
2001
.linksPanel h3 {
 
2002
        line-height: 32px;
 
2003
        padding: 0 10px;
 
2004
        border-bottom: 1px solid #eee;
 
2005
}
 
2006
.linksPanel .links a {
 
2007
        display: block;
 
2008
        white-space: nowrap;
 
2009
        line-height: 30px;
 
2010
        padding: 0 10px;
 
2011
 
 
2012
        background-size: 24px 24px;
 
2013
        background-position: 10px center;
 
2014
        background-repeat: no-repeat;
 
2015
 
 
2016
        overflow: hidden;
 
2017
        text-overflow: ellipsis;
 
2018
}
 
2019
.linksPanel .links a:hover {
 
2020
        background-color: #eee;
 
2021
        text-decoration: none;
 
2022
}
 
2023
/*
 
2024
.linksPanel a.compare {
 
2025
        border-bottom: 1px solid #eee;
 
2026
}
 
2027
*/
 
2028
.linksPanel .links a.w3c {
 
2029
        background-image: url(/images/external/w3c.png);
 
2030
        background-size: 24px 24px;
 
2031
        text-indent: 32px;
 
2032
}
 
2033
.linksPanel .links a.whatwg {
 
2034
        background-image: url(/images/external/whatwg.svg);
 
2035
        background-size: 20px 20px;
 
2036
        text-indent: 32px;
 
2037
}
 
2038
.linksPanel .links a.khronos {
 
2039
        background-image: url(/images/external/khronos.png);
 
2040
        background-size: 24px 24px;
 
2041
        text-indent: 32px;
 
2042
}
 
2043
.linksPanel .links a.wp {
 
2044
        background-image: url(/images/external/wp.png);
 
2045
        background-size: 24px 24px;
 
2046
        text-indent: 32px;
 
2047
}
 
2048
.linksPanel .links a.mdn {
 
2049
        background-image: url(/images/external/mdn.svg);
 
2050
        text-indent: 32px;
 
2051
}
 
2052
.linksPanel .links a.ecma {
 
2053
        background-image: url(/images/external/ecma.png);
 
2054
        text-indent: 32px;
 
2055
}
 
2056
.linksPanel .links a.ricg {
 
2057
        background-image: url(/images/external/ricg.svg);
 
2058
        background-size: 30px 30px;
 
2059
        text-indent: 32px;
 
2060
}
 
2061
 
 
2062
/********************************************
 
2063
 *
 
2064
 *   Your Browser: Explaination
 
2065
 */
 
2066
 
 
2067
#html5 {
 
2068
        float: right;
 
2069
        display: block;
 
2070
        width: 74px;
 
2071
        height: 102px;
 
2072
        margin: 16px 0 10px 10px;
 
2073
        background: url(/images/html5.png);
 
2074
        background-size: 74px 102px;
 
2075
}
 
2076
 
 
2077
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 
2078
        #html5 {
 
2079
                background-image: url(/images/html5@2x.png);
 
2080
        }
 
2081
}
 
2082
 
 
2083
.paper .buttons {
 
2084
        padding: 0 !important;
 
2085
        overflow: hidden;
 
2086
}
 
2087
.paper .buttons > * {
 
2088
        display: inline-block;
 
2089
        float: left;
 
2090
        width: 25%;
 
2091
        overflow: hidden;
 
2092
        text-overflow: ellipsis;
 
2093
}
 
2094
 
 
2095
@media (max-width: 680px) {
 
2096
        .paper .buttons > * {
 
2097
                width: 50%;
 
2098
        }
 
2099
}
 
2100
 
 
2101
@media (max-width: 432px) {
 
2102
        .paper .buttons > * {
 
2103
                width: 100%;
 
2104
        }
 
2105
}
 
2106
 
 
2107
 
 
2108
/********************************************
 
2109
 *
 
2110
 *   Your Browser: Ads
 
2111
 */
 
2112
 
 
2113
#headerad {
 
2114
        position: absolute;
 
2115
        top: 0;
 
2116
        right: 0;
 
2117
 
 
2118
        width: 125px;
 
2119
        height: 125px;
 
2120
        background: #eee;
 
2121
        overflow: hidden;
 
2122
        padding: 10px;
 
2123
        border-bottom: 8px solid #d9d9d9;
 
2124
        border-left: 8px solid #d9d9d9;
 
2125
}
 
2126
#headerad div {
 
2127
        width: 125px;
 
2128
        height: 125px;
 
2129
        display: inline-block;
 
2130
}
 
2131
 
 
2132
#footerad {
 
2133
        margin-top: 30px;
 
2134
        overflow: hidden;
 
2135
        background: #eee;
 
2136
        padding: 10px;
 
2137
        text-align: center;
 
2138
}
 
2139
#footerad > div a,
 
2140
#footerad > div iframe {
 
2141
        width: 125px;
 
2142
        height: 125px;
 
2143
        overflow: hidden;
 
2144
        margin: 0 5px;
 
2145
        display: inline-block;
 
2146
        float: none;
 
2147
        vertical-align: middle;
 
2148
}
 
2149
 
 
2150
@media (max-width: 680px) {
 
2151
        #headerad {
 
2152
                position: static;
 
2153
                border: none;
 
2154
                width: 100%;
 
2155
                padding: 10px 0;
 
2156
                text-align: center;
 
2157
                margin-bottom: 30px;
 
2158
        }
 
2159
}
 
2160
 
 
2161
 
 
2162
 
 
2163
 
 
2164