/* Reset some default browser styling */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.5; /* Slightly more readable line height */
    font-family: sans-serif; /* A common default */
    background-color: #f8f8f8; /* Light grey background */
    color: #333; /* Dark grey text */
    padding-top: 50px; /* Space for fixed header if used, or just top margin */
}

/* Apply box-sizing globally for easier layout */
*, *:before, *:after {
    box-sizing: border-box;
}

/* --- Layout Structure --- */

#site-header {
    background-color: #fff; /* White header */
    border-bottom: 1px solid #ccc;
    padding: 10px 20px;
    margin-bottom: 1em;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    position: fixed; /* Common for headers */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

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

#page-container {
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Horizontal padding */
    display: flex; /* Use flexbox for main content area and sidebar */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

/* main content area */
#content {
    flex: 1; /* Grow to fill available space */
    min-width: 0; /* Prevent flex item from overflowing */
    padding-right: 20px; /* Space between content and sidebar */
}

/* sidebar */
#panel {
    flex: 0 0 250px; /* Don't grow, fixed width 250px */
    margin-left: 20px; /* Space between content and sidebar */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
    align-self: flex-start; /* Align to the top */
}

/* Specific styling for sidebar portal blocks */
#p-tb.portal {
    margin-top: 1em;
}

#p-tb.portal h5 {
    font-size: 1.1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

#panel .body ul {
    list-style: none;
    padding: 0;
}

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

#panel .body a {
    text-decoration: none;
    color: #006621; /* Dokuwiki default link color */
}

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

/* Header/Nav block within page container (placement is unclear from HTML) */
/* Assuming it might be styled as another box or part of the layout */
#head {
    /* Needs specific positioning based on desired layout */
    /* Given .left-navigation and .vectorTabs, it might be related to sidebar */
    /* For simplicity, giving it some margin here */
     margin-bottom: 1em;
}

#left-navigation {
     margin-bottom: 1em;
}

#p-namespaces.vectorTabs ul {
    list-style: none;
    padding: 0;
    display: flex; /* Arrange tabs horizontally */
    border-bottom: 1px solid #ccc;
}

#p-namespaces.vectorTabs li {
    margin: 0;
    padding: 0;
}

#p-namespaces.vectorTabs li a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
    border: 1px solid transparent; /* Placeholder border */
    border-bottom: none;
    margin-bottom: -1px; /* Pull up to overlap border */
}

#p-namespaces.vectorTabs li.selected a {
    background-color: #fff;
    border-color: #ccc;
    border-bottom-color: #fff; /* White border bottom for selected tab */
    color: #000;
    font-weight: bold;
}


#footer {
    clear: both; /* Ensure footer is below floated elements */
    margin-top: 2em;
    padding: 15px 20px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    text-align: center;
    font-size: 0.9em;
    color: #555;
}

#footer-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /* Center footer items */
    flex-wrap: wrap;
}

#footer-info li {
    margin: 0 10px;
}

#footer-info .license {
    /* Specific styling for license text if needed */
}


/* --- Content Styling --- */

#bodyContent.dokuwiki {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}

/* Breadcrumbs */
.catlinks {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px dashed #eee;
}

.catlinks .bchead {
    font-weight: bold;
}

.catlinks a {
    text-decoration: none;
    color: #006621; /* Dokuwiki default link color */
}

.catlinks a:hover {
    text-decoration: underline;
}


/* Table of Contents (TOC) */
#dw__toc.dw__toc {
    float: right; /* Often floated to the right */
    width: 200px; /* Example width */
    margin: 0 0 1em 1em; /* Margin around the TOC */
    background-color: #f9f9f9;
    border: 1px solid #aaa;
    padding: 10px;
    font-size: 0.9em;
    /* toggle class suggests JS control, CSS handles default display */
}

#dw__toc .toggle {
     cursor: pointer; /* Indicate clickability */
     margin-bottom: 5px;
}

#dw__toc ul.toc {
    list-style: none;
    padding: 0;
    margin: 0;
}

#dw__toc ul.toc ul {
    margin-left: 1em; /* Indent nested levels */
}

#dw__toc li {
    margin-bottom: 0.2em;
}

#dw__toc div.li {
    /* Wrapper div inside li, maybe for padding/margin control */
}

#dw__toc a {
    text-decoration: none;
    color: #006621; /* Dokuwiki default link color */
}

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

/* Headings */
h1, h2, h3 {
    margin: 0.8em 0 0.5em 0; /* Top/bottom margin */
    padding-bottom: 0.1em;
    line-height: 1.2;
}

h1 {
    font-size: 2em;
    border-bottom: 2px solid #eee;
}

h2 {
    font-size: 1.6em;
    border-bottom: 1px solid #eee;
}

h3 {
    font-size: 1.3em;
}

/* Section wrappers */
.level2 {
    margin-bottom: 1.5em; /* Space after a section */
}

/* Content list items (used outside TOC) */
#bodyContent li {
    margin-bottom: 0.5em;
    margin-left: 1.5em; /* Default list indentation */
    list-style: disc; /* Default bullet */
}

/* Specific list styles found in HTML */
#bodyContent li.popular-item,
#bodyContent li.items {
    display: inline-block; /* Arrange horizontally */
    margin: 0 10px 10px 0; /* Space between items */
    list-style: none; /* Remove bullets */
    margin-left: 0; /* Remove default list indentation */
}

/* Optional: Add some visual distinction to popular items/items */
#bodyContent li.popular-item a,
#bodyContent li.items a {
     display: block; /* Make the link fill the list item */
     padding: 5px 10px;
     background-color: #eee;
     border: 1px solid #ccc;
     text-decoration: none;
     color: #333;
}

#bodyContent li.popular-item a:hover,
#bodyContent li.items a:hover {
    background-color: #ddd;
    text-decoration: underline;
}


/* Images */
#bodyContent img {
    max-width: 100%; /* Prevent images from overflowing content area */
    height: auto;
    display: block; /* Remove extra space below image */
    margin: 1em 0; /* Add space around image */
}

/* Horizontal Rule */
.hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 1.5em 0;
}

/* Clearfix utility */
.clearer {
    clear: both;
    height: 0;
    overflow: hidden;
}

/* --- General Dokuwiki Classes (found in various places) --- */
.dokuwiki a {
    color: #006621; /* Standard Dokuwiki link color */
    text-decoration: none;
}

.dokuwiki a:hover {
    text-decoration: underline;
}


/* --- Print Styles --- */
@media print {
    .noprint,
    #site-header { /* Hide fixed header on print too */
        display: none !important;
    }

    body {
        padding-top: 0; /* No header space needed */
        background-color: #fff;
        color: #000;
    }

    #page-container,
    #content,
    #bodyContent.dokuwiki {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: none !important;
        border: none !important;
        box-shadow: none !important;
    }

     #panel, #head, #left-navigation, #p-namespaces, #p-tb, #dw__toc {
         display: none !important; /* Hide all sidebar/nav elements */
     }

     #footer {
         display: none !important; /* Hide footer on print */
     }

     /* Ensure links show URLs on print */
     a:after {
         content: " (" attr(href) ")";
         font-size: 90%;
     }
}

/* --- Small Screen Adjustments --- */
@media (max-width: 768px) {
    #page-container {
        flex-direction: column; /* Stack content and sidebar vertically */
        padding: 0 10px;
    }

    #content {
        padding-right: 0; /* Remove right padding */
    }

    #panel {
        flex-basis: auto; /* Allow panel to take full width */
        width: 100%;
        margin-left: 0; /* Remove left margin */
        margin-top: 1em; /* Add space above stacked panel */
    }

    #dw__toc.dw__toc {
        float: none; /* Remove float */
        width: auto; /* Allow TOC to take full width */
        margin: 1em 0; /* Add margin above/below stacked TOC */
    }

    #site-header {
        padding: 10px; /* Reduce header padding */
    }

    #site-header .logo {
        font-size: 1.5em; /* Reduce logo size */
    }
}