Compare Revisions

Template:CustomCSS

Revision 380935:

Revision 380935 by Sheppy on

Revision 380945:

Revision 380945 by Sheppy on

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

Revision 380935
Revision 380945
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 */ .
>smallTextMultiColumnList { column-width:90px; -moz-column-width:9>horizFlexboxContainer { display: flex; display: -webkit-flex; fle
>0px; -webkit-column-width:90px; -o-column-width:90px; -ms-column->x-flow: row; -webkit-flex-flow: row align-content: center; -webki
>width:90px; border: 1px solid #ccc; background-color: #ddf; borde>t-align-content: center; align-items: center; -webkit-align-items
>r-radius: 10px; width: 80%; margin-left: 40px; margin-right: 40px>: center; } .smallTextMultiColumnList { column-width:90px; -moz-c
>; margin-top: 10px; margin-bottom: 10px; } .smallTextMultiColumnL>olumn-width:90px; -webkit-column-width:90px; -o-column-width:90px
>ist li { list-style-type: none; padding-left: 0px; font-size: 80%>; -ms-column-width:90px; border: 1px solid #ccc; background-color
>; } /* For ending "text alongside images" blocks; add this class >: #ddf; border-radius: 10px; width: 75%; padding: 10px; flex: 0 1
>to the first block that shouldn't be next to the image */ .endIma> auto; -webkit-flex: 0 1 auto; } .smallTextMultiColumnList li { l
>geWrapping { clear: both; } /* Fancy Table of content for main pa>ist-style-type: none; padding-left: 0px; font-size: 80%; } /* For
>ges of tutorial*/ .fancyTOC { counter-reset: fancyTOC; -moz-colum> ending "text alongside images" blocks; add this class to the fir
>ns: 18em; columns: 18em; margin-bottom: 1em } .fancyTOC .button {>st block that shouldn't be next to the image */ .endImageWrapping
> display: block; margin-right: 0; margin-bottom: .25em; backgroun> { clear: both; } /* Fancy Table of content for main pages of tut
>d-color: #A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5>orial*/ .fancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; 
> } .fancyTOC a::before { counter-increment: fancyTOC; content: co>columns: 18em; margin-bottom: 1em } .fancyTOC .button { display: 
>unter(fancyTOC) ". " } .fancyTOC a::after { content: ' »' } .fanc>block; margin-right: 0; margin-bottom: .25em; background-color: #
>yTOC .button:hover, .fancyTOC .button:focus, .fancyTOC .button:ac>A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5 } .fancyT
>tive { background-color: #C26C6C } /* In index, dim obsolete, dep>OC a::before { counter-increment: fancyTOC; content: counter(fanc
>recated or non-standard element instead of striking through them >yTOC) ". " } .fancyTOC a::after { content: ' »' } .fancyTOC .butt
>*/ s.deprecatedElement, s.obsoleteElement, s.nonStdElement { text>on:hover, .fancyTOC .button:focus, .fancyTOC .button:active { bac
>-decoration: none; opacity: .3 } /* Add widgeted index, here addi>kground-color: #C26C6C } /* In index, dim obsolete, deprecated or
>ng an HTML5 badge as the bullet of the li element if class="html5> non-standard element instead of striking through them */ s.depre
>" */ div.index.widgeted { -webkit-column-width: 10em; -moz-column>catedElement, s.obsoleteElement, s.nonStdElement { text-decoratio
>-width: 10em; columns: 10em } div.index.widgeted li { padding-lef>n: none; opacity: .3 } /* Add widgeted index, here adding an HTML
>t: 18px } div.index.widgeted li.html5 { background-image: url("/f>5 badge as the bullet of the li element if class="html5" */ div.i
>iles/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; bac>ndex.widgeted { -webkit-column-width: 10em; -moz-column-width: 10
>kground-position: left 4px } [dir="rtl"] div.index.widgeted li { >em; columns: 10em } div.index.widgeted li { padding-left: 18px } 
>padding-right: 18px } [dir="rtl"] div.index.widgeted li.html5 { b>div.index.widgeted li.html5 { background-image: url("/files/3855/
>ackground-image: url("/files/3855/HTML5_Badge_16.png"); backgroun>HTML5_Badge_16.png"); background-repeat: no-repeat; background-po
>d-repeat: no-repeat; background-position: right 4px } [dir="rtl"]>sition: left 4px } [dir="rtl"] div.index.widgeted li { padding-ri
> div.index.widgeted span { padding-right:24px } /* Quicknav templ>ght: 18px } [dir="rtl"] div.index.widgeted li.html5 { background-
>ate styles : https://developer.mozilla.org/en-US/docs/Template:qu>image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: 
>icknav -------- */ #wikiArticle { position: relative; } .quicknav>no-repeat; background-position: right 4px } [dir="rtl"] div.index
> { position: fixed; top: 237px; left: 33px; background: #FFF; z-i>.widgeted span { padding-right:24px } /* Quicknav template styles
>ndex: 1 } .quicknav dl { max-width: 0; max-height: 300px; overflo> : https://developer.mozilla.org/en-US/docs/Template:quicknav ---
>w: auto; margin: 0; padding: 10px 0; border: 1px solid transparen>----- */ #wikiArticle { position: relative; } .quicknav { positio
>t; border-left: none -webkit-transition: border .5s ease .1s, max>n: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 } 
>-width .5s ease .1s, padding .5s linear .1s; -moz-transition: bor>.quicknav dl { max-width: 0; max-height: 300px; overflow: auto; m
>der .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;>argin: 0; padding: 10px 0; border: 1px solid transparent; border-
> -ms-transition: border .5s ease .1s, max-width .5s ease .1s, pad>left: none -webkit-transition: border .5s ease .1s, max-width .5s
>ding .5s linear .1s; -o-transition: border .5s ease .1s, max-widt> ease .1s, padding .5s linear .1s; -moz-transition: border .5s ea
>h .5s ease .1s, padding .5s linear .1s; transition: border .5s ea>se .1s, max-width .5s ease .1s, padding .5s linear .1s; -ms-trans
>se .1s, max-width .5s ease .1s, padding .5s linear .1s } .quickna>ition: border .5s ease .1s, max-width .5s ease .1s, padding .5s l
>v dt, .quicknav dd { margin: 0; padding: 0; white-space: nowrap }>inear .1s; -o-transition: border .5s ease .1s, max-width .5s ease
> .quicknav dt { font-weight: 700 } .quicknav dd + dt { margin-top> .1s, padding .5s linear .1s; transition: border .5s ease .1s, ma
>: .5em } .quicknav:hover dl { max-width: 300px; padding: 10px 20p>x-width .5s ease .1s, padding .5s linear .1s } .quicknav dt, .qui
>x 10px 10px; border-color: #ECECE7 } .quicknav .showme { display:>cknav dd { margin: 0; padding: 0; white-space: nowrap } .quicknav
> block; position: absolute; top: 10px; left: -31px; width: 30px; > dt { font-weight: 700 } .quicknav dd + dt { margin-top: .5em } .
>font: 2em sans-serif; color: #CCC; text-align: center; background>quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10p
>: #FFF; border-radius: 5px 0 0 5px; border: 1px solid #ECECE7; bo>x; border-color: #ECECE7 } .quicknav .showme { display: block; po
>rder-right: none } .quicknav:hover .showme { color: #333; } .clea>sition: absolute; top: 10px; left: -31px; width: 30px; font: 2em 
>red { clear: both } /* This style has problem ! Style attribute o>sans-serif; color: #CCC; text-align: center; background: #FFF; bo
>f BR element is not work in Kuma */ .clearLeft { clear: left } /*>rder-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-right
> ltr page only ? */ span.comment { display:none; } #wikiArticle .>: none } .quicknav:hover .showme { color: #333; } .cleared { clea
>breadcrumbs { display: block; margin-bottom: 1em } /* The HTML5 l>r: both } /* This style has problem ! Style attribute of BR eleme
>anding page has some specificity */ table.html5ArticleToc { borde>nt is not work in Kuma */ .clearLeft { clear: left } /* ltr page 
>r-width: 5px } .html5ArticleToc thead th { padding: .5em 1em } .h>only ? */ span.comment { display:none; } #wikiArticle .breadcrumb
>tml5ArticleToc tbody td { vertical-align: middle } .html5ArticleT>s { display: block; margin-bottom: 1em } /* The HTML5 landing pag
>oc ul { margin: 0; padding: 0 } .html5ArticleToc ul li { display:>e has some specificity */ table.html5ArticleToc { border-width: 5
> inline; margin: 0 .25em } /* The syntax box: the first one is no>px } .html5ArticleToc thead th { padding: .5em 1em } .html5Articl
>w used anywhere (DOM, JS, CSS, ...) The twoparts is used for CSS >eToc tbody td { vertical-align: middle } .html5ArticleToc ul { ma
>properties */ pre.syntaxbox { border: 2px solid #ccc; margin-bott>rgin: 0; padding: 0 } .html5ArticleToc ul li { display: inline; m
>om: 1em; background-color: #ffe; border-radius: 10px; } pre.twopa>argin: 0 .25em } /* The syntax box: the first one is now used any
>rtsyntaxbox { border: 2px solid #bbb; margin-bottom: 0px; backgro>where (DOM, JS, CSS, ...) The twoparts is used for CSS properties
>und-color: #ffe; border-radius: 10px 10px 0px 0px; } pre.twoparts> */ pre.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; b
>yntaxbox + pre { border: 2px solid #bbb; border-radius: 0 0 10px >ackground-color: #ffe; border-radius: 10px; } pre.twopartsyntaxbo
>10px; border-top: none; margin-top: 0 } table.withoutBorder, tabl>x { border: 2px solid #bbb; margin-bottom: 0px; background-color:
>e.withoutBorder td, table.withoutBorder tr, table.withoutBorder t> #ffe; border-radius: 10px 10px 0px 0px; } pre.twopartsyntaxbox +
>h { border: none } td.horizontalLine { border-left: none } td.col> pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; bord
>umn { border-bottom: none } td.bottomPart { border-top: none } td>er-top: none; margin-top: 0 } table.withoutBorder, table.withoutB
>.verticalText { width: 3em; -webkit-transform: rotate(-90deg); -m>order td, table.withoutBorder tr, table.withoutBorder th { border
>oz-transform: rotate(-90deg); -o-transform: rotate(-90deg); trans>: none } td.horizontalLine { border-left: none } td.column { bord
>form: rotate(-90deg) } table.blockTable { border-collapse: collap>er-bottom: none } td.bottomPart { border-top: none } td.verticalT
>se } table.blockTable, table.blockTable td { margin: 1px; padding>ext { width: 3em; -webkit-transform: rotate(-90deg); -moz-transfo
>: 1px } table.blockTable .verticalColumn { border-left: none; bor>rm: rotate(-90deg); -o-transform: rotate(-90deg); transform: rota
>der-right: none } /* The index page for HTML / CSS */ div.index {>te(-90deg) } table.blockTable { border-collapse: collapse } table
> -webkit-columns: 16em; -moz-column-width: 16em; columns: 16em } >.blockTable, table.blockTable td { margin: 1px; padding: 1px } ta
>div.index > span { font-family: Georgia, Times, 'Times New Rom>ble.blockTable .verticalColumn { border-left: none; border-right:
>an', serif; font-size: 1.6em } div.index ul { margin-left: 0; pad> none } /* The index page for HTML / CSS */ div.index { -webkit-c
>ding-left: 0; list-style-type: none } /* ul.cssprop box used by e>olumns: 16em; -moz-column-width: 16em; columns: 16em } div.index 
>ach CSS Property reference page*/ .cssprop { display: table; padd>> span { font-family: Georgia, Times, 'Times New Roman', serif
>ing: 11px 22px; background-color: #eef } [dir="ltr"] .cssprop { c>; font-size: 1.6em } div.index ul { margin-left: 0; padding-left:
>lear: left; border-left: .15em solid } [dir="rtl"] .cssprop { cle> 0; list-style-type: none } /* ul.cssprop box used by each CSS Pr
>ar: right; border-right: .15em solid } .cssprop li { display: tab>operty reference page*/ .cssprop { display: table; padding: 11px 
>le-row; padding: 3px; margin: 0; text-align: left } .cssprop li d>22px; background-color: #eef } [dir="ltr"] .cssprop { clear: left
>fn { display: table-cell; padding: 0 5px; border-bottom: none; wh>; border-left: .15em solid } [dir="rtl"] .cssprop { clear: right;
>ite-space: pre; cursor: inherit } .cssprop li dfn:after { content> border-right: .15em solid } .cssprop li { display: table-row; pa
>: ":" } .cssprop li li { display: list-item; list-style-type: dis>dding: 3px; margin: 0; text-align: left } .cssprop li dfn { displ
>c; line-height: 1 } /* ul.htmlelt box used by each HTML Element r>ay: table-cell; padding: 0 5px; border-bottom: none; white-space:
>eference page */ .htmlelt { display: table; padding: 11px 22px; b> pre; cursor: inherit } .cssprop li dfn:after { content: ":" } .c
>ackground-color: #fe9 } [dir="ltr"] .htmlelt { clear: left; borde>ssprop li li { display: list-item; list-style-type: disc; line-he
>r-left: .15em solid } [dir="rtl"] .htmlelt { clear: right; border>ight: 1 } /* ul.htmlelt box used by each HTML Element reference p
>-right: .15em solid } .htmlelt li { display: table-row; padding: >age */ .htmlelt { display: table; padding: 11px 22px; background-
>3px; margin: 0; text-align: left } .htmlelt li dfn { display: tab>color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-left: .1
>le-cell; padding: 0 5px; border-bottom: none; white-space: pre; c>5em solid } [dir="rtl"] .htmlelt { clear: right; border-right: .1
>ursor: inherit } .htmlelt li dfn:after { content: ":" } .htmlelt >5em solid } .htmlelt li { display: table-row; padding: 3px; margi
>li li { display: list-item; list-style-type: disc; line-height: 1>n: 0; text-align: left } .htmlelt li dfn { display: table-cell; p
> } /* ul.audionodebox used by each AudioNode object reference pag>adding: 0 5px; border-bottom: none; white-space: pre; cursor: inh
>e*/ .audionodebox { display: table; padding: 11px 22px; backgroun>erit } .htmlelt li dfn:after { content: ":" } .htmlelt li li { di
>d-color: #fee } [dir="ltr"] .audionodebox { clear: left; border-l>splay: list-item; list-style-type: disc; line-height: 1 } /* ul.a
>eft: .15em solid } [dir="rtl"] .audionodebox { clear: right; bord>udionodebox used by each AudioNode object reference page*/ .audio
>er-right: .15em solid } .audionodebox li { display: table-row; pa>nodebox { display: table; padding: 11px 22px; background-color: #
>dding: 3px; margin: 0; text-align: left } .audionodebox li dfn { >fee } [dir="ltr"] .audionodebox { clear: left; border-left: .15em
>display: table-cell; padding: 0 5px; border-bottom: none; white-s> solid } [dir="rtl"] .audionodebox { clear: right; border-right: 
>pace: pre; cursor: inherit } .audionodebox li dfn:after { content>.15em solid } .audionodebox li { display: table-row; padding: 3px
>: ":" } .audionodebox li li { display: list-item; list-style-type>; margin: 0; text-align: left } .audionodebox li dfn { display: t
>: disc; line-height: 1 } /* https://developer.mozilla.org/en-US/d>able-cell; padding: 0 5px; border-bottom: none; white-space: pre;
>ocs/Template:HTML:Element_Navigation */ table.HTMLElmNav { margin> cursor: inherit } .audionodebox li dfn:after { content: ":" } .a
>: 1em auto; border-width: 5px } table.HTMLElmNav th, table.HTMLEl>udionodebox li li { display: list-item; list-style-type: disc; li
>mNav td { text-align: center } .method { margin-left: 10px; margi>ne-height: 1 } /* https://developer.mozilla.org/en-US/docs/Templa
>n-bottom: 2em; margin-top: 1em } .method > .name { display: bl>te:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em auto
>ock; font-size: 13pt; margin-bottom: .2em } .method > .name &g>; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav td { 
>t; .param: after { content: ","; padding-right: .5em } .method &g>text-align: center } .method { margin-left: 10px; margin-bottom: 
>t; .name > .param: last-of-type: after { content: "" } .method>2em; margin-top: 1em } .method > .name { display: block; font-
> > .name > .param > .name: after { content: " as "; font>size: 13pt; margin-bottom: .2em } .method > .name > .param:
>-weight: normal } .method > .name > .param: not(.required) > after { content: ","; padding-right: .5em } .method > .name &
>{ font-style: italic } .method > .name > .param: not(.requi>gt; .param: last-of-type: after { content: "" } .method > .nam
>red): before { content: "[" } .method > .name > .param: not>e > .param > .name: after { content: " as "; font-weight: n
>(.required): after { content: "]" } .method > .description { d>ormal } .method > .name > .param: not(.required) { font-sty
>isplay: block; font-size: 10pt; color: #444; font-style: italic; >le: italic } .method > .name > .param: not(.required): befo
>margin-bottom: 7px } .method > .name > .returns: before { c>re { content: "[" } .method > .name > .param: not(.required
>ontent: " returns "; font-weight: normal; font-style: italic } .m>): after { content: "]" } .method > .description { display: bl
>ethod > .name > .returns { font-weight: 700 } .method > >ock; font-size: 10pt; color: #444; font-style: italic; margin-bot
>.params { display: block; color: #555 } .method > .params >>tom: 7px } .method > .name > .returns: before { content: " 
> .param { display: block; margin-bottom: 5px } .method > .para>returns "; font-weight: normal; font-style: italic } .method >
>ms > .param > .name { font-weight: 700; margin-right: .5em;> .name > .returns { font-weight: 700 } .method > .params { 
> min-width: 80px; display: inline-block } .method > .params &g>display: block; color: #555 } .method > .params > .param { 
>t; .param > .description { display: inline-block; width: 300px>display: block; margin-bottom: 5px } .method > .params > .p
>; vertical-align: top; margin-right: 30px } .method > .params >aram > .name { font-weight: 700; margin-right: .5em; min-width
>> .param > .type { display: inline-block; width: 150px; ver>: 80px; display: inline-block } .method > .params > .param 
>tical-align: top; font-weight: 700 } .method > .params > .p>> .description { display: inline-block; width: 300px; vertical
>aram > .type: before { content: "Type "; color: #888; font-wei>-align: top; margin-right: 30px } .method > .params > .para
>ght: normal } .method > .params > .param > .default { di>m > .type { display: inline-block; width: 150px; vertical-alig
>splay: inline-block; width: 150px; vertical-align: top; font-weig>n: top; font-weight: 700 } .method > .params > .param > 
>ht: 700 } .method > .params > .param > .default: before >.type: before { content: "Type "; color: #888; font-weight: norma
>{ content: "Default "; color: #888; font-weight: normal } /* vers>l } .method > .params > .param > .default { display: inl
>ion compatibility banners and notes */ .geckoVersionNote { backgr>ine-block; width: 150px; vertical-align: top; font-weight: 700 } 
>ound-color: #E0E0FF; background-image: -moz-radial-gradient(0px 0>.method > .params > .param > .default: before { content:
> 45deg, circle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-> "Default "; color: #888; font-weight: normal } /* version compat
>left: 5px solid #008 } .geckoVersionNote p { padding-left: 4px; b>ibility banners and notes */ .geckoVersionNote { background-color
>order: 0 } .geckoVersionHeading { background-color: #008; backgro>: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, ci
>und-image: -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); col>rcle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px 
>or: #fff; font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top:>solid #008 } .geckoVersionNote p { padding-left: 4px; border: 0 }
> 0; margin-left: 0; margin-bottom: 4px; height: 42px } .geckoVers> .geckoVersionHeading { background-color: #008; background-image:
>ionHeading a:link { color: #ddd } .geckoVersionHeading a:visited > -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff; 
>{ color: #eee } .geckoVersionHeading a:hover, .geckoVersionHeadin>font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margin
>g a:focus { color: #fdd } /* Used to to create icon-badged APIs i>-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHeading
>nline */ .badge { position: relative; top: -2px; display: inline-> a:link { color: #ddd } .geckoVersionHeading a:visited { color: #
>block; cursor: default; border: 1px solid #aaa; border-radius: 8p>eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:focus 
>x; padding: 0.3em 0.8em; font-size: 0.7em; font-weight: bold; } .>{ color: #fdd } /* Used to to create icon-badged APIs inline */ .
>icon { padding-left: 3.1em; } [dir=rtl] .icon { padding-left: 0.8>badge { position: relative; top: -2px; display: inline-block; cur
>em; padding-right: 3.1em; } .icon:before { content: ""; position:>sor: default; border: 1px solid #aaa; border-radius: 8px; padding
> absolute; left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em>: 0.3em 0.8em; font-size: 0.7em; font-weight: bold; } .icon { pad
>; height: 2.8em; background: white no-repeat center center; backg>ding-left: 3.1em; } [dir=rtl] .icon { padding-left: 0.8em; paddin
>round-size: 2.6em; border-radius: 100%; border: 1px solid #aaa; b>g-right: 3.1em; } .icon:before { content: ""; position: absolute;
>order-right: none; box-sizing: border-box; -moz-boxsizing: border> left: -2px; top: 50%; margin-top: -1.5em; width: 2.8em; height: 
>-box; } [dir=rtl] .icon:before { left: auto; right: -2px; border:>2.8em; background: white no-repeat center center; background-size
> 1px solid #aaa; border-left: none; } /* Used for badging non-sta>: 2.6em; border-radius: 100%; border: 1px solid #aaa; border-righ
>ndard APIs */ .nonstandardBadge { background: linear-gradient(to >t: none; box-sizing: border-box; -moz-boxsizing: border-box; } [d
>right, #f0DE00 30%,#f0ff19 100%); color: black; text-shadow: 1px >ir=rtl] .icon:before { left: auto; right: -2px; border: 1px solid
>1px 0 #ddd; } /* Used for badging privileged APIs */ .privilegedB> #aaa; border-left: none; } /* Used for badging non-standard APIs
>adge { background: linear-gradient(to right, #FFBD19 30%,#ffb200 > */ .nonstandardBadge { background: linear-gradient(to right, #f0
>100%); color: black; text-shadow: 1px 1px 0 #ddd; } [dir=rtl] .pr>DE00 30%,#f0ff19 100%); color: black; text-shadow: 1px 1px 0 #ddd
>ivilegedBadge { background: linear-gradient(to left, #FFBD19 30%,>; } /* Used for badging privileged APIs */ .privilegedBadge { bac
>#ffb200 100%); } .icon.privilegedBadge:before { background-color:>kground: linear-gradient(to right, #FFBD19 30%,#ffb200 100%); col
> orange; background-image: url(https://mdn.mozillademos.org/files>or: black; text-shadow: 1px 1px 0 #ddd; } [dir=rtl] .privilegedBa
>/5061/firefoxos-logo-sm.png); } .sidebar-box { margin-left: 16px;>dge { background: linear-gradient(to left, #FFBD19 30%,#ffb200 10
> margin-bottom: 2.5em; border-right: 1px solid #ecf1f3; padding: >0%); } .icon.privilegedBadge:before { background-color: orange; b
>12px; background: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; fo>ackground-image: url(https://mdn.mozillademos.org/files/5061/fire
>nt: 12px Verdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar->foxos-logo-sm.png); } .sidebar-box { margin-left: 16px; margin-bo
>box h3, .sidebar-box h5 { margin-bottom: .5em; font-family: inher>ttom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; back
>it; font-weight: 700 } .sidebar-box h2 { font-size: 1.5em } .side>ground: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px V
>bar-box h3 { font-size: 1.1em } .sidebar-box h5 { font-size: .9em>erdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar-box h3, .s
> } .sidebar-box > ul { float: left; text-align: left; display:>idebar-box h5 { margin-bottom: .5em; font-family: inherit; font-w
> block; padding: 0; margin: auto 0; position: relative } .sidebar>eight: 700 } .sidebar-box h2 { font-size: 1.5em } .sidebar-box h3
>-box ul > li { list-style-type: none } .tab-content-box { bord> { font-size: 1.1em } .sidebar-box h5 { font-size: .9em } .sideba
>er-right: 1px solid #ecf1f3; margin-left: 16px; padding: 12px; ba>r-box > ul { float: left; text-align: left; display: block; pa
>ckground: #fff; font: 12px Verdana, Tahoma, sans-serif } .tab-con>dding: 0; margin: auto 0; position: relative } .sidebar-box ul &g
>tent-box h2, .tab-content-box h3, .tab-content-box h5 { margin-bo>t; li { list-style-type: none } .tab-content-box { border-right: 
>ttom: .5em; font-family: inherit; font-weight: 700 } .tab-content>1px solid #ecf1f3; margin-left: 16px; padding: 12px; background: 
>-box h2 { font-size: 1.5em } .tab-content-box h3 { font-size: 1.1>#fff; font: 12px Verdana, Tahoma, sans-serif } .tab-content-box h
>em } .tab-content-box h5 { font-size: .9em } #menuFiller { displa>2, .tab-content-box h3, .tab-content-box h5 { margin-bottom: .5em
>y: block } table.compat-table { border-color: #bbb; margin: 0 } t>; font-family: inherit; font-weight: 700 } .tab-content-box h2 { 
>able.compat-table td { padding: 5px; border: 1px solid #ccc; back>font-size: 1.5em } .tab-content-box h3 { font-size: 1.1em } .tab-
>ground: #fff; vertical-align: top; word-wrap: break-word } table.>content-box h5 { font-size: .9em } #menuFiller { display: block }
>compat-table th, table.compat-table td.header { border: 1px solid> table.compat-table { border-color: #bbb; margin: 0 } table.compa
> #bbb; padding: 0 5px; background: #eee; font-weight: 700 } .arch>t-table td { padding: 5px; border: 1px solid #ccc; background: #f
>ivedContentBlock { margin: 0; background-color: #fdd } div.action>ff; vertical-align: top; word-wrap: break-word } table.compat-tab
>-driven { display: inline-block; float: none; min-height: 8.5em; >le th, table.compat-table td.header { border: 1px solid #bbb; pad
>margin: .8em; box-shadow: .2em .1em .1em #808080; vertical-align:>ding: 0 5px; background: #eee; font-weight: 700 } .archivedConten
> top; } div.action-driven > div { font: 400 20px 'Bebas Neue',>tBlock { margin: 0; background-color: #fdd } div.action-driven { 
> 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiry>display: inline-block; float: none; min-height: 8.5em; margin: .8
>o, sans-serif; text-transform: uppercase } /*----------------- fo>em; box-shadow: .2em .1em .1em #808080; vertical-align: top; } di
>r Topic page */ table.topicpage-table, table.topicpage-table td, >v.action-driven > div { font: 400 20px 'Bebas Neue', 'League G
>table.topicpage-table tr, table.topicpage-table th { border: none>othic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-se
> } .topicpage-table .section { padding-right:1em} /* "table.topic>rif; text-transform: uppercase } /*----------------- for Topic pa
>page-table h2 { --font-setting-- }" is better than this. */ .topi>ge */ table.topicpage-table, table.topicpage-table td, table.topi
>cpage-table .Documentation, .topicpage-table .Community, .topicpa>cpage-table tr, table.topicpage-table th { border: none } .topicp
>ge-table .Tools, .topicpage-table .Related_Topics { background-im>age-table .section { padding-right:1em} /* "table.topicpage-table
>age: url('/media/img/icons-sections.png'); background-repeat: no-> h2 { --font-setting-- }" is better than this. */ .topicpage-tabl
>repeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height:>e .Documentation, .topicpage-table .Community, .topicpage-table .
> 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettensch>Tools, .topicpage-table .Related_Topics { background-image: url('
>weiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transfor>/media/img/icons-sections.png'); background-repeat: no-repeat; ma
>m: uppercase; border: none } [dir="rtl"] .topicpage-table .Docume>rgin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; fon
>ntation, [dir="rtl"] .topicpage-table .Community, [dir="rtl"] .to>t: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Im
>picpage-table .Tools, [dir="rtl"] .topicpage-table .Related_Topic>pact, 'Arial Narrow', Meiryo, sans-serif; text-transform: upperca
>s { padding: 18px 65px 0 18px; } .topicpage-table .Documentation >se; border: none } [dir="rtl"] .topicpage-table .Documentation, [
>{ background-position: 0 0 } .topicpage-table .Community { backgr>dir="rtl"] .topicpage-table .Community, [dir="rtl"] .topicpage-ta
>ound-position: 0 -200px } .topicpage-table .Tools { background-po>ble .Tools, [dir="rtl"] .topicpage-table .Related_Topics { paddin
>sition: 0 -400px } .topicpage-table .Related_Topics { background->g: 18px 65px 0 18px; } .topicpage-table .Documentation { backgrou
>position: 0 -600px } [dir="rtl"] .topicpage-table .Documentation >nd-position: 0 0 } .topicpage-table .Community { background-posit
>{ background-position: right 0 } [dir="rtl"] .topicpage-table .Co>ion: 0 -200px } .topicpage-table .Tools { background-position: 0 
>mmunity { background-position: right -200px } [dir="rtl"] .topicp>-400px } .topicpage-table .Related_Topics { background-position: 
>age-table .Tools { background-position: right -400px } [dir="rtl">0 -600px } [dir="rtl"] .topicpage-table .Documentation { backgrou
>] .topicpage-table .Related_Topics { background-position: right ->nd-position: right 0 } [dir="rtl"] .topicpage-table .Community { 
>600px } /* for Topic Page 2 (This is Test )*/ /* USAGE:>background-position: right -200px } [dir="rtl"] .topicpage-table 
 >.Tools { background-position: right -400px } [dir="rtl"] .topicpa
 >ge-table .Related_Topics { background-position: right -600px } /*
 > for Topic Page 2 (This is Test )*/ /* USAGE:

Back to History