/* =====================================================
sidebarLayout.css — Sponsored-ad sidebar widget styles
Deploy to: /CSS/sidebarLayout.css
Generated: 2026-07-19 02:26 UTC

Layout rules (#sidebarTable, #sidebarHeader, .sidebarSpace)
are kept for backward compatibility with the host
page positioning. Card appearance rules (.sidebar-card
and children) mirror the Ad Builder live preview
exactly so WYSIWYG holds true.

Revision history:
- 2026-07-19 UTC (Session 213), per Jack: the Map tab (#mapTab, holding
#dateRangePanel and #mapCanvas -- see php/eventSearchView.inc) is a third
sibling of #sidebarSpace inside #tabs, exactly like #gbox_list and
#calendar, but had never gotten the same margin-left clearance -- it was
rendering flush left, straight under #sidebarSpace's reserved column,
the identical "content renders underneath the ad" bug Session 92 fixed
for the List view and 2026-07-12 fixed for the Calendar view. Added the
same 145px margin-left to both #dateRangePanel and #mapCanvas below.
Unlike #gbox_list (jqGrid) and #calendar (FullCalendar), #mapCanvas has a
hardcoded CSS width rather than auto-fitting its container, so
CSS/tabView.css's width also had to shrink (1054px -> 909px) to keep the
map's right edge from overflowing past .tabFrame -- see that file's own
note on this same change. NOTE: viewEvents.js's narrow-viewport resize
block (search `$("#tabs").width()-$(".sidebarSpace").width()-160`) still
only shrinks #mapCanvas's width on small windows without adding this
same left offset, so the map may still render partly under the ad on
narrow viewports specifically -- worth a follow-up look, same open item
already flagged for #calendar in the 2026-07-12 entry below.
- 2026-07-17 UTC (Session 198): RENAMED from CSS/ad.css (and
jQuery/db/adQuery.php renamed to jQuery/db/sidebarQuery.php, plus every
old #ad-prefixed id and .ad-prefixed class below renamed to #sidebar/
.sidebar equivalents). Root cause: a real, unmodified-
for-2-days uBlock Origin Lite install was silently blocking this site's
own first-party "Sponsored Links" widget in Jack's own browser --
confirmed by disabling the extension and watching ads reappear
immediately, no hosting or security-side change involved on Jack's end.
Generic ad-blocking filter lists match on URL/filename/selector PATTERNS
("ad.css", "adQuery", ".ad-card", "#adSpace"), not on whether the
content is actually third-party -- they can't know this is entirely
self-hosted, editor-curated sponsor content rather than a third-party ad
network.
Named "sidebar" rather than "sponsor": this widget is only ONE possible
ad placement (the sidebar) -- per Jack, future ad placements are
expected elsewhere on the page, so a location-specific name leaves
"sponsor"/"ad" vocabulary free for whatever comes next rather than
implying this is the one and only sponsor surface. This rename is a
pure find-and-replace of the pattern-matching strings; no layout value,
rule, or behavior below changed. Cache-busting restarts at ?v=1 under
the new filename. See WTD_SESSIONS.md Session 198 for the full rename
map and every other file touched alongside this one.
- 2026-07-12 01:30 UTC (prior delivery, as ad.css): Applied Session 92's
#gbox_list fix to the Calendar view too. #calendar (FullCalendar's render
target, a sibling of #sidebarSpace inside #tabs -- see
php/eventSearchView.inc) never got a margin-left reservation, only
`overflow:auto` in CSS/tabView.css, so it rendered flush left under
#sidebarSpace's column at any normal desktop width. Added
`#calendar { margin-left: 145px; }` below, same value as #gbox_list
since both sit in the same #tabs structure at the same .tabFrame width.
See that new rule's own comment for a note on viewEvents.js's narrow-
viewport resize logic, which may need a follow-up look since it wasn't
re-tuned for this new margin.
- 2026-07-04 21:00 UTC (prior delivery): Oversized-ad fix.
#sidebarSpace previously used width:auto with no overflow
constraint of its own, relying entirely on sidebarQuery.php
hardcoding an inline style="max-width:146px" onto each
ad's <img> tag as the only thing preventing an oversized
image from rendering full-size over the page. That is a
single point of failure -- any ad rendered without that
exact inline style (stale OPcache after a deploy, an ad
inserted through a different path, a manual DB edit, a
future markup change) has zero backstop. This delivery
gives #sidebarSpace a genuine fixed width (160px, matching the
existing .sidebarSpace max-width) and overflow:hidden, and adds
a CSS-level img rule (max-width:100%; height:auto) scoped
to #sidebarSpace so ANY image rendered inside it is constrained
by the stylesheet itself, regardless of what inline style
(if any) the ad markup carries. This is the fix Session 93's
notes described intending to make -- confirmed via direct
inspection with Claude in Chrome that the live file never
actually carried it (width was still auto, overflow was
never set). The existing sidebarQuery.php inline max-width is
left in place as defense-in-depth; it's just no longer the
only thing holding the line.
- 2026-07-04 16:05 UTC (prior delivery): Tightened #gbox_list's
margin-left from 170px to 145px. 170px (ad width ~156px + a
15px buffer) technically worked but left a visibly wider gap
than needed -- #listTab already contributes its own ~17-21px
of left offset on top of this margin, so 170px produced a
grid start around x=191 relative to #tabs, nearly 30px past
#sidebarSpace's own right edge (x=162). 145px brings the grid start
to ~x=166, a small ~4-5px clearance instead of a dead-space
column. Confirmed live via Claude in Chrome before delivery.
- 2026-07-04 (prior delivery): Added #gbox_list margin-left
to genuinely reserve space for #sidebarSpace instead of resizing
a grid column to tolerate the overlap. #sidebarSpace is a sibling
of #listTab inside #tabs (position:absolute, left:5px, ~156px
wide) -- the grid itself started flush left with no gutter,
so it was rendering directly underneath the ad regardless of
any single column's width. margin-left:170px on #gbox_list
shifts the whole grid (header, rows, pager -- everything)
clear of the ad's right edge, with a small buffer. The
companion change in viewEvents.js (reverting the startTime
column-width workaround from the previous delivery) should
be deployed together with this file.
- 2026-07-04 (earlier): Added `margin: 0 auto;` to .sidebar-card so
live ads center under #sidebarHeader instead of
hugging the left edge of .sidebarSpace (text-align:center
on the parent only centers inline content, not a
bare block-level .sidebar-card). Matches the same-day fix
in adBuilder.php's inline preview CSS.
===================================================== */

/* --- Host-page positioning / layout (legacy) --- */

#sidebarSpace {
position: absolute !important;
top: 50px !important;
left: 5px;
width: 160px;
overflow: hidden;
height: 700px;
z-index: 10;
}

/* CSS-level backstop: constrain ANY image rendered inside #sidebarSpace
to the container, regardless of what inline style (if any) the ad
markup itself carries. This is deliberately independent of
sidebarQuery.php's own inline max-width -- that stays in place too, but
this rule is what actually prevents an oversized render if that
inline style is ever missing, stale, or wrong. */
#sidebarSpace img {
max-width: 100% !important;
height: auto !important;
}

#sidebarHeader {
background-color: #EFFBFB;
border-bottom-width: medium;
border-top-color: #e2e2e2;
margin-bottom: 8px;
padding: 3px 6px;
}

#sidebarTable {
padding: 0 3px 3px;
}

.sidebarSpace {
text-align: center;
max-width: 160px;
padding: 7px 0;
border-width: 5px;
border-top-style: groove;
border-bottom-style: groove;
}

/* Reserve real space for #sidebarSpace instead of letting the grid render
underneath it. #sidebarSpace is a sibling of #listTab inside #tabs
(position:absolute, left:5px, 160px wide -- see #sidebarSpace above), so
the grid needs its own left-hand gutter of the same size, not just a
wide-enough Time column. #gbox_list is jQuery jqGrid's own wrapper
div around the whole grid (caption bar, header, rows, pager), so
shifting it right shifts everything in one move. 145px accounts for
#listTab's own existing ~17-21px left offset plus this margin,
landing the grid a few px clear of #sidebarSpace's right edge (~x=162)
without leaving extra dead space. If #sidebarSpace's own width/position
ever changes, this number needs to move with it. */
#gbox_list {
margin-left: 145px;
}

/* 2026-07-12 fix: Session 92's #gbox_list fix (above) reserved space for
#sidebarSpace on the List/Grid view only. #calendar (the Calendar tab's
FullCalendar render target -- see viewEvents.js's `$('#calendar').fullCalendar(...)`
call) is a sibling of #sidebarSpace inside #tabs, exactly like #gbox_list, but
never got the equivalent margin -- CSS/tabView.css only ever gave it
`overflow: auto`. At any normal desktop width the calendar rendered flush
left starting at x=0, straight under #sidebarSpace's reserved column (x=5 to
x=165), which is the exact "grid renders underneath the ad" bug Session 92
fixed for the List view, just never applied here. Same 145px value as
#gbox_list, since #calendar sits in the same #tabs structure at the same
.tabFrame width (1054px, see CSS/tabView.css). NOTE: viewEvents.js also has
a narrow-viewport resize block (search `$(".tabFrame").width() + $(".sidebarSpace").width()`)
that shrinks #calendar's WIDTH on small windows but does not add any
left offset -- that logic was not re-tuned for this new margin and may need
a follow-up look on narrow viewports specifically. */
#calendar {
margin-left: 145px;
}

/* 2026-07-19 fix (Session 213): same "reserve space for #sidebarSpace"
treatment as #gbox_list and #calendar above, now applied to the Map tab's
two content pieces (#dateRangePanel, #mapCanvas -- see php/eventSearchView.inc
and CSS/tabView.css). Same 145px value, same #tabs structure. See this
file's header revision history for the full writeup, including why
CSS/tabView.css's #mapCanvas width also had to shrink to compensate. */
#dateRangePanel {
margin-left: 145px;
}

#mapCanvas {
margin-left: 145px;
}

/* Legacy link decoration reset (still used by .sidebar-btn below) */
a.sidebarLink:link,
a.sidebarLink:visited,
a.sidebarLink:hover {
text-decoration: none;
}

/* =====================================================
Sidebar ad card — matches Ad Builder preview exactly.
font-family is set explicitly so the card looks
identical whether viewed in the builder or live.
===================================================== */

.sidebar-card {
font-family: Arial, Helvetica, sans-serif;
width: 150px;
margin: 0 auto;
background: #fff;
border: 1px solid #ddd;
border-radius: 0 0 4px 4px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,.10);
overflow: hidden;
}

.sidebar-img-wrap {
background: #f8f8f8;
border-bottom: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 6px;
}

.sidebar-img-wrap img {
max-width: 134px;
max-height: 130px;
display: block;
margin: 0 auto;
}

.sidebar-card-inner {
padding: 10px 8px 12px;
}

.sidebar-title {
font-size: 14px;
font-weight: bold;
color: #1a5276;
line-height: 1.3;
margin-bottom: 5px;
}

.sidebar-details {
font-size: 11px;
color: #555;
margin-bottom: 6px;
line-height: 1.4;
}

.sidebar-link-wrap {
margin-top: 6px;
}

.sidebar-btn {
display: inline-block;
padding: 4px 10px;
background: #c0392b;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
border-radius: 4px;
text-decoration: none;
}

.sidebar-btn:hover {
background: #a93226;
text-decoration: none;
}