Template:CustomCSS

  • Revision slug: Template:CustomCSS
  • Revision title: Template:CustomCSS
  • Revision id: 347505
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

@charset "utf-8"; /* This is a special template used as a custom CSS for MDN. *//* When editing this stylesheet, please be careful of different writing direction pages like: https://developer.mozilla.org/he/docs/HTML If you add a custom CSS class, please try one of the following. 1, Report to the (evil) leader. 2, Write a description about the class that you have added to -- https://developer.mozilla.org/en-US/docs/Project:Custom_CSS_Classes -- */ /* Iframe for live sample centered (Test) */ .centered iframe { display:block;margin:0px auto;border:none; } /* Test for landing page */ .landing { display: table-row } .section { display: table-cell; width:50% } /* For ending "text alongside images" blocks; add this class to the first block that shouldn't be next to the image */ .endImageWrapping { clear: both; } /* Fancy Table of content for main pages of tutorial*/ .fancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; columns: 18em; margin-bottom: 1em } .fancyTOC .button { display: block; margin-right: 0; margin-bottom: .25em; background-color: #A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5 } .fancyTOC a::before { counter-increment: fancyTOC; content: counter(fancyTOC) ". " } .fancyTOC a::after { content: ' »' } .fancyTOC .button:hover, .fancyTOC .button:focus, .fancyTOC .button:active { background-color: #C26C6C } /* In index, dim obsolete, deprecated or non-standard element instead of striking through them */ s.deprecatedElement, s.obsoleteElement, s.nonStdElement { text-decoration: none; opacity: .3 } /* Add widgeted index, here adding an HTML5 badge as the bullet of the li element if class="html5" */ div.index.widgeted { -webkit-column-width: 10em; -moz-column-width: 10em; columns: 10em } div.index.widgeted li { padding-left: 18px } div.index.widgeted li.html5 { background-image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; background-position: left 4px } [dir="rtl"] div.index.widgeted li { padding-right: 18px } [dir="rtl"] div.index.widgeted li.html5 { background-image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; background-position: right 4px } [dir="rtl"] div.index.widgeted span { padding-right:24px } /* Quicknav template styles : https://developer.mozilla.org/en-US/docs/Template:quicknav -------- */ #wikiArticle { position: relative; } .quicknav { position: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 } .quicknav dl { max-width: 0; max-height: 300px; overflow: auto; margin: 0; padding: 10px 0; border: 1px solid transparent; border-left: none -webkit-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; -moz-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; -ms-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; -o-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s; transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s } .quicknav dt, .quicknav dd { margin: 0; padding: 0; white-space: nowrap } .quicknav dt { font-weight: 700 } .quicknav dd + dt { margin-top: .5em } .quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10px; border-color: #ECECE7 } .quicknav .showme { display: block; position: absolute; top: 10px; left: -31px; width: 30px; font: 2em sans-serif; color: #CCC; text-align: center; background: #FFF; border-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-right: none } .quicknav:hover .showme { color: #333; } .cleared { clear: both } /* This style has problem ! Style attribute of BR element is not work in Kuma */ .clearLeft { clear: left } /* ltr page only ? */ span.comment { display:none; } #wikiArticle .breadcrumbs { display: block; margin-bottom: 1em } table.html5ArticleToc { border-width: 5px } .html5ArticleToc thead th { padding: .5em 1em } .html5ArticleToc tbody td { vertical-align: middle } .html5ArticleToc ul { margin: 0; padding: 0 } .html5ArticleToc ul li { display: inline; margin: 0 .25em } pre.syntaxbox { border: 2px solid #ccc; margin-bottom: 1em; background-color: #ffe; border-radius: 10px } pre.twopartsyntaxbox { border: 2px solid #bbb; margin-bottom: 0; background-color: #ffe; border-radius: 10px 10px 0 0 } pre.twopartsyntaxbox + pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; border-top: none; margin-top: 0 } table.withoutBorder, table.withoutBorder td, table.withoutBorder tr, table.withoutBorder th { border: none } td.horizontalLine { border-left: none } td.column { border-bottom: none } td.bottomPart { border-top: none } td.verticalText { width: 3em; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) } table.blockTable { border-collapse: collapse } table.blockTable, table.blockTable td { margin: 1px; padding: 1px } table.blockTable .verticalColumn { border-left: none; border-right: none } div.index { -webkit-columns: 14em; -moz-column-width: 14em; columns: 14em } div.index > span { font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em } div.index ul { margin-left: 0; padding-left: 0; list-style-type: none } /* ul.cssprop */ .cssprop { display: table; padding: 11px 22px; background-color: #eef } [dir="ltr"] .cssprop { clear: left; border-left: .15em solid } [dir="rtl"] .cssprop { clear: right; border-right: .15em solid } .cssprop li { display: table-row; padding: 3px; margin: 0; text-align: left } .cssprop li dfn { display: table-cell; padding: 0 5px; border-bottom: none; white-space: pre; cursor: inherit } .cssprop li dfn:after { content: ":" } .cssprop li li { display: list-item; list-style-type: disc; line-height: 1 } /* ul.htmlelt */ .htmlelt { display: table; padding: 11px 22px; background-color: #fe9 } [dir="ltr"] .htmlelt { clear: left; border-left: .15em solid } [dir="rtl"] .htmlelt { clear: right; border-right: .15em solid } .htmlelt li { display: table-row; padding: 3px; margin: 0; text-align: left } .htmlelt li dfn { display: table-cell; padding: 0 5px; border-bottom: none; white-space: pre; cursor: inherit } .htmlelt li dfn:after { content: ":" } .htmlelt li li { display: list-item; list-style-type: disc; line-height: 1 } /* https://developer.mozilla.org/en-US/docs/Template:HTML:Element_Navigation */ table.HTMLElmNav { margin: 1em auto; border-width: 5px } table.HTMLElmNav th, table.HTMLElmNav td { text-align: center } .method { margin-left: 10px; margin-bottom: 2em; margin-top: 1em } .method > .name { display: block; font-size: 13pt; margin-bottom: .2em } .method > .name > .param: after { content: ","; padding-right: .5em } .method > .name > .param: last-of-type: after { content: "" } .method > .name > .param > .name: after { content: " as "; font-weight: normal } .method > .name > .param: not(.required) { font-style: italic } .method > .name > .param: not(.required): before { content: "[" } .method > .name > .param: not(.required): after { content: "]" } .method > .description { display: block; font-size: 10pt; color: #444; font-style: italic; margin-bottom: 7px } .method > .name > .returns: before { content: " returns "; font-weight: normal; font-style: italic } .method > .name > .returns { font-weight: 700 } .method > .params { display: block; color: #555 } .method > .params > .param { display: block; margin-bottom: 5px } .method > .params > .param > .name { font-weight: 700; margin-right: .5em; min-width: 80px; display: inline-block } .method > .params > .param > .description { display: inline-block; width: 300px; vertical-align: top; margin-right: 30px } .method > .params > .param > .type { display: inline-block; width: 150px; vertical-align: top; font-weight: 700 } .method > .params > .param > .type: before { content: "Type "; color: #888; font-weight: normal } .method > .params > .param > .default { display: inline-block; width: 150px; vertical-align: top; font-weight: 700 } .method > .params > .param > .default: before { content: "Default "; color: #888; font-weight: normal } .geckoVersionNote { background-color: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, circle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px solid #008 } .geckoVersionNote p { padding-left: 4px; border: 0 } .geckoVersionHeading { background-color: #008; background-image: -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff; font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margin-left: 0; margin-bottom: 4px; height: 42px } .geckoVersionHeading a:link { color: #ddd } .geckoVersionHeading a:visited { color: #eee } .geckoVersionHeading a:hover, .geckoVersionHeading a:focus { color: #fdd } .sidebar-box { margin-left: 16px; margin-bottom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; background: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, sans-serif } .sidebar-box h2, .sidebar-box h3, .sidebar-box h5 { margin-bottom: .5em; font-family: inherit; font-weight: 700 } .sidebar-box h2 { font-size: 1.5em } .sidebar-box h3 { font-size: 1.1em } .sidebar-box h5 { font-size: .9em } .sidebar-box > ul { float: left; text-align: left; display: block; padding: 0; margin: auto 0; position: relative } .sidebar-box ul > li { list-style-type: none } .tab-content-box { border-right: 1px solid #ecf1f3; margin-left: 16px; padding: 12px; background: #fff; font: 12px Verdana, Tahoma, sans-serif } .tab-content-box h2, .tab-content-box h3, .tab-content-box h5 { margin-bottom: .5em; font-family: inherit; font-weight: 700 } .tab-content-box h2 { font-size: 1.5em } .tab-content-box h3 { font-size: 1.1em } .tab-content-box h5 { font-size: .9em } #menuFiller { display: block } table.compat-table { border-color: #bbb; margin: 0 } table.compat-table td { padding: 5px; border: 1px solid #ccc; background: #fff; vertical-align: top; word-wrap: break-word } table.compat-table th, table.compat-table td.header { border: 1px solid #bbb; padding: 0 5px; background: #eee; font-weight: 700 } .archivedContentBlock { margin: 0; background-color: #fdd } div.action-driven { display: inline-block; float: none; min-height: 8.5em; margin: .8em } div.action-driven > div { font: 400 20px 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase } /*----------------- for Topic page */ table.topicpage-table, table.topicpage-table td, table.topicpage-table tr, table.topicpage-table th { border: none } .topicpage-table .section { padding-right:1em} /* "table.topicpage-table h2 { --font-setting-- }" is better than this. */ .topicpage-table .Documentation, .topicpage-table .Community, .topicpage-table .Tools, .topicpage-table .Related_Topics { background-image: url('/media/img/icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase; border: none } [dir="rtl"] .topicpage-table .Documentation, [dir="rtl"] .topicpage-table .Community, [dir="rtl"] .topicpage-table .Tools, [dir="rtl"] .topicpage-table .Related_Topics { padding: 18px 65px 0 18px; } .topicpage-table .Documentation { background-position: 0 0 } .topicpage-table .Community { background-position: 0 -200px } .topicpage-table .Tools { background-position: 0 -400px } .topicpage-table .Related_Topics { background-position: 0 -600px } [dir="rtl"] .topicpage-table .Documentation { background-position: right 0 } [dir="rtl"] .topicpage-table .Community { background-position: right -200px } [dir="rtl"] .topicpage-table .Tools { background-position: right -400px } [dir="rtl"] .topicpage-table .Related_Topics { background-position: right -600px } /* for Topic Page 2 (This is Test )*/ /* USAGE:

A

B

*/ .topicpage2col { margin: 1em 0; padding: 0 10px; zoom: 1; } .topicpage2col::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .topicpage2col .A, .topicpage2col .B { width: 50%; position: relative } .html-ltr .topicpage2col .A, .html-rtl .topicpage2col .B { float: left; left: -10px } .html-ltr .topicpage2col .B, .html-rtl .topicpage2col .A { float: right; right: -10px } .topicpage2col h2 { background-image: url('/media/img/icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase; border: none } .html-rtl .topicpage2col h2 { padding: 18px 65px 0 18px; } .html-ltr .topicpage2col .Documentation { background-position: 0 0 } .html-ltr .topicpage2col .Community { background-position: 0 -200px } .html-ltr .topicpage2col .Tools { background-position: 0 -400px } .html-ltr .topicpage2col .Related_Topics { background-position: 0 -600px } .html-rtl .topicpage2col .Documentation { background-position: right 0 } .html-rtl .topicpage2col .Community { background-position: right -200px } .html-rtl .topicpage2col .Tools { background-position: right -400px } .html-rtl .topicpage2col .Related_Topics { background-position: right -600px } /* ---------------------------- Styles for Indicator */ .inlineIndicator, .indicatorInHeadline, .blockIndicator, .overheadIndicator { box-shadow: 1px 1px 1px #CCC } /* styles for inline indicator */ .inlineIndicator /* This class is base of inlineIndicator */ , .megaWarningInline { border-width: 1px; border-style: solid; font-size: smaller; white-space: nowrap; padding: 0 2px; margin: 0 2px } .todoInline { border-left-width: 8px; white-space: normal } .megaWarningInline { background: red; border-color: #818151; color: #fff; font-size: small; font-weight: 700; float: right; vertical-align: middle; /* Mega warnings: deep red backgrounds etc */ } .notXPCOMInline, .noscriptInline { font-weight: 700 } /* styles for overhead indicator */ .overheadIndicator /* This class is base of overheadIndicator */ , .standardNoteHeader, .standardNoteBlock { border: 1px solid #000; overflow: hidden; margin: 10px 0; padding: 0 10px; text-align: center } .overheadIndicator p, .blockIndicator p { margin: 4px 0 } .draftHeader strong { display: block; padding-top: 10px } .draftHeader div { font-size: x-small; padding-bottom: 10px } .warningHeader { background: #FBEDEC url(/files/578/Nuvola_apps_important.png) no-repeat 9px 10px !important; min-height: 103px; padding: 1em 1em 1em 130px !important; overflow: hidden; } html[dir="rtl"] .warningHeader { padding: 1em 130px 1em 1em !important; background-position: 99% 10px !important; } /* styles for Method indicator */ .indicatorInHeadline, .standardNoteMethod { border: 1px solid #000; padding: 1px 2px; white-space: nowrap; vertical-align: middle; font-size: smaller; float: right; } [dir="rtl"] .indicatorInHeadline, [dir="rtl"] .standardNoteMethod { float: left; } .renamedMethod, .noscriptMethod, .deprecatedMethod, .unimplementedMethod { font-weight: 700 } /* color setting */ .draft { background: #FFC; border-color: #990 } .htmlVer { background: #CEE; border-color: #267373 } .standardNote { background: #fef49c; border-color: maroon } .optional { background: #C0FFC7; border-color: #50AF5B } .nonStandard { background: #FC6; border-color: #960 } .unimplemented { background: #f9c; border-color: #f66f6f } .deprecated { background: #CCF; border-color: blue } .renamed { background: #d4f3ff; border-color: #818151 } .obsolete { background: #FEBCBC; border-color: #f00 } .domLevel { background: #e1e1ff; border-color: #818151 } .todo { background: #ff9; border-color: #c1272d } .minVer { background: #ffffe1; border-color: #818151 } .jsMinVer { background: #ffffe1; border-color: #818151 } .mbMinVer { background: #ffffe1; border-color: #818151 } .mobileOnly { background: #FFE1BE; border-color: maroon } .renamed { background: #d4f3ff; border-color: #818151 } .notXPCOM { background: orange; border-color: #818151 } .renamed { background: #d4f3ff; border-color: #818151 } .projectSpecific{ background: #ffe1be; border-color: #818151 } .prefixBox { background: #e4edf7; border-color: #818151 } .experimental { background: #ffefd9; border-color: #ff9500 } .readOnly { background: #000; border-color: #000; color: #FFF } .noscript { background: red; border-color: #818151; color: #FFF } .projectSpecific{ background: #ffe1be; border-color: #818151; } /* Banner used to indicate support only in specific Gecko projects */ .translationInProgress { background: #A3F5A3; border-color: #14B814 } /* style for next and previous pages in tutorial */ a.nextPage { display: inline-block; margin: 0 3px 1em; font-size: 1.25em } a.nextPage:link, a.nextPage:visited { background-color: #069 } a.nextPage:hover, a.nextPage:focus { background-color: #0099E6 } a.nextPage { float:right } [dir="rtl"] a.nextPage { background-position: left 40% !important; padding: .35em .75em .2em !important; position: left;} a.previousPage { display: block; margin: 0 1em 2em 0; font-size: 1.25em } a.previousPage:link, a.previousPage:visited { background-color: #069 } a.previousPage:hover, a.previousPage:focus { background-color: #0099E6 } a.previousPage { float:left } [dir="rtl"] a.previousPage { background-position: left 40% !important; padding: .35em .75em .2em !important; position: right;} /* styles for liveSample link : https://developer.mozilla.org/en-US/docs/Template:LiveSample */ a.liveSample { display: inline-block; margin: 0 3px 1em; font-size: 1.25em } a.liveSample:link, a.liveSample:visited { background-color: #069 } a.liveSample:hover, a.liveSample:focus { background-color: #0099E6 } [dir="rtl"] a.liveSample { background-position: left 40% !important; padding: .35em .75em .2em !important; } /* callout boxes etc */ .standardSidebar { border: 1px solid #777; margin: 0 0 15px 15px; padding: 0 15px 5px; float: right; background: #eee; font-size: .85em; position: relative; z-index: 2; } [dir="rtl"] .standardSidebar { margin: 0 15px 15px 0; float: left } /* Colored text for INCORRECT/BAD and CORRECT/GOOD values (and BEST)*/ .correct { color: green } .incorrect { color: red } .best { color: #396 } /* Item in a list of item that has been done */ .done { text-decoration: line-through } /* Specific items for tutorials */ .tuto_details, .tuto_example { border: 1px solid #36b; padding: .5em; margin-bottom: 1em } .tuto_details { background: #f4f4f4 } .tuto_example { background: #fffff4 } .tuto_type { font-weight: 700; text-align: left } /* This is a specific item for the CSS tutorial: https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors */ /* To be removed once we have Live Examples */ a.tutospecial:link, a.tutospecial:visited { padding: 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset #333 /* fallback for next line */ ; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; } a.tutospecial:hover, a.tutospecial:focus, a.tutospecial:active {background-color: #666;} #tutochallenge { display:none } #tutochallenge a.hideAnswer { font-size:smaller; text-align:right ; display:block} #tutochallenge:target { display:block;} #tutochallenge + a { font-size:smaller; text-align:right; display:block} #tutochallenge:target + a { display:none; } /* Fix for mdn-min.css : https://developer.mozilla.org/media/css/mdn-min.css */ [dir="rtl"] dd { margin: 0 22px .5em 0 } [dir="rtl"] th, [dir="rtl"] caption { text-align: right } [dir="rtl"] .title h1 { padding: 0 18px 0 0 !important } [lang="he"] #site-search { float: left; text-align: right; margin: -8px 0 0 100px; width: 295px } [lang="de"] #site-search { margin-right: 179px } /* Fix for wiki-min.css : https://developer.mozilla.org/media/css/wiki-min.css */ div.bug, div.warning { overflow: hidden } .page-content dd { margin: 0.5em } /* [dir="rtl"] .translate #page-buttons { } */ [dir="rtl"] .hasJS #nav-main #nav-sub-docs, [dir="rtl"] #nav-main .menu:hover #nav-sub-docs { margin-left: -300px } [dir="rtl"] #nav-main #nav-sub-docs li { float: right } [dir="rtl"] #nav-main #nav-sub-docs p { text-align: left } [dir="rtl"] .page-content ul { padding-left: 0; padding-right: 22px } [dir="rtl"] .page-content dd { padding-left: 0; padding-right: 15px } [dir="rtl"] .article a.external, [dir="rtl"] .article a[rel~="external"], [dir="rtl"] .article a[href^="news://"] { padding-right: 0; background-position: 1% 40% } [dir="rtl"] .article a.external, [dir="rtl"] .article a[rel~="external"] { padding-left: 16px } [dir="rtl"] .article a[href^="news://"] { padding-left: 18px } /* 一時的なスタイル */ [lang="ja"] #doc-contributors time[datetime*="200"]::after { content: " (※最終更新日から 2 年以上経過しています)"; color: red }

Revision Source

@charset "utf-8";

/* This is a special template used as a custom CSS for MDN. *//*

    When editing this stylesheet, please be careful of different writing direction pages like: https://developer.mozilla.org/he/docs/HTML

    If you add a custom CSS class, please try one of the following.
        1, Report to the (evil) leader.
        2, Write a description about the class that you have added to -- https://developer.mozilla.org/en-US/docs/Project:Custom_CSS_Classes --

*/

/* Iframe for live sample centered (Test) */
.centered iframe { display:block;margin:0px auto;border:none; }

/* Test for landing page  */
.landing { display: table-row }
.section { display: table-cell; width:50% }

/* For ending "text alongside images" blocks; add this class to the first block that shouldn't be next to the image */

.endImageWrapping { clear: both; }

/* Fancy Table of content for main pages of tutorial*/
.fancyTOC { counter-reset: fancyTOC; -moz-columns: 18em; columns: 18em; margin-bottom: 1em }
.fancyTOC .button { display: block; margin-right: 0; margin-bottom: .25em; background-color: #A24C4C; color: #fff; font-size: 1.5em; line-height: 1.5 }
.fancyTOC a::before { counter-increment: fancyTOC; content: counter(fancyTOC) ". " }
.fancyTOC a::after { content: ' »' }
.fancyTOC .button:hover,  .fancyTOC .button:focus,  .fancyTOC .button:active { background-color: #C26C6C }



/* In index, dim obsolete, deprecated or non-standard element instead of striking through them */
s.deprecatedElement, s.obsoleteElement, s.nonStdElement { text-decoration: none; opacity: .3 }



/* Add widgeted index, here adding an HTML5 badge as the bullet of the li element if class="html5" */
div.index.widgeted { -webkit-column-width: 10em; -moz-column-width: 10em; columns: 10em }
div.index.widgeted li { padding-left: 18px }
div.index.widgeted li.html5 { background-image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; background-position: left 4px }
[dir="rtl"] div.index.widgeted li { padding-right: 18px }
[dir="rtl"] div.index.widgeted li.html5 { background-image: url("/files/3855/HTML5_Badge_16.png"); background-repeat: no-repeat; background-position: right 4px }
[dir="rtl"] div.index.widgeted span { padding-right:24px }



/* Quicknav template styles : https://developer.mozilla.org/en-US/docs/Template:quicknav -------- */
#wikiArticle { position: relative; }
.quicknav { position: fixed; top: 237px; left: 33px; background: #FFF; z-index: 1 }
.quicknav dl { max-width: 0; max-height: 300px; overflow: auto; margin: 0; padding: 10px 0; border: 1px solid transparent; border-left: none
-webkit-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;
-moz-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;
-ms-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;
-o-transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s;
transition: border .5s ease .1s, max-width .5s ease .1s, padding .5s linear .1s }
.quicknav dt,  .quicknav dd { margin: 0; padding: 0; white-space: nowrap }
.quicknav dt { font-weight: 700 }
.quicknav dd + dt { margin-top: .5em }
.quicknav:hover dl { max-width: 300px; padding: 10px 20px 10px 10px; border-color: #ECECE7 }
.quicknav .showme { display: block; position: absolute; top: 10px; left: -31px; width: 30px; font: 2em sans-serif; color: #CCC; text-align: center; background: #FFF; border-radius: 5px 0 0 5px; border: 1px solid #ECECE7; border-right: none }
.quicknav:hover .showme { color: #333; }



.cleared { clear: both } /* This style has problem ! Style attribute of BR element is not work in Kuma */
.clearLeft { clear: left } /* ltr page only ? */



span.comment { display:none; }



#wikiArticle .breadcrumbs { display: block; margin-bottom: 1em }



table.html5ArticleToc { border-width: 5px }
.html5ArticleToc thead th { padding: .5em 1em }
.html5ArticleToc tbody td { vertical-align: middle }
.html5ArticleToc ul { margin: 0; padding: 0 }
.html5ArticleToc ul li { display: inline; margin: 0 .25em }


pre.syntaxbox  { border: 2px solid #ccc; margin-bottom: 1em; background-color: #ffe; border-radius: 10px }
pre.twopartsyntaxbox { border: 2px solid #bbb; margin-bottom: 0; background-color: #ffe; border-radius: 10px 10px 0 0 }
pre.twopartsyntaxbox + pre { border: 2px solid #bbb; border-radius: 0 0 10px 10px; border-top: none; margin-top: 0 }



table.withoutBorder,  table.withoutBorder td,  table.withoutBorder tr,  table.withoutBorder th { border: none }



td.horizontalLine { border-left: none }
td.column { border-bottom: none }
td.bottomPart { border-top: none }
td.verticalText { width: 3em; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) }



table.blockTable { border-collapse: collapse }
table.blockTable,  table.blockTable td { margin: 1px; padding: 1px }
table.blockTable .verticalColumn { border-left: none; border-right: none }



div.index { -webkit-columns: 14em; -moz-column-width: 14em; columns: 14em }
div.index > span { font-family: Georgia, Times, 'Times New Roman', serif; font-size: 1.6em }
div.index ul { margin-left: 0; padding-left: 0; list-style-type: none }



/* ul.cssprop */
.cssprop { display: table; padding: 11px 22px; background-color: #eef }
[dir="ltr"] .cssprop { clear: left;  border-left: .15em solid  }
[dir="rtl"] .cssprop { clear: right; border-right: .15em solid }
.cssprop li { display: table-row; padding: 3px; margin: 0; text-align: left }
.cssprop li dfn { display: table-cell; padding: 0 5px; border-bottom: none; white-space: pre; cursor: inherit }
.cssprop li dfn:after { content: ":" }
.cssprop li li { display: list-item; list-style-type: disc; line-height: 1 }

/* ul.htmlelt */
.htmlelt { display: table; padding: 11px 22px; background-color: #fe9 }
[dir="ltr"] .htmlelt { clear: left;  border-left: .15em solid  }
[dir="rtl"] .htmlelt { clear: right; border-right: .15em solid }
.htmlelt li { display: table-row; padding: 3px; margin: 0; text-align: left }
.htmlelt li dfn { display: table-cell; padding: 0 5px; border-bottom: none; white-space: pre; cursor: inherit }
.htmlelt li dfn:after { content: ":" }
.htmlelt li li { display: list-item; list-style-type: disc; line-height: 1 }

/* https://developer.mozilla.org/en-US/docs/Template:HTML:Element_Navigation */
table.HTMLElmNav { margin: 1em auto; border-width: 5px }
table.HTMLElmNav th,  table.HTMLElmNav td { text-align: center }



.method { margin-left: 10px; margin-bottom: 2em; margin-top: 1em }
.method > .name { display: block; font-size: 13pt; margin-bottom: .2em }
.method > .name > .param: after { content: ","; padding-right: .5em }
.method > .name > .param: last-of-type: after { content: "" }
.method > .name > .param > .name: after { content: " as "; font-weight: normal }
.method > .name > .param: not(.required) { font-style: italic }
.method > .name > .param: not(.required): before { content: "[" }
.method > .name > .param: not(.required): after { content: "]" }
.method > .description { display: block; font-size: 10pt; color: #444; font-style: italic; margin-bottom: 7px }
.method > .name > .returns: before { content: " returns "; font-weight: normal; font-style: italic }
.method > .name > .returns { font-weight: 700 }
.method > .params { display: block; color: #555 }
.method > .params > .param { display: block; margin-bottom: 5px }
.method > .params > .param > .name { font-weight: 700; margin-right: .5em; min-width: 80px; display: inline-block }
.method > .params > .param > .description {    display: inline-block; width: 300px; vertical-align: top; margin-right: 30px }
.method > .params > .param > .type { display: inline-block;    width: 150px; vertical-align: top; font-weight: 700 }
.method > .params > .param > .type: before { content: "Type "; color: #888; font-weight: normal }
.method > .params > .param > .default { display: inline-block; width: 150px; vertical-align: top; font-weight: 700 }
.method > .params > .param > .default: before { content: "Default "; color: #888; font-weight: normal }



.geckoVersionNote { background-color: #E0E0FF; background-image: -moz-radial-gradient(0px 0 45deg, circle farthest-corner, #E0E0FF 0%, #F8F8FF 80%); border-left: 5px solid #008 }
.geckoVersionNote p { padding-left: 4px; border: 0 }
.geckoVersionHeading { background-color: #008; background-image: -moz-linear-gradient(left, #008 50%, #e0e0ff 80%); color: #fff; font: 16px/1.7 Verdana, Tahoma, sans-serif; margin-top: 0; margin-left: 0; margin-bottom: 4px; height: 42px }
.geckoVersionHeading a:link		{ color: #ddd }
.geckoVersionHeading a:visited	{ color: #eee }
.geckoVersionHeading a:hover,
.geckoVersionHeading a:focus	{ color: #fdd }



.sidebar-box { margin-left: 16px; margin-bottom: 2.5em; border-right: 1px solid #ecf1f3; padding: 12px; background: #f1f6f8 url("img/toc-bg.png") 0 0 no-repeat; font: 12px Verdana, Tahoma, sans-serif }
.sidebar-box h2,
.sidebar-box h3,
.sidebar-box h5 { margin-bottom: .5em; font-family: inherit; font-weight: 700 }
.sidebar-box h2 { font-size: 1.5em }
.sidebar-box h3 { font-size: 1.1em }
.sidebar-box h5 { font-size:  .9em }
.sidebar-box > ul { float: left; text-align: left; display: block; padding: 0; margin: auto 0; position: relative }
.sidebar-box ul > li { list-style-type: none }



.tab-content-box { border-right: 1px solid #ecf1f3; margin-left: 16px; padding: 12px; background: #fff; font: 12px Verdana, Tahoma, sans-serif }
.tab-content-box h2,
.tab-content-box h3,
.tab-content-box h5 { margin-bottom: .5em; font-family: inherit; font-weight: 700 }
.tab-content-box h2 { font-size: 1.5em }
.tab-content-box h3 { font-size: 1.1em }
.tab-content-box h5 { font-size:  .9em }



#menuFiller { display: block }



table.compat-table { border-color: #bbb; margin: 0 }
table.compat-table td { padding: 5px; border: 1px solid #ccc; background: #fff; vertical-align: top; word-wrap: break-word }
table.compat-table th,
table.compat-table td.header { border: 1px solid #bbb; padding: 0 5px; background: #eee; font-weight: 700 }



.archivedContentBlock {	margin: 0; background-color: #fdd }



div.action-driven { display: inline-block; float: none; min-height: 8.5em; margin: .8em }
div.action-driven > div { font: 400 20px 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase }



/*-----------------
	for Topic page
*/
table.topicpage-table,  table.topicpage-table td,  table.topicpage-table tr,  table.topicpage-table th { border: none }

.topicpage-table .section { padding-right:1em}

/* "table.topicpage-table h2 { --font-setting-- }" is better than this. */
.topicpage-table .Documentation,
.topicpage-table .Community,
.topicpage-table .Tools,
.topicpage-table .Related_Topics { background-image: url('/media/img/icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase; border: none }

[dir="rtl"] .topicpage-table .Documentation,
[dir="rtl"] .topicpage-table .Community,
[dir="rtl"] .topicpage-table .Tools,
[dir="rtl"] .topicpage-table .Related_Topics { padding: 18px 65px 0 18px; }

.topicpage-table .Documentation { background-position: 0 0 }
.topicpage-table .Community { background-position: 0 -200px }
.topicpage-table .Tools { background-position: 0 -400px }
.topicpage-table .Related_Topics {	background-position: 0 -600px }

[dir="rtl"] .topicpage-table .Documentation { background-position: right 0 }
[dir="rtl"] .topicpage-table .Community { background-position: right -200px }
[dir="rtl"] .topicpage-table .Tools { background-position: right -400px }
[dir="rtl"] .topicpage-table .Related_Topics {	background-position: right -600px }



/* for Topic Page 2 (This is Test )*/
/* USAGE:
<div class="topicpage2col ui-helper-clearfix">
    <div class="A">
		<p>A</p>
	</div>
	<div class="B">
		<p>B</p>
	</div>
</div>
*/
.topicpage2col { margin: 1em 0; padding: 0 10px; zoom: 1; }
.topicpage2col::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.topicpage2col .A,
.topicpage2col .B { width: 50%; position: relative }

.html-ltr .topicpage2col .A,
.html-rtl .topicpage2col .B { float: left; left: -10px }

.html-ltr .topicpage2col .B,
.html-rtl .topicpage2col .A { float: right; right: -10px }

.topicpage2col h2 { background-image: url('/media/img/icons-sections.png'); background-repeat: no-repeat; margin: 0 0 .25em; padding: 18px 18px 0 65px; min-height: 48px; font: 400 28px/1 'Bebas Neue', 'League Gothic', Haettenschweiler, Impact, 'Arial Narrow', Meiryo, sans-serif; text-transform: uppercase; border: none }
.html-rtl .topicpage2col h2 { padding: 18px 65px 0 18px; }

.html-ltr .topicpage2col .Documentation { background-position: 0 0 }
.html-ltr .topicpage2col .Community { background-position: 0 -200px }
.html-ltr .topicpage2col .Tools { background-position: 0 -400px }
.html-ltr .topicpage2col .Related_Topics {    background-position: 0 -600px }

.html-rtl .topicpage2col .Documentation { background-position: right 0 }
.html-rtl .topicpage2col .Community { background-position: right -200px }
.html-rtl .topicpage2col .Tools { background-position: right -400px }
.html-rtl .topicpage2col .Related_Topics {	background-position: right -600px }




/* ----------------------------
	Styles for Indicator
*/
.inlineIndicator,
.indicatorInHeadline,
.blockIndicator,
.overheadIndicator { box-shadow: 1px 1px 1px #CCC }

/* styles for inline indicator */
.inlineIndicator /* This class is base of inlineIndicator */ ,
.megaWarningInline { border-width: 1px; border-style: solid; font-size: smaller; white-space: nowrap; padding: 0 2px; margin: 0 2px }

.todoInline { border-left-width: 8px; white-space: normal }

.megaWarningInline { background: red; border-color: #818151; color: #fff; font-size: small; font-weight: 700; float: right; vertical-align: middle; /* Mega warnings: deep red backgrounds etc */ }

.notXPCOMInline,
.noscriptInline { font-weight: 700 }

/* styles for overhead indicator */
.overheadIndicator /* This class is base of overheadIndicator */ ,
.standardNoteHeader,
.standardNoteBlock { border: 1px solid #000; overflow: hidden; margin: 10px 0; padding: 0 10px; text-align: center }

.overheadIndicator p,
.blockIndicator p { margin: 4px 0 }

.draftHeader strong { display: block; padding-top: 10px }
.draftHeader div { font-size: x-small; padding-bottom: 10px }

.warningHeader {
	background: #FBEDEC url(/files/578/Nuvola_apps_important.png) no-repeat 9px 10px !important;
	min-height: 103px; padding: 1em 1em 1em 130px !important; overflow: hidden;
}

html[dir="rtl"] .warningHeader { padding: 1em 130px 1em 1em !important; background-position: 99% 10px !important; }

/* styles for Method indicator */
.indicatorInHeadline,
.standardNoteMethod { border: 1px solid #000; padding: 1px 2px; white-space: nowrap; vertical-align: middle; font-size: smaller; float: right; }

[dir="rtl"] .indicatorInHeadline,
[dir="rtl"] .standardNoteMethod { float: left; }

.renamedMethod,
.noscriptMethod,
.deprecatedMethod,
.unimplementedMethod { font-weight: 700 }

/* color setting */
.draft          { background: #FFC;     border-color: #990    }
.htmlVer        { background: #CEE;     border-color: #267373 }
.standardNote   { background: #fef49c;  border-color: maroon  }
.optional       { background: #C0FFC7;  border-color: #50AF5B }
.nonStandard    { background: #FC6;     border-color: #960    }
.unimplemented  { background: #f9c;     border-color: #f66f6f }
.deprecated     { background: #CCF;     border-color: blue    }
.renamed        { background: #d4f3ff;  border-color: #818151 }
.obsolete       { background: #FEBCBC;  border-color: #f00    }
.domLevel       { background: #e1e1ff;  border-color: #818151 }
.todo           { background: #ff9;     border-color: #c1272d }
.minVer         { background: #ffffe1;  border-color: #818151 }
.jsMinVer       { background: #ffffe1;  border-color: #818151 }
.mbMinVer       { background: #ffffe1;  border-color: #818151 }
.mobileOnly     { background: #FFE1BE;  border-color: maroon  }
.renamed        { background: #d4f3ff;  border-color: #818151 }
.notXPCOM       { background: orange;   border-color: #818151 }
.renamed        { background: #d4f3ff;  border-color: #818151 }
.projectSpecific{ background: #ffe1be;  border-color: #818151 }
.prefixBox      { background: #e4edf7;  border-color: #818151 }
.experimental   { background: #ffefd9;  border-color: #ff9500 }
.readOnly       { background: #000;     border-color: #000;    color: #FFF }
.noscript       { background: red;      border-color: #818151; color: #FFF }
.projectSpecific{ background: #ffe1be;  border-color: #818151; } /* Banner used to indicate support only in specific Gecko projects */ 
.translationInProgress { background: #A3F5A3; border-color: #14B814 }



/* style for next and previous pages in tutorial */
a.nextPage { display: inline-block; margin: 0 3px 1em; font-size: 1.25em }
a.nextPage:link,
a.nextPage:visited { background-color: #069 }
a.nextPage:hover,
a.nextPage:focus { background-color: #0099E6 }
a.nextPage { float:right }
[dir="rtl"] a.nextPage { background-position: left 40% !important; padding: .35em .75em .2em !important; position: left;}
a.previousPage { display: block; margin: 0 1em 2em 0; font-size: 1.25em }
a.previousPage:link,
a.previousPage:visited { background-color: #069 }
a.previousPage:hover,
a.previousPage:focus { background-color: #0099E6 }
a.previousPage { float:left }
[dir="rtl"] a.previousPage { background-position: left 40% !important; padding: .35em .75em .2em !important; position: right;}



/* styles for liveSample link : https://developer.mozilla.org/en-US/docs/Template:LiveSample */
a.liveSample { display: inline-block; margin: 0 3px 1em; font-size: 1.25em }
a.liveSample:link,
a.liveSample:visited { background-color: #069 }
a.liveSample:hover,
a.liveSample:focus { background-color: #0099E6 }
[dir="rtl"] a.liveSample { background-position: left 40% !important; padding: .35em .75em .2em !important; }



/* callout boxes etc */
.standardSidebar { border: 1px solid #777; margin: 0 0 15px 15px; padding: 0 15px 5px; float: right; background: #eee; font-size: .85em; position: relative; z-index: 2; }
[dir="rtl"] .standardSidebar { margin: 0 15px 15px 0; float: left }



/* Colored text for INCORRECT/BAD and CORRECT/GOOD values (and BEST)*/
.correct   { color: green }
.incorrect { color: red  }
.best      { color: #396 }



/* Item in a list of item that has been done */
.done { text-decoration: line-through }



/* Specific items for tutorials */
.tuto_details,
.tuto_example { border: 1px solid #36b; padding: .5em; margin-bottom: 1em }
.tuto_details { background: #f4f4f4 }
.tuto_example { background: #fffff4 }
.tuto_type { font-weight: 700; text-align: left }

/* This is a specific item for the CSS tutorial: https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selectors */
/* To be removed once we have Live Examples */
a.tutospecial:link, a.tutospecial:visited {
  padding: 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset #333 /* fallback for next line */ ;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}
a.tutospecial:hover, a.tutospecial:focus, a.tutospecial:active {background-color: #666;}

#tutochallenge { display:none }
#tutochallenge a.hideAnswer { font-size:smaller; text-align:right ; display:block}
#tutochallenge:target { display:block;}
#tutochallenge + a { font-size:smaller; text-align:right; display:block}
#tutochallenge:target + a { display:none; }



/* Fix for mdn-min.css : https://developer.mozilla.org/media/css/mdn-min.css */
[dir="rtl"] dd { margin: 0 22px .5em 0 }
[dir="rtl"] th,  [dir="rtl"] caption { text-align: right }
[dir="rtl"] .title h1 { padding: 0 18px 0 0 !important }

[lang="he"] #site-search { float: left; text-align: right; margin: -8px 0 0 100px; width: 295px }
[lang="de"] #site-search { margin-right: 179px }



/* Fix for wiki-min.css : https://developer.mozilla.org/media/css/wiki-min.css */
div.bug, div.warning { overflow: hidden }
.page-content dd { margin: 0.5em }



/* [dir="rtl"] .translate #page-buttons { } */
[dir="rtl"] .hasJS #nav-main #nav-sub-docs,
[dir="rtl"] #nav-main .menu:hover #nav-sub-docs { margin-left: -300px }
[dir="rtl"] #nav-main #nav-sub-docs li { float: right }
[dir="rtl"] #nav-main #nav-sub-docs p { text-align: left }

[dir="rtl"] .page-content ul { padding-left: 0; padding-right: 22px }
[dir="rtl"] .page-content dd { padding-left: 0; padding-right: 15px }

[dir="rtl"] .article a.external,
[dir="rtl"] .article a[rel~="external"],
[dir="rtl"] .article a[href^="news://"] { padding-right: 0; background-position: 1% 40% }
[dir="rtl"] .article a.external,
[dir="rtl"] .article a[rel~="external"] { padding-left: 16px }
[dir="rtl"] .article a[href^="news://"] { padding-left: 18px }



/* 一時的なスタイル */
[lang="ja"] #doc-contributors time[datetime*="200"]::after { content: " (※最終更新日から 2 年以上経過しています)"; color: red }
Revert to this revision