/* --- START OF FILE /css/yourdomain.css --- */

/* General Resets & Body Styles */
html {
    font-size: 100%; /* Base font size */
    line-height: 1.5;
}

body {
    font-family: sans-serif; /* Basic readable font */
    margin: 0;
    padding: 0;
    background-color: #f9f9f9; /* Light background */
    color: #202122; /* Default text color */
}

* {
    box-sizing: border-box;
}

a {
    color: #0645ad; /* Standard link blue */
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #0b0080; /* Visited link color */
}

p {
    margin: 0.5em 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 0.5em 0;
    padding: 0;
    font-weight: normal;
    border-bottom: 1px solid #a2a9b1;
    line-height: 1.3;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; border-bottom: none; font-weight: bold;} /* TOC heading style */
h4 { font-size: 1.1em; }
h5 { font-size: 1em; font-weight: bold; border-bottom: none; } /* Panel heading style */

ul, ol {
    margin: 0.3em 0 0 1.6em;
    padding: 0;
}

li {
    margin-bottom: 0.2em;
}

img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc; /* Simple border for images */
    margin: 0.5em 0;
}

/* Layout Structure */
#site-header {
    background-color: #eaecf0; /* Light grey header */
    padding: 0.5em 1em;
    border-bottom: 1px solid #a2a9b1;
}

#site-header .logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #202122;
    text-decoration: none;
}
#site-header .logo:hover {
    text-decoration: none;
}

#page-container {
    max-width: 1200px; /* Limit content width */
    margin: 0 auto; /* Center the container */
    padding: 1em;
    position: relative; /* For potential absolute positioning of side elements */
}

#content {
    background-color: #ffffff; /* White background for content */
    border: 1px solid #a2a9b1;
    padding: 1em 1.5em;
    /* Margin-left to accommodate the panel if using float */
    /* margin-left: 11em; */
    /* Or use Flexbox/Grid on #page-container */
    overflow: hidden; /* Contains floats */
}

#panel {
    position: absolute; /* Position relative to #page-container */
    left: 1em; /* Align with container padding */
    top: 1em;  /* Align with container padding */
    width: 10em; /* Fixed width sidebar */
    font-size: 0.8em;
}

#head {
    /* Styles for the top/left navigation tabs area */
    position: absolute;
    top: 0; /* Adjust as needed */
    left: 11em; /* Position next to the panel */
    border-bottom: 1px solid #a2a9b1;
    z-index: 1; /* Keep above content border if overlapping */
    background-color: #f9f9f9; /* Match body background */
}

/* Adjust #content padding/margin if #head is visually significant */
#content {
    margin-top: 3em; /* Example: Give space below the #head tabs */
}


#footer {
    clear: both;
    margin-top: 2em;
    padding: 1em;
    font-size: 0.8em;
    text-align: center;
    border-top: 1px solid #a2a9b1;
    color: #54595d;
}

#footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer li {
    display: inline;
    margin: 0 0.5em;
}

/* Specific Element Styles */

/* Breadcrumbs */
.catlinks {
    font-size: 0.8em;
    margin-bottom: 1em;
    padding: 0.5em;
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 4px;
}
.catlinks .bchead {
    font-weight: bold;
}

/* Table of Contents */
#dw__toc {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 0.5em 1em;
    margin: 1em 0 1em 1em; /* Indent slightly or float */
    float: right; /* Common TOC placement */
    max-width: 300px; /* Limit width */
    font-size: 0.9em;
}
#dw__toc h3.toggle {
    cursor: pointer; /* Indicate interactivity */
    margin: 0 0 0.5em 0;
    border-bottom: 1px dotted #a2a9b1;
    padding-bottom: 0.3em;
}
#dw__toc ul.toc {
    list-style: none;
    margin: 0;
    padding: 0;
}
#dw__toc ul.toc ul { /* Nested list */
     margin-left: 1.5em;
}
#dw__toc li {
    margin-bottom: 0.3em;
}
#dw__toc .li { /* The div inside li */
    padding: 0.1em 0;
}

/* Headings in content */
#bodyContent h1.sectionedit1,
#bodyContent h2.sectionedit2 {
    margin-top: 1.5em;
    padding-bottom: 0.2em;
}
#bodyContent h1.sectionedit1:first-child,
#bodyContent h2.sectionedit2:first-child {
    margin-top: 0; /* No top margin for the very first heading */
}

/* Content Divisions (used in ciyu.html) */
.level2 {
    margin-left: 0.5em; /* Slight indent for level 2 sections */
    margin-bottom: 1em;
    overflow: hidden; /* Clear floats from list items if needed */
}

/* Lists for related terms/idioms */
.level2 li.items,
.level2 li.popular-item {
    display: inline-block; /* Display items side-by-side */
    margin-right: 1em; /* Spacing between items */
    margin-bottom: 0.5em;
    list-style: none; /* Remove bullet */
    white-space: nowrap; /* Prevent long items wrapping awkwardly */
}
.level2 ul { /* Reset margin for inline lists */
    margin-left: 0;
    padding-left: 0;
}

/* Horizontal Rule */
.hr {
    border: 0;
    border-top: 1px solid #a2a9b1;
    margin: 1.5em 0;
    height: 0;
    overflow: hidden;
}


/* Left Navigation / Head Tabs */
#left-navigation {
    /* Container style if needed */
}
#p-namespaces ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Contain floats */
    border-bottom: 1px solid #a2a9b1; /* Match content border */
    position: relative;
    bottom: -1px; /* Overlap content border */
}
#p-namespaces li {
    float: left;
    margin: 0;
    border: 1px solid #a2a9b1;
    border-bottom: none;
    margin-right: 0.2em;
    background-color: #f8f9fa; /* Tab background */
    border-radius: 4px 4px 0 0;
}
#p-namespaces li a {
    display: block;
    padding: 0.5em 1em;
    color: #0645ad;
    text-decoration: none;
}
#p-namespaces li a:hover {
    background-color: #fff;
}
#p-namespaces li#ca-nstab-main.selected {
    border-color: #a2a9b1;
    background-color: #ffffff; /* Selected tab matches content bg */
    border-bottom: 1px solid #ffffff; /* Hide bottom border */
}
#p-namespaces li#ca-nstab-main.selected a {
    color: #202122; /* Text color for selected tab */
    font-weight: bold;
}


/* Panel Styles */
#p-logo {
    margin-bottom: 1em;
}
#p-logo a {
    display: block;
    height: 100px; /* Adjust height based on actual logo */
    width: 10em;  /* Match panel width */
    background-image: url(/lib/tpl/vector/static/3rd/dokuwiki/logo.png); /* As specified in HTML */
    background-repeat: no-repeat;
    background-position: center center; /* Or top left */
    background-size: contain; /* Adjust as needed */
    text-indent: -9999px; /* Hide link text */
    overflow: hidden;
    border: 1px solid #a2a9b1; /* Optional border */
}

#p-tb { /* Portal class for Tools */
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa; /* Light bg for tool box */
    border-radius: 4px;
    overflow: hidden; /* Ensure border radius applies */
}
#p-tb h5 {
    margin: 0;
    padding: 0.5em 0.8em;
    background-color: #eaecf0; /* Slightly darker header for tool box */
    border-bottom: 1px solid #a2a9b1;
}
#p-tb .body {
    padding: 0.5em 0.8em;
}
#p-tb ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#p-tb li {
    margin-bottom: 0.4em;
}

/* Utility Classes */
.clearer {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

/* Print Styles */
@media print {
    body {
        background-color: #fff;
        color: #000;
        font-size: 10pt; /* Adjust for print */
    }
    #site-header, #panel, #head, #footer, #dw__toc, .catlinks, .noprint {
        display: none !important; /* Hide non-content elements */
    }
    #page-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    #content {
        border: none;
        padding: 0;
        margin: 0;
        background-color: #fff;
    }
    a {
        color: #000; /* Black links for print */
        text-decoration: underline;
    }
    /* Show URL after links in print */
    a[href^="http"]:after {
       content: " (" attr(href) ") ";
       font-size: 90%;
       font-style: italic;
    }
    /* Don't show URLs for internal links */
     a[href^="/"]:after {
        content: "";
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    img {
        border: none;
    }
}


/* --- END OF FILE /css/yourdomain.css --- */