/*
 * kde-docs.css -- Style sheets for the KDE documentation generated
 * HTML.
 *
 * Started by Michael Pyne <mpyne@kde.org>
 */
html, body {
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
}

/* These two divs force the content to fill up at least the viewport, which
 * is needed in order to force the footer to the bottom of short pages.
 */
#content {
    min-height: 100%;
    position: relative;
}

#contentBody {
    padding: 0;
    padding-bottom: 1em;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* This is for the header's navigation bar */
#content > .navCenter {
    background: #F8F8F8;
    border-bottom: 1px solid #DDD;
}

/* Standard nav bar elements */
div.navCenter table {
    empty-cells: show;
    border: 0px;
    width: 100%;
}

div.navCenter td {
    font-weight: normal;
}

div.navCenter td.prevCell {
    padding-left: 20px;
    text-align: left;
}

div.navCenter td.nextCell {
    padding-right: 20px;
    text-align: right;
}

div.navCenter td.upCell {
    text-align: center;
}

/* Actual documentation styling */
div.sect3 h4 {
    font-size: 100%;
    font-weight: bold;
}

div.sect4 h5 {
    font-size: 100%;
    font-weight: bold;
}

div.sect5 h6 {
    font-size: 90%;
    font-style: italic;
}

div.informaltable table {
    text-align: left; /* Disable justification */
    border: 1px solid black;
    border-collapse: collapse;
}

div.table table {
    text-align: left; /* Disable justification */
    border: 1px solid black;
    border-collapse: collapse;
}

/* Give alternating row colors */
div.table tr:nth-child(odd) {
    background-color: #eee;
}

div.table tr:nth-child(even) {
    background-color: white;
}

div.table th {
    background-color: white;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid black;
}

div.table td {
    text-align: left;
    padding: 4px;
}

div.tip, div.note, div.warning, div.important {
    padding: 6pt;
    padding-top: 3pt;
    border-radius: 3px;
}

div.tip > .title, div.warning > .title, div.note > .title, div.important > .title {
    font-weight: 550;
}

div.tip {
    border: 2px solid #3daee9;
    background: #cbe3ef;
}

div.important {
    border: 2px solid #f67400;
    background: #f0d7c1;
}

div.note {
    border: 2px solid #27ae60;
    background: #c7e2d4;
}

div.warning {
    border: 2px solid #da4453;
    background: #ebced1;
}

/* Make the content wrapping div have a nice margin. */
body div.chapter, body div.sect1, body div.book, body div.article {
    margin-left: 2em;
    margin-right: 2em;
}

div.sect2 {
    width: 100%;
}

.programlisting, pre.screen {
    border-radius: 7px;

    /* To support border radius on our OSS browser friends when
     * viewing online */
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
}

.programlisting {
    border: 1px solid black;
    background: white;
}

.guimenu, .guimenuitem, .guisubmenu,
.guilabel, .interface, .guibutton {
    background-color: rgb(220, 220, 220);
    color: black;
    border: 1px solid rgb(190, 190, 190);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.shortcut {
    background-color: #DDF;
    border: 1px dotted #BBF;
    font-weight: normal;

    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.keycap, .keysym {
    background-color: #DFDFFF;
    font-weight: bold;

    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

pre.screen {
    border: 2px solid gray;
    background: black;

    color: white;
    font-weight: normal;
    font-family: monospace;
}

/* Make a screen black on white */
pre.screen * {
    color: white;
    background: black;
    font-weight: normal;
    font-family: monospace;
}

pre.screen .userinput {
    color: green;
}

.informalexample {
    margin: 0px;
    padding: 0px;
    border: 0px;
    border-left: 1px dotted black;
    padding-left: 4px;
}

div.tip {
    margin-bottom: 12pt;
}

div.tip:last-child() {
    margin-bottom: 0pt;
}

pre:last-child() {
    margin-bottom: 0px;
}

div.titlepage {
    margin-left: 0px;
}

h3.title {
    margin-left: 0cm;
}

.screenshot, .informalfigure {
    border: 1px solid gray;
    background-color: rgb(240,240,240);
}

/* We no longer render <hr>s around <mediaobject>s, but this hides them in case
 * old generated HTML is displayed with the new style.
 */
.mediaobject hr, .mediaobjectco hr {
    display: none;
}

/*
 * This gives us the styling for the header and footer.
 * See customization/kde-navig.xsl for where it's used.
 */
#header {
    width: 100%;
    height: 51px;
    color: white;
    font-height: 3em;
    background: #54a3d8;
}

#header_content {
    margin-left: 1em;
    background: white;
    height: 47px;
}
#header_left {
    background: #54a3d8;
    display: inline-block;
    height: 47px;
    padding-right: 1em;
}

#header_right img {
    position: relative;
    top: 8px; /* Vertically center */
}

/* Used for the text and footer area at the bottom. */
#footer {
    width: 100%;
    background-color: #eeeeee;
    border: 0px;

    /* Force footer to bottom of viewport/page */
    /* Either should be position:fixed to stay always at the bottom of the viewport, or 
       removed to be at the bottom of the page. I chose bottom of the page.
       position: absolute; */
    bottom: 0;
    height: 8.7em;
}

#footer_text {
    text-align:center;
    vertical-align: middle;
    padding-top: 12pt;
}

#footer .navCenter {
    border-top: 1px solid #DDD;
    border-bottom: 1px solid #AAA;
}

/* Two rows on this navCenter, so make the cells equal width */
#footer .navCenter td {
    width: 33%;
}

a.footer_email {
    color: #282828;
    text-decoration: underline;
}

@media print {
    #header_right {
        color: black;
        text-shadow: gray 2px 2px 2px;
    }

    .navCenter {
        display: none;
    }

    #footer {
        border-top: 1px solid #DDD;
    }
}

img {
    max-width: 100%;
}

.productname {
    margin-left: 5px;
}