Compare Revisions

Template:CustomCSS

Revision 480683:

Revision 480683 by chrisdavidmills on

Revision 483719:

Revision 483719 by openjck on

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

Revision 480683
Revision 483719
n7    @charset "utf-8"; /* This is a special template used as a cusn7    @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 -- */
> /* Make the 2nd breadcrumbs disappear, only if the page has been> /* Make the 2nd breadcrumbs disappear, only if the page has been
> regenerated with a modern template */ .column-container #wikiArt> regenerated with a modern template */ .column-container #wikiArt
>icle .themeUpdated { display:none } /* Make the Quick Links be hi>icle .themeUpdated { display:none } /* Make the Quick Links be hi
>dden in the old theme */ html:not(.redesign) #Quick_Links { displ>dden in the old theme */ html:not(.redesign) #Quick_Links { displ
>ay:none} html:not(.redesign) h2#Quick_Links + ol { display:none} >ay:none} html:not(.redesign) h2#Quick_Links + ol { display:none} 
>/* remove left margin from Font Awesome icons inside wiki content>/* remove left margin from Font Awesome icons inside wiki content
>; this is messing up document content */ #wikiArticle i[class^="i>; this is messing up document content */ #wikiArticle i[class^="i
>con-"] { margin-left: 0px; } /* Iframe for live sample centered (>con-"] { margin-left: 0px; } /* Iframe for live sample centered (
>Test) */ .centered iframe { display: block; margin: 0 auto;border>Test) */ .centered iframe { display: block; margin: 0 auto;border
>:none } /* Simulate two columns for landing page, if enough space>:none } /* Simulate two columns for landing page, if enough space
> is available */ @media (min-width:840px) { .topicpage-table {dis> is available */ @media (min-width:840px) { .topicpage-table {dis
>play: table; border-collapse: separate; border-spacing: 20px 0 } >play: table; border-collapse: separate; border-spacing: 20px 0 } 
>.landing { display: table-row;} .section { display: table-cell; w>.landing { display: table-row;} .section { display: table-cell; w
>idth:50%;} .topicpage-table .section:first-of-type { margin-right>idth:50%;} .topicpage-table .section:first-of-type { margin-right
>: 20px; border-right: solid 1px lightgrey; } } /* For Landing pag>: 20px; border-right: solid 1px lightgrey; } } .redesign .topicpa
>e boxes; these are boxes displayed within columns on landing page>ge-table .section:first-of-type { border-right:solid 6px rgba(212
>s, such as the Community and Related boxes. */ .landingPageBox { >,221,228,0.5); } /* For Landing page boxes; these are boxes displ
>width: 100%; padding: 0px; border-bottom: 1px solid #bbb; margin->ayed within columns on landing pages, such as the Community and R
>bottom: 3px; } .landingPageBox ul { padding-left: 44px; } /* Wide>elated boxes. */ .landingPageBox { width: 100%; padding: 0px; bor
> column box */ .wideColumnBox { column-width:375px; -moz-column-w>der-bottom: 1px solid #bbb; margin-bottom: 3px; } .landingPageBox
>idth:375px; -webkit-column-width:375px; -o-column-width:375px; -m> ul { padding-left: 44px; } /* Wide column box */ .wideColumnBox 
>s-column-width:375px;} .wideColumnBoxList li { line-height: 1.5; >{ column-width:375px; -moz-column-width:375px; -webkit-column-wid
>list-style-type: none; padding-left: 0; page-break-inside: avoid;>th:375px; -o-column-width:375px; -ms-column-width:375px;} .wideCo
> } /* Multi-column boxes for lists of longer links; this will ada>lumnBoxList li { line-height: 1.5; list-style-type: none; padding
>pt based on screen width */ .multiColumnList { column-width:250px>-left: 0; page-break-inside: avoid; } /* Multi-column boxes for l
>; -moz-column-width:250px; -webkit-column-width:250px; -o-column->ists of longer links; this will adapt based on screen width */ .m
>width:250px; -ms-column-width:250px;} .multiColumnList li { line->ultiColumnList { column-width:250px; -moz-column-width:250px; -we
>height: 1.5; list-style-type: none; padding-left: 0; page-break-i>bkit-column-width:250px; -o-column-width:250px; -ms-column-width:
>nside: avoid; } /* Multi-column boxes for smaller links, such as >250px;} .multiColumnList li { line-height: 1.5; list-style-type: 
>API terms */ .smallMultiColumnList { column-width: 120px; -moz-co>none; padding-left: 0; page-break-inside: avoid; } /* Multi-colum
>lumn-width:120px; -webkit-column-width:120px; -o-column-width:120>n boxes for smaller links, such as API terms */ .smallMultiColumn
>px; -ms-column-width:120px} .smallMultiColumnList li { list-style>List { column-width: 120px; -moz-column-width:120px; -webkit-colu
>-type: none; padding-left: 0; page-break-inside: avoid; } /* Mult>mn-width:120px; -o-column-width:120px; -ms-column-width:120px} .s
>i-column box for smaller text */ .horizFlexboxContainer { display>mallMultiColumnList li { list-style-type: none; padding-left: 0; 
>: flex; display: -webkit-flex; flex-flow: column nowrap; -webkit->page-break-inside: avoid; } /* Multi-column box for smaller text 
>flex-flow: column nowrap; justify-content: center; -webkit-justif>*/ .horizFlexboxContainer { display: flex; display: -webkit-flex;
>y-content: center; align-content: center; -webkit-align-content: > flex-flow: column nowrap; -webkit-flex-flow: column nowrap; just
>center; align-items: center; -webkit-align-items: center; flex-di>ify-content: center; -webkit-justify-content: center; align-conte
>rection: column; -webkit-flex-direction: column; } div.smallTextM>nt: center; -webkit-align-content: center; align-items: center; -
>ultiColumnBoxHeading { background-color: #aac; border-radius: 10p>webkit-align-items: center; flex-direction: column; -webkit-flex-
>x 10px 0 0; border: 2px solid #ccc; order: 1; -webkit-order: 1; w>direction: column; } div.smallTextMultiColumnBoxHeading { backgro
>idth: 75%; padding: 10px; flex: 0 1 auto; -webkit-flex: 0 1 auto;>und-color: #aac; border-radius: 10px 10px 0 0; border: 2px solid 
> font-weight: bold; } div.smallTextMultiColumnBoxList { border: 2>#ccc; order: 1; -webkit-order: 1; width: 75%; padding: 10px; flex
>px solid #ccc; background-color: #ddf; border-top: 0; border-radi>: 0 1 auto; -webkit-flex: 0 1 auto; font-weight: bold; } div.smal
>us: 0 0 10px 10px; width: 75%; padding: 10px; order: 2; -webkit-o>lTextMultiColumnBoxList { border: 2px solid #ccc; background-colo
>rder: 2; flex: 0 1 auto; -webkit-flex: 0 1 auto; } div.smallTextM>r: #ddf; border-top: 0; border-radius: 0 0 10px 10px; width: 75%;
>ultiColumnBoxList ul { column-width:100px; -moz-column-width:100p> padding: 10px; order: 2; -webkit-order: 2; flex: 0 1 auto; -webk
>x; -webkit-column-width:100px; -o-column-width:100px; -ms-column->it-flex: 0 1 auto; } div.smallTextMultiColumnBoxList ul { column-
>width:100px; } div.smallTextMultiColumnBoxList li { list-style-ty>width:100px; -moz-column-width:100px; -webkit-column-width:100px;
>pe: none; padding-left: 0; font-size: 80%; } /* For ending "text > -o-column-width:100px; -ms-column-width:100px; } div.smallTextMu
>alongside images" blocks; add this class to the first block that >ltiColumnBoxList li { list-style-type: none; padding-left: 0; fon
>shouldn't be next to the image */ .endImageWrapping { clear: both>t-size: 80%; } /* For ending "text alongside images" blocks; add 
>; } /* Fancy Table of content for main pages of tutorial*/ .fancy>this class to the first block that shouldn't be next to the image
>TOC { counter-reset: fancyTOC; -moz-columns: 18em; columns: 18em;> */ .endImageWrapping { clear: both; } /* Fancy Table of content 
> margin-bottom: 1em } .fancyTOC .button { display: block; margin->for main pages of tutorial*/ .fancyTOC { counter-reset: fancyTOC;
>right: 0; margin-bottom: .25em; background-color: #A24C4C; color:> -moz-columns: 18em; columns: 18em; margin-bottom: 1em } .fancyTO
> #fff; font-size: 1.5em; line-height: 1.5 } .fancyTOC a::before {>C .button { display: block; margin-right: 0; margin-bottom: .25em
> counter-increment: fancyTOC; content: counter(fancyTOC) ". " } .>; background-color: #A24C4C; color: #fff; font-size: 1.5em; line-
>fancyTOC a::after { content: ' »' } .fancyTOC .button:hover, .fan>height: 1.5 } .fancyTOC a::before { counter-increment: fancyTOC; 
>cyTOC .button:focus, .fancyTOC .button:active { background-color:>content: counter(fancyTOC) ". " } .fancyTOC a::after { content: '
> #C26C6C } /* In index, dim obsolete, deprecated or non-standard > »' } .fancyTOC .button:hover, .fancyTOC .button:focus, .fancyTOC
>element instead of striking through them */ s.deprecatedElement, > .button:active { background-color: #C26C6C } /* In index, dim ob
>s.obsoleteElement, s.nonStdElement { text-decoration: none; opaci>solete, deprecated or non-standard element instead of striking th
>ty: .3 } /* Add widgeted index, here adding an HTML5 badge as the>rough them */ s.deprecatedElement, s.obsoleteElement, s.nonStdEle
> bullet of the li element if class="html5" */ div.index.widgeted >ment { text-decoration: none; opacity: .3 } /* Add widgeted index
>{ -webkit-column-width: 10em; -moz-column-width: 10em; columns: 1>, here adding an HTML5 badge as the bullet of the li element if c
>0em } div.index.widgeted li { padding-left: 18px } div.index.widg>lass="html5" */ div.index.widgeted { -webkit-column-width: 10em; 
>eted li.html5 { background-image: url("/files/3855/HTML5_Badge_16>-moz-column-width: 10em; columns: 10em } div.index.widgeted li { 
>.png"); background-repeat: no-repeat; background-position: left 4>padding-left: 18px } div.index.widgeted li.html5 { background-ima
>px } [dir="rtl"] div.index.widgeted li { padding-right: 18px } [d>ge: url("/files/3855/HTML5_Badge_16.png"); background-repeat: no-
>ir="rtl"] div.index.widgeted li.html5 { background-image: url("/f>repeat; background-position: left 4px } [dir="rtl"] div.index.wid
>iles/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; bac>geted li { padding-right: 18px } [dir="rtl"] div.index.widgeted l
>kground-position: right 4px } [dir="rtl"] div.index.widgeted span>i.html5 { background-image: url("/files/3855/HTML5_Badge_16.png")
> { padding-right:24px } /* Add widgeted index, adding a Webcompon>; background-repeat: no-repeat; background-position: right 4px } 
>ent badge of the li element if class="webcomp" */ div.index.widge>[dir="rtl"] div.index.widgeted span { padding-right:24px } /* Add
>ted li.webcomp::after { font-family: FontAwesome; content:" \f085> widgeted index, adding a Webcomponent badge of the li element if
>";} /* Quicknav template styles : https://developer.mozilla.org/e> class="webcomp" */ div.index.widgeted li.webcomp::after { font-f
>n-US/docs/Template:quicknav -------- */ #wikiArticle { position: >amily: FontAwesome; content:" \f085";} /* Quicknav template style
>relative; } .quicknav { position: fixed; top: 237px; left: 33px; >s : https://developer.mozilla.org/en-US/docs/Template:quicknav --
>background: #FFF; z-index: 1 } .quicknav dl { max-width: 0; max-h>------ */ #wikiArticle { position: relative; } .quicknav { positi
>eight: 300px; overflow: auto; margin: 0; padding: 10px 0; border:>on: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 }
> 1px solid transparent; border-left: none -webkit-transition: bor> .quicknav dl { max-width: 0; max-height: 300px; overflow: auto; 
>der .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;>margin: 0; padding: 10px 0; border: 1px solid transparent; border
> -moz-transition: border .5s ease .1s, max-width .5s ease .1s, pa>-left: none -webkit-transition: border .5s ease .1s, max-width .5
>dding .5s linear .1s; -ms-transition: border .5s ease .1s, max-wi>s ease .1s, padding .5s linear .1s; -moz-transition: border .5s e
>dth .5s ease .1s, padding .5s linear .1s; -o-transition: border .>ase .1s, max-width .5s ease .1s, padding .5s linear .1s; -ms-tran
>5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; tran>sition: border .5s ease .1s, max-width .5s ease .1s, padding .5s 
>sition: border .5s ease .1s, max-width .5s ease .1s, padding .5s >linear .1s; -o-transition: border .5s ease .1s, max-width .5s eas
>linear .1s } .quicknav dt, .quicknav dd { margin: 0; padding: 0; >e .1s, padding .5s linear .1s; transition: border .5s ease .1s, m
>white-space: nowrap } .quicknav dt { font-weight: 700 } .quicknav>ax-width .5s ease .1s, padding .5s linear .1s } .quicknav dt, .qu
> dd + dt { margin-top: .5em } .quicknav:hover dl { max-width: 300>icknav dd { margin: 0; padding: 0; white-space: nowrap } .quickna
>px; padding: 10px 20px 10px 10px; border-color: #ECECE7 } .quickn>v dt { font-weight: 700 } .quicknav dd + dt { margin-top: .5em } 
>av .showme { display: block; position: absolute; top: 10px; left:>.quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10
> -31px; width: 30px; font: 2em sans-serif; color: #CCC; text-alig>px; border-color: #ECECE7 } .quicknav .showme { display: block; p
>n: center; background: #FFF; border-radius: 5px 0 0 5px; border: >osition: absolute; top: 10px; left: -31px; width: 30px; font: 2em
>1px solid #ECECE7; border-right: none } .quicknav:hover .showme {> sans-serif; color: #CCC; text-align: center; background: #FFF; b
> color: #333; } .cleared { clear: both } /* This style has proble>order-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-righ
>m ! Style attribute of BR element is not work in Kuma */ .clearLe>t: none } .quicknav:hover .showme { color: #333; } .cleared { cle
>ft { clear: left } /* ltr page only ? */ span.comment { display:n>ar: both } /* This style has problem ! Style attribute of BR elem
>one; } #wikiArticle .breadcrumbs { display: block; margin-bottom:>ent is not work in Kuma */ .clearLeft { clear: left } /* ltr page
> 1em } /* The HTML5 landing page has some special-case stuff, han> only ? */ span.comment { display:none; } #wikiArticle .breadcrum
>dled here */ /* table.html5ArticleToc { border-width: 5px }*/ tab>bs { display: block; margin-bottom: 1em } /* The HTML5 landing pa
>le.html5ArticleToc { border-style: none; border-width: 0; backgro>ge has some special-case stuff, handled here */ /* table.html5Art
>und-color: transparent; border-color: transparent; width: 100%;} >icleToc { border-width: 5px }*/ table.html5ArticleToc { border-st
>.html5ArticleToc thead th { padding: .5em 1em } .html5ArticleToc >yle: none; border-width: 0; background-color: transparent; border
>tbody td { vertical-align: middle } .html5ArticleToc ul { margin:>-color: transparent; width: 100%;} .html5ArticleToc thead th { pa
> 0; padding: 0 } .html5ArticleToc ul li { display: inline; margin>dding: .5em 1em } .html5ArticleToc tbody td { vertical-align: mid
>: 0 .25em } /* The syntax box: the first one is now used anywhere>dle } .html5ArticleToc ul { margin: 0; padding: 0 } .html5Article
> (DOM, JS, CSS, ...) The twoparts is used for CSS properties */ p>Toc ul li { display: inline; margin: 0 .25em } /* The syntax box:
>re.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; backgr> the first one is now used anywhere (DOM, JS, CSS, ...) The twopa
>ound-color: #ffe; border-radius: 10px; } pre.twopartsyntaxbox { b>rts is used for CSS properties */ pre.syntaxbox { margin-bottom: 
>order: 2px solid #bbb; margin-bottom: 0; background-color: #ffe; >1em; background-color: #ffe; border-radius: 10px; } html:not(.red
>border-radius: 10px 10px 0 0; } pre.twopartsyntaxbox + pre { bord>esign) pre.syntaxbox { border: 2px solid #ccc; border-radius: 0; 
>er: 2px solid #bbb; border-radius: 0 0 10px 10px; border-top: non>} pre.twopartsyntaxbox { margin-bottom: 0; background-color: #ffe
>e; margin-top: 0 } table.withoutBorder, table.withoutBorder td, t>; } html:not(.redesign) pre.twopartsyntaxbox { border:2px solid #
>able.withoutBorder tr, table.withoutBorder th { border: none } td>bbb; border-radius: 10px 10px 0 0; } pre.twopartsyntaxbox + pre {
>.horizontalLine { border-left: none } td.column { border-bottom: > border-top: none; margin-top: 0 } html:not(.redesign) pre.twopar
>none } td.bottomPart { border-top: none } /* Use the verticalText>tsyntaxbox + pre { border: 2px solid #bbb; border-radius: 0 0 10p
> class on a table cell to rotate its contents 90° */ td.verticalT>x 10px; } table.withoutBorder, table.withoutBorder td, table.with
>ext { width: 3em; -webkit-transform: rotate(-90deg); -moz-transfo>outBorder tr, table.withoutBorder th { border: none } td.horizont
>rm: rotate(-90deg); -o-transform: rotate(-90deg); transform: rota>alLine { border-left: none } td.column { border-bottom: none } td
>te(-90deg) } table.blockTable { border-collapse: collapse } table>.bottomPart { border-top: none } /* Use the verticalText class on
>.blockTable, table.blockTable td { margin: 1px; padding: 1px } ta> a table cell to rotate its contents 90° */ td.verticalText { wid
>ble.blockTable .verticalColumn { border-left: none; border-right:>th: 3em; -webkit-transform: rotate(-90deg); -moz-transform: rotat
> none } /* The index page for HTML / CSS */ div.index { -webkit-c>e(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg
>olumns: 16em; -moz-column-width: 16em; columns: 16em } div.index >) } table.blockTable { border-collapse: collapse } table.blockTab
>> span { font-family: Georgia, Times, 'Times New Roman', serif>le, table.blockTable td { margin: 1px; padding: 1px } table.block
>; font-size: 1.6em } div.index ul, div.index ol { margin-left: 0;>Table .verticalColumn { border-left: none; border-right: none } /
> padding-left: 0; list-style-type: none } /* Stuff used for the s>* The index page for HTML / CSS */ div.index { -webkit-columns: 1
>yntax information about CSS, HTML, and so forth */ /* ul.cssprop >6em; -moz-column-width: 16em; columns: 16em } div.index > span
>box used by each CSS Property reference page*/ .cssprop { display> { font-family: Georgia, Times, 'Times New Roman', serif; font-si
>: table; padding: 11px 22px; background-color: #eef } [dir="ltr"]>ze: 1.6em } div.index ul, div.index ol { margin-left: 0; padding-
> .cssprop { clear: left; border-left: .15em solid } [dir="rtl"] .>left: 0; list-style-type: none } /* Stuff used for the syntax inf
>cssprop { clear: right; border-right: .15em solid } .cssprop li {>ormation about CSS, HTML, and so forth */ /* ul.cssprop box used 
> display: table-row; padding: 3px; margin: 0 } .cssprop li dfn { >by each CSS Property reference page*/ .cssprop { display: table; 
>display: table-cell; padding: 0 5px; border-bottom: none; white-s>padding: 11px 22px; background-color: #eef } .redesign .cssprop {
>pace: pre; cursor: inherit } .cssprop li dfn:after { content: ":"> background-color: rgba(255, 203, 0, 0.1); } [dir="ltr"] .cssprop
> } .cssprop li li { display: list-item; list-style-type: disc; li> { clear: left; border-left: .15em solid } [dir="rtl"] .cssprop {
>ne-height: 1 } /* ul.htmlelt box used by each HTML Element refere> clear: right; border-right: .15em solid } .redesign[dir="ltr"] .
>nce page */ .htmlelt { display: table; padding: 11px 22px; backgr>cssprop { border-left: 6px solid rgba(255,203,0,0.5); } .redesign
>ound-color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-lef>[dir="rtl"] .cssprop { border-right:6px solid rgba(255,203,0,0.5)
>t: .15em solid } [dir="rtl"] .htmlelt { clear: right; border-righ>; } .cssprop li { display: table-row; padding: 3px; margin: 0 } .
>t: .15em solid } .htmlelt li { display: table-row; padding: 3px; >cssprop li dfn { display: table-cell; padding: 0 5px; border-bott
>margin: 0; text-align: left } .htmlelt li dfn { display: table-ce>om: none; white-space: pre; cursor: inherit } .cssprop li dfn:aft
>ll; padding: 0 5px; border-bottom: none; white-space: pre; cursor>er { content: ":" } .cssprop li li { display: list-item; list-sty
>: inherit } .htmlelt li dfn:after { content: ":" } .htmlelt li li>le-type: disc; line-height: 1 } /* ul.htmlelt box used by each HT
> { display: list-item; list-style-type: disc; line-height: 1 } /*>ML Element reference page */ .htmlelt { display: table; padding: 
> ul.audionodebox used by each AudioNode object reference page*/ .>11px 22px; background-color: #fe9 } .redesign .htmlelt { backgrou
>audionodebox { display: table; padding: 11px 22px; background-col>nd-color:rgba(255,149,0,0.1); } [dir="ltr"] .htmlelt { clear: lef
>or: #fee } [dir="ltr"] .audionodebox { clear: left; border-left: >t; border-left: .15em solid } [dir="rtl"] .htmlelt { clear: right
>.15em solid } [dir="rtl"] .audionodebox { clear: right; border-ri>; border-right: .15em solid } .redesign[dir="ltr"] .htmlelt { bor
>ght: .15em solid } .audionodebox li { display: table-row; padding>der-left:6px solid rgba(255,149,0,0.5); } .redesign[dir="rtl"] .h
>: 3px; margin: 0; text-align: left } .audionodebox li dfn { displ>tmlelt { border-right:6px solid rgba(255,149,0,0.5); } .htmlelt l
>ay: table-cell; padding: 0 5px; border-bottom: none; white-space:>i { display: table-row; padding: 3px; margin: 0; text-align: left
> pre; cursor: inherit } .audionodebox li dfn:after { content: ":"> } .htmlelt li dfn { display: table-cell; padding: 0 5px; border-
> } .audionodebox li li { display: list-item; list-style-type: dis>bottom: none; white-space: pre; cursor: inherit } .htmlelt li dfn
>c; line-height: 1 } /* https://developer.mozilla.org/en-US/docs/T>:after { content: ":" } .htmlelt li li { display: list-item; list
>emplate:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em>-style-type: disc; line-height: 1 } /* ul.audionodebox used by ea
> auto; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav >ch AudioNode object reference page*/ .audionodebox { display: tab
>td { text-align: center } .method { margin-left: 10px; margin-bot>le; padding: 11px 22px; background-color: #fee } .redesign .audio
>tom: 2em; margin-top: 1em } .method > .name { display: block; >nodebox { background-color:rgba(117,195,165,0.1); } [dir="ltr"] .
>font-size: 13pt; margin-bottom: .2em } .method > .name > .p>audionodebox { clear: left; border-left: .15em solid } [dir="rtl"
>aram: after { content: ","; padding-right: .5em } .method > .n>] .audionodebox { clear: right; border-right: .15em solid } .rede
>ame > .param: last-of-type: after { content: "" } .method >>sign[dir="ltr"] .audionodebox { border-left:6px solid rgba(117,19
> .name > .param > .name: after { content: " as "; font-weig>5,165,0.5); } .redesign[dir="rtl"] .audionodebox { border-right:6
>ht: normal } .method > .name > .param: not(.required) { fon>px solid rgba(117,195,165,0.5); } .audionodebox li { display: tab
>t-style: italic } .method > .name > .param: not(.required):>le-row; padding: 3px; margin: 0; text-align: left } .audionodebox
> before { content: "[" } .method > .name > .param: not(.req> li dfn { display: table-cell; padding: 0 5px; border-bottom: non
>uired): after { content: "]" } .method > .description { displa>e; white-space: pre; cursor: inherit } .audionodebox li dfn:after
>y: block; font-size: 10pt; color: #444; font-style: italic; margi> { content: ":" } .audionodebox li li { display: list-item; list-
>n-bottom: 7px } .method > .name > .returns: before { conten>style-type: disc; line-height: 1 } /* https://developer.mozilla.o
>t: " returns "; font-weight: normal; font-style: italic } .method>rg/en-US/docs/Template:HTML:Element_Navigation */ table.HTMLElmNa
> > .name > .returns { font-weight: 700 } .method > .para>v { margin: 1em auto; border-width: 5px } table.HTMLElmNav th, ta
>ms { display: block; color: #555 } .method > .params > .par>ble.HTMLElmNav td { text-align: center } .method { margin-left: 1
>am { display: block; margin-bottom: 5px } .method > .params &g>0px; margin-bottom: 2em; margin-top: 1em } .method > .name { d
>t; .param > .name { font-weight: 700; margin-right: .5em; min->isplay: block; font-size: 13pt; margin-bottom: .2em } .method &gt
>width: 80px; display: inline-block } .method > .params > .p>; .name > .param: after { content: ","; padding-right: .5em } 
>aram > .description { display: inline-block; width: 300px; ver>.method > .name > .param: last-of-type: after { content: ""
>tical-align: top; margin-right: 30px } .method > .params > > } .method > .name > .param > .name: after { content: " 
>.param > .type { display: inline-block; width: 150px; vertical>as "; font-weight: normal } .method > .name > .param: not(.
>-align: top; font-weight: 700 } .method > .params > .param >required) { font-style: italic } .method > .name > .param: 
>> .type: before { content: "Type "; color: #888; font-weight: >not(.required): before { content: "[" } .method > .name > .
>normal } .method > .params > .param > .default { display>param: not(.required): after { content: "]" } .method > .descr
>: inline-block; width: 150px; vertical-align: top; font-weight: 7>iption { display: block; font-size: 10pt; color: #444; font-style
>00 } .method > .params > .param > .default: before { con>: italic; margin-bottom: 7px } .method > .name > .returns: 
>tent: "Default "; color: #888; font-weight: normal } /* version c>before { content: " returns "; font-weight: normal; font-style: i
>ompatibility banners and notes */ .geckoVersionNote { background->talic } .method > .name > .returns { font-weight: 700 } .me
>color: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45de>thod > .params { display: block; color: #555 } .method > .p
>g, circle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left:>arams > .param { display: block; margin-bottom: 5px } .method 
> 5px solid #008 } .geckoVersionNote p { padding-left: 4px; border>> .params > .param > .name { font-weight: 700; margin-ri
>: 0 } .geckoVersionHeading { background-color: #008; background-i>ght: .5em; min-width: 80px; display: inline-block } .method > 
>mage: -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #>.params > .param > .description { display: inline-block; wi
>fff; font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; m>dth: 300px; vertical-align: top; margin-right: 30px } .method &gt
>argin-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHe>; .params > .param > .type { display: inline-block; width: 
>ading a:link { color: #ddd } .geckoVersionHeading a:visited { col>150px; vertical-align: top; font-weight: 700 } .method > .para
>or: #eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:f>ms > .param > .type: before { content: "Type "; color: #888
>ocus { color: #fdd } .experimentalIcon { display: inline-block; w>; font-weight: normal } .method > .params > .param > .de
>idth:4px; height:4px; color:orange; background-color:white; borde>fault { display: inline-block; width: 150px; vertical-align: top;
>r: 3px solid orange; } .nonstandardIcon { display: inline-block; > font-weight: 700 } .method > .params > .param > .defaul
>width:8px; height:8px; color:red; background-color:red; border: 1>t: before { content: "Default "; color: #888; font-weight: normal
>px solid red; } .obsoleteIcon { display: inline-block; width:8px;> } /* version compatibility banners and notes */ .geckoVersionNot
> height:8px; color:black; background-color:black; border: 1px sol>e { background-color: #E0E0FF; background-image: -moz-radial-grad
>id black; } .deprecatedIcon { display: inline-block; width:4px; h>ient(0px 0 45deg, circle farthest-corner, #E0E0FF 0%, #F8F8FF 80%
>eight:4px; color:black; background-color:white; border: 3px solid>); border-left: 5px solid #008 } .geckoVersionNote p { padding-le
> black; } /* Used to to create icon-badged APIs inline */ .indexL>ft: 4px; border: 0 } .geckoVersionHeading { background-color: #00
>istRow { display: -ms-flexbox; display: -webkit-flex; display: fl>8; background-image: -moz-linear-gradient(left, #008 50%, #e0e0ff
>ex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-di> 80%); color: #fff; font: 16px/1.7 Verdana, Tahoma, sans-serif; m
>rection: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex->argin-top: 0; margin-left: 0; margin-bottom: 4px; height: 42px } 
>wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: s>.geckoVersionHeading a:link { color: #ddd } .geckoVersionHeading 
>tart; justify-content: flex-start; -webkit-align-content: stretch>a:visited { color: #eee } .geckoVersionHeading a:hover, .geckoVer
>; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-al>sionHeading a:focus { color: #fdd } .experimentalIcon { display: 
>ign-items: flex-start; -ms-flex-align: start; align-items: flex-s>inline-block; width:4px; height:4px; color:orange; background-col
>tart; /*width:100%;*/ } .indexListTerm { -webkit-order: 0; -ms-fl>or:white; border: 3px solid orange; } .nonstandardIcon { display:
>ex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto> inline-block; width:8px; height:8px; color:red; background-color
>; flex: 0 1 auto; -webkit-align-self: flex-start; -ms-flex-item-a>:red; border: 1px solid red; } .obsoleteIcon { display: inline-bl
>lign: start; align-self: flex-start; } .indexListBadges { -webkit>ock; width:8px; height:8px; color:black; background-color:black; 
>-order: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; ->border: 1px solid black; } .deprecatedIcon { display: inline-bloc
>ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: auto; -ms->k; width:4px; height:4px; color:black; background-color:white; bo
>flex-item-align: auto; align-self: flex-end; padding-left: 6px; m>rder: 3px solid black; } /* Used to to create icon-badged APIs in
>argin-right:6px; } .badge { position: relative; top: -2px; displa>line */ .indexListRow { display: -ms-flexbox; display: -webkit-fl
>y: inline-block; cursor: default; border: 1px solid #aaa; border->ex; display: flex; -webkit-flex-direction: row; -ms-flex-directio
>radius: 8px; padding: .1em .6em; font-size: 70%; font-weight: 700>n: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wr
>; height: 1.4em; vertical-align: middle; line-height: 1.3; } .bad>ap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -
>geText { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: >ms-flex-pack: start; justify-content: flex-start; -webkit-align-c
>none; hyphens: none; } .banner { display:block; overflow:hidden; >ontent: stretch; -ms-flex-line-pack: stretch; align-content: stre
>border: 1px solid #aaa; border-radius: 8px; font-size: 14px; font>tch; -webkit-align-items: flex-start; -ms-flex-align: start; alig
>-weight: normal; margin: 10px 0px; padding: 2px 10px; } .bannerHe>n-items: flex-start; /*width:100%;*/ } .indexListTerm { -webkit-o
>ading { text-align: center; font-weight: bold; padding-bottom: 2p>rder: 0; -ms-flex-order: 0; order: 0; -webkit-flex: 0 1 auto; -ms
>x; } .bannerText { text-align: center; font-weight: normal; } .ic>-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-self: flex-start; 
>on { padding-left: 3.1em } [dir=rtl] .icon { padding-left: .8em; >-ms-flex-item-align: start; align-self: flex-start; } .indexListB
>padding-right: 3.1em; } .icon:before { content: ""; position: abs>adges { -webkit-order: 0; -ms-flex-order: 0; order: 0; -webkit-fl
>olute; left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em; he>ex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-align-s
>ight: 2.8em; background: white no-repeat center center; backgroun>elf: auto; -ms-flex-item-align: auto; align-self: flex-end; paddi
>d-size: 2.6em; border-radius: 100%; border: 1px solid #aaa; borde>ng-left: 6px; margin-right:6px; } .badge { position: relative; to
>r-right: none; box-sizing: border-box; -moz-boxsizing: border-box>p: -2px; display: inline-block; cursor: default; border: 1px soli
>; } [dir=rtl] .icon:before { left: auto; right: -2px; border: 1px>d #aaa; border-radius: 8px; padding: .1em .6em; font-size: 70%; f
> solid #aaa; border-left: none; } /* Used for badging obsolete AP>ont-weight: 700; height: 1.4em; vertical-align: middle; line-heig
>Is */ .nonstandardBadge { background: linear-gradient(to right, #>ht: 1.3; } .badgeText { -webkit-hyphens: none; -moz-hyphens: none
>f0DE00 30%, #f0ff19); color: black; text-shadow: 1px 1px 0 #ddd; >; -ms-hyphens: none; hyphens: none; } .banner { display:block; ov
>} /* Used for badging Gecko minimum version requirements */ .geck>erflow:hidden; font-size: 14px; font-weight: normal; margin: 10px
>oVersionBadge { background: linear-gradient(to right, rgb(215, 23> 0px; padding: 2px 10px; } html:not(.redesign) .banner { border: 
>6, 161) 30%, rgb(204, 227, 144)); color: black; text-shadow: 1px >1px solid #aaa; border-radius: 8px; } .redesign .banner { font-si
>1px 0 #ddd; border-color: rgb(129, 142, 97); } /* Used for badgin>ze:12px; } .bannerHeading { text-align: center; font-weight: bold
>g Firefox minimum version requirements */ .firefoxVersionBadge { >; padding-bottom: 2px; } .redesign .bannerHeading { text-align: i
>background-color: #FEDF9E; background-image: linear-gradient(to r>nherit; } .bannerText { text-align: center; font-weight: normal; 
>ight, #FEDF9E 30%, #FEF1D4); background-repeat: no-repeat; backgr>} .icon { padding-left: 3.1em } [dir=rtl] .icon { padding-left: .
>ound-size: contain; overflow: hidden; color: black; text-shadow: >8em; padding-right: 3.1em; } .icon:before { content: ""; position
>1px 1px 0 #ccc; white-space: nowrap; } .firefoxVersionBadge a:lin>: absolute; left: -2px; top: 50%; margin-top: -1.5em; width: 2.8e
>k { color: black; text-decoration: underline; } .firefoxVersionBa>m; height: 2.8em; background: white no-repeat center center; back
>dge a:visited { color: black; text-decoration: underline; } .fire>ground-size: 2.6em; border-radius: 100%; border: 1px solid #aaa; 
>foxVersionBadge a:hover { color: #853; text-decoration: none; } .>border-right: none; box-sizing: border-box; -moz-boxsizing: borde
>firefoxVersionBadge a:active { color:#858; text-decoration: none;>r-box; } [dir=rtl] .icon:before { left: auto; right: -2px; border
> } /* Used for badging APIs not implemented in Firefox */ .unimpl>: 1px solid #aaa; border-left: none; } /* Used for badging obsole
>ementedBadge { background-color: lightpink; color: black; text-sh>te APIs */ .nonstandardBadge { background: linear-gradient(to rig
>adow: 1px 1px 0 #ddd; border-color: deeppink; } /* Used for badgi>ht, #f0DE00 30%, #f0ff19); color: black; text-shadow: 1px 1px 0 #
>ng non-standard APIs */ .obsoleteBadge { background: linear-gradi>ddd; } /* Used for badging Gecko minimum version requirements */ 
>ent(to right, #FEBCBC 30%, #fffff0); color: black; text-shadow: 1>.geckoVersionBadge { background: linear-gradient(to right, rgb(21
>px 1px 0 #ddd; border-color: #f00; } /* Used for badging deprecat>5, 236, 161) 30%, rgb(204, 227, 144)); color: black; text-shadow:
>ed APIs */ .deprecatedBadge { background: linear-gradient(to righ> 1px 1px 0 #ddd; border-color: rgb(129, 142, 97); } .redesign .ge
>t, #ccccff 30%, #eeeeff); color: #000; text-shadow: 1px 1px 0 #dd>ckoVersionBadge { background: rgba(117,195,165,0.44); border:5px 
>d; border-color: blue; } /* Used for badging experimental APIs */>solid rgba(0,0,0,0.05); } /* Used for badging Firefox minimum ver
> .experimentalBadge { background: linear-gradient(to right, #ffef>sion requirements */ .firefoxVersionBadge { background-color: #FE
>d9 40%, #fffde0); color: #000; text-shadow: 1px 1px 0 #ddd; } /* >DF9E; background-image: linear-gradient(to right, #FEDF9E 30%, #F
>Used for badging privileged APIs */ .privilegedBadge { background>EF1D4); background-repeat: no-repeat; background-size: contain; o
>: linear-gradient(to right, #FFBD19 30%, #ffb200); color: #000; t>verflow: hidden; color: black; text-shadow: 1px 1px 0 #ccc; white
>ext-shadow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBadge { backgr>-space: nowrap; } .firefoxVersionBadge a:link { color: black; tex
>ound: linear-gradient(to left, #FFBD19 30%, #ffb200); } .icon.pri>t-decoration: underline; } .firefoxVersionBadge a:visited { color
>vilegedBadge:before { background-color: orange; background-image:>: black; text-decoration: underline; } .firefoxVersionBadge a:hov
> url(https://mdn.mozillademos.org/files/5061/firefoxos-logo-sm.pn>er { color: #853; text-decoration: none; } .firefoxVersionBadge a
>g); } .sidebar-box { margin-left: 16px; margin-bottom: 2.5em; bor>:active { color:#858; text-decoration: none; } /* Used for badgin
>der-right: 1px solid #ecf1f3; padding: 12px; background: #f1f6f8 >g APIs not implemented in Firefox */ .unimplementedBadge { backgr
>url("img/toc-bg.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, >ound-color: lightpink; color: black; text-shadow: 1px 1px 0 #ddd;
>sans-serif } .sidebar-box h2, .sidebar-box h3, .sidebar-box h5 { > border-color: deeppink; } /* Used for badging non-standard APIs 
>margin-bottom: .5em; font-family: inherit; font-weight: 700 } .si>*/ .obsoleteBadge { background: linear-gradient(to right, #FEBCBC
>debar-box h2 { font-size: 1.5em } .sidebar-box h3 { font-size: 1.> 30%, #fffff0); color: black; text-shadow: 1px 1px 0 #ddd; border
>1em } .sidebar-box h5 { font-size: .9em } .sidebar-box > ul { >-color: #f00; } /* Used for badging deprecated APIs */ .deprecate
>float: left; text-align: left; display: block; padding: 0; margin>dBadge { background: linear-gradient(to right, #ccccff 30%, #eeee
>: auto 0; position: relative } .sidebar-box ul > li { list-sty>ff); color: #000; text-shadow: 1px 1px 0 #ddd; border-color: blue
>le-type: none } .tab-content-box { border-right: 1px solid #ecf1f>; } /* Used for badging experimental APIs */ .experimentalBadge {
>3; margin-left: 16px; padding: 12px; background: #fff; font: 12px> background: linear-gradient(to right, #ffefd9 40%, #fffde0); col
> Verdana, Tahoma, sans-serif } .tab-content-box h2, .tab-content->or: #000; text-shadow: 1px 1px 0 #ddd; } /* Used for badging priv
>box h3, .tab-content-box h5 { margin-bottom: .5em; font-family: i>ileged APIs */ .privilegedBadge { background: linear-gradient(to 
>nherit; font-weight: 700 } .tab-content-box h2 { font-size: 1.5em>right, #FFBD19 30%, #ffb200); color: #000; text-shadow: 1px 1px 0
> } .tab-content-box h3 { font-size: 1.1em } .tab-content-box h5 {> #ddd; } [dir=rtl] .privilegedBadge { background: linear-gradient
> font-size: .9em } #menuFiller { display: block } /* Horizontal t>(to left, #FFBD19 30%, #ffb200); } .icon.privilegedBadge:before {
>ab boxes */ .htab { margin: 0 auto 1em; display: inline-block; } > background-color: orange; background-image: url(https://mdn.mozi
>.htab>ul>li { width: 150px; height: 28px; list-style-type: >llademos.org/files/5061/firefoxos-logo-sm.png); } .sidebar-box { 
>none; display: inline; padding-bottom: 3px; border: 1px solid #dd>margin-left: 16px; margin-bottom: 2.5em; border-right: 1px solid 
>d; border-radius: 3px 3px 0 0; padding-top: 5px; text-align: left>#ecf1f3; padding: 12px; background: #f1f6f8 url("img/toc-bg.png")
>; font-size: 13px; font-weight: bold; margin: auto; position: rel> 0 0 no-repeat; font: 12px Verdana, Tahoma, sans-serif } .sidebar
>ative; padding-left: 6px; padding-right: 6px; border-bottom: none>-box h2, .sidebar-box h3, .sidebar-box h5 { margin-bottom: .5em; 
>; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alp>font-family: inherit; font-weight: 700 } .sidebar-box h2 { font-s
>ha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(>ize: 1.5em } .sidebar-box h3 { font-size: 1.1em } .sidebar-box h5
>Opacity=50); cursor: pointer; } .htab>ul>li.selected { opac> { font-size: .9em } .sidebar-box > ul { float: left; text-ali
>ity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opac>gn: left; display: block; padding: 0; margin: auto 0; position: r
>ity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacit>elative } .sidebar-box ul > li { list-style-type: none } .tab-
>y=100); border: 1px solid #ddd; border-bottom: none; z-index: 10;>content-box { border-right: 1px solid #ecf1f3; margin-left: 16px;
> background-color: #f1f6f8!important; position: relative; cursor:> padding: 12px; background: #fff; font: 12px Verdana, Tahoma, san
> pointer; } .htab>ul { width: 150px; text-align: left; display>s-serif } .tab-content-box h2, .tab-content-box h3, .tab-content-
>: inline; padding: 0; margin: 0 auto; position: relative; top: 0;>box h5 { margin-bottom: .5em; font-family: inherit; font-weight: 
> } .htab>div { background-color: #f1f6f8; margin-top: 0; borde>700 } .tab-content-box h2 { font-size: 1.5em } .tab-content-box h
>r: 1px solid #ddd; padding: 12px; position: relative; z-index: 9;>3 { font-size: 1.1em } .tab-content-box h5 { font-size: .9em } #m
> word-wrap: break-word; } /* Compatibility tables */ table.compat>enuFiller { display: block } /* Horizontal tab boxes */ .htab { m
>-table { border-color: #bbb; margin: 0 } table.compat-table td { >argin: 0 auto 1em; display: inline-block; } .htab>ul>li { w
>padding: 5px; border: 1px solid #ccc; background: #fff; vertical->idth: 150px; height: 28px; list-style-type: none; display: inline
>align: top; word-wrap: break-word } table.compat-table th, table.>; padding-bottom: 3px; border: 1px solid #ddd; border-radius: 3px
>compat-table td.header { border: 1px solid #bbb; padding: 0 5px; > 3px 0 0; padding-top: 5px; text-align: left; font-size: 13px; fo
>background: #eee; font-weight: 700 } div.action-driven { display:>nt-weight: bold; margin: auto; position: relative; padding-left: 
> inline-block; float: none; min-height: 8.5em; margin: .8em; box->6px; padding-right: 6px; border-bottom: none; opacity: .5; -ms-fi
>shadow: .2em .1em .1em #808080; vertical-align: top; } div.action>lter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filt
>-driven > div { font: 400 20px 'Bebas Neue', 'League Gothic', >er: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); cursor: 
>Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; tex>pointer; } .htab>ul>li.selected { opacity: 1; -ms-filter: "
>t-transform: uppercase } /* standard coloring */ .notice.experime>progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: pr
>ntal { border-color: #09d; color: 0; background-color: #C9EDFC;cl>ogid:DXImageTransform.Microsoft.Alpha(Opacity=100); border: 1px s
>ear:none;} /* New theme action-driven */ .card-grid > li > >olid #ddd; border-bottom: none; z-index: 10; background-color: #f
>span:first-of-type {font-weight: bold} @media only screen and (mi>1f6f8!important; position: relative; cursor: pointer; } .htab>
>n-width:760px) { .card-grid { list-style: none outside none; } .c>ul { width: 150px; text-align: left; display: inline; padding: 0;
>ard-grid > li > span:first-of-type {font-weight: normal} .c> margin: 0 auto; position: relative; top: 0; } .htab>div { bac
>ard-grid > li { background-color: rgb(204, 204, 204); backgrou>kground-color: #f1f6f8; margin-top: 0; border: 1px solid #ddd; pa
>nd-image: -moz-linear-gradient(center top , rgb(221, 221, 221) 0p>dding: 12px; position: relative; z-index: 9; word-wrap: break-wor
>x, rgb(187, 187, 187) 100%); border-radius: 6px; background-clip:>d; } /* Compatibility tables */ table.compat-table { border-color
> padding-box; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); display>: #bbb; margin: 0 } .redesign table.compat-table { border-color:r
>: inline-block; margin: 3px 12px 20px; padding: 20px; position: r>gba(0,0,0,0); } table.compat-table td { padding: 5px; border: 1px
>elative; vertical-align: top; width: 200px; word-wrap: break-word> solid #ccc; background: #fff; vertical-align: top; word-wrap: br
>; z-index: 1; min-height: 130px; } .card-grid > li:before { ba>eak-word } .redesign table.compat-table td { border:1px solid rgb
>ckground: none repeat scroll 0% 0% padding-box rgb(255, 255, 255)>a(212,221,228,0.25); font-size:12px; } table.compat-table th, tab
>; border-radius: 5px; bottom: 1px; content: ""; left: 1px; positi>le.compat-table td.header { border: 1px solid #bbb; padding: 0 5p
>on: absolute; right: 1px; top: 1px; z-index: -1; } .card-grid &gt>x; background: #eee; font-weight: 700 } .redesign table.compat-ta
>; li span { display: block; font-family: 'Open Sans Light',Arial,>ble th, .redesign table.compat-table td.header { border:1px solid
>Helvetica,sans-serif; font-size: 22px; letter-spacing: -1px; line> rgba(212,221,228,0); background:none; font-weight:200; font-fami
>-height: 22px; margin-bottom: 12px; } } /*----------------- for T>ly:'Open Sans Light',sans-serif; font-size:16px; line-height:100%
>opic page */ table.topicpage-table, table.topicpage-table td, tab>; padding:2px 4px 8px; } div.action-driven { display: inline-bloc
>le.topicpage-table tr, table.topicpage-table th { border: none } >k; float: none; min-height: 8.5em; margin: .8em; box-shadow: .2em
>.topicpage-table .section { padding-right:1em} /* New theme */ dl> .1em .1em #808080; vertical-align: top; } div.action-driven >
> { margin-bottom: 20px} .center .topicpage-table h2 { font-family> div { font: 400 20px 'Bebas Neue', 'League Gothic', Haettenschwe
>: 'Open Sans Light', sans-serif } .topicpage-table ul {padding-le>iler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform:
>ft: 20px; } /* Old theme */ /* "table.topicpage-table h2 { --font> uppercase } /* standard coloring */ .notice.experimental { borde
>-setting-- }" is better than this. .topicpage-table .Documentatio>r-color: #09d; color: 0; background-color: #C9EDFC;clear:none;} .
>n, .topicpage-table .Community, .topicpage-table .Tools, .topicpa>redesign .notice.experimental { background-color:rgba(255,203,0,0
>ge-table .Related_Topics { background-image: url('/media/img/icon>.5); border-color:rgba(0,0,0,0.05); border-style:solid!important;
>s-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em> border-width:5px!important; } /* New theme action-driven */ .car
>; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 '>d-grid > li > span:first-of-type {font-weight: bold} @media
>Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Na> only screen and (min-width:760px) { .card-grid { list-style: non
>rrow', Meiryo, sans-serif; text-transform: uppercase; border: non>e outside none; } .card-grid > li > span:first-of-type {fon
>e } */ /* this is an unadorned heading, without an icon */ //.top>t-weight: normal} .card-grid > li { background-color: rgb(204,
>icpage-table .Heading { margin: 0 0 .25em; padding: 18px 18px 0 0> 204, 204); background-image: -moz-linear-gradient(center top , r
>; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic>gb(221, 221, 221) 0px, rgb(187, 187, 187) 100%); border-radius: 6
>', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; >px; background-clip: padding-box; box-shadow: 0px 2px 4px rgba(0,
>text-transform: uppercase; border: none } /* [dir="rtl"] .topicpa> 0, 0, 0.1); display: inline-block; margin: 3px 12px 20px; paddin
>ge-table .Documentation, [dir="rtl"] .topicpage-table .Community,>g: 20px; position: relative; vertical-align: top; width: 200px; w
> [dir="rtl"] .topicpage-table .Tools, [dir="rtl"] .topicpage-tabl>ord-wrap: break-word; z-index: 1; min-height: 130px; } .card-grid
>e .Heading, [dir="rtl"] .topicpage-table .Related_Topics { paddin> > li:before { background: none repeat scroll 0% 0% padding-bo
>g: 18px 65px 0 18px; } .topicpage-table .Documentation { backgrou>x rgb(255, 255, 255); border-radius: 5px; bottom: 1px; content: "
>nd-position: 0 0 } .topicpage-table .Community { background-posit>"; left: 1px; position: absolute; right: 1px; top: 1px; z-index: 
>ion: 0 -200px } .topicpage-table .Tools { background-position: 0 >-1; } .redesign .card-grid > li:before { background: none; bor
>-400px } .topicpage-table .Related_Topics { background-position: >der-radius: 0; } .card-grid > li span { display: block; font-f
>0 -600px } [dir="rtl"] .topicpage-table .Documentation { backgrou>amily: 'Open Sans Light',Arial,Helvetica,sans-serif; font-size: 2
>nd-position: right 0 } [dir="rtl"] .topicpage-table .Community { >2px; letter-spacing: -1px; line-height: 22px; margin-bottom: 12px
>background-position: right -200px } [dir="rtl"] .topicpage-table >; } } .redesign .card-grid > li { background-color:rgba(234,23
>.Tools { background-position: right -400px } [dir="rtl"] .topicpa>9,242,0.5); border-radius: 0; box-shadow:3px 3px 0 3px rgba(212,2
>ge-table .Related_Topics { background-position: right -600px } */>21,228,0.5); background-image: none; } /*----------------- for To
> /* for Topic Page 2 (This is Test )*/ /* USAGE:>pic page */ table.topicpage-table, table.topicpage-table td, tabl
 >e.topicpage-table tr, table.topicpage-table th { border: none } .
 >topicpage-table .section { padding-right:1em} /* New theme */ dl 
 >{ margin-bottom: 20px} .center .topicpage-table h2 { font-family:
 > 'Open Sans Light', sans-serif } .topicpage-table ul {padding-lef
 >t: 20px; } /* Old theme */ /* "table.topicpage-table h2 { --font-
 >setting-- }" is better than this. .topicpage-table .Documentation
 >, .topicpage-table .Community, .topicpage-table .Tools, .topicpag
 >e-table .Related_Topics { background-image: url('/media/img/icons
 >-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em;
 > padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'B
 >ebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Nar
 >row', Meiryo, sans-serif; text-transform: uppercase; border: none
 > } */ /* this is an unadorned heading, without an icon */ //.topi
 >cpage-table .Heading { margin: 0 0 .25em; padding: 18px 18px 0 0;
 > min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic'
 >, Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; t
 >ext-transform: uppercase; border: none } /* [dir="rtl"] .topicpag
 >e-table .Documentation, [dir="rtl"] .topicpage-table .Community, 
 >[dir="rtl"] .topicpage-table .Tools, [dir="rtl"] .topicpage-table
 > .Heading, [dir="rtl"] .topicpage-table .Related_Topics { padding
 >: 18px 65px 0 18px; } .topicpage-table .Documentation { backgroun
 >d-position: 0 0 } .topicpage-table .Community { background-positi
 >on: 0 -200px } .topicpage-table .Tools { background-position: 0 -
 >400px } .topicpage-table .Related_Topics { background-position: 0
 > -600px } [dir="rtl"] .topicpage-table .Documentation { backgroun
 >d-position: right 0 } [dir="rtl"] .topicpage-table .Community { b
 >ackground-position: right -200px } [dir="rtl"] .topicpage-table .
 >Tools { background-position: right -400px } [dir="rtl"] .topicpag
 >e-table .Related_Topics { background-position: right -600px } */ 
 >/* for Topic Page 2 (This is Test )*/ /* USAGE:
t19    </div>*/ .topicpage2col { margin: 1em 0; padding: 0 10px; zoot19    </div>*/ .topicpage2col { margin: 1em 0; padding: 0 10px; zoo
>m: 1; } .topicpage2col::after { content: "."; display: block; hei>m: 1; } .topicpage2col::after { content: "."; display: block; hei
>ght: 0; clear: both; visibility: hidden; } .topicpage2col .A, .to>ght: 0; clear: both; visibility: hidden; } .topicpage2col .A, .to
>picpage2col .B { width: 50%; position: relative } .html-ltr .topi>picpage2col .B { width: 50%; position: relative } .html-ltr .topi
>cpage2col .A, .html-rtl .topicpage2col .B { float: left; left: -1>cpage2col .A, .html-rtl .topicpage2col .B { float: left; left: -1
>0px } .html-ltr .topicpage2col .B, .html-rtl .topicpage2col .A { >0px } .html-ltr .topicpage2col .B, .html-rtl .topicpage2col .A { 
>float: right; right: -10px } .topicpage2col h2 { background-image>float: right; right: -10px } .topicpage2col h2 { background-image
>: url('/media/img/icons-sections.png'); background-repeat: no-rep>: url('/media/img/icons-sections.png'); background-repeat: no-rep
>eat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48>eat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48
>px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschwei>px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschwei
>ler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: >ler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: 
>uppercase; border: none } .html-rtl .topicpage2col h2 { padding: >uppercase; border: none } .html-rtl .topicpage2col h2 { padding: 
>18px 65px 0 18px; } .html-ltr .topicpage2col .Documentation { bac>18px 65px 0 18px; } .html-ltr .topicpage2col .Documentation { bac
>kground-position: 0 0 } .html-ltr .topicpage2col .Community { bac>kground-position: 0 0 } .html-ltr .topicpage2col .Community { bac
>kground-position: 0 -200px } .html-ltr .topicpage2col .Tools { ba>kground-position: 0 -200px } .html-ltr .topicpage2col .Tools { ba
>ckground-position: 0 -400px } .html-ltr .topicpage2col .Related_T>ckground-position: 0 -400px } .html-ltr .topicpage2col .Related_T
>opics { background-position: 0 -600px } .html-rtl .topicpage2col >opics { background-position: 0 -600px } .html-rtl .topicpage2col 
>.Documentation { background-position: right 0 } .html-rtl .topicp>.Documentation { background-position: right 0 } .html-rtl .topicp
>age2col .Community { background-position: right -200px } .html-rt>age2col .Community { background-position: right -200px } .html-rt
>l .topicpage2col .Tools { background-position: right -400px } .ht>l .topicpage2col .Tools { background-position: right -400px } .ht
>ml-rtl .topicpage2col .Related_Topics { background-position: righ>ml-rtl .topicpage2col .Related_Topics { background-position: righ
>t -600px } /* ---------------------------- Styles for Indicator *>t -600px } /* ---------------------------- Styles for Indicator *
>/ .inlineIndicator, .indicatorInHeadline, .blockIndicator, .overh>/ .inlineIndicator, .indicatorInHeadline, .blockIndicator, .overh
>eadIndicator { /*box-shadow: 1px 1px 1px #CCC*/ margin: 0px 0px 1>eadIndicator { /*box-shadow: 1px 1px 1px #CCC*/ margin: 0px 0px 1
>.5em; border: 5px solid; padding: 10px 10px 0px 10px; background:>.5em; border: 5px solid; padding: 10px 10px 0px 10px; background:
> none repeat scroll 0% 0%; font-size: 12px; } /* styles for inlin> none repeat scroll 0% 0%; font-size: 12px; } .redesign .inlineIn
>e indicator */ .inlineIndicator /* This class is base of inlineIn>dicator, .redesign .indicatorInHeadline, .redesign .blockIndicato
>dicator */ , .megaWarningInline { border-width: 1px; border-style>r, .redesign .overheadIndicator { /* background-color:rgba(255,20
>: solid; font-size: smaller; white-space: nowrap; padding: 0 2px;>3,0,0.75); */ border-color:rgba(0,0,0,0.05); border-style: solid 
> margin: 0 2px } .todoInline { border-left-width: 8px; white-spac>!important; border-width: 5px !important; } /* styles for inline 
>e: normal } .megaWarningInline { background: red; border-color: #>indicator */ .inlineIndicator /* This class is base of inlineIndi
>818151; color: #fff; font-size: small; font-weight: 700; float: r>cator */ , .megaWarningInline { border-width: 1px; border-style: 
>ight; vertical-align: middle; /* Mega warnings: deep red backgrou>solid; font-size: smaller; white-space: nowrap; padding: 0 2px; m
>nds etc */ } .notXPCOMInline, .noscriptInline { font-weight: 700 >argin: 0 2px } .todoInline { border-left-width: 8px; white-space:
>} /* styles for overhead indicator */ /*.overheadIndicator *//* T> normal } .megaWarningInline { background: red; border-color: #81
>his class is base of overheadIndicator */ , .standardNoteHeader, >8151; color: #fff; font-size: small; font-weight: 700; float: rig
>.standardNoteBlock { border: 1px solid #000; overflow: hidden; ma>ht; vertical-align: middle; /* Mega warnings: deep red background
>rgin: 10px 0; padding: 0 10px; text-align: center } /*.overheadIn>s etc */ } .notXPCOMInline, .noscriptInline { font-weight: 700 } 
>dicator p,*/ .blockIndicator p { margin: 4px 0 } .draftHeader str>/* styles for overhead indicator */ /*.overheadIndicator *//* Thi
>ong { display: block; padding-top: 10px } .draftHeader div { font>s class is base of overheadIndicator */ , .standardNoteHeader, .s
>-size: x-small; padding-bottom: 10px } .warningHeader { backgroun>tandardNoteBlock { border: 1px solid #000; overflow: hidden; marg
>d: #FBEDEC url(/files/578/Nuvola_apps_important.png) no-repeat 9p>in: 10px 0; padding: 0 10px; text-align: center } /*.overheadIndi
>x 10px !important; min-height: 103px; padding: 1em 1em 1em 130px >cator p,*/ .blockIndicator p { margin: 4px 0 } .draftHeader stron
>!important; overflow: hidden; } html[dir="rtl"] .warningHeader { >g { display: block; padding-top: 10px } .draftHeader div { font-s
>padding: 1em 130px 1em 1em !important; background-position: 99% 1>ize: x-small; padding-bottom: 10px } html:not(.redesign) .warning
>0px !important; } /* styles for Method indicator */ .indicatorInH>Header { background: #FBEDEC url(/files/578/Nuvola_apps_important
>eadline, .standardNoteMethod { border: 1px solid #000; padding: 1>.png) no-repeat 9px 10px !important; min-height: 103px; padding: 
>px 2px; white-space: nowrap; vertical-align: middle; font-size: s>1em 1em 1em 130px !important; overflow: hidden; } html[dir="rtl"]
>maller; float: right; } [dir="rtl"] .indicatorInHeadline, [dir="r> .warningHeader { padding: 1em 130px 1em 1em !important; backgrou
>tl"] .standardNoteMethod { float: left; } .renamedMethod, .noscri>nd-position: 99% 10px !important; } /* styles for Method indicato
>ptMethod, .deprecatedMethod, .unimplementedMethod { font-weight: >r */ .indicatorInHeadline, .standardNoteMethod { border: 1px soli
>700 } /* color setting */ #wikiArticle i.icon-beaker { color: #09>d #000; padding: 1px 2px; white-space: nowrap; vertical-align: mi
>d } /* experimental */ #wikiArticle i.icon-warning-sign { color: >ddle; font-size: smaller; float: right; } [dir="rtl"] .indicatorI
>#db0 } /* non-standard */ #wikiArticle i.icon-thumbs-down-alt { c>nHeadline, [dir="rtl"] .standardNoteMethod { float: left; } .rena
>olor: #000 } /* deprecated */ #wikiArticle i.icon-trash { color: >medMethod, .noscriptMethod, .deprecatedMethod, .unimplementedMeth
>#d00 } /* obsolete */ #wikiArticle i.icon-stethoscope { color: da>od { font-weight: 700 } /* color setting */ #wikiArticle i.icon-b
>rkslateblue } /* unimplemented */ .draft { background: #FFC; bord>eaker { color: #09d } /* experimental */ #wikiArticle i.icon-warn
>er-color: #990 } .htmlVer { background: #CEE; border-color: #2673>ing-sign { color: #db0 } /* non-standard */ #wikiArticle i.icon-t
>73 } .standardNote { background: #fef49c; border-color: maroon } >humbs-down-alt { color: #000 } /* deprecated */ #wikiArticle i.ic
>.optional { background: #C0FFC7; border-color: #50AF5B } .nonStan>on-trash { color: #d00 } /* obsolete */ #wikiArticle i.icon-steth
>dard { background: #F5F2D5; border-color: #F5E5B8 } .unimplemente>oscope { color: darkslateblue } /* unimplemented */ .draft { back
>d { background: #f9c; border-color: #f66f6f } .deprecated { backg>ground: #FFC; border-color: #990 } .redesign .draft { background:
>round: #eeeeee; border-color: #DDDDDD } .renamed { background: #d>rgba(255,203,0,0.5); border-color:rgba(0,0,0,0.05); } .htmlVer { 
>4f3ff; border-color: #818151 } .obsolete { background: #FAD9D9; b>background: #CEE; border-color: #267373 } .redesign .htmlVer { bo
>order-color: #FA9B9B } .domLevel { background: #e1e1ff; border-co>rder-color:rgba(0,0,0,0.05); } html:not(.redesign) .standardNote 
>lor: #818151 } .todo { background: #ff9; border-color: #c1272d } >{ background: #fef49c; border-color: maroon } html:not(.redesign)
>.minVer { background: #ffffe1; border-color: #818151 } .jsMinVer > .optional { background: #C0FFC7; border-color: #50AF5B } .nonSta
>{ background: #ffffe1; border-color: #818151 } .mbMinVer { backgr>ndard { background: #F5F2D5; border-color: #F5E5B8 } .redesign .n
>ound: #ffffe1; border-color: #818151 } .mobileOnly { background: >onStandard { background:rgba(193,56,50,0.85); color:#FFF; border-
>#FFE1BE; border-color: #EED0AD } .renamed { background: #d4f3ff; >color:rgba(0,0,0,0.05); } .unimplemented { background: #f9c; bord
>border-color: #818151 } .notXPCOM { background: orange; border-co>er-color: #f66f6f } .redesign .unimplemented { background:rgba(19
>lor: #818151 } .renamed { background: #d4f3ff; border-color: #818>3,56,50,0.35); border-color:rgba(0,0,0,0.05); } .deprecated { bac
>151 } .projectSpecific{ background: #ffe1be; border-color: #81815>kground: #eeeeee; border-color: #DDDDDD } .redesign .deprecated {
>1 } .prefixBox { background: #e4edf7; border-color: #818151 } .ex> background:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.05); } htm
>perimental { background: #ffefd9; border-color: #ff9500 } .readOn>l:not(.redesign) .renamed { background: #d4f3ff; border-color: #8
>ly { background: #222; border-color: #222; color: #FFF } .noscrip>18151 } html:not(.redesign) .obsolete { background: #FAD9D9; bord
>t { background: red; border-color: #818151; color: #FFF } .projec>er-color: #FA9B9B } .domLevel { background: #e1e1ff; border-color
>tSpecific{ background: #ffe1be; border-color: #818151; } /* Banne>: #818151 } .redesign .domLevel { border-color:rgba(0,0,0,0.05); 
>r used to indicate support only in specific Gecko projects */ .tr>} .todo { background: #ff9; border-color: #c1272d } .redesign .to
>anslationInProgress { background: #A3F5A3; border-color: #14B814 >do { border-color:rgba(0,0,0,0.05); } .minVer { background: #ffff
>} /* style for next and previous pages in tutorial */ a.nextPage >e1; border-color: #818151 } .jsMinVer { background: #ffffe1; bord
>{ display: inline-block; margin: 0 3px 1em; font-size: 1.25em } a>er-color: #818151 } .mbMinVer { background: #ffffe1; border-color
>.nextPage:link, a.nextPage:visited { background-color: #069 } a.n>: #818151 } .redesign .minVer,.redesign .jsMinVer,.redesign .mbMi
>extPage:hover, a.nextPage:focus { background-color: #0099E6 } a.n>nVer { border-color:rgba(0,0,0,0.05); } .mobileOnly { background:
>extPage { float:right } [dir="rtl"] a.nextPage { background-posit> #FFE1BE; border-color: #EED0AD } .redesign .mobileOnly { border-
>ion: left 40% !important; padding: .35em .75em .2em !important; p>color:rgba(0,0,0,0.05); background: #FFE1BE; } .renamed { backgro
>osition: left;} a.previousPage { display: block; margin: 0 1em 2e>und: #d4f3ff; border-color: #818151 } html:not(.redesign) .notXPC
>m 0; font-size: 1.25em } a.previousPage:link, a.previousPage:visi>OM { background: orange; border-color: #818151 } .renamed { backg
>ted { background-color: #069 } a.previousPage:hover, a.previousPa>round: #d4f3ff; border-color: #818151 } .projectSpecific{ backgro
>ge:focus { background-color: #0099E6 } a.previousPage { float:lef>und: #ffe1be; border-color: #818151 } .redesign .projectSpecific 
>t } [dir="rtl"] a.previousPage { background-position: left 40% !i>{ border-color:rgba(0,0,0,0.05); } .prefixBox { background: #e4ed
>mportant; padding: .35em .75em .2em !important; position: right;}>f7; border-color: #818151 } .redesign .prefixBox { border-color:r
> /* styles for liveSample link : https://developer.mozilla.org/en>gba(0,0,0,0.05); } .experimental { background: #ffefd9; border-co
>-US/docs/Template:LiveSample */ a.liveSample { display: inline-bl>lor: #ff9500 } .redesign .experimental { border-color:rgba(0,0,0,
>ock; margin: 0 3px 1em; font-size: 1.25em } a.liveSample:link, a.>0.05); } .readOnly { background: #222; border-color: #222; color:
>liveSample:visited { background-color: #069 } a.liveSample:hover,> #FFF } .redesign .readOnly { background:rgba(0,0,0,0.65); border
> a.liveSample:focus { background-color: #0099E6 } [dir="rtl"] a.l>-color:rgba(0,0,0,0.15); } .noscript { background: red; border-co
>iveSample { background-position: left 40% !important; padding: .3>lor: #818151; color: #FFF } .redesign .noscript { border-color:rg
>5em .75em .2em !important; } /* callout boxes etc */ .standardSid>ba(0,0,0,0.05); } .projectSpecific{ background: #ffe1be; border-c
>ebar { border: 1px solid #777; margin: 0 0 15px 15px; padding: 0 >olor: #818151; } /* Banner used to indicate support only in speci
>15px 5px; float: right; background: #eee; font-size: .85em; posit>fic Gecko projects */ .translationInProgress { background: #A3F5A
>ion: relative; z-index: 2; } [dir="rtl"] .standardSidebar { margi>3; border-color: #14B814 } .redesign .translationInProgress { bor
>n: 0 15px 15px 0; float: left } /* Colored text for INCORRECT/BAD>der-color:rgba(0,0,0,0.05); } /* style for next and previous page
> and CORRECT/GOOD values (and BEST)*/ .correct { color: green } .>s in tutorial */ a.nextPage { display: inline-block; margin: 0 3p
>incorrect { color: red } .best { color: #396 } /* Item in a list >x 1em; font-size: 1.25em } a.nextPage:link, a.nextPage:visited { 
>of item that has been done */ .done { text-decoration: line-throu>background-color: #069 } a.nextPage:hover, a.nextPage:focus { bac
>gh } /* Specific items for tutorials */ .tuto_details, .tuto_exam>kground-color: #0099E6 } a.nextPage { float:right } [dir="rtl"] a
>ple { border: 1px solid #36b; padding: .5em; margin-bottom: 1em }>.nextPage { background-position: left 40% !important; padding: .3
> .tuto_details { background: #f4f4f4 } .tuto_example { background>5em .75em .2em !important; position: left;} a.previousPage { disp
>: #fffff4 } .tuto_type { font-weight: 700; text-align: left } /* >lay: block; margin: 0 1em 2em 0; font-size: 1.25em } a.previousPa
>This is a specific item for the CSS tutorial: https://developer.m>ge:link, a.previousPage:visited { background-color: #069 } a.prev
>ozilla.org/en-US/docs/CSS/Getting_Started/Selectors */ /* To be r>iousPage:hover, a.previousPage:focus { background-color: #0099E6 
>emoved once we have Live Examples */ a.tutospecial:link, a.tutosp>} a.previousPage { float:left } [dir="rtl"] a.previousPage { back
>ecial:visited { padding: 1px 10px; color: #fff; background: #555;>ground-position: left 40% !important; padding: .35em .75em .2em !
> border-radius: 3px; border: 1px outset #333 /* fallback for next>important; position: right;} /* styles for liveSample link : http
> line */ ; border: 1px outset rgba(50,50,50,.5); font-family: geo>s://developer.mozilla.org/en-US/docs/Template:LiveSample */ a.liv
>rgia, serif; font-size: 14px; font-style: italic; text-decoration>eSample { display: inline-block; margin: 0 3px 1em; font-size: 1.
>: none; } a.tutospecial:hover, a.tutospecial:focus, a.tutospecial>25em } a.liveSample:link, a.liveSample:visited { background-color
>:active {background-color: #666;} #tutochallenge { display:none }>: #069 } a.liveSample:hover, a.liveSample:focus { background-colo
> #tutochallenge a.hideAnswer { font-size:smaller; text-align:righ>r: #0099E6 } [dir="rtl"] a.liveSample { background-position: left
>t ; display:block} #tutochallenge:target { display:block;} #tutoc> 40% !important; padding: .35em .75em .2em !important; } /* callo
>hallenge + a { font-size:smaller; text-align:right; display:block>ut boxes etc */ .standardSidebar { border: 1px solid #777; margin
>} #tutochallenge:target + a { display:none; } /* Fix for mdn-min.>: 0 0 15px 15px; padding: 0 15px 5px; float: right; background: #
>css : https://developer.mozilla.org/media/css/mdn-min.css */ [dir>eee; font-size: .85em; position: relative; z-index: 2; } [dir="rt
>="rtl"] dd { margin: 0 22px .5em 0 } [dir="rtl"] th, [dir="rtl"] >l"] .standardSidebar { margin: 0 15px 15px 0; float: left } /* Co
>caption { text-align: right } [dir="rtl"] .title h1 { padding: 0 >lored text for INCORRECT/BAD and CORRECT/GOOD values (and BEST)*/
>18px 0 0 !important } [lang="he"] #site-search { float: left; tex> .correct { color: green } .incorrect { color: red } .best { colo
>t-align: right; margin: -8px 0 0 100px; width: 295px } [lang="de">r: #396 } /* Item in a list of item that has been done */ .done {
>] #site-search { margin-right: 179px } /* Fix for wiki-min.css : > text-decoration: line-through } /* Specific items for tutorials 
>https://developer.mozilla.org/media/css/wiki-min.css */ div.bug, >*/ .tuto_details, .tuto_example { border: 1px solid #36b; padding
>div.warning { overflow: hidden } .page-content dd { margin: .5em >: .5em; margin-bottom: 1em } .tuto_details { background: #f4f4f4 
>} /* [dir="rtl"] .translate #page-buttons { } */ [dir="rtl"] .has>} .tuto_example { background: #fffff4 } .tuto_type { font-weight:
>JS #nav-main #nav-sub-docs, [dir="rtl"] #nav-main .menu:hover #na> 700; text-align: left } /* This is a specific item for the CSS t
>v-sub-docs { margin-left: -300px } [dir="rtl"] #nav-main #nav-sub>utorial: https://developer.mozilla.org/en-US/docs/CSS/Getting_Sta
>-docs li { float: right } [dir="rtl"] #nav-main #nav-sub-docs p {>rted/Selectors */ /* To be removed once we have Live Examples */ 
> text-align: left } [dir="rtl"] .page-content ul { padding-left: >a.tutospecial:link, a.tutospecial:visited { padding: 1px 10px; co
>0; padding-right: 22px } [dir="rtl"] .page-content dd { padding-l>lor: #fff; background: #555; border-radius: 3px; border: 1px outs
>eft: 0; padding-right: 15px } [dir="rtl"] .article a.external, [d>et #333 /* fallback for next line */ ; border: 1px outset rgba(50
>ir="rtl"] .article a[rel~="external"], [dir="rtl"] .article a[hre>,50,50,.5); font-family: georgia, serif; font-size: 14px; font-st
>f^="news://"] { padding-right: 0; background-position: 1% 40% } [>yle: italic; text-decoration: none; } a.tutospecial:hover, a.tuto
>dir="rtl"] .article a.external, [dir="rtl"] .article a[rel~="exte>special:focus, a.tutospecial:active {background-color: #666;} #tu
>rnal"] { padding-left: 16px } [dir="rtl"] .article a[href^="news:>tochallenge { display:none } #tutochallenge a.hideAnswer { font-s
>//"] { padding-left: 18px } /* for B2G docs, to allow use of B2G >ize:smaller; text-align:right ; display:block} #tutochallenge:tar
>lookalike UX elements */ /* For display of Firefox OS UX screensh>get { display:block;} #tutochallenge + a { font-size:smaller; tex
>ots in a grid */ table.fxosScreenGrid, table.fxosScreenGrid tr { >t-align:right; display:block} #tutochallenge:target + a { display
>border: none; } table.fxosScreenGrid td, table.fxosScreenGrid th >:none; } /* Fix for mdn-min.css : https://developer.mozilla.org/m
>{ border: none; width: 340px; vertical-align: top } div.fxosLiveS>edia/css/mdn-min.css */ [dir="rtl"] dd { margin: 0 22px .5em 0 } 
>ampleWrapper { width: 328px; padding: 6px 4px; text-align: center>[dir="rtl"] th, [dir="rtl"] caption { text-align: right } [dir="r
>; border: 1px solid #B8B2A4; background-color: #F3ECDD; } .rightB>tl"] .title h1 { padding: 0 18px 0 0 !important } [lang="he"] #si
>uttonBox { float: right; width: 250px; position: relative; z-inde>te-search { float: left; text-align: right; margin: -8px 0 0 100p
>x: 2; } [dir="rtl"] .rightButtonBox { margin: 0 15px 15px 0; floa>x; width: 295px } [lang="de"] #site-search { margin-right: 179px 
>t: left } /* ---------------------------------- * Buttons * ----->} /* Fix for wiki-min.css : https://developer.mozilla.org/media/c
>----------------------------- */ .b2g-button::-moz-focus-inner { >ss/wiki-min.css */ div.bug, div.warning { overflow: hidden } .pag
>border: none; outline: none; } .b2g-button { width: 100%; height:>e-content dd { margin: .5em } /* [dir="rtl"] .translate #page-but
> 3.8rem; margin: 0 0 1rem; padding: 0 1.5rem; -moz-box-sizing: bo>tons { } */ [dir="rtl"] .hasJS #nav-main #nav-sub-docs, [dir="rtl
>rder-box; display: inline-block; vertical-align: middle; text-ove>"] #nav-main .menu:hover #nav-sub-docs { margin-left: -300px } [d
>rflow: ellipsis; white-space: nowrap; overflow: hidden; backgroun>ir="rtl"] #nav-main #nav-sub-docs li { float: right } [dir="rtl"]
>d: #fafafa url(https://developer.mozilla.org/media/gaia/shared/st> #nav-main #nav-sub-docs p { text-align: left } [dir="rtl"] .page
>yle/buttons/images/ui/default.png) repeat-x left bottom; border: >-content ul { padding-left: 0; padding-right: 22px } [dir="rtl"] 
>.1rem solid #a6a6a6; border-radius: .2rem; font: 500 1.6rem/3.8re>.page-content dd { padding-left: 0; padding-right: 15px } [dir="r
>m 'MozTT', Sans-serif; color: #333; text-align: center; text-shad>tl"] .article a.external, [dir="rtl"] .article a[rel~="external"]
>ow: .1rem .1rem 0 rgba(255, 255, 255, .3); text-decoration: none;>, [dir="rtl"] .article a[href^="news://"] { padding-right: 0; bac
> outline: none; } /* Press (default &amp; recommend) */ .b2g-butt>kground-position: 1% 40% } [dir="rtl"] .article a.external, [dir=
>on:active, .b2g-button.recommend:active, .b2g-button:hover, .b2g->"rtl"] .article a[rel~="external"] { padding-left: 16px } [dir="r
>button.recommend:hover { border-color: #008aaa; background: #008a>tl"] .article a[href^="news://"] { padding-left: 18px } /* for B2
>aa; text-decoration: none; color: #333; } /* For styling bug link>G docs, to allow use of B2G lookalike UX elements */ /* For displ
>s */ .bug-resolved { text-decoration: line-through; } /* Bages fo>ay of Firefox OS UX screenshots in a grid */ table.fxosScreenGrid
>r the Spec2 template */ .spec-ED:before, .spec-WD:before, .spec-C>, table.fxosScreenGrid tr { border: none; } table.fxosScreenGrid 
>R:before, .spec-PR:before, .spec-REC:before, .spec-Living:before,>td, table.fxosScreenGrid th { border: none; width: 340px; vertica
> .spec-Draft:before { display: inline-block; font: .6em Helvetica>l-align: top } div.fxosLiveSampleWrapper { width: 328px; padding:
>,Arial,sans-serif; margin: 0 .6em 0 0; padding: .55em .45em .45em> 6px 4px; text-align: center; border: 1px solid #B8B2A4; backgrou
>; vertical-align: top; } .spec-ED:before, .spec-WD:before, .spec->nd-color: #F3ECDD; } .rightButtonBox { float: right; width: 250px
>CR:before, .spec-PR:before, .spec-REC:before, .spec-Living:before>; position: relative; z-index: 2; } [dir="rtl"] .rightButtonBox {
>, .spec-Draft:before { color: white; } .spec-ED:before { content:> margin: 0 15px 15px 0; float: left } /* ------------------------
> 'ED'; background-color: #e61919 } .spec-WD:before { content: 'WD>---------- * Buttons * ---------------------------------- */ .b2g
>'; background-color: #E66E33 } .spec-CR:before { content: 'CR'; b>-button::-moz-focus-inner { border: none; outline: none; } .b2g-b
>ackground-color: #CFD510 } .spec-PR:before { content: 'PR'; backg>utton { width: 100%; height: 3.8rem; margin: 0 0 1rem; padding: 0
>round-color: #72AC35 } .spec-REC:before { content: 'REC'; backgro> 1.5rem; -moz-box-sizing: border-box; display: inline-block; vert
>und-color: #309C40 } .spec-Living:before { content: 'LS'; backgro>ical-align: middle; text-overflow: ellipsis; white-space: nowrap;
>und-color: #000 } .spec-Draft:before { content: 'D'; background-c> overflow: hidden; background: #fafafa url(https://developer.mozi
>olor: #E66E33 } /* Template link style */ .templateLink { border:>lla.org/media/gaia/shared/style/buttons/images/ui/default.png) re
> 1px solid #ccc; padding: 1px; } /* * Colorized icons */ #wikiArt>peat-x left bottom; border: .1rem solid #a6a6a6; border-radius: .
>icle i.icon-beaker, #wikiArticle i.icon-warning-sign, #wikiArticl>2rem; font: 500 1.6rem/3.8rem 'MozTT', Sans-serif; color: #333; t
>e i.icon-thumbs-down-alt, #wikiArticle i.icon-stethoscope, #wikiA>ext-align: center; text-shadow: .1rem .1rem 0 rgba(255, 255, 255,
>rticle i.icon-trash { cursor: default } #wikiArticle i.icon-beake> .3); text-decoration: none; outline: none; } /* Press (default &
>r { color: #09d } /* experimental */ #wikiArticle i.icon-warning->amp; recommend) */ .b2g-button:active, .b2g-button.recommend:acti
>sign { color: #db0 } /* non-standard */ #wikiArticle i.icon-thumb>ve, .b2g-button:hover, .b2g-button.recommend:hover { border-color
>s-down-alt { color: #000 } /* deprecated */ #wikiArticle i.icon-t>: #008aaa; background: #008aaa; text-decoration: none; color: #33
>rash { color: #d00 } /* obsolete */ #wikiArticle i.icon-stethosco>3; } /* For styling bug links */ .bug-resolved { text-decoration:
>pe { color: darkslateblue } /* unimplemented */ /* * Landing page> line-through; } /* Bages for the Spec2 template */ .spec-ED:befo
> lists */ dt.landingPageList, dd.landingPageList { page-break-aft>re, .spec-WD:before, .spec-CR:before, .spec-PR:before, .spec-REC:
>er: avoid } /* * "Mozilla only" banners */ .bannerWrapper { overf>before, .spec-Living:before, .spec-Draft:before { display: inline
>low: hidden; padding-right: 2px; } .mozOnlyBanner { background-co>-block; font: .6em Helvetica,Arial,sans-serif; margin: 0 .6em 0 0
>lor: #C33B1D; background-image: url("https://developer.mozilla.or>; padding: .55em .45em .45em; vertical-align: top; } .redesign .s
>g/files/5429/firefox.png"), radial-gradient(circle 16px at 18px 1>pec-ED:before, .redesign .spec-WD:before, .redesign .spec-CR:befo
>8px, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 11px, rgba(0,0,0,0) 18px>re, .redesign .spec-PR:before, .redesign .spec-REC:before, .redes
>), linear-gradient(to right, #C33B1D 40%, #DDA820); background-re>ign .spec-Living:before, .redesign .spec-Draft:before { font:.7em
>peat: no-repeat; background-size: contain; border-top-left-radius> Helvetica,Arial,sans-serif; font-weight:700; min-width:20px; bor
>: 18px; border-bottom-left-radius: 18px; border-top-right-radius:>der-radius:2px; letter-spacing:1px; margin:.2em .6em 0 0; padding
> 6px; border-bottom-right-radius: 6px; height: 36px; overflow: hi>:.45em .35em .35em; color: inherit; } .spec-ED:before, .spec-WD:b
>dden; color: white; box-shadow: 0 0 3px #111; font-family: "Lucid>efore, .spec-CR:before, .spec-PR:before, .spec-REC:before, .spec-
>a Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvet>Living:before, .spec-Draft:before { color: white; } .spec-ED:befo
>ica,sans-serif; } .mozOnlyBanner dt { font-weight: bold; font-siz>re { content: 'ED'; background-color: #e61919 } .redesign .spec-E
>e: 16px; text-shadow: 1px 1px 0 #222; padding-left: 42px; margin->D:before { background-color:rgba(230,25,25,0.25); border-left:4px
>left: 0px; marin-bottom: 0px; padding-bottom: 0px; } .mozOnlyBann> solid rgba(230,25,25,1); color:rgba(230,25,25,1); } .spec-WD:bef
>er dd { font-size: 11px; text-shadow: 1px 1px 0 #222; padding-lef>ore { content: 'WD'; background-color: #E66E33 } .redesign .spec-
>t: 42px; margin-left: 0px; margin-top: 0px; padding-top: 0px; } />WD:before { background-color:rgba(230,110,51,0.25); border-left:4
>* 一時的なスタイル */ [lang="ja"] #doc-contributors time[datetime*="200"]>px solid rgba(230,110,51,1); color:rgba(230,110,51,1); } .spec-CR
>::after { content: " (※最終更新日から 2 年以上経過しています)"; color: red } /* re>:before { content: 'CR'; background-color: #CFD510 } .redesign .s
>design htabs */ .redesign .htab &gt; ul &gt; li &gt; a { text-dec>pec-CR:before { background-color:rgba(0,151,142,0.25); border-lef
>oration: none; } .redesign .htab &gt; ul &gt; li &gt; a:hover, .r>t:4px solid rgba(0,151,142,1); color:rgba(0,151,142,1); } .spec-P
>edesign .htab &gt; ul &gt; li &gt; a:focus { text-decoration: und>R:before { content: 'PR'; background-color: #72AC35 } redesign .s
>erline; }>pec-PR:before { background-color:rgba(114,172,53,0.25); border-le
 >ft:4px solid rgba(114,172,53,1); color:rgba(114,172,53,1); } .spe
 >c-REC:before { content: 'REC'; background-color: #309C40 } .redes
 >ign .spec-REC:before { background-color:rgba(48,156,64,0.25); bor
 >der-left:4px solid rgba(48,156,64,1); color:rgba(48,156,64,1); } 
 >.spec-Living:before { content: 'LS'; background-color: #000 } .re
 >design .spec-Living:before { background-color:rgba(0,83,159,0.25)
 >; border-left:4px solid rgba(0,83,159,1); color:rgba(0,83,159,1);
 > } .spec-Draft:before { content: 'D'; background-color: #E66E33 }
 > .redesign .spec-Draft:before { background-color:rgba(230,110,51,
 >0.25); border-left:4px solid rgba(230,110,51,1); color:rgba(230,1
 >10,51,1); } .redesign .spec-ED { color:rgba(230,25,25,1); } .rede
 >sign .spec-WD { color:rgba(230,110,51,1); } .redesign .spec-CR { 
 >color:rgba(0,151,142,1); } .redesign .spec-PR { color:rgba(114,17
 >2,53,1); } .redesign .spec-REC { color:rgba(48,156,64,1); } .rede
 >sign .spec-Living { color:rgba(0,83,159,1); } .redesign .spec-Dra
 >ft { color:rgba(230,110,51,1); } /* Template link style */ .templ
 >ateLink { border: 1px solid #ccc; padding: 1px; } /* * Colorized 
 >icons */ #wikiArticle i.icon-beaker, #wikiArticle i.icon-warning-
 >sign, #wikiArticle i.icon-thumbs-down-alt, #wikiArticle i.icon-st
 >ethoscope, #wikiArticle i.icon-trash { cursor: default } #wikiArt
 >icle i.icon-beaker { color: #09d } /* experimental */ #wikiArticl
 >e i.icon-warning-sign { color: #db0 } /* non-standard */ #wikiArt
 >icle i.icon-thumbs-down-alt { color: #000 } /* deprecated */ #wik
 >iArticle i.icon-trash { color: #d00 } /* obsolete */ #wikiArticle
 > i.icon-stethoscope { color: darkslateblue } /* unimplemented */ 
 >/* * Landing page lists */ dt.landingPageList, dd.landingPageList
 > { page-break-after: avoid } /* * "Mozilla only" banners */ .bann
 >erWrapper { overflow: hidden; padding-right: 2px; } .mozOnlyBanne
 >r { background-color: #C33B1D; background-image: url("https://dev
 >eloper.mozilla.org/files/5429/firefox.png"), radial-gradient(circ
 >le 16px at 18px 18px, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 11px, r
 >gba(0,0,0,0) 18px), linear-gradient(to right, #C33B1D 40%, #DDA82
 >0); background-repeat: no-repeat; background-size: contain; borde
 >r-top-left-radius: 18px; border-bottom-left-radius: 18px; border-
 >top-right-radius: 6px; border-bottom-right-radius: 6px; height: 3
 >6px; overflow: hidden; color: white; box-shadow: 0 0 3px #111; fo
 >nt-family: "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lu
 >cida,Arial,Helvetica,sans-serif; } .mozOnlyBanner dt { font-weigh
 >t: bold; font-size: 16px; text-shadow: 1px 1px 0 #222; padding-le
 >ft: 42px; margin-left: 0px; marin-bottom: 0px; padding-bottom: 0p
 >x; } .mozOnlyBanner dd { font-size: 11px; text-shadow: 1px 1px 0 
 >#222; padding-left: 42px; margin-left: 0px; margin-top: 0px; padd
 >ing-top: 0px; } /* 一時的なスタイル */ [lang="ja"] #doc-contributors time
 >[datetime*="200"]::after { content: " (※最終更新日から 2 年以上経過しています)"; c
 >olor: red } /* redesign htabs */ .redesign .htab&gt;ul&gt;li { he
 >ight: 32px; border:1px solid rgba(212,221,228,0); border-radius: 
 >0; font-size:14px; font-weight:200; font-family:'Open Sans Light'
 >,sans-serif; background-color:#f1f6f8!important; color:rgba(77,78
 >,83,1); padding:2px 18px 4px; opacity:.75; -ms-filter:progid:DXIm
 >ageTransform.Microsoft.Alpha(Opacity=75); filter:progid:DXImageTr
 >ansform.Microsoft.Alpha(Opacity=75); } .redesign .htab&gt;ul&gt;l
 >i.selected { border:0 solid rgba(212,221,228,0.25); border-top:2p
 >x solid rgba(212,221,228,1); padding-top: 4px; background-color:r
 >gba(234,239,242,1)!important; } .redesign .htab&gt;div { backgrou
 >nd-color:rgba(234,239,242,1); border:0 solid rgba(212,221,228,0.2
 >5); } .redesign .htab &gt; ul &gt; li &gt; a { text-decoration: n
 >one; } .redesign .htab &gt; ul &gt; li &gt; a:hover, .redesign .h
 >tab &gt; ul &gt; li &gt; a:focus { text-decoration: underline; } 
 >/* new modules */ .summary-box-events { display:table; background
 >-color:rgba(0,150,221,0.1); padding:11px 22px; } [dir="ltr"] .sum
 >mary-box-events { clear:left; border-left:6px solid rgba(0,150,22
 >1,0.5); } [dir="rtl"] .summary-box-events { clear:right; border-r
 >ight:6px solid rgba(0,150,221,0.5); } .summary-box-js { display:t
 >able; background-color:rgba(230,96,0,0.1); padding:11px 22px; } [
 >dir="ltr"] .summary-box-js { clear:left; border-left:6px solid rg
 >ba(230,96,0,0.5); } [dir="rtl"] .summary-box-js { clear:right; bo
 >rder-right:6px solid rgba(230,96,0,0.5); } .redesign .standardNot
 >e, .redesign .optional,.renamed { background:rgba(0,83,159,0.2); 
 >border-color:rgba(0,0,0,0.05); } .redesign .obsolete, .redesign .
 >notXPCOM { background:rgba(230,96,0,0.45); border-color:rgba(0,0,
 >0,0.05); }

Back to History