/* ==========================================================================
   Sewers Help System — DokuWiki Farm Template Port
   Matches the DokuWiki "farm" template visual appearance
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */

html {
    overflow-x: auto;
    overflow-y: scroll;
}

html,
body {
    color: #333;
    background: #fbfaf9;
    margin: 0;
    padding: 0;
}

body {
    font: normal 87.5%/1.4 Arial, sans-serif;
    /* 87.5% of 16px = 14px base */
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Headings
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    padding: 0;
    line-height: 1.2;
}

h1 { font-size: 2em;    margin: 0 0 0.444em; }
h2 { font-size: 1.5em;  margin: 0 0 0.666em; }
h3 { font-size: 1.125em; margin: 0 0 0.888em; }
h4 { font-size: 1em;    margin: 0 0 1.0em; }
h5 { font-size: .875em; margin: 0 0 1.1428em; }
h6 { font-size: .75em;  margin: 0 0 1.333em; }


/* --------------------------------------------------------------------------
   Basic Margins & Padding
   -------------------------------------------------------------------------- */

p, ul, ol, dl, pre, table, hr,
blockquote, figure, details,
fieldset, address {
    margin: 0 0 1.4em 0;
    padding: 0;
}

div {
    margin: 0;
    padding: 0;
}


/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

ul, ol {
    padding: 0 0 0 1.5em;
}

li, dd {
    padding: 0;
    margin: 0 0 0 1.5em;
}

dt {
    font-weight: bold;
    margin: 0;
    padding: 0;
}

li ul, li ol, li dl,
dl ul, dl ol, dl dl {
    margin-bottom: 0;
    padding: 0;
}

li li {
    font-size: 100%;
}

ul             { list-style: square outside; }
ol             { list-style: decimal outside; }
ol ol          { list-style-type: lower-alpha; }
ol ol ol       { list-style-type: upper-roman; }
ol ol ol ol    { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }


/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table {
    border-collapse: collapse;
    empty-cells: show;
    border-spacing: 0;
    border: 1px solid #ccc;
}

caption {
    caption-side: top;
    text-align: left;
    padding: 0;
    margin: 0 0 .35em;
    line-height: 1.2;
}

th, td {
    padding: .3em .5em;
    margin: 0;
    vertical-align: top;
    border: 1px solid #ccc;
}

th {
    font-weight: bold;
    background-color: #eee;
    text-align: left;
}

/* Overflow wrapper for wide tables */
.table-wrap {
    overflow-x: auto;
    margin-bottom: 1.4em;
}

.table-wrap table {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a {
    outline: none;
}

a:link,
a:visited {
    text-decoration: none;
    color: #2b73b7;
}

a:link:hover,
a:visited:hover,
a:link:focus,
a:visited:focus,
a:link:active,
a:visited:active {
    text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Images & Media
   -------------------------------------------------------------------------- */

img {
    border-width: 0;
    vertical-align: middle;
    color: #666;
    background-color: transparent;
    font-style: italic;
    max-width: 100%;
    height: auto;
}


/* --------------------------------------------------------------------------
   Horizontal Rule
   -------------------------------------------------------------------------- */

hr {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff;
    border-left: 0;
    border-right: 0;
    height: 0;
    text-align: center;
    clear: both;
}


/* --------------------------------------------------------------------------
   Code & Preformatted
   -------------------------------------------------------------------------- */

pre, code, samp, kbd {
    font-family: Consolas, "Andale Mono WT", "Andale Mono",
                 "Bitstream Vera Sans Mono", "Nimbus Mono L",
                 Monaco, "Courier New", monospace;
    font-size: 1em;
    direction: ltr;
    text-align: left;
    background-color: #fbfaf9;
    color: #333;
    box-shadow: inset 0 0 .3em #ccc;
    border-radius: 2px;
}

code {
    padding: .1em .3em;
}

pre {
    overflow: auto;
    word-wrap: normal;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: inset 0 0 .5em #ccc;
    padding: .7em 1em;
}

pre code {
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}


/* --------------------------------------------------------------------------
   Blockquote
   -------------------------------------------------------------------------- */

blockquote {
    padding: 0 .5em;
    border: solid #ccc;
    border-width: 0 0 0 .25em;
}


/* --------------------------------------------------------------------------
   Misc Inline
   -------------------------------------------------------------------------- */

abbr, acronym {
    cursor: help;
    border-bottom: 1px dotted;
    text-decoration: none;
    font-style: normal;
}

mark {
    background-color: #ff9;
    color: inherit;
}

sub, sup {
    font-size: .8em;
    line-height: 1;
}

sub { vertical-align: sub; }
sup { vertical-align: super; }
small { font-size: .8em; }


/* ==========================================================================
   Layout Structure
   ========================================================================== */

/* --------------------------------------------------------------------------
   Site Container
   -------------------------------------------------------------------------- */

#dokuwiki__site {
    margin: 0 auto;
    max-width: 75em;
}

#dokuwiki__site > .site {
    padding: 0 .5em;
}


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

#dokuwiki__header {
    width: 100%;
    padding: 2em 0 1.5em;
}

#dokuwiki__header .headings {
    margin-bottom: 1.5em;
}

#dokuwiki__header .logo {
    margin: 0;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.2;
}

#dokuwiki__header .logo a {
    text-decoration: none;
    color: #333;
    background-color: inherit;
}

#dokuwiki__header .logo a:hover {
    text-decoration: none;
    color: #2b73b7;
}


/* --------------------------------------------------------------------------
   Wrapper (sidebar + content)
   -------------------------------------------------------------------------- */

.wrapper {
    position: relative;
    margin-bottom: 1.4em;
}

/* Clearfix */
.group::after {
    content: "";
    display: table;
    clear: both;
}


/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */

#dokuwiki__aside {
    width: 16em;
    float: left;
    position: relative;
    display: block;
}

#dokuwiki__aside > .pad {
    margin: 0 1.5em 0 0;
}

/* Sidebar typography: condensed */
.aside {
    font-size: 0.875em;
    overflow: hidden;
    word-wrap: break-word;
}

.aside h1 { font-size: 1.714em; margin-bottom: .292em; }
.aside h2 { margin-bottom: .333em; }
.aside h3 { margin-bottom: .444em; }
.aside h4 { margin-bottom: .5em; font-size: 1em; font-weight: bold; }
.aside h5 { margin-bottom: .5714em; }

.aside p,
.aside ul,
.aside ol,
.aside dl,
.aside pre,
.aside table,
.aside fieldset,
.aside hr,
.aside blockquote,
.aside address {
    margin-bottom: .7em;
}

.aside ul,
.aside ol {
    padding-left: .5em;
}

.aside li ul,
.aside li ol {
    margin-bottom: 0;
    padding: 0;
}

.aside a:link,
.aside a:visited {
    color: #2b73b7;
    background-color: inherit;
}

/* Sidebar toggle heading (hidden on desktop) */
#dokuwiki__aside h3.toggle {
    display: none;
}

/* Sidebar section groups */
.sidebar-section {
    margin-bottom: .7em;
}

.sidebar-section h4 {
    margin-bottom: .3em;
    font-size: .9em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #666;
}

.sidebar-section h4 a {
    color: #666;
}

.sidebar-section h4 a:hover {
    color: #2b73b7;
}

/* Sidebar nav lists */
.aside ul.idx {
    list-style: none;
    padding-left: 0;
    margin: 0 0 .7em;
}

.aside ul.idx li {
    margin: 0;
    padding: .15em 0;
}

.aside ul.idx ul {
    list-style: none;
    padding-left: 1em;
    margin: .1em 0 0;
}

.aside ul.idx ul li {
    padding: .1em 0;
}

/* Current page highlight */
a.curid {
    font-weight: bold;
    color: #333 !important;
}


/* --------------------------------------------------------------------------
   Content Area
   -------------------------------------------------------------------------- */

.showSidebar #dokuwiki__content {
    float: right;
    margin-left: -16em;
    width: 100%;
}

.showSidebar #dokuwiki__content > .pad {
    margin-left: 16em;
}

/* The page box */
.page {
    clear: both;
    background: #fff;
    color: inherit;
    border: 1px solid #eee;
    box-shadow: 0 0 .5em #999;
    border-radius: 2px;
    padding: 1.556em 2em 2em;
    margin-bottom: .5em;
    overflow-x: clip;
    overflow-y: visible;
    word-wrap: break-word;
}

/* Content-area list bullet colors (DokuWiki style) */
.page ul li { color: #999; }
.page ol li { color: #666; }
.page li > *:first-child,
.page li > a,
.page li > span {
    color: #333;
}

/* Content images */
.page img {
    margin: .2em 0;
}

.page img.medialeft  { margin: .2em 1em .2em 0; float: left; }
.page img.mediaright { margin: .2em 0 .2em 1em; float: right; }
.page img.mediacenter { margin: .2em auto; display: block; }


/* ==========================================================================
   Responsive — Tablet (<=800px)
   ========================================================================== */

@media only screen and (max-width: 800px) {

    /* Sidebar: full width above content */
    #dokuwiki__aside {
        width: 100%;
        float: none;
        margin-bottom: 1.5em;
    }

    #dokuwiki__aside > .pad {
        margin: 0 0 .5em;
        /* style sidebar like .page on tablet */
        background: #fff;
        color: inherit;
        border: 1px solid #eee;
        box-shadow: 0 0 .5em #999;
        border-radius: 2px;
        padding: 1em;
        margin-bottom: .5em;
    }

    /* Show the sidebar toggle heading on tablet */
    #dokuwiki__aside h3.toggle {
        display: block;
        font-size: 1em;
        padding: 0;
        margin-bottom: .5em;
        cursor: pointer;
        color: #666;
    }

    /* Content: remove sidebar offset */
    .showSidebar #dokuwiki__content {
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .showSidebar #dokuwiki__content > .pad {
        margin-left: 0;
    }

    /* Smaller page padding */
    .page {
        padding: 1em;
    }
}


/* ==========================================================================
   Responsive — Phone (<=480px)
   ========================================================================== */

@media only screen and (max-width: 480px) {

    body {
        font-size: 100%;
    }

    #dokuwiki__site {
        max-width: 100%;
    }

    #dokuwiki__site > .site {
        padding: 0 .5em;
    }

    #dokuwiki__aside {
        margin-bottom: 0;
    }

    #dokuwiki__header {
        padding: .5em 0;
    }

    #dokuwiki__header .headings {
        margin-bottom: .5em;
    }

    /* Even more compact padding */
    #dokuwiki__aside > .pad,
    .page {
        padding: .5em;
    }
}


/* ==========================================================================
   Utility: Accessibility
   ========================================================================== */

.a11y {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    margin: -1px;
}