/* -- Colors -- Greys: white #FCFCFC #F5F5F5 #E6E6E6 #CCC #ADADAD #999 #555 #333 - main text Reds: #B03931 - our main red #742620 - focus/hover #D8645E - on dark background #F47069 - focus/hover on dark background #98312A #943029 -- Font Sizes -- Keep the number of different font sizes low. The different heading levels (h1, ... h6) get specific sizes. Other than that, try to use 'small' and 'large'. -- Misc -- border-radius: always 4px */ @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700); body, .d_decl .quickindex { font-family: "Roboto Slab", sans-serif; } pre, code, .tt, .d_inlinecode, .bnf_inline, td.param_id, .CodeMirror pre, .d_decl { font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace; } pre, .CodeMirror pre { font-size: small; } pre div.blankline { display: none; } ol div.blankline { display: none; } ul div.blankline { display: none; } body { background: white; color: #333; font-size: 93.75%; line-height: 1.4; margin: 0; padding: 0; } #top > .helper, body > .container, body#Home #content #tools > div, body#Home #content > .intro > div, body#Home #content > .more { margin: auto; max-width: 76em; padding: 0 1em; } body > .container { position: relative; } body.doc input, body.doc textarea, body.std input, body.std textarea { background: white; color: #333; } /* top nav bar */ #top { background: #B03931; border-bottom: 1px #98312A solid; position: relative; } #top > .helper > .helper { display: table; width: 100%; } #top #cssmenu, #top .search-container { display: table-cell; vertical-align: middle; } #top .search-container { width: 0; /* shrink to content size */ } #top .logo { display: block; float: left; margin-left: -5.4em; margin-right: -4em; padding-top: 1px; } #top img#logo { height: 2.533em; vertical-align: middle; width: 13.69em; } #top #d-language { display: none; } #top a.hamburger { display: none; } #top a { color: white; text-decoration: none; } #top a:hover, #top #cssmenu li.open > a, #top #cssmenu li.active > a { background: #98312A; } #top .expand-container { position: relative; } /* main menu */ #top #cssmenu { width: 100%; /* take all available space */ } /* Hide expandable sections by default in #cssmenu. They have fallback URLs. */ #top #cssmenu .expand-container > * { display: none; } #top #cssmenu .expand-container.open > *, #top #cssmenu .expand-container > .expand-toggle { display: block; } #top #cssmenu ul { list-style: none; margin: 0; padding: 0; } #top #cssmenu a, #top .search-container a { display: block; height: 1.4em; /* Not sure why, but without this the expandable items would get half a pixel taller than the others. */ padding: 0.6em 1em; position: relative; white-space: nowrap; } #top #cssmenu > ul > li { float: left; } #top #cssmenu > ul > li > ul { background: #B03931; border: 1px solid #98312A; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176); -webkit-box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176); box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176); position: absolute; z-index: 5; } #top #cssmenu > ul > li > ul > li > a { font-size: small; padding-top: 0.3em; padding-bottom: 0.3em; padding-right: 2em; } #top #cssmenu > ul > li > ul > li:first-child > a { padding-top: 0.6em; } #top #cssmenu > ul > li > ul > li:last-child > a { padding-bottom: 0.6em; } #top #cssmenu > ul > li .menu-divider { border-top: 1px solid #943029; } #top #cssmenu > ul > li .menu-divider:before { border-top: 1px solid rgba(255, 255, 255, 0.1); display: block; height: 1px; content: ''; } /* search box */ #top .search-container.expand-container .expand-toggle { display: none; } #top .search-container.expand-container .expand-toggle::after { content: "\f002 \f0d7"; /* f002 = search; f0d7 = caret down */ font-family: FontAwesome; } #top .search-container.expand-container .expand-toggle span { display: none; } #top #search-box { display: block; /* Don't hide even though it's in a .expand-container. */ padding-left: 1em; } div#search-box form, span#search-query, span#search-dropdown, span#search-submit { border: 1px none #CCC; } div#search-box form { background: white; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-style: solid; display: inline-block; font-size: small; margin: 0; vertical-align: middle; white-space: nowrap; } span#search-query, span#search-dropdown, span#search-dropdown > .helper, span#search-submit { display: inline-block; height: 2em; line-height: 1.3; vertical-align: top; } span#search-query { width: 8em; } span#search-query input, span#search-dropdown select, span#search-submit button { background: transparent; color: #333; border: none; font-size: small; margin: 0; padding: 0 0.5em; width: 100%; height: 100%; outline: none; } span#search-dropdown > .helper { display: inline-block; position: relative; overflow: hidden; width: 8em; } span#search-dropdown > .helper::after { content: "\f0d7"; /* caret down */ font-family: FontAwesome; position: absolute; width: 1em; line-height: 1em; top: 0.5em; right: 0.2em; } span#search-dropdown select { padding-right: 7.5em; position: relative; text-overflow: ellipsis; width: 14em; /* Pushing the native dropdown arrow into invisibility. */ z-index: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; } span#search-dropdown select::-ms-expand /* IE */ { display: none; } span#search-submit { background: #E6E6E6; border-left-style: solid; line-height: 1.2em; width: 3em; } span#search-submit button { color: #555; } span#search-submit button:active { position: relative; top: 0.1em; } span#search-submit span /* hide 'go' */ { display: none; } /* subnav */ .subnav, .subnav-helper { background: #F5F5F5; border: 0 solid #CCC; border-width: 0 1px 1px; padding-left: 1em; padding-right: 1em; width: 15em; } .subnav { float: left; padding-bottom: 2em; position: relative; } .subnav a { text-decoration: none; } .subnav a:hover, .subnav .expand-toggle:hover { text-decoration: underline; } .subnav .smallprint a { text-decoration: underline; } .subnav h2 { border-bottom: 1px solid #CCC; font-size: 1em; margin-right: -1em; } /* Hide JS toggle. It's only displayed in the narrow layouts. */ body.have-javascript .subnav.expand-container > h2.expand-toggle { display: none; } /* Hide links that just duplicate the subnav contents. They're only displayed in the narrow layouts without JS. */ .subnav .subnav-duplicate { display: none; } .subnav ul { list-style: none; margin: 0; padding-left: 1em; } .subnav > ul { padding-left: 0; } .subnav li a { display: block; position: relative; /* white-space: nowrap; */ } .subnav li.active > a { color: #742620; text-decoration: underline; } .subnav .hide-from-nav { display: none; } /* hierarchy tree lines */ body.std .subnav ul ul ul { border-left: 1px solid #CCC; } body.std .subnav .d_inlinecode { display: block; font-weight: normal; overflow: hidden; text-overflow: ellipsis; } body.std .subnav li li > a > span, body.std .subnav li li > h7 > span { border-left: 1px solid #CCC; } body.std .subnav ul ul li > a > span::before, body.std .subnav ul ul li > h7 > span::before { border-bottom: 1px solid #CCC; content: ""; display: inline-block; width: 0.5ex; margin-right: 0.5ex; height: 1em; position: relative; bottom: 0.5ex; } body.std .subnav ul ul li:last-child > ul { border-left: none; } body.std .subnav ul ul li:last-child > a > span, body.std .subnav ul ul li:last-child > h7 > span { border-left: none; } body.std .subnav ul ul li:last-child > a > span::before, body.std .subnav ul ul li:last-child > h7 > span::before { border-left: 1px solid #CCC; } /* Don't show ddox package symbols in the subnav. */ body.std .subnav a.package { background: none; padding-left: 0; font-style: normal; } .subnav-helper { bottom: 0; content: ""; position: absolute; top: 0; } #content { padding-bottom: 1em; text-align: justify; } /* This is a CSS hack to only target Blink based browsers Targets Chrome 28 and later and Opera 14 and later */ @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { #content { /* because Blink based browsers don't support hyphens */ text-align: left; } } .subnav + #content { margin-left: 19em; } #content #tools { padding: 0.3em 0 0.6em 0; text-align: right; } #content #tools .tip { display: inline-block; padding-left: 0.5em; } .expand-container > .expand-toggle::after { content: " \f0d7"; /* caret down */ font-family: FontAwesome; } body.have-javascript .expand-container.open > .expand-toggle::after { content: " \f0d8"; /* caret up */ } body.have-javascript .expand-container > * { display: none; } /* Not hiding .subnav by default; only in the narrow layouts. */ body .subnav.expand-container > * { display: block; } body.have-javascript .expand-container.open > *, body.have-javascript .expand-container > .expand-toggle { display: block; } /* show signature download on hover */ span.sig_btn { display: inline-block; } span.sig_btn > a:last-child { visibility: hidden; } span.sig_btn:hover > a:last-child { visibility: visible; } a.btn { color: #333; background: white; border: 1px solid #CCC; border-radius: 4px; padding: 0.3em 0.6em; display: inline-block; text-decoration: none; } a.btn:hover { background-color: #E6E6E6; border-color: #ADADAD; color: #333; } .btn.donate-large { font-size: 22px; padding: 0.4em 1em; background-color: #B03931; color: white; border: #B03931; } .btn.donate-large:hover { background-color: #98312A; color: white; } /* only grow as wide as necessary */ div.btn-group-vertical { display: inline-block; } /* make all elements the same width */ div.btn-group-vertical > a, div.btn-group-vertical > span { display: block; } /* distribute multiple elements evenly in a row */ div.btn-group-vertical > div.hbox { display: flex; } div.btn-group-vertical > div.hbox > a { flex-grow: 1 } /* replaces tag */ em.big { font-style: normal; font-size: larger; } /* replaces tag */ em.tt { font-style: normal; } /* replaces tag */ em.u { font-style: normal; text-decoration: underline; } table.params { border: 1px dotted #333; } tr.param { border: none; border-bottom: 1px dotted gray; } tr:last-child { border-bottom: none; } td.param_id { border: inherit; font-weight: bold; padding-right: 1em; white-space: nowrap; vertical-align: top; } td.param_desc { border: inherit; font-style: italic; } .download-tables > .download-compilers { flex-grow: 1; flex-shrink: 0; } .download-tables { display: flex; gap: 2.5em; align-items: center; } @media screen and (max-width: 65em) { .download-tables { flex-direction: column; } } table.lsp { max-width: 30em; background-color: white; border: none; border-radius: 0.5em; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; /* TODO: currently with shadow, since it's new and shiny, make this fit with the other content eventually */ box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 5px 7px rgba(0,0,0,0.2); position: relative; } table.lsp tbody > tr:nth-child(1) > td:before { display: block; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0.5em; background-color: #B03931; border-top-left-radius: 0.25em; border-top-right-radius: 0.25em; } table.lsp img { background-color: white; border-radius: 0.5em; padding: 0.5em; } table.lsp td { padding: 1em; } table.lsp tbody > tr:nth-child(1) > td { padding-bottom: 0; padding-top: 1.5em; } table.download-compilers { width: 100%; max-width: 50em; table-layout: fixed; } .download-tables table td { border: none; } .download-tables h2 { margin: 0; margin-bottom: 4pt; text-align: center; } .download-tables table > tbody > tr:first-child > td { text-align: center; vertical-align: middle; } .download-tables table > tbody > tr:nth-child(2) > td { text-align: left; } .download-tables table > tbody > tr:nth-child(2) > td > ul { margin-bottom: 0; padding-left: 1em; } .download-tables table div.download-link { text-align: center; margin-bottom: 1em; } table.download-compilers img { width: 100%; } table.lsp img { width: 100%; max-width: 8em; margin: 0; } .download-tables table h3 { margin-top: 0; text-align: center; } div#download-choose { float: right; } .download_image { display: inline-block; width: 100px; vertical-align: top; } h3.download { display: inline-block; } .download_paragraph { display: inline-block; } .download_paragraph > h3 { margin: 0; } /* release | beta | nightly */ .download_channels { word-spacing: 2em; } .download_channel { display: inline-block; word-spacing: initial; } .footnote { font-style: italic; } .footnote::before { content: " ("; } .footnote::after { content: ")"; } .gname { font-style: italic; } .metacode { font-style: italic; } .key { font-weight: bold; display: block; } .hyphenate { -webkit-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .donthyphenate { -webkit-hyphens: manual; -moz-hyphens: manual; -epub-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } .black { color: black; } .blue { color: blue; } .green { color: green; } .red { color: red; } .white { color: white; } .yellow { color: yellow; } .bigoh { font-weight: bold; } div.summary, div.description, div.keyval, div.blankline { margin: 1em 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: normal; text-align: left; margin: 2em 0 1em; } h1 { font-size: 2.0em; margin-top: 0; } h2 { font-size: 1.5em; } h3 { font-size: 1.35em; } h4 { font-size: 1.15em; } h5 { font-size: 1em; } /*This is to support the "Programming in D" book*/ h6 { font-size: 1em; color:#000033; font-weight:bold; } .chapter { font-size: 2em; color:#000033; } .subsection { font-size: 1.15em; color:#000033; font-weight:bold; } form { margin: 0; } blockquote { background-color: #e5e5e5; display: block; padding: 0.25em 1em; margin: 1em 2em; } blockquote p:before { content: "\201C"; color: #bacaca; display: block; font-size: 700%; width: 50px; height: 0; margin-left: -0.5em; line-height: 0.8em; } blockquote p { margin: 0; font-style: italic; } blockquote cite { display: block; text-align: right; } /* pre.prettyprint and div.prototype come from prettyprint.js */ pre, pre.prettyprint, div.prototype { background: white; border-radius: 4px; padding: 1ex; margin: 1em 0 1em 0; line-height: normal; border: 1px solid #ccc; width: auto; } pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } dd, .d_decl_dd { margin: 0; margin-bottom: 2em; padding: 1ex; padding-left: 2em; } .template_param_list { color: #48688E; } .constraint { opacity: .35; } .constraint:before { content: "Constraints: "; visibility: hidden; } .constraint:hover:before { visibility: visible; } .constraint:hover { opacity: 1; } table { border: solid #333; border-width: 2px 0; border-collapse: collapse; } table tr { border: none; } table td, table th, table caption { text-align: left; vertical-align: top; padding: 0.3em; } .quickindex .book caption:empty { padding: 0px; } table td { border: none; border-bottom: 1px solid #E6E6E6; } table th { border: none; border-bottom: 1px solid #333; } table td:not(:last-child), table th:not(:last-child) { padding-right: 1em; } /* These next two rules are for pages like: http://dlang.org/phobos-prerelease/std_regex.html The idea is if we have a list of links, we want space to the right of each one. But detecting a list of links vs just a single link requires some thought: the css adjacent sibling rule does well detecting all but the first one in a list, so we'll add space to the right of them (that's the second rule here), but that leaves an inconsistent space after the first item. That's where the following rule comes in: on the item directly following the first link, add some left padding to simulate the first one having the same space as the others. */ table.book tbody a:first-child + a { padding-left: .6em; } table.book tbody a + a { padding-right: .6em; } hr { margin: 2em 0; } a, .question, .expand-toggle { color: #B03931; cursor: pointer; } a:hover, .question:hover, .expand-toggle:hover { color: #742620; } /* Styling for page anchor self-links. These links look like regular headers unless hovered, in which case they are underlined and display a pilcrow after them. */ a.anchor { color: #633; /* Use the regular header text color */ text-decoration: none; /* Don't underline unless hovered */ } a.anchor:hover { text-decoration: underline; /* See above */ } a.anchor:hover::after { content: " \00B6"; /* Unicode pilcrow symbol */ color: #333; /* Pilcrow should not use the regular header text color */ font-style: normal; /* ... and should not be italic */ } /* Avoid inserting the pilcrow in the middle of the line on the compiler pages */ body.dcompiler dt a.anchor:hover::after { display: none; } body.dcompiler dt a.anchor:hover { position: relative; } body.dcompiler dt a.anchor:hover:before { content: " \00B6"; color: #333; font-style: normal; position: absolute; left: -1em; } /* These are different kinds of

 sections */
.bnf /* grammar */
{
    background-color: white;
}

.bnf_inline
{
    font-size: small;
    background-color: #F5F5F5; /* differentiate grammar from paragraph punctuation */
}

.ddoccode
{
    background-color: #f3eeee;
}

.console /* command line console */
{
    background-color: #333;
    border-color: #333;
    color: #F5F5F5;
}
.console a
{
    color: #D8645E;
}
.console a:hover
{
    color: #F47069;
}

.moddeffile /* module definition file */
{
    background-color: #efeffe;
    color: #010199;
}

.scini /* sc.ini configuration file */
{
    background-color: #fef6fe;
    color: #111199;
}

.d_code, .d_code2 /* D code */
{
    background-color: #fcfcfc;
}

.asmcode /* Asm code */
{
    background-color: #afcbde;
    border-color: #afcbde;
}

.ccode, .cppcode, .cppcode2 /* C/C++ code */
{
    background-color: #fcfcfc;
}

td .d_code2, td .cppcode2, td .cppcode
{
    min-width: 20em;
    margin: 1em 0;
}

.d_inlinecode
{
    font-weight: bold;
}

.d_title
{
    font-weight: bold;
    text-overflow: clip;
    overflow: hidden;
    display: block;
    word-wrap: break-word;
    font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;
}

.phobos_src
{
    text-overflow: clip;
    overflow: hidden;
    display: block;
    word-wrap: break-word;
}

/* syntax highlighting

d_* classes come from Ddoc.
cm-* classes come from CodeMirror.

These classes come from prettify.js:
.pln - plain text
.str - string content
.kwd - keyword
.com - comment
.typ - type name
.lit - literal value
.pun - punctuation
.opn - lisp open bracket
.clo - lisp close bracket
.tag - markup tag name
.atn - markup attribute name
.atv - markup attribute value
.dec - declaration
.var - variable name
.fun - function name

*/

.d_comment,
.cm-s-eclipse span.cm-comment,
.com
{
    color: #999;
}

.d_string,
.cm-s-eclipse span.cm-string, .cm-s-eclipse span.cm-string-2,
.str, .atv
{
    color: #DC4040;
}

.d_keyword,
.cm-s-eclipse span.cm-keyword, .cm-s-eclipse span.cm-builtin,
.kwd
{
    color: #4040DC;
}

.typ
{
    color: #4040DC;
}


.d_param
{
    font-style: italic;
}

/* .cm-meta is here because it and .lit both match @-attributes */
.cm-s-eclipse span.cm-number, .cm-s-eclipse span.cm-meta,
.lit
{
    color: #8E00DC;
}

{
    color: #333;
}

.cm-s-eclipse span.cm-attribute,
.atn
{
    color: #9ad452;
}

.cm-s-eclipse span.cm-tag,
.tag
{
    color: #ffaa00;
}

.cm-s-eclipse span.cm-error
{
    color: #f00;
}

.cm-s-eclipse span.cm-def, .cm-s-eclipse span.cm-operator,
.cm-s-eclipse span.cm-property, .cm-s-eclipse span.cm-variable,
.cm-s-eclipse span.cm-variable-2, .cm-s-eclipse span.cm-variable-3,
.pln, .fun
.dec, .var
{
    color: #333;
}

.cm-s-eclipse span.cm-word {color: #006;}
.cm-s-eclipse span.cm-atom {color: #219;}
.cm-s-eclipse span.cm-qualifier {color: #555;}
.cm-s-eclipse span.cm-bracket {color: #cc7;}
.cm-s-eclipse span.cm-link {color: #219;}


.ddoc_keyword
{
    font-weight: bold;
}

.ddoc_param
{
    font-style: italic;
}

/* Focal symbol that is being documented */
.d_psymbol, .ddoc_psymbol
{
/*     color: #B03931; */
    font-weight: bold;
}

.d_decl
{
    background: #F5F5F5;
    border-left: 5px solid #B03931;
    text-align: left;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.d_decl > div
{
    border: 1px solid #E6E6E6;
    border-top-right-radius: 4px;
    padding: 0.6em 1em;
}

.d_decl + dd
{
    border: 1px solid #E6E6E6;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

img
{
    border: 0;
}

body.chm div#news,
body.chm div.subnav-helper,
body.chm div.subnav,
body.chm div#top
{
    display: none;
}

body.chm
{
    min-width: 0 !important;
}

body.chm div#content
{
    padding: 20px;
    border: none;
    margin: 0 !important;
    border-radius: 0;
}

body.chm div#tools
{
    margin-right: 0;
}

body.chm dt.d_decl
{
    width: 100%;
}

.boxes
{
    margin: 2em 0;
}

.boxes .row
{
    display: table-row;
}

.boxes .item
{
    display: table-cell;
    width: 50%;
}

.boxes > .row > .item
{
    padding: 1em 2em;
}

.boxes > .row > .item > h4:first-child
{
    margin-top: 0;
}

.boxes > .row:first-child > .item
{
    padding-top: 0;
}

.boxes > .row:last-child > .item
{
    padding-bottom: 0;
}

.boxes > .row > .item:first-child
{
    padding-left: 0;
}

.boxes > .row > .item:last-child
{
    padding-right: 0;
}

.tip
{
    font-size: small;
    position: relative;
}

.tip > div
{
    display: none;
    position: absolute;
    top: 25px;
    left: auto;
    right: 0;
    width: 19em;
    padding: 8px;
    z-index: 100;
    background: #555;
    color: white;
    font-style: normal;
    text-align: left;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.tip:hover > div
{
    display: block;
}

.tip > div > *:first-child
{
    margin-top: 0;
}
.tip > div > *:last-child
{
    margin-bottom: 0;
}

div#copyright
{
    margin-top: 1.5em;
    text-align: center;
}

.smallprint, .smallprint a
{
    color: #999;
    font-size: small;
}

.smallprint a:hover
{
    color: #555;
}

#contributors-github img
{
    padding-right: 5px;
}

/* These are for the changelogs */
div.version
{
    font-size: 0.9em;
}
div.version font
{
    color: #633;
}
div.version li
{
    padding-bottom: 0.3ex;
}
div.changelog-nav
{
    font-size: small;
    margin: 2em 0;
    text-align: center;
}


.leadingrow {
    background-color: #E4E9EF;
    font-size: 110%;
}

.quickindex {
    font-weight: normal;
    background-color: #F5F5F5;
}

.quickindex a {
    text-decoration: none;
}

.quickindex a:hover {
    text-decoration: underline;
}

.question, .question *
{
    display: inline;
    text-decoration: underline;
    cursor:pointer;     /* Cursor is like a hand when someone rolls the mouse over the question */
}

.answer {
    display:none;
}

.nobr {
    white-space:nowrap;
}

/* Openable example boxes */
.example-box {
	transition: 0.25s;
	overflow: hidden;
}


/* Runnable-examples css */
textarea.d_code {display: none;}
textarea.d_code_stdin, textarea.d_code_args
{
    text-align: left;
    border: none;
    width: 98%;
    padding: 5px;
    margin: 1px;
    word-wrap: break-word;
    height: auto;
    background: white;
    margin-left: 2px;
    outline: none;
    hyphens: none;
}

pre.d_code_output {
    border: none;
    max-height: 30em;
    overflow: auto;
}

div.d_code {margin: 0; padding: 0; background: #F5F5F5;}
div.d_run_code {display: none;}
div.d_code_output, div.d_code_stdin, div.d_code_args, div.d_code_unittest
{
    border: 1px solid #CCC;
    background: white;
    display: none;
    height: auto;
    width: 100%;
}

.d_code_title {font-weight: bold;padding: 5px;}

pre.d_code
{
    overflow-x: auto;
    white-space: pre;
    word-wrap: unset;
}

.CodeMirror-wrap {padding: 3px;}
.CodeMirror {line-height: normal; border: 1px solid #CCC; background: #FCFCFC; height: auto}
.cm-s-eclipse .CodeMirror-matchingbracket {border:1px solid grey;color:black !important;}

input.runButton, input.resetButton, input.argsButton, input.inputButton, input.editButton, input.openInEditorButton
{
    -moz-box-shadow:inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
    box-shadow:inset 0 1px 0 0 #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:72%;
    font-weight:bold;
    padding:3px 6px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
    width: 10en;
    margin: 2px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}
input.openInEditorButton {
    float: right;
    width: auto;
}
input.runButton:hover, input.resetButton:hover, input.argsButton:hover, input.inputButton:hover, input.editButton:hover,input.runButton[disabled]
{
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}
input.runButton:active,
input.resetButton:active,
input.argsButton:active,
input.inputButton:active,
input.editButton:active
{
    position: relative; top: 1px;
}
input.resetButton{display: none}

div.editButton, div.openInEditorButton, div.runButton, div.resetButton {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    color: #333;
    background: white;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 0.3em 0.6em;
    display: inline-block;
    text-decoration: none;
}
div.openInEditorButton {
    margin-right: 0;
    float: right;
}
div.openInEditorButton i{
    padding-right: 5px;
}
.unittest_examples .d_example_buttons {
    margin-top: 10px;
}
.unittest_examples .CodeMirror, .unittest_examples .d_code_output {
    margin-top: 10px;
}

/* Style for the example run buttons on the Phobos library documentation */
.d_example_buttons {
    text-align: left;
}
.runnable-examples-stdin {
    display: none;
}
.runnable-examples-args {
    display: none;
}
.your-code-here-title {
    display: none;
}
#your-code-here-select-example {
    padding-bottom: 0.3em;
}
.fa-select select {
    background: white;
    border: 1px solid #CCC;
    border-radius: 4px;
    padding: 0.3em 20px 0.3em 0.3em;
    font-size: 0.95em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 120%;
}
.fa-select::after {
   font-family: FontAwesome;
   content: "\f0d7";
   margin-left: -15px;
   pointer-events: none; /* propagate click */
}
/* Runnable-examples css -end */

.page-contents
{
    width: 300px;
    padding-right: 10px;
    border: solid #333;
    border-width: 2px 0;
    font-size: small;
    text-align: left;
    margin: 0 0 2em 2em;
}

.page-contents-header
{
    text-align: center;
}

.page-contents-header h3
{
    display: inline;
    color: #444;
    font-weight: bold;
    margin-top: 0;
}

.page-contents li
{
    line-height: 1.3;
    padding-bottom: 0;
}

@media only screen and (min-width: 66em)
{
    pre
    {
        overflow: auto;
    }

    .page-contents
    {
        float: right;
    }
}

/* Narrow layout stage 1: dropdown search, dropdown subnav */
@media only screen and (max-width: 66em)
{
    #top .search-container.expand-container .expand-toggle
    {
        display: block;
    }

    #top .expand-container > #search-box
    {
        background: #B03931;
        border: 1px solid #98312A;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        display: none;
        padding: 0.6em;
        position: absolute;
        top: 100%;
        right: 0;
        width: auto;
        z-index: 5;
    }

    #top .expand-container.open > #search-box
    {
        display: block;
    }

    body#Home #content > .intro .pitch
    {
        width: 15em;
    }

    .subnav
    {
        float: none;
        border-bottom-width: 1px;
        border-left-width: 0;
        border-right-width: 0;
        margin: 0 -1em;
        padding: 0.6em 1em;
        width: auto;
    }

    body .subnav.expand-container > *
    {
        display: none;
    }

    .subnav.open
    {
        padding-bottom: 1em;
    }

    body.doc .subnav > ul,
    body.std .subnav > ul > li > ul
    {
        -moz-column-width: 17em;
        -webkit-column-width: 17em;
        column-width: 17em;
    }

    body.changelog .subnav > ul
    {
        -moz-column-width: 10em;
        -webkit-column-width: 10em;
        column-width: 10em;
    }

    body.doc .subnav > ul > li,
    body.std .subnav > ul > li > ul > li
    {
        /* avoid column breaks inside li */
        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
        page-break-inside: avoid; /* Firefox */
        break-inside: avoid; /* IE 10+ */
    }

    .subnav h2
    {
        border-bottom-style: none;
        margin-right: 0;
        margin-top: 0;
        padding-top: 1em;
    }

    /* Without JS, display the head section (h2, subhome link, ...) on one line.
    With JS, display the toggle, and hide the other h2. */
    .subnav > *
    {
        display: none;
    }
    .subnav > .head
    {
        display: block;
        word-spacing: 1em;
    }
    .subnav > .head > *
    {
        display: inline;
        word-spacing: 0;
    }
    .subnav > .head br
    {
        display: none;
    }
    .sunbav .subnav-duplicate
    {
        display: block;
    }
    .subnav > .head .separator::after
    {
        content: "\2013"; /* U+2013 EN DASH */
    }
    body.have-javascript .subnav.expand-container > .head > *,
    body.have-javascript .subnav.expand-container.open > .head > h2,
    body.have-javascript .subnav.expand-container.open > .head > .subnav-duplicate
    {
        display: none;
    }

    body.have-javascript .subnav.expand-container > h2.expand-toggle,
    body.have-javascript .subnav.expand-container.open > .head > *,
    body.have-javascript .subnav.expand-container > .head br
    {
        display: block;
    }
    body.have-javascript .subnav > h2.expand-toggle
    {
        margin: 0;
        padding: 0;
    }
    body.have-javascript .head .separator::after
    {
        content: none;
    }
    body.have-javascript .subnav.open > h2
    {
        border-bottom-style: solid;
        margin-bottom: 1em;
    }

    .subnav + #content
    {
        margin-left: 0;
    }

    .subnav-helper
    {
        display: none;
    }

    body#Home #content > .intro
    {
        padding: 0 0 1.5em;
    }

    .org_list a img
    {
        padding: 0.5em 2em;
    }
}


/* Narrow layout stage 2: hamburger menu */
@media only screen and (max-width:54em)
{

    #top > .helper
    {
        padding: 0;
    }

    /* lay out navigation vertically */

    #top #cssmenu, #top #search-box
    {
        display: block;
    }

    #top .logo
    {
        width: auto;
    }

    #top .logo > a
    {
        background: transparent; /* override :hover background change */
        margin-left: 1em;
    }

    #top #cssmenu, #top .search-container
    {
        display: none;
    }

    #top .expand-container.open #cssmenu,
    #top .expand-container .search-container
    {
        display: block;
    }

    #top #cssmenu
    {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-top: 1px solid #943029;
        clear: both;
    }
    #top #cssmenu > ul
    {
        border-bottom: 1px solid #943029;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    #top .search-container
    {
        padding: 0.6em 1em;
        width: auto;
    }

    #top .search-container.expand-container .expand-toggle
    {
        display: none;
    }

    #top .expand-container > #search-box
    {
        border: 0;
        display: block;
        padding: 0;
        position: static;
    }

    #top .expand-container .search-container
    {
        display: none;
    }

    #top .expand-container.open .search-container
    {
        display: block;
    }

    #top #search-box form
    {
        display: table;
        width: 100%;
    }

    #top #search-query, #top #search-dropdown, #top #search-submit
    {
        display: table-cell;
    }

    #top #search-query
    {
        width: auto;
    }

    #top #search-dropdown
    {
        width: 0; /* shrink to content size */
    }

    #top #cssmenu > ul > li
    {
        float: none;
    }

    #top #cssmenu > ul > li.expand-container.open > ul
    {
        border: none;

        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;

        position: static;
    }

    #top #cssmenu > ul > li.expand-container.open > ul > li > a
    {
        padding-left: 2em;
    }

    /* menu button */

    #top a.hamburger
    {
        display: inline;
        float: right;
        font-size: 2em;
        height: 1em;
        line-height: 1;
        padding: 0.15em 1em;
    }
    #top a.hamburger span
    {
        display: none;
    }
    #top a.hamburger::after
    {
        content: "\f0c9"; /* bars */
        font-family: FontAwesome;
    }
}

/* Narrow layout stage 3: no more two column boxes */
@media only screen and (max-width: 40em)
{
    .boxes .row, .boxes .row .item
    {
        display: block;
        padding: 0;
        width: auto;
    }
}

.decl_anchor {
    visibility: hidden;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
    text-decoration: none;
}

dt.d_decl:hover .decl_anchor {
    visibility: visible;
}

/**
 * Vertical centering - cross-platform way
 */
.vcontainer-box {
    display: block;
}
.vcontainer-box:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.vcontainer-element {
    display: inline-block;
    vertical-align: middle;
}

.center {
    text-align: center;
}

.dont-highlight-link > a {
    text-decoration: none;
    color: #333;
}

/**
 * Version select box
 */
.version-changer-container {
    float: right;
    margin-top: -4em;
}
@media only screen and (max-width:40em)
{
    .version-changer-container {
        margin-top: -2em;
        float: none;
        text-align: right;
    }
}


/**
 * Messages boxes.
 */
.message-box {
    padding: 1em 1em 1em 1em;
    border-radius: 5px;
}
.message-box, .message-box a {
    color: white;
}
.message-box-red {
    background-color: #D60027;
}
.message-box-gray {
    background-color: #797979;
}
.message-box-orange {
    background-color:  #EC5315;
}
.message-box-green {
    background-color: #4EBA0F;
}

.modlist-internal-separator {
    height: 1em;
    border-top: 1px solid #ccc;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 0.5em;
}

/* Group related info together */
.panel
{
    padding: 0.3em 0.6em;
    border-radius: 5px;
    background-color: #F5F5F5;
    border: 1px solid #E6E6E6;
}

.legacy {
    background-color: #E6E6E6;
}

.legacy::after {
    content: ' 🕸️';
}