@import "/css/font.css";

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    background-image: url('/img/reimu.jpg');
    background-position: 40% 10%;
    background-color: white;
    font-family: 'Ume UI Gothic';
}

header {
    padding: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {font-size: 1.7em}
a:link {color: #1e527e}
a:hover {color: #2c7abc}
a:visited {color: #371e7e}
a:visited {color: #574882}
img {max-width: 100%}

pre {
    color: #dddddd;
    overflow-x: auto;
    padding: 0.3em;
}

.caption {
    font-style: italic;
    font-size: 0.8em;
    line-height: 5px;
    margin-bottom: 3em;
}

.caption {text-align: center}

.center:not(.section), .center>h1, .center>h2{ text-align: center }

p.screenshot a img {
    border: 1px solid black;
    box-shadow: 3px 7px 7px #606060;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    margin: auto;
}

/* guided tour */

#window-maker h1.title { text-align: center }
#window-maker #guided-tour img {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

/* gallery */

p.gallery {
    float: left;
    margin: 5px;
    width: 300px;
}

p.gallery a img {
    border: 1px solid black;
    box-shadow: 3px 7px 7px #606060;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    margin: auto;
}

div.gallery img {
    width: 100%;
    height: auto;
}

.clear {
    clear: left;
}

div.figure img {
    display: block;
    border: 1px solid black;
    box-shadow: 3px 7px 7px #606060;
    margin: 0 auto;
}

div.figure.borderless img {
    border: 0
}

/* logo */
header h1 a {
    font-family: "ArialPixel";
    text-shadow: 0 4px 4px #666;
    display: block;
    padding-left: 1.4em;
    background-image: url(/img/yukari-sigil.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    text-decoration: none;
    color: black;
    font-size: 1.8em;
}

header h1 a:link {text-decoration: none}
header h1 a span.second {color: white}
header h1 a span.first {color: black}
header h1 a.span.third {color: red} 

/* wrapper decorations */
#minimize, #close {
    margin: 0;
    padding: 0;
    height: 20px;
    width: 21px;
    border-left: 1px solid #b6b6b6;
    border-top: 1px solid #b6b6b6;
    border-right: 1px solid #616161;
    border-bottom: 1px solid #616161;
    background-repeat: no-repeat;
    background-position: center center;
}

#minimize {
    margin-right: 1px;
    background-image: url(/img/minimize.png);
}

#close {
    margin-left: 1px;
    background-image: url(/img/close.png);
}

#titlebar {
    position: absolute;
    top: 0px;
    display: inline-flex;
    width: 100%;
    margin: 0;
    margin-top: 0px;
    padding: 0;
    background: #016701;
    height: 23px;
}

#titlebar-inner {
    margin: 0;
    padding: 0;
    margin-top: 0px;
    background: #016701;
    height: 20px;
    width: 100%;
    border-left: 1px solid #b6b6b6;
    border-top: 1px solid #b6b6b6;
    border-right: 1px solid #616161;
    border-bottom: 1px solid #616161;
    font-size: 0.8em;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 19px;
    font-family: 'Ume UI Gothic O5';
}

#wrapper {
    position: relative;
    width: 800px;
    margin: 0 auto;
    margin-top: 1em;
    margin-bottom: 1em;
    box-shadow: 0 0 15px #0033aa;
    background-color: #ddddff;
    border: 1px solid black;
}

#resizel, #resizer {
    margin: 0;
    padding: 0;
    height: 6px;
    width: 28px;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-right: 1px solid #555555;
}

#resizebar {
    position: absolute;
    bottom: 2px;
    display: inline-flex;
    width: 100%;
    margin: 0;
    margin-top: 0px;
    padding: 0;
    background: #aaaaaa;
    height: 5px;
    border-top: 1px solid #555555;
}

#resizebar-inner {
    margin: 0;
    padding: 0;
    margin-top: 0px;
    height: 6px;
    width: 100%;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-right: 1px solid #555555;
}

/* TOC */
.contents p {
    margin: 0.2em;
}

/* pre/code highlighted theme - taken from wombat256grf vim colorscheme */
.highlight { background-color: #242424 }
.highlight .c { color: #99968b; font-style: italic} /* Comment */
.highlight .err { color: #dddddd} /* Error */
.highlight .g { color: #dddddd } /* Generic */
.highlight .k { color: #87afff } /* Keyword */
.highlight .l { color: #dddddd } /* Literal */
.highlight .n { color: #dddddd } /* Name */
.highlight .o { color: #dddddd } /* Operator */
.highlight .x { color: #dddddd } /* Other */
.highlight .p { color: #dddddd } /* Punctuation */
.highlight .cm { color: #99968b; font-style: italic} /* Comment.Multiline */
.highlight .cp { color: #e5786d } /* Comment.Preproc */
.highlight .c1 { color: #99968b; font-style: italic} /* Comment.Single */
.highlight .cs { color: #99968b; font-style: italic} /* Comment.Special */
.highlight .gd { color: #dddddd } /* Generic.Deleted */
.highlight .ge { color: #dddddd } /* Generic.Emph */
.highlight .gr { color: #dddddd } /* Generic.Error */
.highlight .gh { color: #f6f3e8; font-weight: bold} /* Generic.Heading */
.highlight .gi { color: #dddddd } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #dddddd } /* Generic.Prompt */
.highlight .gs { color: #dddddd } /* Generic.Strong */
.highlight .gu { color: #f6f3e8; font-weight: bold} /* Generic.Subheading */
.highlight .gt { color: #dddddd } /* Generic.Traceback */
.highlight .kc { color: #87afff } /* Keyword.Constant */
.highlight .kd { color: #87afff } /* Keyword.Declaration */
.highlight .kn { color: #87afff } /* Keyword.Namespace */
.highlight .kp { color: #87afff } /* Keyword.Pseudo */
.highlight .kr { color: #87afff } /* Keyword.Reserved */
.highlight .kt { color: #caeb82 } /* Keyword.Type */
.highlight .ld { color: #dddddd } /* Literal.Date */
.highlight .m { color: #e5786d } /* Literal.Number */
.highlight .s { color: #95e454; font-style: italic} /* Literal.String */
.highlight .na { color: #caeb82 } /* Name.Attribute */
.highlight .nb { color: #dddddd } /* Name.Builtin */
.highlight .nc { color: #dddddd } /* Name.Class */
.highlight .no { color: #e5786d } /* Name.Constant */
.highlight .nd { color: #dddddd } /* Name.Decorator */
.highlight .ni { color: #ffdead } /* Name.Entity */
.highlight .ne { color: #dddddd } /* Name.Exception */
.highlight .nf { color: #caeb82 } /* Name.Function */
.highlight .nl { color: #dddddd } /* Name.Label */
.highlight .nn { color: #dddddd } /* Name.Namespace */
.highlight .nx { color: #dddddd } /* Name.Other */
.highlight .py { color: #dddddd } /* Name.Property */
.highlight .nt { color: #87afff } /* Name.Tag */
.highlight .nv { color: #caeb82 } /* Name.Variable */
.highlight .ow { color: #dddddd } /* Operator.Word */
.highlight .w { color: #dddddd } /* Text.Whitespace */
.highlight .mf { color: #e5786d } /* Literal.Number.Float */
.highlight .mh { color: #e5786d } /* Literal.Number.Hex */
.highlight .mi { color: #e5786d } /* Literal.Number.Integer */
.highlight .mo { color: #e5786d } /* Literal.Number.Oct */
.highlight .sb { color: #95e454; font-style: italic } /* Literal.String.Backtick */
.highlight .sc { color: #95e454; font-style: italic } /* Literal.String.Char */
.highlight .sd { color: #95e454; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #95e454; font-style: italic } /* Literal.String.Double */
.highlight .se { color: #95e454; font-style: italic } /* Literal.String.Escape */
.highlight .sh { color: #95e454; font-style: italic } /* Literal.String.Heredoc */
.highlight .si { color: #95e454; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #95e454; font-style: italic } /* Literal.String.Other */
.highlight .sr { color: #95e454; font-style: italic } /* Literal.String.Regex */
.highlight .s1 { color: #95e454; font-style: italic } /* Literal.String.Single */
.highlight .ss { color: #95e454; font-style: italic } /* Literal.String.Symbol */
.highlight .bp { color: #dddddd } /* Name.Builtin.Pseudo */
.highlight .vc { color: #caeb82 } /* Name.Variable.Class */
.highlight .vg { color: #caeb82 } /* Name.Variable.Global */
.highlight .vi { color: #caeb82 } /* Name.Variable.Instance */
.highlight .il { color: #e5786d } /* Literal.Number.Integer.Long */

.gutter{
    background-color: black;
    color: #857b6f;
}

.post > .highlight .lineno {
    display:inline-block;
    padding: 0 5px;
    border-right:1px solid #ccc;
}

.post > .highlight pre code {
    display: block;
    white-space: pre;
    overflow-x: auto;
    word-wrap: normal;
}

/* To display a "Command Line" to be typed by user */
code code.command {
    display: inline-block;
    font-family: monospace;
    border: 1px solid #606085;
    width: 95%;
    padding: 2mm 1em;
}
/* To highlight arguments that user should adapt */
code.command > i {
    font-style: italic;
    color: #40505A;
}

/* ********** Table for a list of man pages ********** */
table.manlist {
    border: 1px solid black;
    background-color: #AEAAAE;
    margin-top:    0mm;
    margin-bottom: 5mm;
    margin-left:  10mm;
    margin-right: 10mm;
    padding: 1mm;
}
table.manlist th {
    background-color: #545854;
    color: #E8E8E8;
    padding: 0.5mm 2mm;
    border: 1px inset;
}
table.manlist tr:hover {
    /* When the mouse is over a line, we highlight the whole line
       because it is very convenient for reading */
    background-color: #AECAAE;
}
table.manlist td {
    color: #000000;
}
table.manlist td.name {
    font-family: monospace;
    width: 1px;     /* This prevents the column from stretching */
}
table.manlist td.name a {
    display: inline-block;
    width: 100%;
}
table.manlist td.section {
    text-align: center;
    width: 1px;     /* This prevents the column from stretching */
}
table.manlist a {
    color: #000040;
}

/* main content */
article {padding: 1em}

/*
 * size specific styles
 */

/* large screens. size: 64 * 2 + width of the wrapper (800) == 928 + margin */
@media screen and (min-width: 940px) {

    /* menu as a vertical dock */
    aside {
        position: fixed;
        right: 0;
        top: 0;
        width: 64px;
    }

    nav.menu li#dock {background-image: url(/img/dock_dock.png)}
    nav.menu li#home {background-image: url(/img/dock_home.png)}
    nav.menu li#themes {background-image: url(/img/dock_themes.png)}

    nav.menu {padding: 0}
    nav.menu {background-color: #ddddff}

    nav.menu ul {
        padding: 0;
        margin: 0;
        list-style:none;
    }

    nav.menu li {
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline;
    }

    nav.menu a {
        padding: 3px 12px;
        text-decoration: none;
        color: #999;
        line-height: 100%;
    }

    nav.menu a:hover {color: #BBB}

    nav.menu form {display: inline}

    nav.menu .current a {color: #fff}

    nav.menu li {
        display: block;
        width: 64px;
        height: 64px;
        border: 0;
        padding:0;
    }

    nav.menu li a {
        display: block;
        width: 64px;
        height: 64px;
        border: 0;
        padding:0;
        line-height: 0;
        font-size: 0;
        color: transparent;
    }

}

/* small screens */
@media screen and (max-width: 939px) {

    #wrapper {
        width: 100%;
        margin: 0;
        border: 0;
    }

    /* menu as a horizontal, scrollable icon list */
    article {width: auto}

    nav.menu {padding: 0 1em 0 1em}

    nav.menu ul {
        border: 3px groove black;
        padding: 0;
        margin: 0;
        list-style:none;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    nav.menu li {
        float: left;
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline;
    }

    nav.menu a {
        padding: 3px 12px;
        text-decoration: none;
        color: #999;
        line-height: 100%;
    }

    nav.menu a:hover {color: #BBB}
    nav.menu form {display: inline}
    nav.menu .current a {color: #fff}

    nav.menu li {
        display: block;
        width: 64px;
        height: 64px;
        border: 0;
        padding:0;
    }

    nav.menu li a {
        display: block;
        width: 64px;
        height: 64px;
        border: 0;
        padding:0;
        line-height: 0;
        font-size: 0;
        color: transparent;
    }

    nav.menu li#dock {display: none}
    nav.menu li#home {background-image: url(/img/prefs_home.png)}
    nav.menu li#themes {background-image: url(/img/prefs_themes.png})}
    .highlight {
        padding: 0;
        margin: 0;
    }
}

/* very small - usually mobile phone screens */
@media screen and (max-width: 600px) {
	body { background-image: url('/img/reimu_mobile.jpg');
	header h1 a {font-size: 1.5em}
}
@media (prefers-color-scheme: dark) {
	body {
		background-image: url('/img/yukari.jpg');
		background-position: 35% 35%;
		background-color: black;
	}
}