mozilla

Compare Revisions

Template:CustomCSS

Change Revisions

Revision 385631:

Revision 385631 by Sheppy on

Revision 385637:

Revision 385637 by Sheppy on

Title:
Template:CustomCSS
Template:CustomCSS
Slug:
Template:CustomCSS
Template:CustomCSS
Tags:
"css", "ks-fixed"
"css", "ks-fixed"
Content:

Revision 385631
Revision 385637
t7    @charset "utf-8"; /* This is a special template used as a cust7    @charset "utf-8"; /* This is a special template used as a cus
>tom CSS for MDN. *//* When editing this stylesheet, please be car>tom CSS for MDN. *//* When editing this stylesheet, please be car
>eful of different writing direction pages like: https://developer>eful of different writing direction pages like: https://developer
>.mozilla.org/he/docs/HTML If you add a custom CSS class, please t>.mozilla.org/he/docs/HTML If you add a custom CSS class, please t
>ry one of the following. 1, Report to the (evil) leader. 2, Write>ry one of the following. 1, Report to the (evil) leader. 2, Write
> a description about the class that you have added to -- https://> a description about the class that you have added to -- https://
>developer.mozilla.org/en-US/docs/Project:Custom_CSS_Classes -- */>developer.mozilla.org/en-US/docs/Project:Custom_CSS_Classes -- */
> /* Iframe for live sample centered (Test) */ .centered iframe { > /* Iframe for live sample centered (Test) */ .centered iframe { 
>display:block;margin:0px auto;border:none; } /* Simulate two colu>display:block;margin:0px auto;border:none; } /* Simulate two colu
>mns for landing page */ .landing { display: table-row } .section >mns for landing page */ .landing { display: table-row } .section 
>{ display: table-cell; width:50% } /* Multi-column boxes for list>{ display: table-cell; width:50% } /* Multi-column boxes for list
>s of longer links; this will adapt based on screen width */ .mult>s of longer links; this will adapt based on screen width */ .mult
>iColumnList { column-width:250px; -moz-column-width:250px; -webki>iColumnList { column-width:250px; -moz-column-width:250px; -webki
>t-column-width:250px; -o-column-width:250px; -ms-column-width:250>t-column-width:250px; -o-column-width:250px; -ms-column-width:250
>px;} .multiColumnList li { line-height: 1.5; list-style-type: non>px;} .multiColumnList li { line-height: 1.5; list-style-type: non
>e; padding-left: 0px; page-break-inside: avoid; } /* Multi-column>e; padding-left: 0px; page-break-inside: avoid; } /* Multi-column
> box for smaller text */ .horizFlexboxContainer { display: flex; > box for smaller text */ .horizFlexboxContainer { display: flex; 
>display: -webkit-flex; flex-flow: column nowrap; -webkit-flex-flo>display: -webkit-flex; flex-flow: column nowrap; -webkit-flex-flo
>w: column nowrap; justify-content: center; -webkit-justify-conten>w: column nowrap; justify-content: center; -webkit-justify-conten
>t: center; align-content: center; -webkit-align-content: center; >t: center; align-content: center; -webkit-align-content: center; 
>align-items: center; -webkit-align-items: center; flex-direction:>align-items: center; -webkit-align-items: center; flex-direction:
> column; -webkit-flex-direction: column; } div.smallTextMultiColu> column; -webkit-flex-direction: column; } div.smallTextMultiColu
>mnBoxHeading { background-color: #aac; border-radius: 10px 10px 0>mnBoxHeading { background-color: #aac; border-radius: 10px 10px 0
>px 0px; border: 2px solid #ccc; order: 1; -webkit-order: 1; width>px 0px; border: 2px solid #ccc; order: 1; -webkit-order: 1; width
>: 75%; padding: 10px; flex: 0 1 auto; -webkit-flex: 0 1 auto; fon>: 75%; padding: 10px; flex: 0 1 auto; -webkit-flex: 0 1 auto; fon
>t-weight: bold; } div.smallTextMultiColumnBoxList { border: 2px s>t-weight: bold; } div.smallTextMultiColumnBoxList { border: 2px s
>olid #ccc; background-color: #ddf; border-top: 0px; border-radius>olid #ccc; background-color: #ddf; border-top: 0px; border-radius
>: 0px 0px 10px 10px; width: 75%; padding: 10px; order: 2; -webkit>: 0px 0px 10px 10px; width: 75%; padding: 10px; order: 2; -webkit
>-order: 2; flex: 0 1 auto; -webkit-flex: 0 1 auto; } div.smallTex>-order: 2; flex: 0 1 auto; -webkit-flex: 0 1 auto; } div.smallTex
>tMultiColumnBoxList ul { column-width:100px; -moz-column-width:10>tMultiColumnBoxList ul { column-width:100px; -moz-column-width:10
>0px; -webkit-column-width:100px; -o-column-width:100px; -ms-colum>0px; -webkit-column-width:100px; -o-column-width:100px; -ms-colum
>n-width:100px; } div.smallTextMultiColumnBoxList li { list-style->n-width:100px; } div.smallTextMultiColumnBoxList li { list-style-
>type: none; padding-left: 0px; font-size: 80%; } /* For ending "t>type: none; padding-left: 0px; font-size: 80%; } /* For ending "t
>ext alongside images" blocks; add this class to the first block t>ext alongside images" blocks; add this class to the first block t
>hat shouldn't be next to the image */ .endImageWrapping { clear: >hat shouldn't be next to the image */ .endImageWrapping { clear: 
>both; } /* Fancy Table of content for main pages of tutorial*/ .f>both; } /* Fancy Table of content for main pages of tutorial*/ .f
>ancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; columns: 1>ancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; columns: 1
>8em; margin-bottom: 1em } .fancyTOC .button { display: block; mar>8em; margin-bottom: 1em } .fancyTOC .button { display: block; mar
>gin-right: 0; margin-bottom: .25em; background-color: #A24C4C; co>gin-right: 0; margin-bottom: .25em; background-color: #A24C4C; co
>lor: #fff; font-size: 1.5em; line-height: 1.5 } .fancyTOC a::befo>lor: #fff; font-size: 1.5em; line-height: 1.5 } .fancyTOC a::befo
>re { counter-increment: fancyTOC; content: counter(fancyTOC) ". ">re { counter-increment: fancyTOC; content: counter(fancyTOC) ". "
> } .fancyTOC a::after { content: ' »' } .fancyTOC .button:hover, > } .fancyTOC a::after { content: ' »' } .fancyTOC .button:hover, 
>.fancyTOC .button:focus, .fancyTOC .button:active { background-co>.fancyTOC .button:focus, .fancyTOC .button:active { background-co
>lor: #C26C6C } /* In index, dim obsolete, deprecated or non-stand>lor: #C26C6C } /* In index, dim obsolete, deprecated or non-stand
>ard element instead of striking through them */ s.deprecatedEleme>ard element instead of striking through them */ s.deprecatedEleme
>nt, s.obsoleteElement, s.nonStdElement { text-decoration: none; o>nt, s.obsoleteElement, s.nonStdElement { text-decoration: none; o
>pacity: .3 } /* Add widgeted index, here adding an HTML5 badge as>pacity: .3 } /* Add widgeted index, here adding an HTML5 badge as
> the bullet of the li element if class="html5" */ div.index.widge> the bullet of the li element if class="html5" */ div.index.widge
>ted { -webkit-column-width: 10em; -moz-column-width: 10em; column>ted { -webkit-column-width: 10em; -moz-column-width: 10em; column
>s: 10em } div.index.widgeted li { padding-left: 18px } div.index.>s: 10em } div.index.widgeted li { padding-left: 18px } div.index.
>widgeted li.html5 { background-image: url("/files/3855/HTML5_Badg>widgeted li.html5 { background-image: url("/files/3855/HTML5_Badg
>e_16.png"); background-repeat: no-repeat; background-position: le>e_16.png"); background-repeat: no-repeat; background-position: le
>ft 4px } [dir="rtl"] div.index.widgeted li { padding-right: 18px >ft 4px } [dir="rtl"] div.index.widgeted li { padding-right: 18px 
>} [dir="rtl"] div.index.widgeted li.html5 { background-image: url>} [dir="rtl"] div.index.widgeted li.html5 { background-image: url
>("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat;>("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat;
> background-position: right 4px } [dir="rtl"] div.index.widgeted > background-position: right 4px } [dir="rtl"] div.index.widgeted 
>span { padding-right:24px } /* Quicknav template styles : https:/>span { padding-right:24px } /* Quicknav template styles : https:/
>/developer.mozilla.org/en-US/docs/Template:quicknav -------- */ #>/developer.mozilla.org/en-US/docs/Template:quicknav -------- */ #
>wikiArticle { position: relative; } .quicknav { position: fixed; >wikiArticle { position: relative; } .quicknav { position: fixed; 
>top: 237px; left: 33px; background: #FFF; z-index: 1 } .quicknav >top: 237px; left: 33px; background: #FFF; z-index: 1 } .quicknav 
>dl { max-width: 0; max-height: 300px; overflow: auto; margin: 0; >dl { max-width: 0; max-height: 300px; overflow: auto; margin: 0; 
>padding: 10px 0; border: 1px solid transparent; border-left: none>padding: 10px 0; border: 1px solid transparent; border-left: none
> -webkit-transition: border .5s ease .1s, max-width .5s ease .1s,> -webkit-transition: border .5s ease .1s, max-width .5s ease .1s,
> padding .5s linear .1s; -moz-transition: border .5s ease .1s, ma> padding .5s linear .1s; -moz-transition: border .5s ease .1s, ma
>x-width .5s ease .1s, padding .5s linear .1s; -ms-transition: bor>x-width .5s ease .1s, padding .5s linear .1s; -ms-transition: bor
>der .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;>der .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;
> -o-transition: border .5s ease .1s, max-width .5s ease .1s, padd> -o-transition: border .5s ease .1s, max-width .5s ease .1s, padd
>ing .5s linear .1s; transition: border .5s ease .1s, max-width .5>ing .5s linear .1s; transition: border .5s ease .1s, max-width .5
>s ease .1s, padding .5s linear .1s } .quicknav dt, .quicknav dd {>s ease .1s, padding .5s linear .1s } .quicknav dt, .quicknav dd {
> margin: 0; padding: 0; white-space: nowrap } .quicknav dt { font> margin: 0; padding: 0; white-space: nowrap } .quicknav dt { font
>-weight: 700 } .quicknav dd + dt { margin-top: .5em } .quicknav:h>-weight: 700 } .quicknav dd + dt { margin-top: .5em } .quicknav:h
>over dl { max-width: 300px; padding: 10px 20px 10px 10px; border->over dl { max-width: 300px; padding: 10px 20px 10px 10px; border-
>color: #ECECE7 } .quicknav .showme { display: block; position: ab>color: #ECECE7 } .quicknav .showme { display: block; position: ab
>solute; top: 10px; left: -31px; width: 30px; font: 2em sans-serif>solute; top: 10px; left: -31px; width: 30px; font: 2em sans-serif
>; color: #CCC; text-align: center; background: #FFF; border-radiu>; color: #CCC; text-align: center; background: #FFF; border-radiu
>s: 5px 0 0 5px; border: 1px solid #ECECE7; border-right: none } .>s: 5px 0 0 5px; border: 1px solid #ECECE7; border-right: none } .
>quicknav:hover .showme { color: #333; } .cleared { clear: both } >quicknav:hover .showme { color: #333; } .cleared { clear: both } 
>/* This style has problem ! Style attribute of BR element is not >/* This style has problem ! Style attribute of BR element is not 
>work in Kuma */ .clearLeft { clear: left } /* ltr page only ? */ >work in Kuma */ .clearLeft { clear: left } /* ltr page only ? */ 
>span.comment { display:none; } #wikiArticle .breadcrumbs { displa>span.comment { display:none; } #wikiArticle .breadcrumbs { displa
>y: block; margin-bottom: 1em } /* The HTML5 landing page has some>y: block; margin-bottom: 1em } /* The HTML5 landing page has some
> specificity */ /* table.html5ArticleToc { border-width: 5px }*/ > specificity */ /* table.html5ArticleToc { border-width: 5px }*/ 
>table.html5ArticleToc { border-style: none; background-color: tra>table.html5ArticleToc { border-style: none; border-width: 0px; ba
>nsparent; border-color: transparent; } .html5ArticleToc thead th >ckground-color: transparent; border-color: transparent; width: 10
>{ padding: .5em 1em } .html5ArticleToc tbody td { vertical-align:>0%;} .html5ArticleToc thead th { padding: .5em 1em } .html5Articl
> middle } .html5ArticleToc ul { margin: 0; padding: 0 } .html5Art>eToc tbody td { vertical-align: middle } .html5ArticleToc ul { ma
>icleToc ul li { display: inline; margin: 0 .25em } /* The syntax >rgin: 0; padding: 0 } .html5ArticleToc ul li { display: inline; m
>box: the first one is now used anywhere (DOM, JS, CSS, ...) The t>argin: 0 .25em } /* The syntax box: the first one is now used any
>woparts is used for CSS properties */ pre.syntaxbox { border: 2px>where (DOM, JS, CSS, ...) The twoparts is used for CSS properties
> solid #ccc; margin-bottom: 1em; background-color: #ffe; border-r> */ pre.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; b
>adius: 10px; } pre.twopartsyntaxbox { border: 2px solid #bbb; mar>ackground-color: #ffe; border-radius: 10px; } pre.twopartsyntaxbo
>gin-bottom: 0px; background-color: #ffe; border-radius: 10px 10px>x { border: 2px solid #bbb; margin-bottom: 0px; background-color:
> 0px 0px; } pre.twopartsyntaxbox + pre { border: 2px solid #bbb; > #ffe; border-radius: 10px 10px 0px 0px; } pre.twopartsyntaxbox +
>border-radius: 0 0 10px 10px; border-top: none; margin-top: 0 } t> pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; bord
>able.withoutBorder, table.withoutBorder td, table.withoutBorder t>er-top: none; margin-top: 0 } table.withoutBorder, table.withoutB
>r, table.withoutBorder th { border: none } td.horizontalLine { bo>order td, table.withoutBorder tr, table.withoutBorder th { border
>rder-left: none } td.column { border-bottom: none } td.bottomPart>: none } td.horizontalLine { border-left: none } td.column { bord
> { border-top: none } td.verticalText { width: 3em; -webkit-trans>er-bottom: none } td.bottomPart { border-top: none } td.verticalT
>form: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transfor>ext { width: 3em; -webkit-transform: rotate(-90deg); -moz-transfo
>m: rotate(-90deg); transform: rotate(-90deg) } table.blockTable {>rm: rotate(-90deg); -o-transform: rotate(-90deg); transform: rota
> border-collapse: collapse } table.blockTable, table.blockTable t>te(-90deg) } table.blockTable { border-collapse: collapse } table
>d { margin: 1px; padding: 1px } table.blockTable .verticalColumn >.blockTable, table.blockTable td { margin: 1px; padding: 1px } ta
>{ border-left: none; border-right: none } /* The index page for H>ble.blockTable .verticalColumn { border-left: none; border-right:
>TML / CSS */ div.index { -webkit-columns: 16em; -moz-column-width> none } /* The index page for HTML / CSS */ div.index { -webkit-c
>: 16em; columns: 16em } div.index > span { font-family: Georgi>olumns: 16em; -moz-column-width: 16em; columns: 16em } div.index 
>a, Times, 'Times New Roman', serif; font-size: 1.6em } div.index >> span { font-family: Georgia, Times, 'Times New Roman', serif
>ul { margin-left: 0; padding-left: 0; list-style-type: none } /* >; font-size: 1.6em } div.index ul { margin-left: 0; padding-left:
>ul.cssprop box used by each CSS Property reference page*/ .csspro> 0; list-style-type: none } /* ul.cssprop box used by each CSS Pr
>p { display: table; padding: 11px 22px; background-color: #eef } >operty reference page*/ .cssprop { display: table; padding: 11px 
>[dir="ltr"] .cssprop { clear: left; border-left: .15em solid } [d>22px; background-color: #eef } [dir="ltr"] .cssprop { clear: left
>ir="rtl"] .cssprop { clear: right; border-right: .15em solid } .c>; border-left: .15em solid } [dir="rtl"] .cssprop { clear: right;
>ssprop li { display: table-row; padding: 3px; margin: 0; text-ali> border-right: .15em solid } .cssprop li { display: table-row; pa
>gn: left } .cssprop li dfn { display: table-cell; padding: 0 5px;>dding: 3px; margin: 0; text-align: left } .cssprop li dfn { displ
> border-bottom: none; white-space: pre; cursor: inherit } .csspro>ay: table-cell; padding: 0 5px; border-bottom: none; white-space:
>p li dfn:after { content: ":" } .cssprop li li { display: list-it> pre; cursor: inherit } .cssprop li dfn:after { content: ":" } .c
>em; list-style-type: disc; line-height: 1 } /* ul.htmlelt box use>ssprop li li { display: list-item; list-style-type: disc; line-he
>d by each HTML Element reference page */ .htmlelt { display: tabl>ight: 1 } /* ul.htmlelt box used by each HTML Element reference p
>e; padding: 11px 22px; background-color: #fe9 } [dir="ltr"] .html>age */ .htmlelt { display: table; padding: 11px 22px; background-
>elt { clear: left; border-left: .15em solid } [dir="rtl"] .htmlel>color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-left: .1
>t { clear: right; border-right: .15em solid } .htmlelt li { displ>5em solid } [dir="rtl"] .htmlelt { clear: right; border-right: .1
>ay: table-row; padding: 3px; margin: 0; text-align: left } .htmle>5em solid } .htmlelt li { display: table-row; padding: 3px; margi
>lt li dfn { display: table-cell; padding: 0 5px; border-bottom: n>n: 0; text-align: left } .htmlelt li dfn { display: table-cell; p
>one; white-space: pre; cursor: inherit } .htmlelt li dfn:after { >adding: 0 5px; border-bottom: none; white-space: pre; cursor: inh
>content: ":" } .htmlelt li li { display: list-item; list-style-ty>erit } .htmlelt li dfn:after { content: ":" } .htmlelt li li { di
>pe: disc; line-height: 1 } /* ul.audionodebox used by each AudioN>splay: list-item; list-style-type: disc; line-height: 1 } /* ul.a
>ode object reference page*/ .audionodebox { display: table; paddi>udionodebox used by each AudioNode object reference page*/ .audio
>ng: 11px 22px; background-color: #fee } [dir="ltr"] .audionodebox>nodebox { display: table; padding: 11px 22px; background-color: #
> { clear: left; border-left: .15em solid } [dir="rtl"] .audionode>fee } [dir="ltr"] .audionodebox { clear: left; border-left: .15em
>box { clear: right; border-right: .15em solid } .audionodebox li > solid } [dir="rtl"] .audionodebox { clear: right; border-right: 
>{ display: table-row; padding: 3px; margin: 0; text-align: left }>.15em solid } .audionodebox li { display: table-row; padding: 3px
> .audionodebox li dfn { display: table-cell; padding: 0 5px; bord>; margin: 0; text-align: left } .audionodebox li dfn { display: t
>er-bottom: none; white-space: pre; cursor: inherit } .audionodebo>able-cell; padding: 0 5px; border-bottom: none; white-space: pre;
>x li dfn:after { content: ":" } .audionodebox li li { display: li> cursor: inherit } .audionodebox li dfn:after { content: ":" } .a
>st-item; list-style-type: disc; line-height: 1 } /* https://devel>udionodebox li li { display: list-item; list-style-type: disc; li
>oper.mozilla.org/en-US/docs/Template:HTML:Element_Navigation */ t>ne-height: 1 } /* https://developer.mozilla.org/en-US/docs/Templa
>able.HTMLElmNav { margin: 1em auto; border-width: 5px } table.HTM>te:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em auto
>LElmNav th, table.HTMLElmNav td { text-align: center } .method { >; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav td { 
>margin-left: 10px; margin-bottom: 2em; margin-top: 1em } .method >text-align: center } .method { margin-left: 10px; margin-bottom: 
>> .name { display: block; font-size: 13pt; margin-bottom: .2em>2em; margin-top: 1em } .method > .name { display: block; font-
> } .method > .name > .param: after { content: ","; padding->size: 13pt; margin-bottom: .2em } .method > .name > .param:
>right: .5em } .method > .name > .param: last-of-type: after> after { content: ","; padding-right: .5em } .method > .name &
> { content: "" } .method > .name > .param > .name: after>gt; .param: last-of-type: after { content: "" } .method > .nam
> { content: " as "; font-weight: normal } .method > .name >>e > .param > .name: after { content: " as "; font-weight: n
> .param: not(.required) { font-style: italic } .method > .name>ormal } .method > .name > .param: not(.required) { font-sty
> > .param: not(.required): before { content: "[" } .method &gt>le: italic } .method > .name > .param: not(.required): befo
>; .name > .param: not(.required): after { content: "]" } .meth>re { content: "[" } .method > .name > .param: not(.required
>od > .description { display: block; font-size: 10pt; color: #4>): after { content: "]" } .method > .description { display: bl
>44; font-style: italic; margin-bottom: 7px } .method > .name &>ock; font-size: 10pt; color: #444; font-style: italic; margin-bot
>gt; .returns: before { content: " returns "; font-weight: normal;>tom: 7px } .method > .name > .returns: before { content: " 
> font-style: italic } .method > .name > .returns { font-wei>returns "; font-weight: normal; font-style: italic } .method >
>ght: 700 } .method > .params { display: block; color: #555 } .> .name > .returns { font-weight: 700 } .method > .params { 
>method > .params > .param { display: block; margin-bottom: >display: block; color: #555 } .method > .params > .param { 
>5px } .method > .params > .param > .name { font-weight: >display: block; margin-bottom: 5px } .method > .params > .p
>700; margin-right: .5em; min-width: 80px; display: inline-block }>aram > .name { font-weight: 700; margin-right: .5em; min-width
> .method > .params > .param > .description { display: in>: 80px; display: inline-block } .method > .params > .param 
>line-block; width: 300px; vertical-align: top; margin-right: 30px>> .description { display: inline-block; width: 300px; vertical
> } .method > .params > .param > .type { display: inline->-align: top; margin-right: 30px } .method > .params > .para
>block; width: 150px; vertical-align: top; font-weight: 700 } .met>m > .type { display: inline-block; width: 150px; vertical-alig
>hod > .params > .param > .type: before { content: "Type >n: top; font-weight: 700 } .method > .params > .param > 
>"; color: #888; font-weight: normal } .method > .params > .>.type: before { content: "Type "; color: #888; font-weight: norma
>param > .default { display: inline-block; width: 150px; vertic>l } .method > .params > .param > .default { display: inl
>al-align: top; font-weight: 700 } .method > .params > .para>ine-block; width: 150px; vertical-align: top; font-weight: 700 } 
>m > .default: before { content: "Default "; color: #888; font->.method > .params > .param > .default: before { content:
>weight: normal } /* version compatibility banners and notes */ .g> "Default "; color: #888; font-weight: normal } /* version compat
>eckoVersionNote { background-color: #E0E0FF; background-image: -m>ibility banners and notes */ .geckoVersionNote { background-color
>oz-radial-gradient(0px 0 45deg, circle farthest-corner, #E0E0FF 0>: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, ci
>%, #F8F8FF 80%); border-left: 5px solid #008 } .geckoVersionNote >rcle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px 
>p { padding-left: 4px; border: 0 } .geckoVersionHeading { backgro>solid #008 } .geckoVersionNote p { padding-left: 4px; border: 0 }
>und-color: #008; background-image: -moz-linear-gradient(left, #00> .geckoVersionHeading { background-color: #008; background-image:
>8 50%, #e0e0ff 80%); color: #fff; font: 16px/1.7 Verdana, Tahoma,> -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff; 
> sans-serif; margin-top: 0; margin-left: 0; margin-bottom: 4px; h>font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margin
>eight: 42px } .geckoVersionHeading a:link { color: #ddd } .geckoV>-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHeading
>ersionHeading a:visited { color: #eee } .geckoVersionHeading a:ho> a:link { color: #ddd } .geckoVersionHeading a:visited { color: #
>ver, .geckoVersionHeading a:focus { color: #fdd } /* Used to to c>eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:focus 
>reate icon-badged APIs inline */ .badge { position: relative; top>{ color: #fdd } /* Used to to create icon-badged APIs inline */ .
>: -2px; display: inline-block; cursor: default; border: 1px solid>badge { position: relative; top: -2px; display: inline-block; cur
> #aaa; border-radius: 8px; padding: 0.3em 0.8em; font-size: 0.7em>sor: default; border: 1px solid #aaa; border-radius: 8px; padding
>; font-weight: bold; } .icon { padding-left: 3.1em; } [dir=rtl] .>: 0.3em 0.8em; font-size: 0.7em; font-weight: bold; } .icon { pad
>icon { padding-left: 0.8em; padding-right: 3.1em; } .icon:before >ding-left: 3.1em; } [dir=rtl] .icon { padding-left: 0.8em; paddin
>{ content: ""; position: absolute; left: -2px; top: 50%; margin-t>g-right: 3.1em; } .icon:before { content: ""; position: absolute;
>op: -1.5em; width: 2.8em; height: 2.8em; background: white no-rep> left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em; height: 
>eat center center; background-size: 2.6em; border-radius: 100%; b>2.8em; background: white no-repeat center center; background-size
>order: 1px solid #aaa; border-right: none; box-sizing: border-box>: 2.6em; border-radius: 100%; border: 1px solid #aaa; border-righ
>; -moz-boxsizing: border-box; } [dir=rtl] .icon:before { left: au>t: none; box-sizing: border-box; -moz-boxsizing: border-box; } [d
>to; right: -2px; border: 1px solid #aaa; border-left: none; } /* >ir=rtl] .icon:before { left: auto; right: -2px; border: 1px solid
>Used for badging non-standard APIs */ .nonstandardBadge { backgro> #aaa; border-left: none; } /* Used for badging non-standard APIs
>und: linear-gradient(to right, #f0DE00 30%,#f0ff19 100%); color: > */ .nonstandardBadge { background: linear-gradient(to right, #f0
>black; text-shadow: 1px 1px 0 #ddd; } /* Used for badging privile>DE00 30%,#f0ff19 100%); color: black; text-shadow: 1px 1px 0 #ddd
>ged APIs */ .privilegedBadge { background: linear-gradient(to rig>; } /* Used for badging privileged APIs */ .privilegedBadge { bac
>ht, #FFBD19 30%,#ffb200 100%); color: black; text-shadow: 1px 1px>kground: linear-gradient(to right, #FFBD19 30%,#ffb200 100%); col
> 0 #ddd; } [dir=rtl] .privilegedBadge { background: linear-gradie>or: black; text-shadow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBa
>nt(to left, #FFBD19 30%,#ffb200 100%); } .icon.privilegedBadge:be>dge { background: linear-gradient(to left, #FFBD19 30%,#ffb200 10
>fore { background-color: orange; background-image: url(https://md>0%); } .icon.privilegedBadge:before { background-color: orange; b
>n.mozillademos.org/files/5061/firefoxos-logo-sm.png); } .sidebar->ackground-image: url(https://mdn.mozillademos.org/files/5061/fire
>box { margin-left: 16px; margin-bottom: 2.5em; border-right: 1px >foxos-logo-sm.png); } .sidebar-box { margin-left: 16px; margin-bo
>solid #ecf1f3; padding: 12px; background: #f1f6f8 url("img/toc-bg>ttom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; back
>.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, sans-serif } .s>ground: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px V
>idebar-box h2, .sidebar-box h3, .sidebar-box h5 { margin-bottom: >erdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar-box h3, .s
>.5em; font-family: inherit; font-weight: 700 } .sidebar-box h2 { >idebar-box h5 { margin-bottom: .5em; font-family: inherit; font-w
>font-size: 1.5em } .sidebar-box h3 { font-size: 1.1em } .sidebar->eight: 700 } .sidebar-box h2 { font-size: 1.5em } .sidebar-box h3
>box h5 { font-size: .9em } .sidebar-box > ul { float: left; te> { font-size: 1.1em } .sidebar-box h5 { font-size: .9em } .sideba
>xt-align: left; display: block; padding: 0; margin: auto 0; posit>r-box > ul { float: left; text-align: left; display: block; pa
>ion: relative } .sidebar-box ul > li { list-style-type: none }>dding: 0; margin: auto 0; position: relative } .sidebar-box ul &g
> .tab-content-box { border-right: 1px solid #ecf1f3; margin-left:>t; li { list-style-type: none } .tab-content-box { border-right: 
> 16px; padding: 12px; background: #fff; font: 12px Verdana, Tahom>1px solid #ecf1f3; margin-left: 16px; padding: 12px; background: 
>a, sans-serif } .tab-content-box h2, .tab-content-box h3, .tab-co>#fff; font: 12px Verdana, Tahoma, sans-serif } .tab-content-box h
>ntent-box h5 { margin-bottom: .5em; font-family: inherit; font-we>2, .tab-content-box h3, .tab-content-box h5 { margin-bottom: .5em
>ight: 700 } .tab-content-box h2 { font-size: 1.5em } .tab-content>; font-family: inherit; font-weight: 700 } .tab-content-box h2 { 
>-box h3 { font-size: 1.1em } .tab-content-box h5 { font-size: .9e>font-size: 1.5em } .tab-content-box h3 { font-size: 1.1em } .tab-
>m } #menuFiller { display: block } /* Horizontal tab boxes */ .ht>content-box h5 { font-size: .9em } #menuFiller { display: block }
>ab { margin: 0 auto 1em; display: inline-block; } .htab>ul>> /* Horizontal tab boxes */ .htab { margin: 0 auto 1em; display: 
>li { width: 150px; height: 28px; list-style-type: none; display: >inline-block; } .htab>ul>li { width: 150px; height: 28px; l
>inline; padding-bottom: 3px; border: 1px solid #ddd; border-radiu>ist-style-type: none; display: inline; padding-bottom: 3px; borde
>s: 3px 3px 0px 0px; padding-top: 5px; text-align: left; font-size>r: 1px solid #ddd; border-radius: 3px 3px 0px 0px; padding-top: 5
>: 13px; font-weight: bold; margin: auto; position: relative; padd>px; text-align: left; font-size: 13px; font-weight: bold; margin:
>ing-left: 6px; padding-right: 6px; border-bottom: none; opacity: > auto; position: relative; padding-left: 6px; padding-right: 6px;
>.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=> border-bottom: none; opacity: .5; -ms-filter: "progid:DXImageTra
>50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)>nsform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransf
>; cursor: pointer; } .htab>ul>li.selected { opacity: 1; -ms>orm.Microsoft.Alpha(Opacity=50); cursor: pointer; } .htab>ul&g
>-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; >t;li.selected { opacity: 1; -ms-filter: "progid:DXImageTransform.
>filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); bor>Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Mi
>der: 1px solid #ddd; border-bottom: none; z-index: 10; background>crosoft.Alpha(Opacity=100); border: 1px solid #ddd; border-bottom
>-color: #f1f6f8!important; position: relative; cursor: pointer; }>: none; z-index: 10; background-color: #f1f6f8!important; positio
> .htab>ul { width: 150px; text-align: left; display: inline; p>n: relative; cursor: pointer; } .htab>ul { width: 150px; text-
>adding: 0; margin: 0 auto; position: relative; top: 0px; } .htab&>align: left; display: inline; padding: 0; margin: 0 auto; positio
>gt;div { background-color: #f1f6f8; margin-top: 0; border: 1px so>n: relative; top: 0px; } .htab>div { background-color: #f1f6f8
>lid #ddd; padding: 12px; position: relative; z-index: 9; word-wra>; margin-top: 0; border: 1px solid #ddd; padding: 12px; position:
>p: break-word; } /* Compatibility tables */ table.compat-table { > relative; z-index: 9; word-wrap: break-word; } /* Compatibility 
>border-color: #bbb; margin: 0 } table.compat-table td { padding: >tables */ table.compat-table { border-color: #bbb; margin: 0 } ta
>5px; border: 1px solid #ccc; background: #fff; vertical-align: to>ble.compat-table td { padding: 5px; border: 1px solid #ccc; backg
>p; word-wrap: break-word } table.compat-table th, table.compat-ta>round: #fff; vertical-align: top; word-wrap: break-word } table.c
>ble td.header { border: 1px solid #bbb; padding: 0 5px; backgroun>ompat-table th, table.compat-table td.header { border: 1px solid 
>d: #eee; font-weight: 700 } .archivedContentBlock { margin: 0; ba>#bbb; padding: 0 5px; background: #eee; font-weight: 700 } .archi
>ckground-color: #fdd } div.action-driven { display: inline-block;>vedContentBlock { margin: 0; background-color: #fdd } div.action-
> float: none; min-height: 8.5em; margin: .8em; box-shadow: .2em .>driven { display: inline-block; float: none; min-height: 8.5em; m
>1em .1em #808080; vertical-align: top; } div.action-driven > d>argin: .8em; box-shadow: .2em .1em .1em #808080; vertical-align: 
>iv { font: 400 20px 'Bebas Neue', 'League Gothic', Haettenschweil>top; } div.action-driven > div { font: 400 20px 'Bebas Neue', 
>er, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: u>'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo
>ppercase } /*----------------- for Topic page */ table.topicpage->, sans-serif; text-transform: uppercase } /*----------------- for
>table, table.topicpage-table td, table.topicpage-table tr, table.> Topic page */ table.topicpage-table, table.topicpage-table td, t
>topicpage-table th { border: none } .topicpage-table .section { p>able.topicpage-table tr, table.topicpage-table th { border: none 
>adding-right:1em} /* "table.topicpage-table h2 { --font-setting-->} .topicpage-table .section { padding-right:1em} /* "table.topicp
> }" is better than this. */ .topicpage-table .Documentation, .top>age-table h2 { --font-setting-- }" is better than this. */ .topic
>icpage-table .Community, .topicpage-table .Tools, .topicpage-tabl>page-table .Documentation, .topicpage-table .Community, .topicpag
>e .Related_Topics { background-image: url('/media/img/icons-secti>e-table .Tools, .topicpage-table .Related_Topics { background-ima
>ons.png'); background-repeat: no-repeat; margin: 0 0 .25em; paddi>ge: url('/media/img/icons-sections.png'); background-repeat: no-r
>ng: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'Bebas N>epeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 
>eue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', >48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschw
>Meiryo, sans-serif; text-transform: uppercase; border: none } [di>eiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform
>r="rtl"] .topicpage-table .Documentation, [dir="rtl"] .topicpage->: uppercase; border: none } [dir="rtl"] .topicpage-table .Documen
>table .Community, [dir="rtl"] .topicpage-table .Tools, [dir="rtl">tation, [dir="rtl"] .topicpage-table .Community, [dir="rtl"] .top
>] .topicpage-table .Related_Topics { padding: 18px 65px 0 18px; }>icpage-table .Tools, [dir="rtl"] .topicpage-table .Related_Topics
> .topicpage-table .Documentation { background-position: 0 0 } .to> { padding: 18px 65px 0 18px; } .topicpage-table .Documentation {
>picpage-table .Community { background-position: 0 -200px } .topic> background-position: 0 0 } .topicpage-table .Community { backgro
>page-table .Tools { background-position: 0 -400px } .topicpage-ta>und-position: 0 -200px } .topicpage-table .Tools { background-pos
>ble .Related_Topics { background-position: 0 -600px } [dir="rtl"]>ition: 0 -400px } .topicpage-table .Related_Topics { background-p
> .topicpage-table .Documentation { background-position: right 0 }>osition: 0 -600px } [dir="rtl"] .topicpage-table .Documentation {
> [dir="rtl"] .topicpage-table .Community { background-position: r> background-position: right 0 } [dir="rtl"] .topicpage-table .Com
>ight -200px } [dir="rtl"] .topicpage-table .Tools { background-po>munity { background-position: right -200px } [dir="rtl"] .topicpa
>sition: right -400px } [dir="rtl"] .topicpage-table .Related_Topi>ge-table .Tools { background-position: right -400px } [dir="rtl"]
>cs { background-position: right -600px } /* for Topic Page 2 (Thi> .topicpage-table .Related_Topics { background-position: right -6
>s is Test )*/ /* USAGE:>00px } /* for Topic Page 2 (This is Test )*/ /* USAGE:

Back to History