/*

-- 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, 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;
}

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;
}

/* 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;
    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;
}

/* hierarchy tree lines */

body.std .subnav ul ul ul
{
    border-left: 1px solid #CCC;
}

body.std .subnav .d_inlinecode
{
    display: block;
    font-weight: normal;
}

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;
}

/* 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 <big> tag */
em.big
{
    font-style: normal;
    font-size: larger;
}

/* replaces <tt> tag */
em.tt
{
    font-style: normal;
}

/* replaces <u> 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;
}

table.download-compilers
{
    width: 100%;
    max-width: 50em;
    table-layout: fixed;
}

table.download-compilers td
{
    border: none;
}

table.download-compilers h2
{
    margin: 0;
}

table.download-compilers > tbody > tr:first-child > td
{
    text-align: center;
    vertical-align: middle;
}

table.download-compilers > tbody > tr:nth-child(2) > td
{
    text-align: left;
}

table.download-compilers > tbody > tr:nth-child(2) > td > ul
{
    margin-bottom: 0;
    padding-left: 1em;
}

table.download-compilers div.download-link
{
    text-align: center;
    margin-bottom: 1em;
}

table.download-compilers img
{
    width: 100%;
}

table.download-compilers 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: 1.12em 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;
}

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;
    text-align: justify;
}

table th
{
    border: none;
    border-bottom: 1px solid #333;
}

table td:not(:last-child), table th:not(:last-child)
{
    padding-right: 1em;
}

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 <pre> sections */
.bnf /* grammar */
{
    background-color: white;
}

.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: #f6ecf0;
}

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

.d_inlinecode
{
    font-weight: bold;
}

/* 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%;
}

body#Home > .container
{
    max-width: none;
    padding: 0;
}

body#Home #content #tools,
body#Home #content > .intro
{
    background: #F5F5F5;
}

body#Home #content > h1
{
    margin: 0;
}

body#Home #content > .intro
{
    padding-bottom: 1em;
    border-bottom: 1px solid #E6E6E6;
}

body#Home #content > .intro > div > div
{
    display: table;
    width: 100%;
}

body#Home #content > .intro > div > div > *
{
    display: table-cell;
}

body#Home #content > .intro .pitch
{
    font-size: large;
    font-weight: 300;
    margin: auto;
    width: 21em;
}

body#Home #content > .intro .download
{
    margin-top: 3em;
    text-align: center;
}

body#Home #content > .intro .download .btn
{
    margin: 0 0.3em 0.3em 0.3em;
}

body#Home #content > .intro .download .btn.action
{
    border-color: #98312A;
}

body#Home #content > .intro .download .btn.action:hover
{
    border-color: #943029;
}


body#Home #content > .intro #your-code-here
{
    padding-left: 1em;
    position: relative;
    width: 32em;
}

body#Home #content > .intro #your-code-here .tip
{
    position: absolute;
    top: 0.1em;
    right: 0.3em;
    z-index: 1;
}

body#Home #content > .intro #your-code-here pre
{
    margin: 0;
}

body#Home div#news
{
    float: right;
    width: 252px;
}

body#Home div#forum-summary
{
    color: white;
    width: 100%;
    margin-right: 1em;
}

body#Home div#forum-summary > iframe
{
    border: 0;
    width: 100%;
    height: 210px;
}

body#Home .more .boxes, body#Home .more .whyd
{
    margin-right: 252px; /* prevent overlapping with #news */
    padding-right: 4em;
}

body#Home .boxes .item .big-icon
{
    padding-right: 0.5em;
}

body#Home .whyd .section
{
    margin-bottom: 1.5em;
    border-left: 5px solid #B03931;
    border-radius: 4px;
}
body#Home .whyd .section > div
{
    border: 1px solid #E6E6E6;
    border-left: none;
    border-radius: 4px;
    padding: 1.5em;
}
body#Home .whyd .section > div > *:first-child
{
    margin-top: 0;
}
body#Home .whyd .section > div > *:last-child
{
    margin-bottom: 0;
}

body#Menu #content li.expand-container a::after
{
    content: "";
}

body#Menu #content li.expand-container ul
{
    display: block;
}

.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_output, 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;
}

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;}

.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
{
    -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: 50px;
    margin: 2px;
    position: relative;
    z-index: 2;
    cursor: pointer;
}
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}
/* 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;
    }
}

/* Narrow layout stage 2: hamburger menu, forum/twitter widgets disappear from
the home page, intro pitch and your-code-here layed out vertically */
@media only screen and (max-width:54em)
{
    body#Home #content > .intro > div > div
    {
        display: block;
        width: auto;
    }

    body#Home #content > .intro > div > div > *
    {
        display: block;
    }

    body#Home #content > .intro .pitch
    {
        max-width: 21em;
        width: auto;
    }

    body#Home #content > .intro #your-code-here
    {
        padding: 0;
        margin: auto;
        margin-top: 2em;
    }

    body#Home #news
    {
        display: none;
    }

    body#Home .more .boxes, body#Home .more .whyd
    {
        margin-right: 0;
        padding-right: 0;
    }

    #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;
    }

    body#Home #content > .intro #your-code-here
    {
        /* change width to max-width */
        width: auto;
        max-width: 32em;
    }
}

.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;
}

/* Style for the example run buttons on the Phobos library documentation */
.d_example_buttons {
    text-align: right;
}