/*
 * Stylesheet for the <?php echo $title1;?> site
 * Generated based on HTML structure of wen.html, index.html, ciyu.html, pinyin.html
 * Inspired by DokuWiki/MediaWiki "Vector" theme conventions
 */

/* === Basic HTML elements === */
body {
    font-family: sans-serif; /* A common web font */
    line-height: 1.5;
    margin: 0;
    padding: 0;
    color: #333; /* Default text color */
    background-color: #f8f8f8; /* Light background */
}

a {
    color: #0066cc; /* Standard link blue */
    text-decoration: none; /* No underline by default */
}

a:hover {
    text-decoration: underline; /* Underline on hover */
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-weight: normal;
    color: #000; /* Black headings */
}

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1.1em; }

p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

ul, ol {
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-left: 2em; /* Standard list indentation */
}

li {
    margin-bottom: 0.5em;
}

/* === Layout structure === */
#site-header {
    background-color: #f0f0f0; /* Light grey header */
    border-bottom: 1px solid #ccc;
    padding: 0.5em 1em;
    min-height: 3em; /* Example height */
    position: relative; /* Needed for absolute positioning inside if any */
}

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

#page-container {
    width: 960px; /* Fixed or max-width */
    margin: 0 auto; /* Center the container */
    padding: 1em;
    position: relative; /* Needed for floated elements */
    box-sizing: border-box;
}

#content {
    /* Assuming a main content area floated left, with a sidebar floated right */
    float: left;
    width: 70%; /* Example width */
    margin-right: 1em; /* Space between content and panel */
    background-color: #fff; /* White background for content */
    border: 1px solid #ccc;
    padding: 1em;
    box-sizing: border-box;
}

#panel {
    /* Sidebar/panel floated right */
    float: right;
    width: 25%; /* Example width */
    background-color: #f9f9f9; /* Slightly darker than body */
    border: 1px solid #ccc;
    padding: 1em;
    box-sizing: border-box;
}

/* Clear floats after the main content and panel */
#page-container::after,
.clearer::after {
    content: "";
    display: table;
    clear: both;
}

/* Print styles - hide elements with noprint */
@media print {
    .noprint {
        display: none !important;
    }
}

/* Utility classes */
.clearer {
    clear: both;
    height: 0; /* Prevent adding extra space */
    font-size: 1px; /* Small font size for older browser float clearing hacks */
    line-height: 0; /* Zero line-height */
}

.hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* === DokuWiki/MediaWiki inspired elements === */
.skin-vector {
    /* Base styles that might be applied by the skin class */
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* More modern sans-serif stack */
    background-color: #f8f9fa; /* Lighter background */
    color: #202122; /* Darker text */
}

#bodyContent.dokuwiki {
    /* Specific styling for the main content area inside bodyContent */
    /* Could add padding or specific font sizes here */
}

.catlinks.noprint {
    margin-bottom: 1em;
    font-size: 0.9em;
    color: #54595d;
}

.catlinks a {
    color: #3366cc;
}

.catlinks span {
    margin-right: 0.5em;
}

.catlinks span.home::after,
.catlinks bdi::after {
    content: " » "; /* Separator */
    margin-left: 0.5em;
    color: #54595d;
}

/* Table of Contents (TOC) */
#dw__toc.dw__toc {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    /* Often floated alongside content or positioned fixed */
    /* Example: float: left; width: 25%; margin-right: 1em; */
    /* The HTML places it *within* the main content area, so margin-bottom is appropriate */
}

#dw__toc h3.toggle {
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 0.5em 0;
    cursor: pointer; /* Indicates it's clickable */
    /* Optional: add a background or border */
}

#dw__toc .toc {
    list-style: none; /* No default list markers */
    padding: 0;
    margin: 0;
}

#dw__toc .toc .level1 {
    /* Top level list items */
    margin-left: 0;
    font-weight: bold;
}

#dw__toc .toc .level2 {
    /* Second level list items */
    margin-left: 1.5em; /* Indent */
    font-weight: normal;
}

#dw__toc .toc .level3 { /* Assuming there could be more levels */
     margin-left: 3em;
     font-weight: normal;
}

#dw__toc .toc .li {
    margin: 0.2em 0;
}

#dw__toc a {
    text-decoration: none;
    color: #0066cc;
}

#dw__toc a:hover {
    text-decoration: underline;
}


/* Headings with sectionedit classes */
h1.sectionedit1,
h2.sectionedit2 {
    /* Add specific styles if needed, though standard h1/h2 rules often suffice */
    border-bottom: 1px solid #a2a9b1; /* Common wiki style */
    padding-bottom: 0.2em;
    margin-bottom: 0.8em;
}

/* Specific List Item Styles (from ciyu.html and index.html) */
.popular-item,
.items {
    display: inline-block; /* Arrange items horizontally */
    margin: 0.3em; /* Space between items */
    padding: 0.5em 1em; /* Padding inside item */
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    border-radius: 3px; /* Slightly rounded corners */
    font-size: 0.9em;
}

.popular-item a,
.items a {
    color: #3366cc;
    text-decoration: none;
}

.popular-item:hover,
.items:hover {
    background-color: #e9ecef; /* Hover effect */
    text-decoration: none; /* Prevent underline on hover of the container */
}

.popular-item:hover a,
.items:hover a {
     text-decoration: underline; /* Underline link on container hover */
}


/* Panel Elements */
#panel h5 {
    font-size: 1.1em;
    margin-top: 0;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.3em;
    margin-bottom: 0.8em;
}

#panel .portal .body ul {
    list-style: none; /* No default markers */
    padding: 0;
    margin: 0;
}

#panel .portal .body li {
    margin-bottom: 0.5em;
}

#panel .portal a {
    text-decoration: none;
    color: #3366cc;
}

#panel .portal a:hover {
    text-decoration: underline;
}

/* Footer */
#footer.noprint {
    clear: both; /* Ensure it's below floated content */
    border-top: 1px solid #ccc;
    padding: 1em;
    margin-top: 2em;
    font-size: 0.9em;
    color: #54595d;
    text-align: center; /* Center footer text */
}

#footer-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Allow ul to be centered if width is less than footer */
}

#footer-info li {
    display: inline; /* Arrange items horizontally */
    margin-right: 1em; /* Space between items */
    /* Could add a separator like: border-right: 1px solid #ccc; */
}

#footer-info li:last-child {
    margin-right: 0;
    border-right: none;
}

#footer-info a {
    color: #54595d;
}

#footer-info a:hover {
    text-decoration: underline;
}

#footer .license {
    margin-top: 0.5em;
    font-weight: bold;
}

/* Specific styles for the image in ciyu.html */
#bodyContent img {
    max-width: 100%; /* Prevent images from overflowing their container */
    height: auto;
    margin: 0.5em 0;
    display: block; /* Put image on its own line */
}

/* Styles for the 'mulu' ID - Note: Using the same ID on multiple elements is invalid HTML.
   Styling based on this ID is unpredictable and should be avoided in favour of classes or element types.
   However, if styling *was* intended via this ID, the rules below are how you'd target it,
   but they would apply to *all* elements sharing this ID, which is not standard practice.
   It's more likely the ID was added inadvertently or for a different purpose (like JS).
   The existing rules targeting specific elements/classes are sufficient.
*/
/*
#gmsmesd, #haiou118, #zqxb {
    // Potential shared styles if the ID was used correctly or intended for grouping
}
*/