/* START OF /css/your-domain.css */

/* --- Basic Resets & Defaults --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif; /* Basic sans-serif font */
    font-size: 14px;        /* Base font size */
    line-height: 1.6;
    color: #202122;         /* Standard text color (like MediaWiki) */
    background-color: #f8f9fa; /* Light background for the page */
}

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

a:hover {
    text-decoration: underline;
}

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

img {
    max-width: 100%;
    height: auto;
    border: 0; /* Remove default border on linked images */
}

ul, ol {
    margin-left: 1.6em; /* Standard indentation for lists */
    margin-bottom: 0.8em;
}

li {
    margin-bottom: 0.4em;
}

p {
    margin-bottom: 0.8em;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #a2a9b1; /* Light border below headings */
    font-weight: normal;
    line-height: 1.3;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; } /* Often used for TOC */
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; font-weight: bold; border-bottom: none; } /* Used in sidebar */
h6 { font-size: 1em; font-weight: bold; border-bottom: none; }

b, strong {
    font-weight: bold;
}

/* --- Layout Structure --- */
#page-container {
    max-width: 1200px;
    margin: 10px auto;
    background-color: #ffffff; /* White content background */
    border: 1px solid #a7d7f9; /* Light blue border, like Vector */
    overflow: hidden; /* Contains floats */
}

#site-header {
    background-color: #f6f6f6; /* Light grey header */
    padding: 0.5em 1em;
    border-bottom: 1px solid #a7d7f9;
}

#site-header .logo {
    font-size: 1.6em;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

/* Main content area wrapper (implicit) */
/* #content is the primary container */
/* #panel is the sidebar/tools section */

/* Simulate a two-column layout (content left, panel right) */
/* This assumes #panel logically follows #content in importance, but might be visually placed elsewhere */
/* Given HTML structure, #panel appears *after* #content */

#content {
    padding: 1.5em;
    /* If #panel floats right, add margin */
    /* margin-right: 180px; */
}

#panel {
    padding: 1em;
    font-size: 0.9em;
    background-color: #f6f6f6; /* Sidebar background */
    border-top: 1px solid #a7d7f9; /* Separator if below content */
    /* Or float right: */
    /* float: right; */
    /* width: 160px; */
    /* border-left: 1px solid #a7d7f9; */
    /* border-top: none; */
    /* margin: 1.5em 1.5em 1.5em 0; */
}

#head { /* Contains the tabs like 'Details' */
    border-bottom: 1px solid #a7d7f9;
    padding: 0 1em;
    min-height: 2.5em; /* Ensure space for tabs */
    /* If #panel floats right, add margin */
    /* margin-right: 180px; */
}

#footer {
    clear: both; /* Ensure it's below floated elements if any */
    padding: 1em;
    border-top: 1px solid #a7d7f9;
    background-color: #f6f6f6;
    text-align: center;
    font-size: 0.85em;
    color: #555;
}

/* --- Specific Components --- */

/* Breadcrumbs */
.catlinks {
    font-size: 0.9em;
    padding: 0.5em 1.5em;
    background-color: #f6f6f6;
    border-bottom: 1px solid #a7d7f9;
    margin-bottom: 1em; /* Space below breadcrumbs */
}

.catlinks .bchead {
    font-weight: bold;
}
.catlinks bdi {
    /* BDI tag used for bidirectional text isolation, usually no visual style needed */
    display: inline-block;
}

/* Main Content Area */
#bodyContent {
    /* Specific styles for the main wiki-like content */
}

#bodyContent h1, #bodyContent h2 {
    margin-top: 1.2em;
}
#bodyContent h1.sectionedit1,
#bodyContent h2.sectionedit2 {
   /* Styles for headings potentially linked to editing */
}

#bodyContent .level1, #bodyContent .level2 {
    /* Spacing or styling for content blocks */
    padding-left: 0.5em; /* Slight indent for structured content */
}

#bodyContent ul, #bodyContent ol {
    /* Ensure list styles apply within bodyContent */
    list-style: disc;
}
#bodyContent ul ul, #bodyContent ol ol {
    list-style: circle;
}
#bodyContent ul ul ul, #bodyContent ol ol ol {
    list-style: square;
}

/* Specific list types (like related words, search results) */
#bodyContent .level2 li.items,
#bodyContent .level2 li.popular-item {
    list-style: none;
    display: inline-block; /* Arrange horizontally */
    margin-right: 15px;
    margin-bottom: 8px;
    padding: 3px 8px;
    background-color: #e9e9e9; /* Light background for items */
    border-radius: 3px;
}
#bodyContent .level2 li.items a,
#bodyContent .level2 li.popular-item a {
    text-decoration: none;
}
#bodyContent .level2 li.items a:hover,
#bodyContent .level2 li.popular-item a:hover {
    background-color: #dcdcdc; /* Hover effect */
}

/* ciyu.html specific definition links */
#bodyContent .level2 p b a {
    /* Style for the main term link in wen.html and pinyin.html */
    font-size: 1.1em;
}

/* Links within definitions (ciyu.html) */
#bodyContent .level2 a {
    /* General links inside content */
}

/* Table of Contents */
#dw__toc {
    border: 1px solid #a2a9b1;
    background-color: #f8f8f8;
    padding: 10px 15px;
    margin-bottom: 1.5em;
    font-size: 0.95em;
    max-width: 350px; /* Limit width */
    /* Often floated right */
    /* float: right; */
    /* margin-left: 1em; */
}
#dw__toc h3 { /* TOC Title */
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: none;
    font-size: 1.1em;
    text-align: center;
    font-weight: bold;
}
#dw__toc ul.toc {
    list-style: none;
    margin-left: 0; /* Remove default indent */
}
#dw__toc li {
    list-style: none;
    margin-bottom: 5px;
    line-height: 1.4;
}
#dw__toc .li { /* Wrapper div inside li */
    padding-left: 0.5em;
}
#dw__toc ul ul .li {
    padding-left: 1.5em; /* Indent level 2 */
}
#dw__toc ul ul ul .li {
    padding-left: 2.5em; /* Indent level 3 */
}
#dw__toc a {
    text-decoration: none;
}
#dw__toc a:hover {
    text-decoration: underline;
}

/* Tabs in #head */
#left-navigation {
    /* Container for tabs */
}
#p-namespaces { /* vectorTabs class */
    margin-top: 0.5em;
}
#p-namespaces ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    position: relative;
    bottom: -1px; /* Align with content border */
}
#p-namespaces li {
    margin: 0 2px 0 0;
    padding: 0;
    border: 1px solid #a7d7f9;
    border-bottom: none;
    background-color: #f6f6f6; /* 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: #e9e9e9;
}
#p-namespaces li.selected {
    background-color: #ffffff; /* Selected tab matches content bg */
    border-bottom: 1px solid #ffffff; /* Hide bottom border */
}
#p-namespaces li.selected a {
    color: #202122; /* Text color for selected tab */
    font-weight: bold;
}

/* Sidebar/Panel (#panel) */
#p-logo {
    text-align: center;
    margin-bottom: 1em;
}
#p-logo a {
    display: inline-block;
    width: 135px; /* Standard Vector logo size */
    height: 135px;
    background-size: contain;
    background-repeat: no-repeat;
    text-indent: -9999px; /* Hide link text if image is bg */
    overflow: hidden;
}

#panel .portal { /* Sections like "Tools" */
    margin-bottom: 1em;
}
#panel .portal h5 { /* Tool section titles */
    padding-bottom: 3px;
    margin-bottom: 8px;
    border-bottom: 1px solid #a7d7f9;
}
#panel .portal .body {
    /* Wrapper for portal content */
}
#panel .portal ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#panel .portal li {
    margin-bottom: 5px;
    padding-left: 10px; /* Indent tool links slightly */
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAeSURBVBhXY/j//z8DJYBxGJMAowQjAwMjAsYQyQEAdXgCE9/FpHYAAAAASUVORK5CYII=") no-repeat 0 0.5em; /* Simple bullet */
}
#panel .portal li a {
    text-decoration: none;
}

/* Footer */
#footer-info {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block; /* Center the list items if needed */
}
#footer-info li {
    display: inline; /* Display items inline */
    margin: 0 10px;
}
#footer-info-copyright .license bdi {
    font-weight: bold; /* Make domain/site name bold */
}

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

.noprint {
    /* Styles applied by @media print */
}

/* --- Print Styles --- */
@media print {
    body {
        background-color: #fff;
        color: #000;
        font-size: 10pt;
    }
    #page-container {
        border: none;
        margin: 0;
        max-width: 100%;
    }
    .noprint, #site-header, #panel, #head, #footer, #dw__toc h3.toggle {
        display: none !important; /* Hide non-essential elements */
    }
    #content {
        padding: 0;
        margin: 0; /* Use full width */
    }
    a {
        color: #000;
        text-decoration: underline;
    }
    /* Show URL for external links in print */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #555;
    }
    /* Avoid page breaks inside common elements */
    h1, h2, h3, h4, h5, h6, p, ul, ol {
        page-break-inside: avoid;
    }
    li {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important; /* Ensure images don't overflow */
        page-break-inside: avoid;
    }
    #dw__toc { /* Make TOC printable */
        display: block;
        border: 1px solid #ccc;
        max-width: 100%;
        float: none;
        margin: 1em 0;
        font-size: 9pt;
        background-color: #fff;
    }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    body {
        font-size: 13px;
    }
    #page-container {
        margin: 0;
        border: none;
    }
    /* Stack layout or simplify */
    #panel {
        /* Example: Stack below content */
        float: none;
        width: auto;
        margin: 0;
        border-left: none;
        border-top: 1px solid #a7d7f9;
    }
    #content, #head {
        /* Remove margins if panel is no longer floated */
         margin-right: 0;
         padding: 1em;
    }
     #site-header .logo {
        font-size: 1.4em;
    }
    #p-logo a {
        width: 100px;
        height: 100px;
    }
    #dw__toc {
        float: none;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
    /* Stack list items if needed */
    #bodyContent .level2 li.items,
    #bodyContent .level2 li.popular-item {
        display: block; /* Stack items vertically */
        margin-right: 0;
        text-align: center;
    }
    #p-namespaces ul {
        flex-wrap: wrap; /* Allow tabs to wrap */
    }
    #p-namespaces li {
        margin-bottom: 2px; /* Space if wrapped */
    }
    #footer-info li {
        display: block; /* Stack footer items */
        margin: 5px 0;
    }
}

/* END OF /css/your-domain.css */