Implement HTMLTemplateElement
[WebKit-https.git] / Source / WebCore / css / html.css
1 /*
2  * The default style sheet used to render HTML.
3  *
4  * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
5  * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
6  *
7  * This library is free software; you can redistribute it and/or
8  * modify it under the terms of the GNU Library General Public
9  * License as published by the Free Software Foundation; either
10  * version 2 of the License, or (at your option) any later version.
11  *
12  * This library is distributed in the hope that it will be useful,
13  * but WITHOUT ANY WARRANTY; without even the implied warranty of
14  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
15  * Library General Public License for more details.
16  *
17  * You should have received a copy of the GNU Library General Public License
18  * along with this library; see the file COPYING.LIB.  If not, write to
19  * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
20  * Boston, MA 02110-1301, USA.
21  *
22  */
23
24 @namespace "http://www.w3.org/1999/xhtml";
25
26 html {
27     display: block
28 }
29
30 /* children of the <head> element all have display:none */
31 head {
32     display: none
33 }
34
35 meta {
36     display: none
37 }
38
39 title {
40     display: none
41 }
42
43 link {
44     display: none
45 }
46
47 style {
48     display: none
49 }
50
51 script {
52     display: none
53 }
54
55 /* generic block-level elements */
56
57 body {
58     display: block;
59     margin: 8px
60 }
61
62 p {
63     display: block;
64     -webkit-margin-before: 1__qem;
65     -webkit-margin-after: 1__qem;
66     -webkit-margin-start: 0;
67     -webkit-margin-end: 0;
68 }
69
70 div {
71     display: block
72 }
73
74 layer {
75     display: block
76 }
77
78 article, aside, footer, header, hgroup, nav, section {
79     display: block
80 }
81
82 marquee {
83     display: inline-block;
84     overflow: -webkit-marquee
85 }
86
87 address {
88     display: block
89 }
90
91 blockquote {
92     display: block;
93     -webkit-margin-before: 1__qem;
94     -webkit-margin-after: 1em;
95     -webkit-margin-start: 40px;
96     -webkit-margin-end: 40px;
97 }
98
99 figcaption {
100     display: block
101 }
102
103 figure {
104     display: block;
105     -webkit-margin-before: 1em;
106     -webkit-margin-after: 1em;
107     -webkit-margin-start: 40px;
108     -webkit-margin-end: 40px;
109 }
110
111 q {
112     display: inline
113 }
114
115 q:before {
116     content: open-quote;
117 }
118
119 q:after {
120     content: close-quote;
121 }
122
123 center {
124     display: block;
125     /* special centering to be able to emulate the html4/netscape behaviour */
126     text-align: -webkit-center
127 }
128
129 hr {
130     display: block;
131     -webkit-margin-before: 0.5em;
132     -webkit-margin-after: 0.5em;
133     -webkit-margin-start: auto;
134     -webkit-margin-end: auto;
135     border-style: inset;
136     border-width: 1px
137 }
138
139 map {
140     display: inline
141 }
142
143 #if defined(ENABLE_DIALOG_ELEMENT) && ENABLE_DIALOG_ELEMENT
144 dialog:not([open]) { display: none; }
145 dialog {
146     position: absolute;
147     left: 0; right: 0;
148     margin: auto;
149     border: solid;
150     padding: 1em;
151     background: white;
152     color: black;
153 }
154 #endif
155
156 /* heading elements */
157
158 h1 {
159     display: block;
160     font-size: 2em;
161     -webkit-margin-before: 0.67__qem;
162     -webkit-margin-after: 0.67em;
163     -webkit-margin-start: 0;
164     -webkit-margin-end: 0;
165     font-weight: bold
166 }
167
168 :-webkit-any(article,aside,nav,section) h1 {
169     font-size: 1.5em;
170     -webkit-margin-before: 0.83__qem;
171     -webkit-margin-after: 0.83em;
172 }
173
174 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
175     font-size: 1.17em;
176     -webkit-margin-before: 1__qem;
177     -webkit-margin-after: 1em;
178 }
179
180 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
181     font-size: 1.00em;
182     -webkit-margin-before: 1.33__qem;
183     -webkit-margin-after: 1.33em;
184 }
185
186 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
187     font-size: .83em;
188     -webkit-margin-before: 1.67__qem;
189     -webkit-margin-after: 1.67em;
190 }
191
192 :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
193     font-size: .67em;
194     -webkit-margin-before: 2.33__qem;
195     -webkit-margin-after: 2.33em;
196 }
197
198 h2 {
199     display: block;
200     font-size: 1.5em;
201     -webkit-margin-before: 0.83__qem;
202     -webkit-margin-after: 0.83em;
203     -webkit-margin-start: 0;
204     -webkit-margin-end: 0;
205     font-weight: bold
206 }
207
208 h3 {
209     display: block;
210     font-size: 1.17em;
211     -webkit-margin-before: 1__qem;
212     -webkit-margin-after: 1em;
213     -webkit-margin-start: 0;
214     -webkit-margin-end: 0;
215     font-weight: bold
216 }
217
218 h4 {
219     display: block;
220     -webkit-margin-before: 1.33__qem;
221     -webkit-margin-after: 1.33em;
222     -webkit-margin-start: 0;
223     -webkit-margin-end: 0;
224     font-weight: bold
225 }
226
227 h5 {
228     display: block;
229     font-size: .83em;
230     -webkit-margin-before: 1.67__qem;
231     -webkit-margin-after: 1.67em;
232     -webkit-margin-start: 0;
233     -webkit-margin-end: 0;
234     font-weight: bold
235 }
236
237 h6 {
238     display: block;
239     font-size: .67em;
240     -webkit-margin-before: 2.33__qem;
241     -webkit-margin-after: 2.33em;
242     -webkit-margin-start: 0;
243     -webkit-margin-end: 0;
244     font-weight: bold
245 }
246
247 /* tables */
248
249 table {
250     display: table;
251     border-collapse: separate;
252     border-spacing: 2px;
253     border-color: gray
254 }
255
256 thead {
257     display: table-header-group;
258     vertical-align: middle;
259     border-color: inherit
260 }
261
262 tbody {
263     display: table-row-group;
264     vertical-align: middle;
265     border-color: inherit
266 }
267
268 tfoot {
269     display: table-footer-group;
270     vertical-align: middle;
271     border-color: inherit
272 }
273
274 /* for tables without table section elements (can happen with XHTML or dynamically created tables) */
275 table > tr {
276     vertical-align: middle;
277 }
278
279 col {
280     display: table-column
281 }
282
283 colgroup {
284     display: table-column-group
285 }
286
287 tr {
288     display: table-row;
289     vertical-align: inherit;
290     border-color: inherit
291 }
292
293 td, th {
294     display: table-cell;
295     vertical-align: inherit
296 }
297
298 th {
299     font-weight: bold
300 }
301
302 caption {
303     display: table-caption;
304     text-align: -webkit-center
305 }
306
307 /* lists */
308
309 ul, menu, dir {
310     display: block;
311     list-style-type: disc;
312     -webkit-margin-before: 1__qem;
313     -webkit-margin-after: 1em;
314     -webkit-margin-start: 0;
315     -webkit-margin-end: 0;
316     -webkit-padding-start: 40px
317 }
318
319 ol {
320     display: block;
321     list-style-type: decimal;
322     -webkit-margin-before: 1__qem;
323     -webkit-margin-after: 1em;
324     -webkit-margin-start: 0;
325     -webkit-margin-end: 0;
326     -webkit-padding-start: 40px
327 }
328
329 li {
330     display: list-item;
331     text-align: -webkit-match-parent;
332 }
333
334 ul ul, ol ul {
335     list-style-type: circle
336 }
337
338 ol ol ul, ol ul ul, ul ol ul, ul ul ul {
339     list-style-type: square
340 }
341
342 dd {
343     display: block;
344     -webkit-margin-start: 40px
345 }
346
347 dl {
348     display: block;
349     -webkit-margin-before: 1__qem;
350     -webkit-margin-after: 1em;
351     -webkit-margin-start: 0;
352     -webkit-margin-end: 0;
353 }
354
355 dt {
356     display: block
357 }
358
359 ol ul, ul ol, ul ul, ol ol {
360     -webkit-margin-before: 0;
361     -webkit-margin-after: 0
362 }
363
364 /* form elements */
365
366 form {
367     display: block;
368     margin-top: 0__qem;
369 }
370
371 label {
372     cursor: default;
373 }
374
375 legend {
376     display: block;
377     -webkit-padding-start: 2px;
378     -webkit-padding-end: 2px;
379     border: none
380 }
381
382 fieldset {
383     display: block;
384     -webkit-margin-start: 2px;
385     -webkit-margin-end: 2px;
386     -webkit-padding-before: 0.35em;
387     -webkit-padding-start: 0.75em;
388     -webkit-padding-end: 0.75em;
389     -webkit-padding-after: 0.625em;
390     border: 2px groove ThreeDFace
391 }
392
393 button {
394     -webkit-appearance: button;
395 }
396
397 /* Form controls don't go vertical. */
398 input, textarea, keygen, select, button, isindex, meter, progress {
399     -webkit-writing-mode: horizontal-tb !important;
400 }
401
402 input, textarea, keygen, select, button, isindex {
403     margin: 0__qem;
404     font: -webkit-small-control;
405     color: initial;
406     letter-spacing: normal;
407     word-spacing: normal;
408     line-height: normal;
409     text-transform: none;
410     text-indent: 0;
411     text-shadow: none;
412     display: inline-block;
413     text-align: start;
414 }
415
416 input[type="hidden"] {
417     display: none
418 }
419
420 input, input[type="password"], input[type="search"], isindex {
421     -webkit-appearance: textfield;
422     padding: 1px;
423     background-color: white;
424     border: 2px inset;
425     -webkit-rtl-ordering: logical;
426     -webkit-user-select: text;
427     cursor: auto;
428 }
429
430 input[type="search"] {
431     -webkit-appearance: searchfield;
432     box-sizing: border-box;
433 }
434
435 input::-webkit-textfield-decoration-container {
436     display: -webkit-box;
437     -webkit-box-align: center;
438     -webkit-user-modify: read-only !important;
439     content: none !important;
440 }
441
442 input[type="search"]::-webkit-textfield-decoration-container {
443     direction: ltr;
444 }
445
446 input[type="search"]::-webkit-search-cancel-button {
447     -webkit-appearance: searchfield-cancel-button;
448     display: block;
449     -webkit-box-flex: 0;
450     -webkit-user-modify: read-only !important;
451 }
452
453 input[type="search"]::-webkit-search-decoration {
454     -webkit-appearance: searchfield-decoration;
455     display: block;
456     -webkit-box-flex: 0;
457     -webkit-user-modify: read-only !important;
458 }
459
460 input[type="search"]::-webkit-search-results-decoration {
461     -webkit-appearance: searchfield-results-decoration;
462     display: block;
463     -webkit-box-flex: 0;
464     -webkit-user-modify: read-only !important;
465 }
466
467 input[type="search"]::-webkit-search-results-button {
468     -webkit-appearance: searchfield-results-button;
469     display: block;
470     -webkit-box-flex: 0;
471     -webkit-user-modify: read-only !important;
472 }
473
474 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
475 datalist {
476     display: none;
477 }
478 #endif
479
480 #if defined(ENABLE_INPUT_MULTIPLE_FIELDS_UI) && ENABLE_INPUT_MULTIPLE_FIELDS_UI
481 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
482 input[type="date"] {
483     -webkit-align-items: stretch;
484     display: -webkit-inline-flex;
485     font-family: monospace;
486     padding: 0;
487     -webkit-padding-start: 1px;
488 }
489 #endif
490 #if defined(ENABLE_INPUT_TYPE_DATETIME) && ENABLE_INPUT_TYPE_DATETIME
491 input[type="datetime"] {
492     -webkit-align-items: stretch;
493     display: -webkit-inline-flex;
494     font-family: monospace;
495     padding: 0;
496     -webkit-padding-start: 1px;
497 }
498 #endif
499 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
500 input[type="datetime-local"] {
501     -webkit-align-items: stretch;
502     display: -webkit-inline-flex;
503     font-family: monospace;
504     padding: 0;
505     -webkit-padding-start: 1px;
506 }
507 #endif
508 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
509 input[type="month"] {
510     -webkit-align-items: stretch;
511     display: -webkit-inline-flex;
512     font-family: monospace;
513     padding: 0;
514     -webkit-padding-start: 1px;
515 }
516 #endif
517 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
518 input[type="time"] {
519     -webkit-align-items: stretch;
520     display: -webkit-inline-flex;
521     font-family: monospace;
522     padding: 0;
523     -webkit-padding-start: 1px;
524 }
525 #endif
526 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
527 input[type="week"] {
528     -webkit-align-items: stretch;
529     display: -webkit-inline-flex;
530     font-family: monospace;
531     padding: 0;
532     -webkit-padding-start: 1px;
533 }
534 #endif
535
536 input::-webkit-datetime-edit {
537     -webkit-flex: 1;
538     -webkit-user-modify: read-only !important;
539     display: inline-block;
540     white-space: pre;
541 }
542
543 input::-webkit-datetime-edit-ampm-field,
544 input::-webkit-datetime-edit-day-field,
545 input::-webkit-datetime-edit-hour-field,
546 input::-webkit-datetime-edit-millisecond-field,
547 input::-webkit-datetime-edit-minute-field,
548 input::-webkit-datetime-edit-month-field,
549 input::-webkit-datetime-edit-second-field,
550 input::-webkit-datetime-edit-week-field,
551 input::-webkit-datetime-edit-year-field {
552     -webkit-user-modify: read-only !important;
553     border: none;
554     display: inline-block;
555     margin: 1px;
556     text-align: center;
557 }
558
559 /* Remove focus ring from fields and use highlight color */
560 input::-webkit-datetime-edit-ampm-field:focus,
561 input::-webkit-datetime-edit-day-field:focus,
562 input::-webkit-datetime-edit-hour-field:focus,
563 input::-webkit-datetime-edit-millisecond-field:focus,
564 input::-webkit-datetime-edit-minute-field:focus,
565 input::-webkit-datetime-edit-month-field:focus,
566 input::-webkit-datetime-edit-second-field:focus,
567 input::-webkit-datetime-edit-week-field:focus,
568 input::-webkit-datetime-edit-year-field:focus {
569     background-color: highlight;
570     color: highlighttext;
571     outline: none;
572 }
573
574 /* This selector is used when step >= 3600 second but format contains minute field. */
575 input::-webkit-datetime-edit-minute-field[readonly] {
576     color: GrayText;
577 }
578
579 /* This selector is used when step >= 60 second but format contains second field. */
580 input::-webkit-datetime-edit-second-field[readonly] {
581     color: GrayText;
582 }
583
584 input::-webkit-datetime-edit-text {
585     -webkit-user-modify: read-only !important;
586     display: inline-block;
587 }
588
589 input::-webkit-date-and-time-container {
590     -webkit-align-items: center;
591     -webkit-flex: 1;
592     display: -webkit-inline-flex;
593 }
594
595 input[type="date"]::-webkit-inner-spin-button,
596 input[type="datetime"]::-webkit-inner-spin-button,
597 input[type="datetime-local"]::-webkit-inner-spin-button,
598 input[type="month"]::-webkit-inner-spin-button,
599 input[type="time"]::-webkit-inner-spin-button,
600 input[type="week"]::-webkit-inner-spin-button {
601     display: inline-block;
602     position: static;
603     -webkit-margin-start: 2px;
604 }
605
606 #else
607
608 #if defined(ENABLE_INPUT_TYPE_DATE) && ENABLE_INPUT_TYPE_DATE
609 input[type="date"] {
610     -webkit-align-items: center;
611     -webkit-appearance: menulist-button;
612     display: -webkit-inline-flex;
613     overflow: hidden;
614     width: 10em;
615 }
616 #endif
617 #if defined(ENABLE_INPUT_TYPE_DATETIME) && ENABLE_INPUT_TYPE_DATETIME
618 input[type="datetime"] {
619     -webkit-align-items: center;
620     -webkit-appearance: menulist-button;
621     display: -webkit-inline-flex;
622     overflow: hidden;
623     width: 10em;
624 }
625 #endif
626 #if defined(ENABLE_INPUT_TYPE_DATETIMELOCAL) && ENABLE_INPUT_TYPE_DATETIMELOCAL
627 input[type="datetime-local"] {
628     -webkit-align-items: center;
629     -webkit-appearance: menulist-button;
630     display: -webkit-inline-flex;
631     overflow: hidden;
632     width: 10em;
633 }
634 #endif
635 #if defined(ENABLE_INPUT_TYPE_MONTH) && ENABLE_INPUT_TYPE_MONTH
636 input[type="month"] {
637     -webkit-align-items: center;
638     -webkit-appearance: menulist-button;
639     display: -webkit-inline-flex;
640     overflow: hidden;
641     width: 10em;
642 }
643 #endif
644 #if defined(ENABLE_INPUT_TYPE_TIME) && ENABLE_INPUT_TYPE_TIME
645 input[type="time"] {
646     -webkit-align-items: center;
647     -webkit-appearance: menulist-button;
648     display: -webkit-inline-flex;
649     overflow: hidden;
650     width: 10em;
651 }
652 #endif
653 #if defined(ENABLE_INPUT_TYPE_WEEK) && ENABLE_INPUT_TYPE_WEEK
654 input[type="week"] {
655     -webkit-align-items: center;
656     -webkit-appearance: menulist-button;
657     display: -webkit-inline-flex;
658     overflow: hidden;
659     width: 10em;
660 }
661 #endif
662
663 input::-webkit-date-and-time-value {
664     margin: 1px 24px 1px 4px;
665     white-space: pre;
666 }
667 #endif
668
669 input::-webkit-inner-spin-button {
670     -webkit-appearance: inner-spin-button;
671     display: block;
672     position: relative;
673     cursor: default;
674     /* This height property is ignored for input type "number" and others which
675      * use RenderTextControlSingleLine as renderer which sets height of spin
676      * button in layout(). */
677     height: 1.5em;
678     vertical-align: top;
679     -webkit-box-flex: 0;
680     -webkit-user-select: none;
681     -webkit-user-modify: read-only !important;
682 }
683
684 #if defined(ENABLE_INPUT_SPEECH) && ENABLE_INPUT_SPEECH
685 input::-webkit-input-speech-button {
686     -webkit-appearance: -webkit-input-speech-button;
687     display: block;
688     vertical-align: top;
689     -webkit-box-flex: 0;
690     -webkit-user-modify: read-only !important;
691 }
692 #endif
693
694 keygen, select {
695     border-radius: 5px;
696 }
697
698 keygen::-webkit-keygen-select {
699     margin: 0px;
700 }
701
702 textarea {
703     -webkit-appearance: textarea;
704     background-color: white;
705     border: 1px solid;
706     -webkit-rtl-ordering: logical;
707     -webkit-user-select: text;
708     -webkit-box-orient: vertical;
709     resize: auto;
710     cursor: auto;
711     padding: 2px;
712     white-space: pre-wrap;
713     word-wrap: break-word;
714 }
715
716 ::-webkit-input-placeholder {
717     -webkit-text-security: none;
718     color: darkGray;
719     display: block !important;
720     pointer-events: none !important;
721 }
722
723 input::-webkit-input-placeholder, isindex::-webkit-input-placeholder {
724     white-space: pre;
725     word-wrap: normal;
726     overflow: hidden;
727     -webkit-user-modify: read-only !important;
728 }
729
730 input[type="password"] {
731     -webkit-text-security: disc !important;
732 }
733
734 input[type="hidden"], input[type="image"], input[type="file"] {
735     -webkit-appearance: initial;
736     padding: initial;
737     background-color: initial;
738     border: initial;
739 }
740
741 input[type="file"] {
742     -webkit-box-align: baseline;
743     color: inherit;
744     text-align: start !important;
745 }
746
747 input:-webkit-autofill {
748     background-color: #FAFFBD !important;
749     background-image:none !important;
750     color: #000000 !important;
751 }
752
753 input[type="radio"], input[type="checkbox"] {
754     margin: 3px 0.5ex;
755     padding: initial;
756     background-color: initial;
757     border: initial;
758 }
759
760 input[type="button"], input[type="submit"], input[type="reset"] {
761     -webkit-appearance: push-button;
762     white-space: pre
763 }
764
765 input[type="file"]::-webkit-file-upload-button {
766     -webkit-appearance: push-button;
767     -webkit-user-modify: read-only !important;
768     white-space: nowrap;
769     margin: 0;
770     font-size: inherit;
771 }
772
773 input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
774     -webkit-box-align: center;
775     text-align: center;
776     cursor: default;
777     color: ButtonText;
778     padding: 2px 6px 3px 6px;
779     border: 2px outset ButtonFace;
780     background-color: ButtonFace;
781     box-sizing: border-box
782 }
783
784 input[type="range"] {
785     -webkit-appearance: slider-horizontal;
786     padding: initial;
787     border: initial;
788     margin: 2px;
789     color: #909090;
790 }
791
792 input[type="range"]::-webkit-slider-container, input[type="range"]::-webkit-media-slider-container {
793     -webkit-flex: 1;
794     min-width: 0;
795
796     box-sizing: border-box;
797     -webkit-user-modify: read-only !important;
798     display: -webkit-flex;
799     -webkit-align-contents: center;
800 }
801
802 input[type="range"]::-webkit-slider-runnable-track {
803     -webkit-flex: 1;
804     min-width: 0;
805     -webkit-align-self: center;
806
807     box-sizing: border-box;
808     -webkit-user-modify: read-only !important;
809     display: block;
810 }
811
812 input[type="range"]::-webkit-slider-thumb, input[type="range"]::-webkit-media-slider-thumb {
813     -webkit-appearance: sliderthumb-horizontal;
814     box-sizing: border-box;
815     -webkit-user-modify: read-only !important;
816     display: block;
817 }
818
819 input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled,
820 input[type="file"]:disabled::-webkit-file-upload-button, button:disabled,
821 select:disabled, keygen:disabled, optgroup:disabled, option:disabled,
822 select[disabled]>option {
823     color: GrayText
824 }
825
826 input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active, input[type="file"]:active::-webkit-file-upload-button, button:active {
827     border-style: inset
828 }
829
830 input[type="button"]:active:disabled, input[type="submit"]:active:disabled, input[type="reset"]:active:disabled, input[type="file"]:active:disabled::-webkit-file-upload-button, button:active:disabled {
831     border-style: outset
832 }
833
834 area, param {
835     display: none
836 }
837
838 input[type="checkbox"] {
839     -webkit-appearance: checkbox;
840     box-sizing: border-box;
841 }
842
843 input[type="radio"] {
844     -webkit-appearance: radio;
845     box-sizing: border-box;
846 }
847
848 #if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
849
850 input[type="color"] {
851     -webkit-appearance: square-button;
852     width: 44px;
853     height: 23px;
854 }
855
856 input[type="color"]::-webkit-color-swatch-wrapper {
857     display:-webkit-box;
858     padding: 4px 2px;
859     box-sizing: border-box;
860     -webkit-user-modify: read-only !important;
861     width: 100%;
862     height: 100%
863 }
864
865 input[type="color"]::-webkit-color-swatch {
866     background-color: #000000;
867     border: 1px solid #777777;
868     -webkit-box-flex: 1;
869     -webkit-user-modify: read-only !important;
870 }
871
872 #if defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
873
874 input[type="color"][list] {
875     -webkit-appearance: menulist;
876     width: 88px;
877     height: 23px;
878 }
879
880 input[type="color"][list]::-webkit-color-swatch-wrapper {
881     padding-left: 8px;
882     padding-right: 24px;
883 }
884
885 input[type="color"][list]::-webkit-color-swatch {
886     border-color: #000000;
887 }
888
889 #endif // defined(ENABLE_DATALIST_ELEMENT) && ENABLE_DATALIST_ELEMENT
890
891 #endif // defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
892
893 #if defined(ENABLE_CALENDAR_PICKER) && ENABLE_CALENDAR_PICKER
894 input::-webkit-calendar-picker-indicator {
895     width: 0.66em;
896     height: 0.66em;
897     padding: 0.17em 0.34em;
898     -webkit-user-modify: read-only !important;
899 }
900
901 input::-webkit-calendar-picker-indicator:hover {
902     background-color: #eee;
903 }
904 #endif // ENABLE_CALENDAR_PICKER
905
906 select {
907     -webkit-appearance: menulist;
908     box-sizing: border-box;
909     -webkit-box-align: center;
910     border: 1px solid;
911     white-space: pre;
912     -webkit-rtl-ordering: logical;
913     color: black;
914     background-color: white;
915     cursor: default;
916 }
917
918 select[size],
919 select[multiple],
920 select[size][multiple] {
921     -webkit-appearance: listbox;
922     -webkit-box-align: start;
923     border: 1px inset gray;
924     border-radius: initial;
925     white-space: initial;
926 }
927
928 select[size="0"],
929 select[size="1"] {
930     -webkit-appearance: menulist;
931     -webkit-box-align: center;
932     border: 1px solid;
933     border-radius: 5px;
934     white-space: pre;
935 }
936
937 optgroup {
938     font-weight: bolder;
939 }
940
941 option {
942     font-weight: normal;
943 }
944
945 output {
946     display: inline;
947 }
948
949 /* form validation message bubble */
950
951 ::-webkit-validation-bubble {
952     display: inline-block;
953     z-index: 2147483647;
954     position: absolute;
955     opacity: 0.95;
956     line-height: 0;
957     margin: 0;
958     -webkit-text-security: none;
959     -webkit-transition: opacity 05.5s ease;
960     -webkit-user-modify: read-only !important;
961 }
962
963 ::-webkit-validation-bubble-message {
964     display: -webkit-box;
965     position: relative;
966     top: -4px;
967     font: message-box;
968     color: black;
969     min-width: 50px;
970     max-width: 200px;
971     border: solid 2px #400;
972     background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
973     padding: 8px;
974     border-radius: 8px;
975     -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
976         inset -2px -2px 1px #d0c4c4,
977         inset 2px 2px 1px white;
978     -webkit-user-modify: read-only !important;
979     line-height: normal;
980     white-space: normal;
981     z-index: 2147483644;
982 }
983
984 ::-webkit-validation-bubble-text-block {
985     -webkit-box-flex: 1;
986     -webkit-user-modify: read-only !important;
987 }
988
989 ::-webkit-validation-bubble-heading {
990     font-weight: bold;
991     -webkit-user-modify: read-only !important;
992 }
993
994 ::-webkit-validation-bubble-arrow {
995     display: inline-block;
996     position: relative;
997     left: 32px;
998     width: 16px;
999     height: 16px;
1000     background-color: #f8ecec;
1001     border-width: 2px 0 0 2px;
1002     border-style: solid;
1003     border-color: #400;
1004     box-shadow: inset 2px 2px 1px white;
1005     -webkit-transform-origin: 0 0;
1006     -webkit-transform: rotate(45deg);
1007     -webkit-user-modify: read-only !important;
1008     z-index: 2147483645;
1009 }
1010
1011 ::-webkit-validation-bubble-arrow-clipper {
1012     display: block;
1013     overflow: hidden;
1014     height: 16px;
1015     -webkit-user-modify: read-only !important;
1016 }
1017
1018 #if defined(ENABLE_METER_ELEMENT) && ENABLE_METER_ELEMENT
1019 /* meter */
1020
1021 meter {
1022     -webkit-appearance: meter;
1023     box-sizing: border-box;
1024     display: inline-block;
1025     height: 1em;
1026     width: 5em;
1027     vertical-align: -0.2em;
1028 }
1029
1030 meter::-webkit-meter-inner-element {
1031     -webkit-appearance: inherit;
1032     box-sizing: inherit;
1033     -webkit-user-modify: read-only !important;
1034     height: 100%;
1035     width: 100%;
1036 }
1037
1038 meter::-webkit-meter-bar {
1039     background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
1040     height: 100%;
1041     width: 100%;
1042     -webkit-user-modify: read-only !important;
1043     box-sizing: border-box;
1044 }
1045
1046 meter::-webkit-meter-optimum-value {
1047     background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
1048     height: 100%;
1049     -webkit-user-modify: read-only !important;
1050     box-sizing: border-box;
1051 }
1052
1053 meter::-webkit-meter-suboptimum-value {
1054     background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
1055     height: 100%;
1056     -webkit-user-modify: read-only !important;
1057     box-sizing: border-box;
1058 }
1059
1060 meter::-webkit-meter-even-less-good-value {
1061     background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
1062     height: 100%;
1063     -webkit-user-modify: read-only !important;
1064     box-sizing: border-box;
1065 }
1066 #endif
1067
1068 #if defined(ENABLE_PROGRESS_ELEMENT) && ENABLE_PROGRESS_ELEMENT
1069 /* progress */
1070
1071 progress {
1072     -webkit-appearance: progress-bar;
1073     box-sizing: border-box;
1074     display: inline-block;
1075     height: 1em;
1076     width: 10em;
1077     vertical-align: -0.2em;
1078 }
1079
1080 progress::-webkit-progress-inner-element {
1081     -webkit-appearance: inherit;
1082     box-sizing: inherit;
1083     -webkit-user-modify: read-only;
1084     height: 100%;
1085     width: 100%;
1086 }
1087
1088 progress::-webkit-progress-bar {
1089     background-color: gray;
1090     height: 100%;
1091     width: 100%;
1092     -webkit-user-modify: read-only !important;
1093     box-sizing: border-box;
1094 }
1095
1096 progress::-webkit-progress-value {
1097     background-color: green;
1098     height: 100%;
1099     width: 50%; /* should be removed later */
1100     -webkit-user-modify: read-only !important;
1101     box-sizing: border-box;
1102 }
1103 #endif
1104
1105 /* inline elements */
1106
1107 img {
1108     display: inline-block;
1109 }
1110
1111 u, ins {
1112     text-decoration: underline
1113 }
1114
1115 strong, b {
1116     font-weight: bold
1117 }
1118
1119 i, cite, em, var, address, dfn {
1120     font-style: italic
1121 }
1122
1123 tt, code, kbd, samp {
1124     font-family: monospace
1125 }
1126
1127 pre, xmp, plaintext, listing {
1128     display: block;
1129     font-family: monospace;
1130     white-space: pre;
1131     margin: 1__qem 0
1132 }
1133
1134 mark {
1135     background-color: yellow;
1136     color: black
1137 }
1138
1139 big {
1140     font-size: larger
1141 }
1142
1143 small {
1144     font-size: smaller
1145 }
1146
1147 s, strike, del {
1148     text-decoration: line-through
1149 }
1150
1151 sub {
1152     vertical-align: sub;
1153     font-size: smaller
1154 }
1155
1156 sup {
1157     vertical-align: super;
1158     font-size: smaller
1159 }
1160
1161 nobr {
1162     white-space: nowrap
1163 }
1164
1165 /* states */
1166
1167 :focus { 
1168     outline: auto 5px -webkit-focus-ring-color
1169 }
1170
1171 /* Read-only text fields do not show a focus ring but do still receive focus */
1172 html:focus, body:focus, input[readonly]:focus { 
1173     outline: none
1174 }
1175
1176 applet:focus, embed:focus, iframe:focus, object:focus {
1177     outline: none
1178 }
1179   
1180 input:focus, textarea:focus, isindex:focus, keygen:focus, select:focus {
1181     outline-offset: -2px
1182 }
1183
1184 input[type="button"]:focus,
1185 input[type="checkbox"]:focus,
1186 input[type="file"]:focus,
1187 input[type="hidden"]:focus,
1188 input[type="image"]:focus,
1189 input[type="radio"]:focus,
1190 input[type="reset"]:focus,
1191 input[type="search"]:focus,
1192 input[type="submit"]:focus,
1193 input[type="file"]:focus::-webkit-file-upload-button {
1194     outline-offset: 0
1195 }
1196     
1197 a:-webkit-any-link {
1198     color: -webkit-link;
1199     text-decoration: underline;
1200     cursor: auto;
1201 }
1202
1203 a:-webkit-any-link:active {
1204     color: -webkit-activelink
1205 }
1206
1207 /* HTML5 ruby elements */
1208
1209 ruby, rt {
1210     text-indent: 0; /* blocks used for ruby rendering should not trigger this */
1211 }
1212
1213 rt {
1214     line-height: normal;
1215     -webkit-text-emphasis: none;
1216 }
1217
1218 ruby > rt {
1219     display: block;
1220     font-size: 50%;
1221     text-align: start;
1222 }
1223
1224 ruby > rp {
1225     display: none;
1226 }
1227
1228 /* other elements */
1229
1230 noframes {
1231     display: none
1232 }
1233
1234 frameset, frame {
1235     display: block
1236 }
1237
1238 frameset {
1239     border-color: inherit
1240 }
1241
1242 iframe:not([seamless]) {
1243     border: 2px inset
1244 }
1245
1246 iframe[seamless] {
1247     display: block
1248 }
1249
1250 details {
1251     display: block
1252 }
1253
1254 summary {
1255     display: block
1256 }
1257
1258 summary::-webkit-details-marker {
1259     display: inline-block;
1260     width: 0.66em;
1261     height: 0.66em;
1262     margin-right: 0.4em;
1263 }
1264
1265 #if defined(ENABLE_TEMPLATE_ELEMENT) && ENABLE_TEMPLATE_ELEMENT
1266 template {
1267     display: none
1268 }
1269 #endif
1270
1271 bdi, output {
1272     unicode-bidi: -webkit-isolate;
1273 }
1274
1275 bdo {
1276     unicode-bidi: bidi-override;
1277 }
1278
1279 /* page */
1280
1281 @page {
1282     /* FIXME: Define the right default values for page properties. */
1283     size: auto;
1284     margin: auto;
1285     padding: 0px;
1286     border-width: 0px;
1287 }
1288
1289 /* noscript is handled internally, as it depends on settings. */
1290