/* LAYOUT: Structure & mechanics only (no skin) ======================================== */ /* Header/logo horizontal layout */ #logodiv { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 20px; max-width: 1200px; margin: 0 auto; } /* Menubar sits under header NOT in menus.css */ #menubar { position: relative; /* allows submenu stacking references */ z-index: 10; } /* Page wrapper: centered, 3-column flex */ #layoutwrapper { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; gap: 20px; align-items: flex-start; min-height: calc(100vh - 200px); /* leave room for header/footer */ overflow: visible; } /* Columns */ #leftcolumn { flex: 0 0 220px; border-radius: 8px; height: fit-content; position: sticky; top: 20px; /* distance from viewport top when sticky */ overflow: visible; } #maincontent { flex: 1 1 auto; min-width: 0; /* prevent overflow from long URLs/content */ } #rightcolumn { flex: 0 0 300px; min-width: 260px; display: flex; flex-direction: column; gap: 20px; } /* Responsive: stack columns on small screens */ @media (max-width: 900px) { #layoutwrapper { flex-direction: column; } #leftcolumn, #maincontent, #rightcolumn { flex: 1 1 auto; width: 100%; position: static; top: auto; } } /* Right column widgets layout */ .rc-columns { width: 100%; border-radius: 8px; } /* Hiding one column example: */ .no-leftcol #leftcolumn { display: none; } .no-rightcol #rightcolumn { display: none; } /* Footer layout (structure only) ========================== */ /* Footer container */ #site-footer .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 20px 24px; /* accent bar handles top spacing */ } /* Accent bar spacing */ #site-footer .footer-accent { margin: 0 -20px 20px; /* bleed to container edges, then 20px gap below */ } /* Footer 4-block grid */ #site-footer .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 24px; } @media (max-width: 900px) { #site-footer .footer-grid { grid-template-columns: 1fr; } } /* Copyright bar sits after the grid; no additional layout needed */ ========================== */ /* Back to Top (floating and inline variants) */ /* Floating button (optional; comment out if unused) */ #back2top { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: inline-block; padding: 6px 10px; font-size: 13px; line-height: 1; font-weight: 600; border-radius: 16px; /* visual skin (colors) are typically in theme.css; kept here for self-containment If you prefer, move background/border/color to theme.css and leave position here. */ background: #04304B; color: #ffffff; border: 1px solid #04304B; text-decoration: none; } /* Inline version placed in a footer column (e.g., Contact Us) */ #site-footer .back2top-inline { text-align: right; margin-top: 20px; } #back2top-inline { display: inline-block; padding: 6px 10px; font-size: 13px; line-height: 1; font-weight: 600; border-radius: 16px; background: #04304B; color: #ffffff !important; border: 1px solid #04304B; text-decoration: none; } /* Utilities (layout helpers) ====================== */ /* Clearfix helper */ .clearfix::after { content: ""; display: table; clear: both; } /* Red rule */ .hr-red { height: 4px; background-color: var(--mo-red); border: 0; margin: 12px 0; } .hr-red.tight-top { margin: 10px 0 0 0; } /* Last updated block */ .last-updated .lu-title { text-align: right; margin: 0; } .last-updated .lu-line { text-align: right; margin: 0; } .last-updated .lu-updated-date { font-weight: bold; letter-spacing: 0.2em; } /* Global float utilities */ .img-right, .float-right, img.align-right { float: right; margin: 0 0 8px 12px; /* left margin (12px) keeps text away from the icon */ } /* No-float reset */ .no-float { float: none !important; margin: 0 !important; } /* Tighter right offset for icons/images that should hug the edge */ /* Tight right inset on the image itself (keep modest so it doesn't push text too much) */ .tight-right { margin-right: 6px; /* start at 6px; avoid 30px which visibly shifts centering */ } /* Ensure the parent can contain floats if needed */ .clearfix::after { content: ""; display: table; clear: both; } /* Mobile stacking: optional */ @media (max-width: 900px) { .img-right, .float-right, img.align-right { float: none; display: block; margin: 0 auto 12px auto; /* center image above text on small screens */ } } /* Print layout (no skin) ====================== */ @media print { body { margin: 190px 0 0 0; padding: 0; } #layoutwrapper { min-width: 100%; display: block; background-image: none !important; overflow: visible !important; } #layoutwrapper div { width: auto; float: none; border: 0; padding: 0 !important; margin: 12pt 0 !important; font-size: 90%; } #layoutwrapper p { line-height: normal; margin: auto; } span.dropcap { float: none; font-size: 1em; margin: auto; padding: 0; border: 0; display: inline; height: auto; line-height: normal; } ul.content, ol.content { margin: 0; padding-left: 1em; list-style: square; } .top { margin-top: 20pt; } .clearfloat { clear: none; display: inline; } /* Footer in print: simplify/stack */ #site-footer .footer-accent { display: none; } #site-footer .footer-grid { display: none; } } /* may not need below LP */ ,last-modified-display { text-align: center; }