rather than * on each article. */ .container-component > main, .container-component main { display: block; margin: 7px 0; padding: 10px 14px; background: var(--vt-article-bg); border: 1px solid var(--vt-article-border); border-radius: 6px; } main .page-header h1, main .page-header h2, main .item-title, main .com-content-article__title { margin: 5px 0; color: var(--vt-title); font-size: 24px; font-weight: 400; line-height: 1.2; } main .page-header h1 a, main .item-title a { color: #8C8C8C; text-decoration: none; } main .page-header h1 a:visited, main .item-title a:visited { color: #96A2A6; } main .page-header h1 a:hover, main .item-title a:hover { color: #B8B8B8; } main .article-info { margin: 0 0 5px; padding: 1px 0; border-bottom: 1px solid var(--vt-rule); color: #4D575B; font-size: 12px; } main .article-info a { color: #1A1D1E; } main .article-info a:hover { color: #757575; text-decoration: underline; } /* 6. Content typography, lists, tables, blockquote -------------------------- */ main h1 { margin: 10px 0 0; color: var(--vt-heading); font-size: 26px; font-weight: 400; line-height: 1.2; } main h2 { margin: 10px 0 0; color: var(--vt-heading); font-size: 22px; font-weight: 400; line-height: 1.2; } main h3 { margin: 10px 0 0; color: #939FA4; font-size: 20px; font-weight: 400; line-height: 1.2; } main h4 { margin: 10px 0 0; color: var(--vt-text); font-size: 18px; font-weight: 400; line-height: 1.2; } main h5 { margin: 10px 0 0; color: var(--vt-text); font-size: 15px; font-weight: 400; line-height: 1.2; } main h6 { margin: 10px 0 0; color: #596469; font-size: 13px; font-weight: 400; line-height: 1.2; } main p { margin: 13px 0; } main ul { margin: 1em 0 1em 11px; padding-left: 13px; list-style-image: url("../images/postbullets.png"); } main li { margin: 3px 0 0; color: var(--vt-title); } main li ul, main li ol { margin: 0.5em 0 0.5em 11px; } /* Structural lists keep Cassiopeia's reset. */ main .nav, main .mod-menu, main .mod-list, main .list-unstyled, main .pagination, main .breadcrumb, main nav ul { margin-left: 0; padding-left: 0; list-style: none; } main table { border-collapse: collapse; margin: 1px; } main table th, main table td { padding: 2px; border: 1px dotted var(--vt-table-rule); vertical-align: top; text-align: left; } main table th { padding: 7px; text-align: center; vertical-align: middle; } blockquote { margin: 0 0 0 10px; padding: 6px 6px 6px 34px; background: #BDC4C7 url("../images/postquote.png") no-repeat left top; border: 1px dotted var(--vt-rule); color: #0D0D0D; font-style: italic; overflow: auto; } blockquote p { margin: 5px 0; } /* JComments */ #jc, .comments-list { margin-top: 25px; border-top: 1px dotted var(--vt-accent); } /* 7. Modules - card chrome -------------------------------------------------- */ /* Only the positions listed here get chrome; .moduletable covers Joomla's html5 * chrome. The gradients are paired with their PNG - see CLAUDE.md. */ :is(.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-below-top, .container-component, .container-sidebar-left, .container-sidebar-right) > .card, div.moduletable { margin: 7px 0; border: 0; border-radius: 4px; background: none; } :is(.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-below-top, .container-component, .container-sidebar-left, .container-sidebar-right) > .card > .card-header, div.moduletable > h3 { margin: 0; padding: 7px 5px; border: 1px solid var(--vt-module-border); border-bottom: none; border-radius: 4px 4px 0 0; background: url("../images/blockheader.png") repeat-x left top, linear-gradient(to bottom, #BED6E7 0%, #A5C6DE 50%, #8DB7D5 100%); color: #262626; font-size: 14px; font-weight: 700; line-height: 1.3; } :is(.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-below-top, .container-component, .container-sidebar-left, .container-sidebar-right) > .card > .card-header > * { margin: 0 5px; color: inherit; font-size: inherit; font-weight: inherit; } :is(.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b, .container-below-top, .container-component, .container-sidebar-left, .container-sidebar-right) > .card > .card-body, div.moduletable > div { padding: 5px; border: 1px solid var(--vt-module-border); border-radius: 0 0 4px 4px; background: var(--vt-module-bg); color: var(--vt-module-text); font-size: 13px; line-height: 1.75; } /* A module with no title has no .card-header - round the whole body. */ .card > .card-body:first-child { border-radius: 4px; } .card-body a { color: #757575; } .card-body a:visited { color: #9EA9AD; } .card-body a:hover { color: #A6A6A6; text-decoration: none; } .card-body ul { margin: 0; padding-left: 12px; list-style-image: url("../images/blockbullets.png"); } .card-body li { margin: 5px 0 0 10px; color: #101213; } .card-body img { border: 1px solid var(--vt-table-rule); margin: 10px; max-width: 100%; height: auto; } /* 8. Sidebar modules and sidebar menu --------------------------------------- */ :is(.container-sidebar-left, .container-sidebar-right) > .card > .card-header { padding: 10px 0; background: url("../images/vmenublockheader.png") no-repeat left top, linear-gradient(to bottom, #97BDD9 0%, #A8C9DF 20%, #97BDD9 50%, #8DB7D5 80%, #97BDD9 100%); color: #122430; font-size: 16px; } :is(.container-sidebar-left, .container-sidebar-right) > .card > .card-header > * { margin: 0 10px; } :is(.container-sidebar-left, .container-sidebar-right) > .card > .card-body { background: #FFFFFF; padding: 0; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu { margin: 0; padding: 0; list-style: none; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li { margin-top: 4px; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li:first-child { margin-top: 0; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li > a { display: block; min-height: 34px; padding: 0 15px; border-radius: 4px; color: var(--vt-heading); font-size: 13px; line-height: 34px; text-decoration: none; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li > a::before { content: url("../images/vmenuitemicon.png"); position: relative; bottom: 2px; display: inline-block; margin-right: 5px; font-size: 0; line-height: 0; vertical-align: middle; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li > a:hover { background: linear-gradient(to bottom, #BABABA 0%, #C9C9C9 20%, #BABABA 50%, #B0B0B0 80%, #BABABA 100%); color: #444D50; text-decoration: none; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li > a:hover::before { content: url("../images/vmenuhovereditemicon.png"); } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li.active > a, :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li.current > a { color: #808080; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li.active > a::before, :is(.container-sidebar-left, .container-sidebar-right) .mod-menu > li.current > a::before { content: url("../images/vmenuactiveitemicon.png"); } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu ul { margin: 4px 0; padding: 0; list-style: none; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu ul a { display: block; min-height: 24px; padding: 0 27px; color: var(--vt-heading); font-size: 13px; line-height: 24px; text-decoration: none; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu ul ul a { padding-left: 54px; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu ul ul ul a { padding-left: 81px; } :is(.container-sidebar-left, .container-sidebar-right) .mod-menu ul a:hover { background: rgba(199, 199, 199, 0.4); color: #A3A3A3; } /* 9. Breadcrumbs and pagination --------------------------------------------- */ .breadcrumb { margin: 7px 0; padding: 6px 10px; background: var(--vt-article-bg); border: 1px solid var(--vt-article-border); border-radius: 6px; font-size: 12px; } .pagination { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; padding: 5px; background: linear-gradient(to bottom, #FFFFFF 0%, #98A8B9 100%); border: 1px solid var(--vt-accent); border-radius: 2px; } .pagination .page-link, .pagination .page-item > span { padding: 7px; background: linear-gradient(to bottom, #FFFFFF 0%, #84B1D2 100%); border: 1px solid #C7DCEA; border-radius: 2px; color: #11212D; text-decoration: none; } .pagination .page-link:hover { background: linear-gradient(to bottom, #CFE0ED 0%, #5795C1 100%); border-color: #C7DCEA; color: #122430; } .pagination .page-item.active .page-link, .pagination .page-item.active > span { background: linear-gradient(to bottom, #E5E8EB 0%, #8796A6 100%); border-color: #C7DCEA; color: #FFFFFF; } /* 10. Forms and buttons ----------------------------------------------------- */ .btn, button, input[type="submit"], input[type="button"], .button { height: auto; min-height: 26px; padding: 0 10px; background: var(--vt-accent); border: 1px dotted var(--vt-accent-dark); border-radius: 6px; color: #171A1C; font-size: 13px; font-weight: 400; line-height: 24px; text-decoration: none; } .btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: #4486B6; border-color: var(--vt-accent-dark); color: #E0E0E0; } .btn:active, .btn.active { background: #828282; color: #1A1D1E; } input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], select, textarea, .form-control { padding: 4px 6px; background: #FFFFFF; border: 1px solid var(--vt-rule); border-radius: 4px; color: var(--vt-text); font-size: 13px; } /* Cassiopeia's search box sits in the header band. */ .container-search input { max-width: 220px; } /* 11. Footer ---------------------------------------------------------------- */ .container-footer { margin: 20px 0 0; padding: 25px; background: #FFFFFF; border-top: 1px dotted var(--vt-article-border); border-radius: 10px; color: #000000; font-size: 13px; line-height: 1.75; text-align: center; } .container-footer .grid-child { max-width: none; padding: 0; } .container-footer p { padding: 0; text-align: center; } .container-footer a { color: var(--vt-link); text-decoration: none; } .container-footer a:visited { color: var(--vt-link-visited); } .container-footer a:hover { color: #6EA3C9; text-decoration: underline; } .container-footer img { border: 0; margin: 0; max-width: 100%; height: auto; } /* Counter / analytics modules live here and must not get card chrome. */ .container-footer .card, .container-footer .moduletable { margin: 0; padding: 0; border: 0; background: none; } /* 12. Responsive ------------------------------------------------------------ */ /* Cassiopeia's breakpoints do the layout work; these only stop the chrome above * from misbehaving once the sheet stops being 1200px wide. */ @media (max-width: 1199px) { body.site { margin-top: 1%; border-radius: 0; } .container-header .navbar-brand { border-radius: 0; } } @media (max-width: 991px) { /* Menu buttons stack; let them fill the bar instead of floating at 28px. */ .container-header .mod-menu > li { margin: 1px 0; } .container-header .mod-menu > li > a { height: auto; padding: 4px 12px; line-height: 1.5; text-align: left; } } @media (max-width: 480px) { .container-component > main, .container-component main { padding: 8px; border-radius: 0; } .container-footer { padding: 15px; } } main img, main video { max-width: 100%; height: auto; } /* No height: auto here - an iframe has no intrinsic ratio and would collapse to * the 150px default. Video embeds get the ratio explicitly instead, matched by * host so maps and forms keep the height they ask for. */ main iframe { max-width: 100%; } main iframe[src*="youtube.com"], main iframe[src*="youtube-nocookie.com"], main iframe[src*="youtu.be"], main iframe[src*="player.vimeo.com"] { height: auto; aspect-ratio: 16 / 9; }