mozilla

Compare Revisions

Template:CustomCSS

Change Revisions

Revision 393483:

Revision 393483 by Sheppy on

Revision 393487:

Revision 393487 by Sheppy on

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

Revision 393483
Revision 393487
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
> boxes for smaller links, such as API terms */ .smallMultiColumnL> boxes for smaller links, such as API terms */ .smallMultiColumnL
>ist { column-width: 120px; -moz-column-width:120px; -webkit-colum>ist { column-width: 120px; -moz-column-width:120px; -webkit-colum
>n-width:120px; -o-column-width:120px; -ms-column-width:120px} .sm>n-width:120px; -o-column-width:120px; -ms-column-width:120px} .sm
>allMultiColumnList li { list-style-type: none; padding-left: 0px;>allMultiColumnList li { list-style-type: none; padding-left: 0px;
> page-break-inside: avoid; } /* Landing page lists; currently set> page-break-inside: avoid; } /* Landing page lists; currently set
> to 2-column. Will be made adaptive in redesign. */ .landingPageA> to 2-column. Will be made adaptive in redesign. */ .landingPageA
>rticleList { -moz-columns: 2; -webkit-columns: 2; -ms-columns: 2;>rticleList { -moz-columns: 2; -webkit-columns: 2; -ms-columns: 2;
> -o-columns: 2; columns: 2; } /* Multi-column box for smaller tex> -o-columns: 2; columns: 2; } /* Multi-column box for smaller tex
>t */ .horizFlexboxContainer { display: flex; display: -webkit-fle>t */ .horizFlexboxContainer { display: flex; display: -webkit-fle
>x; flex-flow: column nowrap; -webkit-flex-flow: column nowrap; ju>x; flex-flow: column nowrap; -webkit-flex-flow: column nowrap; ju
>stify-content: center; -webkit-justify-content: center; align-con>stify-content: center; -webkit-justify-content: center; align-con
>tent: center; -webkit-align-content: center; align-items: center;>tent: center; -webkit-align-content: center; align-items: center;
> -webkit-align-items: center; flex-direction: column; -webkit-fle> -webkit-align-items: center; flex-direction: column; -webkit-fle
>x-direction: column; } div.smallTextMultiColumnBoxHeading { backg>x-direction: column; } div.smallTextMultiColumnBoxHeading { backg
>round-color: #aac; border-radius: 10px 10px 0px 0px; border: 2px >round-color: #aac; border-radius: 10px 10px 0px 0px; border: 2px 
>solid #ccc; order: 1; -webkit-order: 1; width: 75%; padding: 10px>solid #ccc; order: 1; -webkit-order: 1; width: 75%; padding: 10px
>; flex: 0 1 auto; -webkit-flex: 0 1 auto; font-weight: bold; } di>; flex: 0 1 auto; -webkit-flex: 0 1 auto; font-weight: bold; } di
>v.smallTextMultiColumnBoxList { border: 2px solid #ccc; backgroun>v.smallTextMultiColumnBoxList { border: 2px solid #ccc; backgroun
>d-color: #ddf; border-top: 0px; border-radius: 0px 0px 10px 10px;>d-color: #ddf; border-top: 0px; border-radius: 0px 0px 10px 10px;
> width: 75%; padding: 10px; order: 2; -webkit-order: 2; flex: 0 1> width: 75%; padding: 10px; order: 2; -webkit-order: 2; flex: 0 1
> auto; -webkit-flex: 0 1 auto; } div.smallTextMultiColumnBoxList > auto; -webkit-flex: 0 1 auto; } div.smallTextMultiColumnBoxList 
>ul { column-width:100px; -moz-column-width:100px; -webkit-column->ul { column-width:100px; -moz-column-width:100px; -webkit-column-
>width:100px; -o-column-width:100px; -ms-column-width:100px; } div>width:100px; -o-column-width:100px; -ms-column-width:100px; } div
>.smallTextMultiColumnBoxList li { list-style-type: none; padding->.smallTextMultiColumnBoxList li { list-style-type: none; padding-
>left: 0px; font-size: 80%; } /* For ending "text alongside images>left: 0px; font-size: 80%; } /* For ending "text alongside images
>" blocks; add this class to the first block that shouldn't be nex>" blocks; add this class to the first block that shouldn't be nex
>t to the image */ .endImageWrapping { clear: both; } /* Fancy Tab>t to the image */ .endImageWrapping { clear: both; } /* Fancy Tab
>le of content for main pages of tutorial*/ .fancyTOC { counter-re>le of content for main pages of tutorial*/ .fancyTOC { counter-re
>set: fancyTOC; -moz-columns: 18em; columns: 18em; margin-bottom: >set: fancyTOC; -moz-columns: 18em; columns: 18em; margin-bottom: 
>1em } .fancyTOC .button { display: block; margin-right: 0; margin>1em } .fancyTOC .button { display: block; margin-right: 0; margin
>-bottom: .25em; background-color: #A24C4C; color: #fff; font-size>-bottom: .25em; background-color: #A24C4C; color: #fff; font-size
>: 1.5em; line-height: 1.5 } .fancyTOC a::before { counter-increme>: 1.5em; line-height: 1.5 } .fancyTOC a::before { counter-increme
>nt: fancyTOC; content: counter(fancyTOC) ". " } .fancyTOC a::afte>nt: fancyTOC; content: counter(fancyTOC) ". " } .fancyTOC a::afte
>r { content: ' »' } .fancyTOC .button:hover, .fancyTOC .button:fo>r { content: ' »' } .fancyTOC .button:hover, .fancyTOC .button:fo
>cus, .fancyTOC .button:active { background-color: #C26C6C } /* In>cus, .fancyTOC .button:active { background-color: #C26C6C } /* In
> index, dim obsolete, deprecated or non-standard element instead > index, dim obsolete, deprecated or non-standard element instead 
>of striking through them */ s.deprecatedElement, s.obsoleteElemen>of striking through them */ s.deprecatedElement, s.obsoleteElemen
>t, s.nonStdElement { text-decoration: none; opacity: .3 } /* Add >t, s.nonStdElement { text-decoration: none; opacity: .3 } /* Add 
>widgeted index, here adding an HTML5 badge as the bullet of the l>widgeted index, here adding an HTML5 badge as the bullet of the l
>i element if class="html5" */ div.index.widgeted { -webkit-column>i element if class="html5" */ div.index.widgeted { -webkit-column
>-width: 10em; -moz-column-width: 10em; columns: 10em } div.index.>-width: 10em; -moz-column-width: 10em; columns: 10em } div.index.
>widgeted li { padding-left: 18px } div.index.widgeted li.html5 { >widgeted li { padding-left: 18px } div.index.widgeted li.html5 { 
>background-image: url("/files/3855/HTML5_Badge_16.png"); backgrou>background-image: url("/files/3855/HTML5_Badge_16.png"); backgrou
>nd-repeat: no-repeat; background-position: left 4px } [dir="rtl"]>nd-repeat: no-repeat; background-position: left 4px } [dir="rtl"]
> div.index.widgeted li { padding-right: 18px } [dir="rtl"] div.in> div.index.widgeted li { padding-right: 18px } [dir="rtl"] div.in
>dex.widgeted li.html5 { background-image: url("/files/3855/HTML5_>dex.widgeted li.html5 { background-image: url("/files/3855/HTML5_
>Badge_16.png"); background-repeat: no-repeat; background-position>Badge_16.png"); background-repeat: no-repeat; background-position
>: right 4px } [dir="rtl"] div.index.widgeted span { padding-right>: right 4px } [dir="rtl"] div.index.widgeted span { padding-right
>:24px } /* Quicknav template styles : https://developer.mozilla.o>:24px } /* Quicknav template styles : https://developer.mozilla.o
>rg/en-US/docs/Template:quicknav -------- */ #wikiArticle { positi>rg/en-US/docs/Template:quicknav -------- */ #wikiArticle { positi
>on: relative; } .quicknav { position: fixed; top: 237px; left: 33>on: relative; } .quicknav { position: fixed; top: 237px; left: 33
>px; background: #FFF; z-index: 1 } .quicknav dl { max-width: 0; m>px; background: #FFF; z-index: 1 } .quicknav dl { max-width: 0; m
>ax-height: 300px; overflow: auto; margin: 0; padding: 10px 0; bor>ax-height: 300px; overflow: auto; margin: 0; padding: 10px 0; bor
>der: 1px solid transparent; border-left: none -webkit-transition:>der: 1px solid transparent; border-left: none -webkit-transition:
> border .5s ease .1s, max-width .5s ease .1s, padding .5s linear > border .5s ease .1s, max-width .5s ease .1s, padding .5s linear 
>.1s; -moz-transition: border .5s ease .1s, max-width .5s ease .1s>.1s; -moz-transition: border .5s ease .1s, max-width .5s ease .1s
>, padding .5s linear .1s; -ms-transition: border .5s ease .1s, ma>, padding .5s linear .1s; -ms-transition: border .5s ease .1s, ma
>x-width .5s ease .1s, padding .5s linear .1s; -o-transition: bord>x-width .5s ease .1s, padding .5s linear .1s; -o-transition: bord
>er .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; >er .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; 
>transition: border .5s ease .1s, max-width .5s ease .1s, padding >transition: border .5s ease .1s, max-width .5s ease .1s, padding 
>.5s linear .1s } .quicknav dt, .quicknav dd { margin: 0; padding:>.5s linear .1s } .quicknav dt, .quicknav dd { margin: 0; padding:
> 0; white-space: nowrap } .quicknav dt { font-weight: 700 } .quic> 0; white-space: nowrap } .quicknav dt { font-weight: 700 } .quic
>knav dd + dt { margin-top: .5em } .quicknav:hover dl { max-width:>knav dd + dt { margin-top: .5em } .quicknav:hover dl { max-width:
> 300px; padding: 10px 20px 10px 10px; border-color: #ECECE7 } .qu> 300px; padding: 10px 20px 10px 10px; border-color: #ECECE7 } .qu
>icknav .showme { display: block; position: absolute; top: 10px; l>icknav .showme { display: block; position: absolute; top: 10px; l
>eft: -31px; width: 30px; font: 2em sans-serif; color: #CCC; text->eft: -31px; width: 30px; font: 2em sans-serif; color: #CCC; text-
>align: center; background: #FFF; border-radius: 5px 0 0 5px; bord>align: center; background: #FFF; border-radius: 5px 0 0 5px; bord
>er: 1px solid #ECECE7; border-right: none } .quicknav:hover .show>er: 1px solid #ECECE7; border-right: none } .quicknav:hover .show
>me { color: #333; } .cleared { clear: both } /* This style has pr>me { color: #333; } .cleared { clear: both } /* This style has pr
>oblem ! Style attribute of BR element is not work in Kuma */ .cle>oblem ! Style attribute of BR element is not work in Kuma */ .cle
>arLeft { clear: left } /* ltr page only ? */ span.comment { displ>arLeft { clear: left } /* ltr page only ? */ span.comment { displ
>ay:none; } #wikiArticle .breadcrumbs { display: block; margin-bot>ay:none; } #wikiArticle .breadcrumbs { display: block; margin-bot
>tom: 1em } /* The HTML5 landing page has some specificity */ /* t>tom: 1em } /* The HTML5 landing page has some specificity */ /* t
>able.html5ArticleToc { border-width: 5px }*/ table.html5ArticleTo>able.html5ArticleToc { border-width: 5px }*/ table.html5ArticleTo
>c { border-style: none; border-width: 0px; background-color: tran>c { border-style: none; border-width: 0px; background-color: tran
>sparent; border-color: transparent; width: 100%;} .html5ArticleTo>sparent; border-color: transparent; width: 100%;} .html5ArticleTo
>c thead th { padding: .5em 1em } .html5ArticleToc tbody td { vert>c thead th { padding: .5em 1em } .html5ArticleToc tbody td { vert
>ical-align: middle } .html5ArticleToc ul { margin: 0; padding: 0 >ical-align: middle } .html5ArticleToc ul { margin: 0; padding: 0 
>} .html5ArticleToc ul li { display: inline; margin: 0 .25em } /* >} .html5ArticleToc ul li { display: inline; margin: 0 .25em } /* 
>The syntax box: the first one is now used anywhere (DOM, JS, CSS,>The syntax box: the first one is now used anywhere (DOM, JS, CSS,
> ...) The twoparts is used for CSS properties */ pre.syntaxbox { > ...) The twoparts is used for CSS properties */ pre.syntaxbox { 
>border: 2px solid #ccc; margin-bottom: 1em; background-color: #ff>border: 2px solid #ccc; margin-bottom: 1em; background-color: #ff
>e; border-radius: 10px; } pre.twopartsyntaxbox { border: 2px soli>e; border-radius: 10px; } pre.twopartsyntaxbox { border: 2px soli
>d #bbb; margin-bottom: 0px; background-color: #ffe; border-radius>d #bbb; margin-bottom: 0px; background-color: #ffe; border-radius
>: 10px 10px 0px 0px; } pre.twopartsyntaxbox + pre { border: 2px s>: 10px 10px 0px 0px; } pre.twopartsyntaxbox + pre { border: 2px s
>olid #bbb; border-radius: 0 0 10px 10px; border-top: none; margin>olid #bbb; border-radius: 0 0 10px 10px; border-top: none; margin
>-top: 0 } table.withoutBorder, table.withoutBorder td, table.with>-top: 0 } table.withoutBorder, table.withoutBorder td, table.with
>outBorder tr, table.withoutBorder th { border: none } td.horizont>outBorder tr, table.withoutBorder th { border: none } td.horizont
>alLine { border-left: none } td.column { border-bottom: none } td>alLine { border-left: none } td.column { border-bottom: none } td
>.bottomPart { border-top: none } td.verticalText { width: 3em; -w>.bottomPart { border-top: none } td.verticalText { width: 3em; -w
>ebkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); >ebkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
>-o-transform: rotate(-90deg); transform: rotate(-90deg) } table.b>-o-transform: rotate(-90deg); transform: rotate(-90deg) } table.b
>lockTable { border-collapse: collapse } table.blockTable, table.b>lockTable { border-collapse: collapse } table.blockTable, table.b
>lockTable td { margin: 1px; padding: 1px } table.blockTable .vert>lockTable td { margin: 1px; padding: 1px } table.blockTable .vert
>icalColumn { border-left: none; border-right: none } /* The index>icalColumn { border-left: none; border-right: none } /* The index
> page for HTML / CSS */ div.index { -webkit-columns: 16em; -moz-c> page for HTML / CSS */ div.index { -webkit-columns: 16em; -moz-c
>olumn-width: 16em; columns: 16em } div.index > span { font-fam>olumn-width: 16em; columns: 16em } div.index > span { font-fam
>ily: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em }>ily: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em }
> div.index ul { margin-left: 0; padding-left: 0; list-style-type:> div.index ul { margin-left: 0; padding-left: 0; list-style-type:
> none } /* ul.cssprop box used by each CSS Property reference pag> none } /* ul.cssprop box used by each CSS Property reference pag
>e*/ .cssprop { display: table; padding: 11px 22px; background-col>e*/ .cssprop { display: table; padding: 11px 22px; background-col
>or: #eef } [dir="ltr"] .cssprop { clear: left; border-left: .15em>or: #eef } [dir="ltr"] .cssprop { clear: left; border-left: .15em
> solid } [dir="rtl"] .cssprop { clear: right; border-right: .15em> solid } [dir="rtl"] .cssprop { clear: right; border-right: .15em
> solid } .cssprop li { display: table-row; padding: 3px; margin: > solid } .cssprop li { display: table-row; padding: 3px; margin: 
>0; text-align: left } .cssprop li dfn { display: table-cell; padd>0; text-align: left } .cssprop li dfn { display: table-cell; padd
>ing: 0 5px; border-bottom: none; white-space: pre; cursor: inheri>ing: 0 5px; border-bottom: none; white-space: pre; cursor: inheri
>t } .cssprop li dfn:after { content: ":" } .cssprop li li { displ>t } .cssprop li dfn:after { content: ":" } .cssprop li li { displ
>ay: list-item; list-style-type: disc; line-height: 1 } /* ul.html>ay: list-item; list-style-type: disc; line-height: 1 } /* ul.html
>elt box used by each HTML Element reference page */ .htmlelt { di>elt box used by each HTML Element reference page */ .htmlelt { di
>splay: table; padding: 11px 22px; background-color: #fe9 } [dir=">splay: table; padding: 11px 22px; background-color: #fe9 } [dir="
>ltr"] .htmlelt { clear: left; border-left: .15em solid } [dir="rt>ltr"] .htmlelt { clear: left; border-left: .15em solid } [dir="rt
>l"] .htmlelt { clear: right; border-right: .15em solid } .htmlelt>l"] .htmlelt { clear: right; border-right: .15em solid } .htmlelt
> li { display: table-row; padding: 3px; margin: 0; text-align: le> li { display: table-row; padding: 3px; margin: 0; text-align: le
>ft } .htmlelt li dfn { display: table-cell; padding: 0 5px; borde>ft } .htmlelt li dfn { display: table-cell; padding: 0 5px; borde
>r-bottom: none; white-space: pre; cursor: inherit } .htmlelt li d>r-bottom: none; white-space: pre; cursor: inherit } .htmlelt li d
>fn:after { content: ":" } .htmlelt li li { display: list-item; li>fn:after { content: ":" } .htmlelt li li { display: list-item; li
>st-style-type: disc; line-height: 1 } /* ul.audionodebox used by >st-style-type: disc; line-height: 1 } /* ul.audionodebox used by 
>each AudioNode object reference page*/ .audionodebox { display: t>each AudioNode object reference page*/ .audionodebox { display: t
>able; padding: 11px 22px; background-color: #fee } [dir="ltr"] .a>able; padding: 11px 22px; background-color: #fee } [dir="ltr"] .a
>udionodebox { clear: left; border-left: .15em solid } [dir="rtl"]>udionodebox { clear: left; border-left: .15em solid } [dir="rtl"]
> .audionodebox { clear: right; border-right: .15em solid } .audio> .audionodebox { clear: right; border-right: .15em solid } .audio
>nodebox li { display: table-row; padding: 3px; margin: 0; text-al>nodebox li { display: table-row; padding: 3px; margin: 0; text-al
>ign: left } .audionodebox li dfn { display: table-cell; padding: >ign: left } .audionodebox li dfn { display: table-cell; padding: 
>0 5px; border-bottom: none; white-space: pre; cursor: inherit } .>0 5px; border-bottom: none; white-space: pre; cursor: inherit } .
>audionodebox li dfn:after { content: ":" } .audionodebox li li { >audionodebox li dfn:after { content: ":" } .audionodebox li li { 
>display: list-item; list-style-type: disc; line-height: 1 } /* ht>display: list-item; list-style-type: disc; line-height: 1 } /* ht
>tps://developer.mozilla.org/en-US/docs/Template:HTML:Element_Navi>tps://developer.mozilla.org/en-US/docs/Template:HTML:Element_Navi
>gation */ table.HTMLElmNav { margin: 1em auto; border-width: 5px >gation */ table.HTMLElmNav { margin: 1em auto; border-width: 5px 
>} table.HTMLElmNav th, table.HTMLElmNav td { text-align: center }>} table.HTMLElmNav th, table.HTMLElmNav td { text-align: center }
> .method { margin-left: 10px; margin-bottom: 2em; margin-top: 1em> .method { margin-left: 10px; margin-bottom: 2em; margin-top: 1em
> } .method > .name { display: block; font-size: 13pt; margin-b> } .method > .name { display: block; font-size: 13pt; margin-b
>ottom: .2em } .method > .name > .param: after { content: ",>ottom: .2em } .method > .name > .param: after { content: ",
>"; padding-right: .5em } .method > .name > .param: last-of->"; padding-right: .5em } .method > .name > .param: last-of-
>type: after { content: "" } .method > .name > .param > .>type: after { content: "" } .method > .name > .param > .
>name: after { content: " as "; font-weight: normal } .method >>name: after { content: " as "; font-weight: normal } .method >
> .name > .param: not(.required) { font-style: italic } .method> .name > .param: not(.required) { font-style: italic } .method
> > .name > .param: not(.required): before { content: "[" } > > .name > .param: not(.required): before { content: "[" } 
>.method > .name > .param: not(.required): after { content: >.method > .name > .param: not(.required): after { content: 
>"]" } .method > .description { display: block; font-size: 10pt>"]" } .method > .description { display: block; font-size: 10pt
>; color: #444; font-style: italic; margin-bottom: 7px } .method &>; color: #444; font-style: italic; margin-bottom: 7px } .method &
>gt; .name > .returns: before { content: " returns "; font-weig>gt; .name > .returns: before { content: " returns "; font-weig
>ht: normal; font-style: italic } .method > .name > .returns>ht: normal; font-style: italic } .method > .name > .returns
> { font-weight: 700 } .method > .params { display: block; colo> { font-weight: 700 } .method > .params { display: block; colo
>r: #555 } .method > .params > .param { display: block; marg>r: #555 } .method > .params > .param { display: block; marg
>in-bottom: 5px } .method > .params > .param > .name { fo>in-bottom: 5px } .method > .params > .param > .name { fo
>nt-weight: 700; margin-right: .5em; min-width: 80px; display: inl>nt-weight: 700; margin-right: .5em; min-width: 80px; display: inl
>ine-block } .method > .params > .param > .description { >ine-block } .method > .params > .param > .description { 
>display: inline-block; width: 300px; vertical-align: top; margin->display: inline-block; width: 300px; vertical-align: top; margin-
>right: 30px } .method > .params > .param > .type { displ>right: 30px } .method > .params > .param > .type { displ
>ay: inline-block; width: 150px; vertical-align: top; font-weight:>ay: inline-block; width: 150px; vertical-align: top; font-weight:
> 700 } .method > .params > .param > .type: before { cont> 700 } .method > .params > .param > .type: before { cont
>ent: "Type "; color: #888; font-weight: normal } .method > .pa>ent: "Type "; color: #888; font-weight: normal } .method > .pa
>rams > .param > .default { display: inline-block; width: 15>rams > .param > .default { display: inline-block; width: 15
>0px; vertical-align: top; font-weight: 700 } .method > .params>0px; vertical-align: top; font-weight: 700 } .method > .params
> > .param > .default: before { content: "Default "; color: > > .param > .default: before { content: "Default "; color: 
>#888; font-weight: normal } /* version compatibility banners and >#888; font-weight: normal } /* version compatibility banners and 
>notes */ .geckoVersionNote { background-color: #E0E0FF; backgroun>notes */ .geckoVersionNote { background-color: #E0E0FF; backgroun
>d-image: -moz-radial-gradient(0px 0 45deg, circle farthest-corner>d-image: -moz-radial-gradient(0px 0 45deg, circle farthest-corner
>, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px solid #008 } .geckoV>, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px solid #008 } .geckoV
>ersionNote p { padding-left: 4px; border: 0 } .geckoVersionHeadin>ersionNote p { padding-left: 4px; border: 0 } .geckoVersionHeadin
>g { background-color: #008; background-image: -moz-linear-gradien>g { background-color: #008; background-image: -moz-linear-gradien
>t(left, #008 50%, #e0e0ff 80%); color: #fff; font: 16px/1.7 Verda>t(left, #008 50%, #e0e0ff 80%); color: #fff; font: 16px/1.7 Verda
>na, Tahoma, sans-serif; margin-top: 0; margin-left: 0; margin-bot>na, Tahoma, sans-serif; margin-top: 0; margin-left: 0; margin-bot
>tom: 4px; height: 42px } .geckoVersionHeading a:link { color: #dd>tom: 4px; height: 42px } .geckoVersionHeading a:link { color: #dd
>d } .geckoVersionHeading a:visited { color: #eee } .geckoVersionH>d } .geckoVersionHeading a:visited { color: #eee } .geckoVersionH
>eading a:hover, .geckoVersionHeading a:focus { color: #fdd } /* U>eading a:hover, .geckoVersionHeading a:focus { color: #fdd } /* U
>sed to to create icon-badged APIs inline */ .badge { position: re>sed to to create icon-badged APIs inline */ .badge { position: re
>lative; top: -2px; display: inline-block; cursor: default; border>lative; top: -2px; display: inline-block; cursor: default; border
>: 1px solid #aaa; border-radius: 8px; padding: 0.3em 0.8em; font->: 1px solid #aaa; border-radius: 8px; padding: 0.3em 0.8em; font-
>size: 0.7em; font-weight: bold; } .icon { padding-left: 3.1em; } >size: 0.7em; font-weight: bold; } .icon { padding-left: 3.1em; } 
>[dir=rtl] .icon { padding-left: 0.8em; padding-right: 3.1em; } .i>[dir=rtl] .icon { padding-left: 0.8em; padding-right: 3.1em; } .i
>con:before { content: ""; position: absolute; left: -2px; top: 50>con:before { content: ""; position: absolute; left: -2px; top: 50
>%; margin-top: -1.5em; width: 2.8em; height: 2.8em; background: w>%; margin-top: -1.5em; width: 2.8em; height: 2.8em; background: w
>hite no-repeat center center; background-size: 2.6em; border-radi>hite no-repeat center center; background-size: 2.6em; border-radi
>us: 100%; border: 1px solid #aaa; border-right: none; box-sizing:>us: 100%; border: 1px solid #aaa; border-right: none; box-sizing:
> border-box; -moz-boxsizing: border-box; } [dir=rtl] .icon:before> border-box; -moz-boxsizing: border-box; } [dir=rtl] .icon:before
> { left: auto; right: -2px; border: 1px solid #aaa; border-left: > { left: auto; right: -2px; border: 1px solid #aaa; border-left: 
>none; } /* Used for badging non-standard APIs */ .nonstandardBadg>none; } /* Used for badging non-standard APIs */ .nonstandardBadg
>e { background: linear-gradient(to right, #f0DE00 30%,#f0ff19 100>e { background: linear-gradient(to right, #f0DE00 30%,#f0ff19 100
>%); color: black; text-shadow: 1px 1px 0 #ddd; } /* Used for badg>%); color: black; text-shadow: 1px 1px 0 #ddd; } /* Used for badg
>ing privileged APIs */ .privilegedBadge { background: linear-grad>ing privileged APIs */ .privilegedBadge { background: linear-grad
>ient(to right, #FFBD19 30%,#ffb200 100%); color: black; text-shad>ient(to right, #FFBD19 30%,#ffb200 100%); color: black; text-shad
>ow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBadge { background: li>ow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBadge { background: li
>near-gradient(to left, #FFBD19 30%,#ffb200 100%); } .icon.privile>near-gradient(to left, #FFBD19 30%,#ffb200 100%); } .icon.privile
>gedBadge:before { background-color: orange; background-image: url>gedBadge:before { background-color: orange; background-image: url
>(https://mdn.mozillademos.org/files/5061/firefoxos-logo-sm.png); >(https://mdn.mozillademos.org/files/5061/firefoxos-logo-sm.png); 
>} .sidebar-box { margin-left: 16px; margin-bottom: 2.5em; border->} .sidebar-box { margin-left: 16px; margin-bottom: 2.5em; border-
>right: 1px solid #ecf1f3; padding: 12px; background: #f1f6f8 url(>right: 1px solid #ecf1f3; padding: 12px; background: #f1f6f8 url(
>"img/toc-bg.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, sans>"img/toc-bg.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, sans
>-serif } .sidebar-box h2, .sidebar-box h3, .sidebar-box h5 { marg>-serif } .sidebar-box h2, .sidebar-box h3, .sidebar-box h5 { marg
>in-bottom: .5em; font-family: inherit; font-weight: 700 } .sideba>in-bottom: .5em; font-family: inherit; font-weight: 700 } .sideba
>r-box h2 { font-size: 1.5em } .sidebar-box h3 { font-size: 1.1em >r-box h2 { font-size: 1.5em } .sidebar-box h3 { font-size: 1.1em 
>} .sidebar-box h5 { font-size: .9em } .sidebar-box > ul { floa>} .sidebar-box h5 { font-size: .9em } .sidebar-box > ul { floa
>t: left; text-align: left; display: block; padding: 0; margin: au>t: left; text-align: left; display: block; padding: 0; margin: au
>to 0; position: relative } .sidebar-box ul > li { list-style-t>to 0; position: relative } .sidebar-box ul > li { list-style-t
>ype: none } .tab-content-box { border-right: 1px solid #ecf1f3; m>ype: none } .tab-content-box { border-right: 1px solid #ecf1f3; m
>argin-left: 16px; padding: 12px; background: #fff; font: 12px Ver>argin-left: 16px; padding: 12px; background: #fff; font: 12px Ver
>dana, Tahoma, sans-serif } .tab-content-box h2, .tab-content-box >dana, Tahoma, sans-serif } .tab-content-box h2, .tab-content-box 
>h3, .tab-content-box h5 { margin-bottom: .5em; font-family: inher>h3, .tab-content-box h5 { margin-bottom: .5em; font-family: inher
>it; font-weight: 700 } .tab-content-box h2 { font-size: 1.5em } .>it; font-weight: 700 } .tab-content-box h2 { font-size: 1.5em } .
>tab-content-box h3 { font-size: 1.1em } .tab-content-box h5 { fon>tab-content-box h3 { font-size: 1.1em } .tab-content-box h5 { fon
>t-size: .9em } #menuFiller { display: block } /* Horizontal tab b>t-size: .9em } #menuFiller { display: block } /* Horizontal tab b
>oxes */ .htab { margin: 0 auto 1em; display: inline-block; } .hta>oxes */ .htab { margin: 0 auto 1em; display: inline-block; } .hta
>b>ul>li { width: 150px; height: 28px; list-style-type: none>b>ul>li { width: 150px; height: 28px; list-style-type: none
>; display: inline; padding-bottom: 3px; border: 1px solid #ddd; b>; display: inline; padding-bottom: 3px; border: 1px solid #ddd; b
>order-radius: 3px 3px 0px 0px; padding-top: 5px; text-align: left>order-radius: 3px 3px 0px 0px; padding-top: 5px; text-align: left
>; font-size: 13px; font-weight: bold; margin: auto; position: rel>; font-size: 13px; font-weight: bold; margin: auto; position: rel
>ative; padding-left: 6px; padding-right: 6px; border-bottom: none>ative; padding-left: 6px; padding-right: 6px; border-bottom: none
>; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alp>; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alp
>ha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(>ha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(
>Opacity=50); cursor: pointer; } .htab>ul>li.selected { opac>Opacity=50); cursor: pointer; } .htab>ul>li.selected { opac
>ity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opac>ity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opac
>ity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacit>ity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacit
>y=100); border: 1px solid #ddd; border-bottom: none; z-index: 10;>y=100); border: 1px solid #ddd; border-bottom: none; z-index: 10;
> background-color: #f1f6f8!important; position: relative; cursor:> background-color: #f1f6f8!important; position: relative; cursor:
> pointer; } .htab>ul { width: 150px; text-align: left; display> pointer; } .htab>ul { width: 150px; text-align: left; display
>: inline; padding: 0; margin: 0 auto; position: relative; top: 0p>: inline; padding: 0; margin: 0 auto; position: relative; top: 0p
>x; } .htab>div { background-color: #f1f6f8; margin-top: 0; bor>x; } .htab>div { background-color: #f1f6f8; margin-top: 0; bor
>der: 1px solid #ddd; padding: 12px; position: relative; z-index: >der: 1px solid #ddd; padding: 12px; position: relative; z-index: 
>9; word-wrap: break-word; } /* Compatibility tables */ table.comp>9; word-wrap: break-word; } /* Compatibility tables */ table.comp
>at-table { border-color: #bbb; margin: 0 } table.compat-table td >at-table { border-color: #bbb; margin: 0 } table.compat-table td 
>{ padding: 5px; border: 1px solid #ccc; background: #fff; vertica>{ padding: 5px; border: 1px solid #ccc; background: #fff; vertica
>l-align: top; word-wrap: break-word } table.compat-table th, tabl>l-align: top; word-wrap: break-word } table.compat-table th, tabl
>e.compat-table td.header { border: 1px solid #bbb; padding: 0 5px>e.compat-table td.header { border: 1px solid #bbb; padding: 0 5px
>; background: #eee; font-weight: 700 } .archivedContentBlock { ma>; background: #eee; font-weight: 700 } .archivedContentBlock { ma
>rgin: 0; background-color: #fdd } div.action-driven { display: in>rgin: 0; background-color: #fdd } div.action-driven { display: in
>line-block; float: none; min-height: 8.5em; margin: .8em; box-sha>line-block; float: none; min-height: 8.5em; margin: .8em; box-sha
>dow: .2em .1em .1em #808080; vertical-align: top; } div.action-dr>dow: .2em .1em .1em #808080; vertical-align: top; } div.action-dr
>iven > div { font: 400 20px 'Bebas Neue', 'League Gothic', Hae>iven > div { font: 400 20px 'Bebas Neue', 'League Gothic', Hae
>ttenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-t>ttenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-t
>ransform: uppercase } /*----------------- for Topic page */ table>ransform: uppercase } /*----------------- for Topic page */ table
>.topicpage-table, table.topicpage-table td, table.topicpage-table>.topicpage-table, table.topicpage-table td, table.topicpage-table
> tr, table.topicpage-table th { border: none } .topicpage-table .> tr, table.topicpage-table th { border: none } .topicpage-table .
>section { padding-right:1em} /* "table.topicpage-table h2 { --fon>section { padding-right:1em} /* "table.topicpage-table h2 { --fon
>t-setting-- }" is better than this. */ .topicpage-table .Document>t-setting-- }" is better than this. */ .topicpage-table .Document
>ation, .topicpage-table .Community, .topicpage-table .Tools, .top>ation, .topicpage-table .Community, .topicpage-table .Tools, .top
>icpage-table .Related_Topics { background-image: url('/media/img/>icpage-table .Related_Topics { background-image: url('/media/img/
>icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .>icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .
>25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px>25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px
>/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Aria>/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Aria
>l Narrow', Meiryo, sans-serif; text-transform: uppercase; border:>l Narrow', Meiryo, sans-serif; text-transform: uppercase; border:
> none } /* this is an unadorned heading, without an icon */ .topi> none } /* this is an unadorned heading, without an icon */ .topi
>cpage-table .Heading { margin: 0 0 .25em; padding: 18px 18px 0 65>cpage-table .Heading { margin: 0 0 .25em; padding: 18px 18px 0 0p
>px; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Goth>x; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothi
>ic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif>c', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif;
>; text-transform: uppercase; border: none } [dir="rtl"] .topicpag> text-transform: uppercase; border: none } [dir="rtl"] .topicpage
>e-table .Documentation, [dir="rtl"] .topicpage-table .Community, >-table .Documentation, [dir="rtl"] .topicpage-table .Community, [
>[dir="rtl"] .topicpage-table .Tools, [dir="rtl"] .topicpage-table>dir="rtl"] .topicpage-table .Tools, [dir="rtl"] .topicpage-table 
> .Heading, [dir="rtl"] .topicpage-table .Related_Topics { padding>.Heading, [dir="rtl"] .topicpage-table .Related_Topics { padding:
>: 18px 65px 0 18px; } .topicpage-table .Documentation { backgroun> 18px 65px 0 18px; } .topicpage-table .Documentation { background
>d-position: 0 0 } .topicpage-table .Community { background-positi>-position: 0 0 } .topicpage-table .Community { background-positio
>on: 0 -200px } .topicpage-table .Tools { background-position: 0 ->n: 0 -200px } .topicpage-table .Tools { background-position: 0 -4
>400px } .topicpage-table .Related_Topics { background-position: 0>00px } .topicpage-table .Related_Topics { background-position: 0 
> -600px } [dir="rtl"] .topicpage-table .Documentation { backgroun>-600px } [dir="rtl"] .topicpage-table .Documentation { background
>d-position: right 0 } [dir="rtl"] .topicpage-table .Community { b>-position: right 0 } [dir="rtl"] .topicpage-table .Community { ba
>ackground-position: right -200px } [dir="rtl"] .topicpage-table .>ckground-position: right -200px } [dir="rtl"] .topicpage-table .T
>Tools { background-position: right -400px } [dir="rtl"] .topicpag>ools { background-position: right -400px } [dir="rtl"] .topicpage
>e-table .Related_Topics { background-position: right -600px } /* >-table .Related_Topics { background-position: right -600px } /* f
>for Topic Page 2 (This is Test )*/ /* USAGE:>or Topic Page 2 (This is Test )*/ /* USAGE:

Back to History