Compare Revisions

Template:CustomCSS

Change Revisions

Revision 380945:

Revision 380945 by Sheppy on

Revision 380949:

Revision 380949 by Sheppy on

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

Revision 380945
Revision 380949
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; } /* Multi-column box for smaller text */ .>e; padding-left: 0px; } /* Multi-column box for smaller text */ .
>horizFlexboxContainer { display: flex; display: -webkit-flex; fle>horizFlexboxContainer { display: flex; display: -webkit-flex; fle
>x-flow: row; -webkit-flex-flow: row align-content: center; -webki>x-flow: row nowrap; -webkit-flex-flow: row; justify-content: cent
>t-align-content: center; align-items: center; -webkit-align-items>er; -webkit-justify-content: center; align-content: center; -webk
>: center; } .smallTextMultiColumnList { column-width:90px; -moz-c>it-align-content: center; align-items: center; -webkit-align-item
>olumn-width:90px; -webkit-column-width:90px; -o-column-width:90px>s: center; } .smallTextMultiColumnList { column-width:90px; -moz-
>; -ms-column-width:90px; border: 1px solid #ccc; background-color>column-width:90px; -webkit-column-width:90px; -o-column-width:90p
>: #ddf; border-radius: 10px; width: 75%; padding: 10px; flex: 0 1>x; -ms-column-width:90px; border: 1px solid #ccc; background-colo
> auto; -webkit-flex: 0 1 auto; } .smallTextMultiColumnList li { l>r: #ddf; border-radius: 10px; width: 75%; padding: 10px; flex: 0 
>ist-style-type: none; padding-left: 0px; font-size: 80%; } /* For>1 auto; -webkit-flex: 0 1 auto; } .smallTextMultiColumnList li { 
> ending "text alongside images" blocks; add this class to the fir>list-style-type: none; padding-left: 0px; font-size: 80%; } /* Fo
>st block that shouldn't be next to the image */ .endImageWrapping>r ending "text alongside images" blocks; add this class to the fi
> { clear: both; } /* Fancy Table of content for main pages of tut>rst block that shouldn't be next to the image */ .endImageWrappin
>orial*/ .fancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; >g { clear: both; } /* Fancy Table of content for main pages of tu
>columns: 18em; margin-bottom: 1em } .fancyTOC .button { display: >torial*/ .fancyTOC { counter-reset: fancyTOC; -moz-columns: 18em;
>block; margin-right: 0; margin-bottom: .25em; background-color: #> columns: 18em; margin-bottom: 1em } .fancyTOC .button { display:
>A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5 } .fancyT> block; margin-right: 0; margin-bottom: .25em; background-color: 
>OC a::before { counter-increment: fancyTOC; content: counter(fanc>#A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5 } .fancy
>yTOC) ". " } .fancyTOC a::after { content: ' »' } .fancyTOC .butt>TOC a::before { counter-increment: fancyTOC; content: counter(fan
>on:hover, .fancyTOC .button:focus, .fancyTOC .button:active { bac>cyTOC) ". " } .fancyTOC a::after { content: ' »' } .fancyTOC .but
>kground-color: #C26C6C } /* In index, dim obsolete, deprecated or>ton:hover, .fancyTOC .button:focus, .fancyTOC .button:active { ba
> non-standard element instead of striking through them */ s.depre>ckground-color: #C26C6C } /* In index, dim obsolete, deprecated o
>catedElement, s.obsoleteElement, s.nonStdElement { text-decoratio>r non-standard element instead of striking through them */ s.depr
>n: none; opacity: .3 } /* Add widgeted index, here adding an HTML>ecatedElement, s.obsoleteElement, s.nonStdElement { text-decorati
>5 badge as the bullet of the li element if class="html5" */ div.i>on: none; opacity: .3 } /* Add widgeted index, here adding an HTM
>ndex.widgeted { -webkit-column-width: 10em; -moz-column-width: 10>L5 badge as the bullet of the li element if class="html5" */ div.
>em; columns: 10em } div.index.widgeted li { padding-left: 18px } >index.widgeted { -webkit-column-width: 10em; -moz-column-width: 1
>div.index.widgeted li.html5 { background-image: url("/files/3855/>0em; columns: 10em } div.index.widgeted li { padding-left: 18px }
>HTML5_Badge_16.png"); background-repeat: no-repeat; background-po> div.index.widgeted li.html5 { background-image: url("/files/3855
>sition: left 4px } [dir="rtl"] div.index.widgeted li { padding-ri>/HTML5_Badge_16.png"); background-repeat: no-repeat; background-p
>ght: 18px } [dir="rtl"] div.index.widgeted li.html5 { background->osition: left 4px } [dir="rtl"] div.index.widgeted li { padding-r
>image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: >ight: 18px } [dir="rtl"] div.index.widgeted li.html5 { background
>no-repeat; background-position: right 4px } [dir="rtl"] div.index>-image: url("/files/3855/HTML5_Badge_16.png"); background-repeat:
>.widgeted span { padding-right:24px } /* Quicknav template styles> no-repeat; background-position: right 4px } [dir="rtl"] div.inde
> : https://developer.mozilla.org/en-US/docs/Template:quicknav --->x.widgeted span { padding-right:24px } /* Quicknav template style
>----- */ #wikiArticle { position: relative; } .quicknav { positio>s : https://developer.mozilla.org/en-US/docs/Template:quicknav --
>n: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 } >------ */ #wikiArticle { position: relative; } .quicknav { positi
>.quicknav dl { max-width: 0; max-height: 300px; overflow: auto; m>on: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 }
>argin: 0; padding: 10px 0; border: 1px solid transparent; border-> .quicknav dl { max-width: 0; max-height: 300px; overflow: auto; 
>left: none -webkit-transition: border .5s ease .1s, max-width .5s>margin: 0; padding: 10px 0; border: 1px solid transparent; border
> ease .1s, padding .5s linear .1s; -moz-transition: border .5s ea>-left: none -webkit-transition: border .5s ease .1s, max-width .5
>se .1s, max-width .5s ease .1s, padding .5s linear .1s; -ms-trans>s ease .1s, padding .5s linear .1s; -moz-transition: border .5s e
>ition: border .5s ease .1s, max-width .5s ease .1s, padding .5s l>ase .1s, max-width .5s ease .1s, padding .5s linear .1s; -ms-tran
>inear .1s; -o-transition: border .5s ease .1s, max-width .5s ease>sition: border .5s ease .1s, max-width .5s ease .1s, padding .5s 
> .1s, padding .5s linear .1s; transition: border .5s ease .1s, ma>linear .1s; -o-transition: border .5s ease .1s, max-width .5s eas
>x-width .5s ease .1s, padding .5s linear .1s } .quicknav dt, .qui>e .1s, padding .5s linear .1s; transition: border .5s ease .1s, m
>cknav dd { margin: 0; padding: 0; white-space: nowrap } .quicknav>ax-width .5s ease .1s, padding .5s linear .1s } .quicknav dt, .qu
> dt { font-weight: 700 } .quicknav dd + dt { margin-top: .5em } .>icknav dd { margin: 0; padding: 0; white-space: nowrap } .quickna
>quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10p>v dt { font-weight: 700 } .quicknav dd + dt { margin-top: .5em } 
>x; border-color: #ECECE7 } .quicknav .showme { display: block; po>.quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10
>sition: absolute; top: 10px; left: -31px; width: 30px; font: 2em >px; border-color: #ECECE7 } .quicknav .showme { display: block; p
>sans-serif; color: #CCC; text-align: center; background: #FFF; bo>osition: absolute; top: 10px; left: -31px; width: 30px; font: 2em
>rder-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-right> sans-serif; color: #CCC; text-align: center; background: #FFF; b
>: none } .quicknav:hover .showme { color: #333; } .cleared { clea>order-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-righ
>r: both } /* This style has problem ! Style attribute of BR eleme>t: none } .quicknav:hover .showme { color: #333; } .cleared { cle
>nt is not work in Kuma */ .clearLeft { clear: left } /* ltr page >ar: both } /* This style has problem ! Style attribute of BR elem
>only ? */ span.comment { display:none; } #wikiArticle .breadcrumb>ent is not work in Kuma */ .clearLeft { clear: left } /* ltr page
>s { display: block; margin-bottom: 1em } /* The HTML5 landing pag> only ? */ span.comment { display:none; } #wikiArticle .breadcrum
>e has some specificity */ table.html5ArticleToc { border-width: 5>bs { display: block; margin-bottom: 1em } /* The HTML5 landing pa
>px } .html5ArticleToc thead th { padding: .5em 1em } .html5Articl>ge has some specificity */ table.html5ArticleToc { border-width: 
>eToc tbody td { vertical-align: middle } .html5ArticleToc ul { ma>5px } .html5ArticleToc thead th { padding: .5em 1em } .html5Artic
>rgin: 0; padding: 0 } .html5ArticleToc ul li { display: inline; m>leToc tbody td { vertical-align: middle } .html5ArticleToc ul { m
>argin: 0 .25em } /* The syntax box: the first one is now used any>argin: 0; padding: 0 } .html5ArticleToc ul li { display: inline; 
>where (DOM, JS, CSS, ...) The twoparts is used for CSS properties>margin: 0 .25em } /* The syntax box: the first one is now used an
> */ pre.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; b>ywhere (DOM, JS, CSS, ...) The twoparts is used for CSS propertie
>ackground-color: #ffe; border-radius: 10px; } pre.twopartsyntaxbo>s */ pre.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; 
>x { border: 2px solid #bbb; margin-bottom: 0px; background-color:>background-color: #ffe; border-radius: 10px; } pre.twopartsyntaxb
> #ffe; border-radius: 10px 10px 0px 0px; } pre.twopartsyntaxbox +>ox { border: 2px solid #bbb; margin-bottom: 0px; background-color
> pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; bord>: #ffe; border-radius: 10px 10px 0px 0px; } pre.twopartsyntaxbox 
>er-top: none; margin-top: 0 } table.withoutBorder, table.withoutB>+ pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; bor
>order td, table.withoutBorder tr, table.withoutBorder th { border>der-top: none; margin-top: 0 } table.withoutBorder, table.without
>: none } td.horizontalLine { border-left: none } td.column { bord>Border td, table.withoutBorder tr, table.withoutBorder th { borde
>er-bottom: none } td.bottomPart { border-top: none } td.verticalT>r: none } td.horizontalLine { border-left: none } td.column { bor
>ext { width: 3em; -webkit-transform: rotate(-90deg); -moz-transfo>der-bottom: none } td.bottomPart { border-top: none } td.vertical
>rm: rotate(-90deg); -o-transform: rotate(-90deg); transform: rota>Text { width: 3em; -webkit-transform: rotate(-90deg); -moz-transf
>te(-90deg) } table.blockTable { border-collapse: collapse } table>orm: rotate(-90deg); -o-transform: rotate(-90deg); transform: rot
>.blockTable, table.blockTable td { margin: 1px; padding: 1px } ta>ate(-90deg) } table.blockTable { border-collapse: collapse } tabl
>ble.blockTable .verticalColumn { border-left: none; border-right:>e.blockTable, table.blockTable td { margin: 1px; padding: 1px } t
> none } /* The index page for HTML / CSS */ div.index { -webkit-c>able.blockTable .verticalColumn { border-left: none; border-right
>olumns: 16em; -moz-column-width: 16em; columns: 16em } div.index >: none } /* The index page for HTML / CSS */ div.index { -webkit-
>> span { font-family: Georgia, Times, 'Times New Roman', serif>columns: 16em; -moz-column-width: 16em; columns: 16em } div.index
>; font-size: 1.6em } div.index ul { margin-left: 0; padding-left:> > span { font-family: Georgia, Times, 'Times New Roman', seri
> 0; list-style-type: none } /* ul.cssprop box used by each CSS Pr>f; font-size: 1.6em } div.index ul { margin-left: 0; padding-left
>operty reference page*/ .cssprop { display: table; padding: 11px >: 0; list-style-type: none } /* ul.cssprop box used by each CSS P
>22px; background-color: #eef } [dir="ltr"] .cssprop { clear: left>roperty reference page*/ .cssprop { display: table; padding: 11px
>; border-left: .15em solid } [dir="rtl"] .cssprop { clear: right;> 22px; background-color: #eef } [dir="ltr"] .cssprop { clear: lef
> border-right: .15em solid } .cssprop li { display: table-row; pa>t; border-left: .15em solid } [dir="rtl"] .cssprop { clear: right
>dding: 3px; margin: 0; text-align: left } .cssprop li dfn { displ>; border-right: .15em solid } .cssprop li { display: table-row; p
>ay: table-cell; padding: 0 5px; border-bottom: none; white-space:>adding: 3px; margin: 0; text-align: left } .cssprop li dfn { disp
> pre; cursor: inherit } .cssprop li dfn:after { content: ":" } .c>lay: table-cell; padding: 0 5px; border-bottom: none; white-space
>ssprop li li { display: list-item; list-style-type: disc; line-he>: pre; cursor: inherit } .cssprop li dfn:after { content: ":" } .
>ight: 1 } /* ul.htmlelt box used by each HTML Element reference p>cssprop li li { display: list-item; list-style-type: disc; line-h
>age */ .htmlelt { display: table; padding: 11px 22px; background->eight: 1 } /* ul.htmlelt box used by each HTML Element reference 
>color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-left: .1>page */ .htmlelt { display: table; padding: 11px 22px; background
>5em solid } [dir="rtl"] .htmlelt { clear: right; border-right: .1>-color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-left: .
>5em solid } .htmlelt li { display: table-row; padding: 3px; margi>15em solid } [dir="rtl"] .htmlelt { clear: right; border-right: .
>n: 0; text-align: left } .htmlelt li dfn { display: table-cell; p>15em solid } .htmlelt li { display: table-row; padding: 3px; marg
>adding: 0 5px; border-bottom: none; white-space: pre; cursor: inh>in: 0; text-align: left } .htmlelt li dfn { display: table-cell; 
>erit } .htmlelt li dfn:after { content: ":" } .htmlelt li li { di>padding: 0 5px; border-bottom: none; white-space: pre; cursor: in
>splay: list-item; list-style-type: disc; line-height: 1 } /* ul.a>herit } .htmlelt li dfn:after { content: ":" } .htmlelt li li { d
>udionodebox used by each AudioNode object reference page*/ .audio>isplay: list-item; list-style-type: disc; line-height: 1 } /* ul.
>nodebox { display: table; padding: 11px 22px; background-color: #>audionodebox used by each AudioNode object reference page*/ .audi
>fee } [dir="ltr"] .audionodebox { clear: left; border-left: .15em>onodebox { display: table; padding: 11px 22px; background-color: 
> solid } [dir="rtl"] .audionodebox { clear: right; border-right: >#fee } [dir="ltr"] .audionodebox { clear: left; border-left: .15e
>.15em solid } .audionodebox li { display: table-row; padding: 3px>m solid } [dir="rtl"] .audionodebox { clear: right; border-right:
>; margin: 0; text-align: left } .audionodebox li dfn { display: t> .15em solid } .audionodebox li { display: table-row; padding: 3p
>able-cell; padding: 0 5px; border-bottom: none; white-space: pre;>x; margin: 0; text-align: left } .audionodebox li dfn { display: 
> cursor: inherit } .audionodebox li dfn:after { content: ":" } .a>table-cell; padding: 0 5px; border-bottom: none; white-space: pre
>udionodebox li li { display: list-item; list-style-type: disc; li>; cursor: inherit } .audionodebox li dfn:after { content: ":" } .
>ne-height: 1 } /* https://developer.mozilla.org/en-US/docs/Templa>audionodebox li li { display: list-item; list-style-type: disc; l
>te:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em auto>ine-height: 1 } /* https://developer.mozilla.org/en-US/docs/Templ
>; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav td { >ate:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em aut
>text-align: center } .method { margin-left: 10px; margin-bottom: >o; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav td {
>2em; margin-top: 1em } .method > .name { display: block; font-> text-align: center } .method { margin-left: 10px; margin-bottom:
>size: 13pt; margin-bottom: .2em } .method > .name > .param:> 2em; margin-top: 1em } .method > .name { display: block; font
> after { content: ","; padding-right: .5em } .method > .name &>-size: 13pt; margin-bottom: .2em } .method > .name > .param
>gt; .param: last-of-type: after { content: "" } .method > .nam>: after { content: ","; padding-right: .5em } .method > .name 
>e > .param > .name: after { content: " as "; font-weight: n>> .param: last-of-type: after { content: "" } .method > .na
>ormal } .method > .name > .param: not(.required) { font-sty>me > .param > .name: after { content: " as "; font-weight: 
>le: italic } .method > .name > .param: not(.required): befo>normal } .method > .name > .param: not(.required) { font-st
>re { content: "[" } .method > .name > .param: not(.required>yle: italic } .method > .name > .param: not(.required): bef
>): after { content: "]" } .method > .description { display: bl>ore { content: "[" } .method > .name > .param: not(.require
>ock; font-size: 10pt; color: #444; font-style: italic; margin-bot>d): after { content: "]" } .method > .description { display: b
>tom: 7px } .method > .name > .returns: before { content: " >lock; font-size: 10pt; color: #444; font-style: italic; margin-bo
>returns "; font-weight: normal; font-style: italic } .method >>ttom: 7px } .method > .name > .returns: before { content: "
> .name > .returns { font-weight: 700 } .method > .params { > returns "; font-weight: normal; font-style: italic } .method &gt
>display: block; color: #555 } .method > .params > .param { >; .name > .returns { font-weight: 700 } .method > .params {
>display: block; margin-bottom: 5px } .method > .params > .p> display: block; color: #555 } .method > .params > .param {
>aram > .name { font-weight: 700; margin-right: .5em; min-width> display: block; margin-bottom: 5px } .method > .params > .
>: 80px; display: inline-block } .method > .params > .param >param > .name { font-weight: 700; margin-right: .5em; min-widt
>> .description { display: inline-block; width: 300px; vertical>h: 80px; display: inline-block } .method > .params > .param
>-align: top; margin-right: 30px } .method > .params > .para> > .description { display: inline-block; width: 300px; vertica
>m > .type { display: inline-block; width: 150px; vertical-alig>l-align: top; margin-right: 30px } .method > .params > .par
>n: top; font-weight: 700 } .method > .params > .param > >am > .type { display: inline-block; width: 150px; vertical-ali
>.type: before { content: "Type "; color: #888; font-weight: norma>gn: top; font-weight: 700 } .method > .params > .param >
>l } .method > .params > .param > .default { display: inl> .type: before { content: "Type "; color: #888; font-weight: norm
>ine-block; width: 150px; vertical-align: top; font-weight: 700 } >al } .method > .params > .param > .default { display: in
>.method > .params > .param > .default: before { content:>line-block; width: 150px; vertical-align: top; font-weight: 700 }
> "Default "; color: #888; font-weight: normal } /* version compat> .method > .params > .param > .default: before { content
>ibility banners and notes */ .geckoVersionNote { background-color>: "Default "; color: #888; font-weight: normal } /* version compa
>: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, ci>tibility banners and notes */ .geckoVersionNote { background-colo
>rcle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px >r: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, c
>solid #008 } .geckoVersionNote p { padding-left: 4px; border: 0 }>ircle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px
> .geckoVersionHeading { background-color: #008; background-image:> solid #008 } .geckoVersionNote p { padding-left: 4px; border: 0 
> -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff; >} .geckoVersionHeading { background-color: #008; background-image
>font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margin>: -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff;
>-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHeading> font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margi
> a:link { color: #ddd } .geckoVersionHeading a:visited { color: #>n-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHeadin
>eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:focus >g a:link { color: #ddd } .geckoVersionHeading a:visited { color: 
>{ color: #fdd } /* Used to to create icon-badged APIs inline */ .>#eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:focus
>badge { position: relative; top: -2px; display: inline-block; cur> { color: #fdd } /* Used to to create icon-badged APIs inline */ 
>sor: default; border: 1px solid #aaa; border-radius: 8px; padding>.badge { position: relative; top: -2px; display: inline-block; cu
>: 0.3em 0.8em; font-size: 0.7em; font-weight: bold; } .icon { pad>rsor: default; border: 1px solid #aaa; border-radius: 8px; paddin
>ding-left: 3.1em; } [dir=rtl] .icon { padding-left: 0.8em; paddin>g: 0.3em 0.8em; font-size: 0.7em; font-weight: bold; } .icon { pa
>g-right: 3.1em; } .icon:before { content: ""; position: absolute;>dding-left: 3.1em; } [dir=rtl] .icon { padding-left: 0.8em; paddi
> left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em; height: >ng-right: 3.1em; } .icon:before { content: ""; position: absolute
>2.8em; background: white no-repeat center center; background-size>; left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em; height:
>: 2.6em; border-radius: 100%; border: 1px solid #aaa; border-righ> 2.8em; background: white no-repeat center center; background-siz
>t: none; box-sizing: border-box; -moz-boxsizing: border-box; } [d>e: 2.6em; border-radius: 100%; border: 1px solid #aaa; border-rig
>ir=rtl] .icon:before { left: auto; right: -2px; border: 1px solid>ht: none; box-sizing: border-box; -moz-boxsizing: border-box; } [
> #aaa; border-left: none; } /* Used for badging non-standard APIs>dir=rtl] .icon:before { left: auto; right: -2px; border: 1px soli
> */ .nonstandardBadge { background: linear-gradient(to right, #f0>d #aaa; border-left: none; } /* Used for badging non-standard API
>DE00 30%,#f0ff19 100%); color: black; text-shadow: 1px 1px 0 #ddd>s */ .nonstandardBadge { background: linear-gradient(to right, #f
>; } /* Used for badging privileged APIs */ .privilegedBadge { bac>0DE00 30%,#f0ff19 100%); color: black; text-shadow: 1px 1px 0 #dd
>kground: linear-gradient(to right, #FFBD19 30%,#ffb200 100%); col>d; } /* Used for badging privileged APIs */ .privilegedBadge { ba
>or: black; text-shadow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBa>ckground: linear-gradient(to right, #FFBD19 30%,#ffb200 100%); co
>dge { background: linear-gradient(to left, #FFBD19 30%,#ffb200 10>lor: black; text-shadow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedB
>0%); } .icon.privilegedBadge:before { background-color: orange; b>adge { background: linear-gradient(to left, #FFBD19 30%,#ffb200 1
>ackground-image: url(https://mdn.mozillademos.org/files/5061/fire>00%); } .icon.privilegedBadge:before { background-color: orange; 
>foxos-logo-sm.png); } .sidebar-box { margin-left: 16px; margin-bo>background-image: url(https://mdn.mozillademos.org/files/5061/fir
>ttom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; back>efoxos-logo-sm.png); } .sidebar-box { margin-left: 16px; margin-b
>ground: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px V>ottom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; bac
>erdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar-box h3, .s>kground: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px 
>idebar-box h5 { margin-bottom: .5em; font-family: inherit; font-w>Verdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar-box h3, .
>eight: 700 } .sidebar-box h2 { font-size: 1.5em } .sidebar-box h3>sidebar-box h5 { margin-bottom: .5em; font-family: inherit; font-
> { font-size: 1.1em } .sidebar-box h5 { font-size: .9em } .sideba>weight: 700 } .sidebar-box h2 { font-size: 1.5em } .sidebar-box h
>r-box > ul { float: left; text-align: left; display: block; pa>3 { font-size: 1.1em } .sidebar-box h5 { font-size: .9em } .sideb
>dding: 0; margin: auto 0; position: relative } .sidebar-box ul &g>ar-box > ul { float: left; text-align: left; display: block; p
>t; li { list-style-type: none } .tab-content-box { border-right: >adding: 0; margin: auto 0; position: relative } .sidebar-box ul &
>1px solid #ecf1f3; margin-left: 16px; padding: 12px; background: >gt; li { list-style-type: none } .tab-content-box { border-right:
>#fff; font: 12px Verdana, Tahoma, sans-serif } .tab-content-box h> 1px solid #ecf1f3; margin-left: 16px; padding: 12px; background:
>2, .tab-content-box h3, .tab-content-box h5 { margin-bottom: .5em> #fff; font: 12px Verdana, Tahoma, sans-serif } .tab-content-box 
>; font-family: inherit; font-weight: 700 } .tab-content-box h2 { >h2, .tab-content-box h3, .tab-content-box h5 { margin-bottom: .5e
>font-size: 1.5em } .tab-content-box h3 { font-size: 1.1em } .tab->m; font-family: inherit; font-weight: 700 } .tab-content-box h2 {
>content-box h5 { font-size: .9em } #menuFiller { display: block }> font-size: 1.5em } .tab-content-box h3 { font-size: 1.1em } .tab
> table.compat-table { border-color: #bbb; margin: 0 } table.compa>-content-box h5 { font-size: .9em } #menuFiller { display: block 
>t-table td { padding: 5px; border: 1px solid #ccc; background: #f>} table.compat-table { border-color: #bbb; margin: 0 } table.comp
>ff; vertical-align: top; word-wrap: break-word } table.compat-tab>at-table td { padding: 5px; border: 1px solid #ccc; background: #
>le th, table.compat-table td.header { border: 1px solid #bbb; pad>fff; vertical-align: top; word-wrap: break-word } table.compat-ta
>ding: 0 5px; background: #eee; font-weight: 700 } .archivedConten>ble th, table.compat-table td.header { border: 1px solid #bbb; pa
>tBlock { margin: 0; background-color: #fdd } div.action-driven { >dding: 0 5px; background: #eee; font-weight: 700 } .archivedConte
>display: inline-block; float: none; min-height: 8.5em; margin: .8>ntBlock { margin: 0; background-color: #fdd } div.action-driven {
>em; box-shadow: .2em .1em .1em #808080; vertical-align: top; } di> display: inline-block; float: none; min-height: 8.5em; margin: .
>v.action-driven > div { font: 400 20px 'Bebas Neue', 'League G>8em; box-shadow: .2em .1em .1em #808080; vertical-align: top; } d
>othic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-se>iv.action-driven > div { font: 400 20px 'Bebas Neue', 'League 
>rif; text-transform: uppercase } /*----------------- for Topic pa>Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-s
>ge */ table.topicpage-table, table.topicpage-table td, table.topi>erif; text-transform: uppercase } /*----------------- for Topic p
>cpage-table tr, table.topicpage-table th { border: none } .topicp>age */ table.topicpage-table, table.topicpage-table td, table.top
>age-table .section { padding-right:1em} /* "table.topicpage-table>icpage-table tr, table.topicpage-table th { border: none } .topic
> h2 { --font-setting-- }" is better than this. */ .topicpage-tabl>page-table .section { padding-right:1em} /* "table.topicpage-tabl
>e .Documentation, .topicpage-table .Community, .topicpage-table .>e h2 { --font-setting-- }" is better than this. */ .topicpage-tab
>Tools, .topicpage-table .Related_Topics { background-image: url('>le .Documentation, .topicpage-table .Community, .topicpage-table 
>/media/img/icons-sections.png'); background-repeat: no-repeat; ma>.Tools, .topicpage-table .Related_Topics { background-image: url(
>rgin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; fon>'/media/img/icons-sections.png'); background-repeat: no-repeat; m
>t: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Im>argin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; fo
>pact, 'Arial Narrow', Meiryo, sans-serif; text-transform: upperca>nt: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, I
>se; border: none } [dir="rtl"] .topicpage-table .Documentation, [>mpact, 'Arial Narrow', Meiryo, sans-serif; text-transform: upperc
>dir="rtl"] .topicpage-table .Community, [dir="rtl"] .topicpage-ta>ase; border: none } [dir="rtl"] .topicpage-table .Documentation, 
>ble .Tools, [dir="rtl"] .topicpage-table .Related_Topics { paddin>[dir="rtl"] .topicpage-table .Community, [dir="rtl"] .topicpage-t
>g: 18px 65px 0 18px; } .topicpage-table .Documentation { backgrou>able .Tools, [dir="rtl"] .topicpage-table .Related_Topics { paddi
>nd-position: 0 0 } .topicpage-table .Community { background-posit>ng: 18px 65px 0 18px; } .topicpage-table .Documentation { backgro
>ion: 0 -200px } .topicpage-table .Tools { background-position: 0 >und-position: 0 0 } .topicpage-table .Community { background-posi
>-400px } .topicpage-table .Related_Topics { background-position: >tion: 0 -200px } .topicpage-table .Tools { background-position: 0
>0 -600px } [dir="rtl"] .topicpage-table .Documentation { backgrou> -400px } .topicpage-table .Related_Topics { background-position:
>nd-position: right 0 } [dir="rtl"] .topicpage-table .Community { > 0 -600px } [dir="rtl"] .topicpage-table .Documentation { backgro
>background-position: right -200px } [dir="rtl"] .topicpage-table >und-position: right 0 } [dir="rtl"] .topicpage-table .Community {
>.Tools { background-position: right -400px } [dir="rtl"] .topicpa> background-position: right -200px } [dir="rtl"] .topicpage-table
>ge-table .Related_Topics { background-position: right -600px } /*> .Tools { background-position: right -400px } [dir="rtl"] .topicp
> for Topic Page 2 (This is Test )*/ /* USAGE:>age-table .Related_Topics { background-position: right -600px } /
 >* for Topic Page 2 (This is Test )*/ /* USAGE:

Back to History