/* ═══════════════════════════════════════════════════════════════════════════
 * theme.css — the Bowls 360 site theme (green & gold)
 *
 * Loaded by styles.php AFTER styles.css / w3.css / Bootstrap, so it restyles
 * the existing class names in place — no page markup needs to change.
 * Page-specific rules can still live in styles.css or a page's own <style>.
 *
 * Palette is taken from the logo: lawn green, gold, teal and the orange jack.
 * Change the tokens in :root to re-theme the whole site.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --green-900: #0f3d24;   /* nav bar, footer, table headers */
    --green-700: #1c6b3c;   /* links, buttons */
    --green-500: #3f9a52;   /* accents */
    --green-50:  #eef6ef;   /* tinted rows / panels */
    --gold:      #d4a72c;   /* highlights, winners, pinned */
    --gold-50:   #fdf7e4;
    --teal:      #2f8f87;
    --orange:    #e8742a;   /* the jack — used sparingly for "new"/hover */
    --cream:     #f7f5ee;   /* page background */
    --card:      #ffffff;
    --ink:       #1d2a22;   /* body text */
    --muted:     #5d6b62;
    --line:      #dfe5dc;
    --radius:    10px;
    --shadow:    0 1px 2px rgba(15, 61, 36, .06), 0 4px 14px rgba(15, 61, 36, .06);

    --font-head: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
}

/* ─── BASE ─────────────────────────────────────────────────────────────────── */

html {
    background: var(--cream);
    font-size: 16px;
}

/*
 * Page column: many older pages put their content straight into <body>
 * (no wrapper), so the side gutter lives on body itself. The gutter is a vw
 * value so the full-bleed bands below can cancel it exactly with the same var.
 * "html body" outranks page-level "body { padding: 0 }" rules.
 */
html body {
    --gutter: max(16px, calc((100vw - 1200px) / 2));
    margin: 0;
    padding: 0 var(--gutter) 1px;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
}

/* Embedded media never wider than the screen (jokes.php videos overflowed phones) */
video, iframe, embed { max-width: 100%; }

/* Full-bleed bands: logo header, menu, footer */
body > div.logo,
body > .site-nav,
body > footer {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
}

body > .site-nav { margin-bottom: 20px; }

/* ─── LINKS (fixes the old whitesmoke-on-cream hover) ──────────────────────── */

/* a:where() keeps this at element specificity: it beats Bootstrap's plain
   "a" rule (loads earlier) but any page class such as .nt-home wins */
a:where(:link, :visited) {
    color: var(--green-700);
    text-decoration: none;
}

a:hover, a:focus {
    color: var(--orange);
    text-decoration: underline;
}

/* ─── HEADER / LOGO ────────────────────────────────────────────────────────── */

div.logo {
    background: linear-gradient(180deg, var(--green-900), #164d2f);
    padding: 18px 16px;
}

img.logo {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 460px;
    border: 0;
    border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

/* ─── NAVIGATION ───────────────────────────────────────────────────────────── */
/* .site-nav selectors outrank the old element-only "nav li" rules in styles.css */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--green-900);
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 3px solid var(--gold);
    font-family: var(--font-head);
    font-size: 1rem;
    padding: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.site-nav .nav-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
}

.site-nav .nav-brand,
.site-nav .nav-toggle { display: none; }

.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav .nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.site-nav li {
    display: block;
    position: relative;
    background: none;
    border: 0;
}

.site-nav .nav-menu > li > a,
.site-nav .nav-dd-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    color: #fff;
    background: none;
    border: 0;
    box-shadow: none;
    font: 500 1.05rem/1 var(--font-head);
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
}

.site-nav .nav-menu > li > a:hover,
.site-nav .nav-dd-btn:hover,
.site-nav .nav-dd.open > .nav-dd-btn {
    color: var(--gold);
    background: rgba(255, 255, 255, .07);
    text-decoration: none;
}

.site-nav .nav-menu > li > a[aria-current="page"] {
    color: var(--gold);
    box-shadow: inset 0 -3px 0 var(--gold);
}

.site-nav .nav-dd-btn:focus-visible,
.site-nav a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.site-nav .caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s;
}

.site-nav .nav-dd.open .caret { transform: rotate(180deg); }

/* Dropdown panel — white card */
.site-nav .nav-panel {
    display: none;
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(15, 61, 36, .22);
    font-family: var(--font-body);
    z-index: 1001;
}

/* Wide panels lay their .nav-group blocks out side by side */
.site-nav .nav-panel.wide {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 0 8px;
}

.site-nav .nav-panel.cols-3 { grid-template-columns: repeat(3, minmax(170px, 1fr)); }

.site-nav .nav-dd:last-child .nav-panel { left: auto; right: 0; }

.site-nav .nav-dd.open > .nav-panel { display: block; }
.site-nav .nav-dd.open > .nav-panel.wide { display: grid; }

@media (hover: hover) and (min-width: 861px) {
    .site-nav .nav-dd:hover > .nav-panel { display: block; }
    .site-nav .nav-dd:hover > .nav-panel.wide { display: grid; }
    .site-nav .nav-dd:hover .caret { transform: rotate(180deg); }
}

.site-nav .nav-panel a {
    display: block;
    padding: 8px 12px;
    border: 0;              /* undo old "nav li a" border + shadow */
    box-shadow: none;
    border-radius: 6px;
    color: var(--ink);
    font-size: .98rem;
}

.site-nav .nav-panel a:hover {
    background: var(--green-50);
    color: var(--green-700);
    text-decoration: none;
}

.site-nav .nav-panel a[aria-current="page"] {
    background: var(--green-50);
    color: var(--green-700);
    font-weight: 600;
}

.site-nav .nav-panel .nav-label {
    padding: 10px 12px 4px;
    font: 600 .72rem/1 var(--font-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.site-nav .badge-new {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font: 700 .65rem/1.5 var(--font-body);
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ── Mobile nav: brand + ☰ button, menu slides down, panels expand inline ── */
@media (max-width: 860px) {
    .site-nav .nav-bar {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 12px;
    }

    .site-nav .nav-brand {
        display: block;
        padding: 12px 0;
        color: #fff;
        font: 600 1.15rem/1 var(--font-head);
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .site-nav .nav-brand:hover { color: var(--gold); text-decoration: none; }

    .site-nav .nav-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        color: #fff;
        background: rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 8px;
        font: 500 .95rem/1 var(--font-head);
        letter-spacing: .05em;
        text-transform: uppercase;
        cursor: pointer;
    }

    .site-nav .nav-menu {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 4px 0 12px;
    }

    .site-nav .nav-menu.open { display: flex; }

    .site-nav li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .site-nav .nav-menu > li > a,
    .site-nav .nav-dd-btn {
        width: 100%;
        justify-content: space-between;
        padding: 14px 4px;
    }

    .site-nav .nav-panel {
        position: static;
        min-width: 0;
        margin: 0 0 10px;
        box-shadow: none;
    }

    .site-nav .nav-panel.wide,
    .site-nav .nav-panel.cols-3 { grid-template-columns: 1fr 1fr; }

    .site-nav .nav-dd:last-child .nav-panel { right: auto; }
}

/* ─── HEADINGS ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--green-900);
    line-height: 1.25;
    letter-spacing: .01em;
}

h1 { float: none; font-size: 2rem; margin: 16px 0 8px; }
h1.big { font-family: var(--font-head); font-size: 3rem; }

h2 {
    font-size: 1.5rem;
    background: none;
    padding: 0 0 6px;
    border-bottom: 3px solid var(--gold);
}

h3 {
    font-size: 1.2rem;
    background: var(--green-50);
    padding: .45em .7em;
    border-left: 4px solid var(--green-500);
    border-radius: 0 6px 6px 0;
}

h4 { font-size: 1.15rem; color: var(--green-700); padding-left: 0; }

h5 {
    font-size: 1.5rem;
    background: var(--green-900);
    color: #fff;
    padding: .35em .6em;
    border-radius: 6px;
}

h6 { font-size: 1.4rem; color: var(--green-900); }

/* Legacy section-bar classes (were palevioletred / greenyellow blocks) */
h13, .h13, h14, .h14 {
    margin: 24px 0 12px;
    padding: .4em .7em;
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--green-900);
    background: var(--green-50);
    border-left: 4px solid var(--green-500);
    border-radius: 0 6px 6px 0;
}

h13, .h13 { font-size: 1.2rem; }
h14, .h14 { font-size: 1.6rem; }

h11, .h11, h11a, .h11a {
    padding: .3em .6em;
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--green-900);
    background: var(--gold-50);
    border-left: 4px solid var(--gold);
    border-radius: 0 6px 6px 0;
}

h11, .h11 { font-size: 2rem; }
h11a, .h11a { font-size: 1.4rem; }

/* ─── LEGACY CONTENT CLASSES ───────────────────────────────────────────────── */
/* styles.css gave each of these its own novelty font and colour; bring them
   into the theme so every page reads the same. Sizes stay roughly as before. */

/* Heading-like labels */
/* Deliberately NOT themed: the tipping-page classes (.tipping, .tipping1-3,
   .tips, .marketodds, .rankings3) — tipping pages keep their own colours. */
h7, .h7, h8, .h8, h9, .h9, h10, .h10, h12, .h12,
.agm, .new, .winners, .bpl, .bpl1, .preview1, .bachelor,
.teams17, .teams18, .teams19, .panel1-title {
    font-family: var(--font-head);
    font-weight: 500;
    color: var(--green-900);
    letter-spacing: .01em;
}

h7, .h7, h10, .h10 { font-size: 1.6rem; background: none; }
h8, .h8           { font-size: 1.35rem; }
h9, .h9           { font-size: 1rem; color: var(--green-700); }
h12, .h12         { font-size: 1.35rem; color: var(--green-700); }
.agm              { font-size: 1.5rem; }
.new              { font-size: 1.5rem; color: var(--orange); }
.bpl              { color: var(--teal); }
.bpl1             { font-size: 1.6rem; }
.bachelor         { font-size: 1.4rem; }

/* Pennant team headings / finals previews: tinted bars instead of solid colours */
.teams17, .teams18, .teams19, .preview1 {
    font-size: 1.5rem;
    padding: .3em .6em;
    border-left: 4px solid var(--green-500);
    border-radius: 0 6px 6px 0;
    background: var(--green-50);
}
.teams18 { border-left-color: var(--teal); background: #eaf5f4; }
.teams19, .preview1 { border-left-color: var(--gold); background: var(--gold-50); }

.panel1-title { background: var(--green-900); color: #fff; font-size: 1.6rem; }
.panel1-body  { background: var(--card); color: var(--ink); }

/* Body-text classes */
.clubnews, .galadays, .rankings, .rankings2, .country,
.polls, .preview, .calendar, .myresponse {
    font-family: var(--font-body);
    color: var(--ink);
}

.preview         { font-size: 1.1rem; }
.galadays        { color: var(--green-700); }
.rankings2       { color: var(--green-700); }
.polls           { font-size: 1.25rem; }
.myresponse      { display: block; margin-top: .4em; font-style: italic; color: var(--green-700); }

/* Calendar row highlights */
.carnivals      { background: #eaf5f4; color: var(--ink); }
.winterweeklies { background: var(--green-50); color: var(--ink); }

/* Quiz banner */
.quiz {
    font-family: var(--font-head);
    font-size: 1.8rem;
    color: var(--green-900);
    background: var(--gold-50);
    padding: .2em .6em;
}

/* Jokes: same card as news, three accent colours */
.jokes, .jokes1, .jokes2 {
    width: auto;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 16px 20px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 4px solid var(--green-500);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flow-root;
}
.jokes1 { border-left-color: var(--gold); }
.jokes2 { border-left-color: var(--teal); }

/* Player History tables (PlayerHistory/*.php) mark each player's name cell
   with inline red and separate players with an inline black row */
td[style="background-color:red"] {
    background-color: var(--green-900) !important;
    color: #fff;
}
tr[style="background-color:black"] { background-color: var(--gold) !important; }
tr[style="background-color:black"] > td { height: 4px; padding: 0; border: 0; }

/* Old gold-tinsel divider image (divider.png) → a thin gold rule */
img[src*="divider.png"] {
    display: block;
    width: 100% !important;
    height: 0 !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 2px solid var(--gold) !important;
    opacity: .6;
}

/* Scroll wrapper nav.js puts round wide content tables (keeps the page from
   scrolling sideways on phones) */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Headings placed beside the floated sponsors column stop at its edge */
body > h2, body > h3, body > h5,
body > h11, body > .h11, body > h11a, body > .h11a,
body > h13, body > .h13, body > h14, body > .h14 { display: flow-root; }

/* ─── BODY TEXT ────────────────────────────────────────────────────────────── */

p {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
    text-indent: 0;
    margin: 0 0 .75em;
}

u { color: inherit; }

/* ─── PAGE LAYOUT ──────────────────────────────────────────────────────────── */

.page-layout {
    padding-bottom: 32px;
    gap: 28px;
}

.page-sponsors { flex: 0 0 240px; }

/* Older pages float the sponsors column (sponsors.php's .right) straight
   inside <body>; cards beside it shrink to fit (they're flow-root).
   Width + margin total exactly 20%: those pages size content at 80%
   (e.g. letters.php accordions), which would otherwise drop below it. */
body > .right {
    float: right;
    width: calc(20% - 24px);
    height: auto;
    margin: 0 0 16px 24px;
}

body > footer { clear: both; margin-top: 32px; }

/* ─── CARDS (news, pinned, editorial, classifieds) ─────────────────────────── */

.news1, .news2, .pinned, .pinned1, .pinned2,
.editorial, .classifieds {
    max-width: 100%;
    width: auto;
    margin: 0 0 16px;
    padding: 16px 20px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flow-root;        /* contain floated images */
}

.news1  { border-left: 4px solid var(--green-500); }
.news2  { border-left: 4px solid var(--teal); background: #f3faf9; }
.pinned { border-left: 4px solid var(--gold); background: var(--gold-50); }
.pinned1 { border-left: 4px solid var(--teal); }
.pinned2 { border-left: 4px solid var(--orange); }
.editorial { border-left: 4px solid var(--green-900); }

/* Section tag on each news card (e.g. RUMOURS, RESULTS) */
.news1 h4, .news2 h4 {
    display: inline-block;
    margin: 0 0 8px;
    padding: 3px 10px;
    background: var(--green-50);
    border-radius: 999px;
    font: 600 .8rem/1.4 var(--font-head);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.news1 h4 a, .news2 h4 a { color: var(--green-700); }
.news1 h4 a:hover, .news2 h4 a:hover { color: var(--orange); text-decoration: none; }

/* The leading date in each news paragraph */
.news1 p > b:first-child,
.news2 p > b:first-child {
    display: inline-block;
    margin-right: 4px;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.news1 p:last-child, .news2 p:last-child { margin-bottom: 0; }

.pinned img.winners {
    float: left;
    width: 260px;
    margin: 4px 20px 8px 0;
    border: 0;
    border-radius: 8px;
}

/* "Click here" image buttons */
img.here {
    width: 44px;
    border: 0;
    border-radius: 4px;
    vertical-align: middle;
    transition: transform .15s;
}

a:hover img.here { transform: scale(1.08); }

/* ─── TICKER ───────────────────────────────────────────────────────────────── */

.marquee {
    max-width: 100%;
    margin: 0 0 16px;
    padding: 10px 16px;
    background: var(--green-900);
    color: #fff;
    border: 0;
    border-left: 6px solid var(--orange);
    border-radius: var(--radius);
    font: 500 1.05rem/1.4 var(--font-head);
    letter-spacing: .03em;
}

.marquee marquee:empty { display: none; }

/* ─── PANELS / RUMOURS — tinted cards instead of saturated blocks ──────────── */

.panel, .panelred, .panelwhite, .panelblue, .panelgreen,
.panelyellow, .paneleditorial, .panelyoutube,
.rumour, .fact, .false {
    margin: 0 0 16px;
    padding: 12px 18px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    max-width: 100%;
}

.panel          { background: var(--green-50);  border-left-color: var(--green-700); }
.panelred,
.false          { background: #fdecea;           border-left-color: #c0392b; }
.panelwhite     { background: var(--card);       border-left-color: var(--line); }
.panelblue      { background: #e9f1fb;           border-left-color: #2f6fb3; }
.panelgreen,
.fact           { background: var(--green-50);   border-left-color: var(--green-500); }
.panelyellow    { background: var(--gold-50);    border-left-color: var(--gold); }
.paneleditorial { background: #f0eefa;           border-left-color: #5b4ea8; }
.panelyoutube   { background: #fdecea;           border-left-color: #c4302b; }
.rumour         { background: #fff2e6;           border-left-color: var(--orange); }

/* ─── TABLES — the stats-page look, site-wide ──────────────────────────────── */

table { border-collapse: collapse; }

td, th {
    padding: 8px 12px;
    border: 1px solid var(--line);
    text-align: left;
    font-family: var(--font-body);
}

thead, thead tr { background: var(--green-900); color: #fff; }
thead th { font-weight: 600; letter-spacing: .02em; }

tr:nth-child(even) { background: var(--green-50); }
/* Only plain content tables — app pages style their own rows */
table:not([class]) > tbody > tr:hover { background: #e2efe4; }

/* ─── SPONSORS SIDEBAR ─────────────────────────────────────────────────────── */

body > .right::before,
.page-sponsors .right::before {
    content: "Supporters of Bowls 360";
    display: block;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--gold);
    font: 500 1rem/1.3 var(--font-head);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--green-900);
}

body > .right img.sponsor,
body > .right img.sponsor1,
.page-sponsors img.sponsor,
.page-sponsors img.sponsor1 {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    transition: transform .15s, box-shadow .15s;
}

body > .right a:hover img,
.page-sponsors a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 61, 36, .15);
}

/* ─── FOOTER ───────────────────────────────────────────────────────────────── */

footer {
    background: var(--green-900);
    color: rgba(255, 255, 255, .8);
    border-top: 3px solid var(--gold);
    padding: 16px;
}

footer a:link, footer a:visited { color: var(--gold); }

/* ─── FORMS & BUTTONS ──────────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="number"],
input[type="password"], select, textarea {
    font-family: var(--font-body);
    border: 1px solid #c9d2c6;
    border-radius: 6px;
    padding: 8px 10px;
    background: #fff;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--green-500);
    outline-offset: 0;
    border-color: var(--green-500);
}

button[type="submit"], input[type="submit"],
.btn-search, .btn-vale-submit {
    background: var(--green-700);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 9px 20px;
    font: 600 1rem/1.2 var(--font-body);
    cursor: pointer;
}

button[type="submit"]:hover, input[type="submit"]:hover,
.btn-search:hover, .btn-vale-submit:hover { background: var(--green-900); }

/* ─── MOBILE ───────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {
    html body { --gutter: 12px; }

    div.logo { padding: 12px; }

    .page-layout { padding-bottom: 24px; }

    .news1, .news2, .pinned, .pinned1, .pinned2,
    .editorial, .classifieds { padding: 14px 16px; }

    .pinned img.winners {
        float: none;
        display: block;
        width: 100%;
        margin: 0 0 12px;
    }

    .page-sponsors .right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .page-sponsors .right::before { grid-column: 1 / -1; margin-bottom: 0; }

    .page-sponsors img.sponsor,
    .page-sponsors img.sponsor1 { margin: 0; max-width: 100%; }

    .page-sponsors .right > a:first-of-type { grid-column: 1 / -1; }

    /* Older pages have the sponsors BEFORE the content — show them as a
       compact swipeable strip so the page content isn't pushed way down */
    body > .right {
        float: none;
        width: auto;
        margin: 0 0 20px;
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
    }

    body > .right::before { display: none; }

    body > .right > a,
    body > .right > img { flex: 0 0 140px; scroll-snap-align: start; }

    body > .right img.sponsor,
    body > .right img.sponsor1 { width: 140px; margin: 0; }
}