/* ========================================================================== Beacon Estate Services - style.css RECONSTRUCTION. The original stylesheet referenced by every page was lost; the site had been rendering unstyled. This file was rebuilt in July 2026 from the evidence that survived in the repository: - colours sampled directly from the sliced header, nav and footer graphics in /images (see the palette block below) - #cc9933 taken from the tags in the footer of all 11 pages - #990000 body-link and #666666 body-text taken from the AdSense google_color_* config, which the original author set to match the site - "Verdana, Arial" taken from the one inline font-family that survived, in contact_details.htm It is a reconstruction, not the original file. It aims to look like what the 2008 graphics were designed for, not to reinvent the design. The page layout is fixed-width sliced tables (740px content, two 120px ad columns). That is the design and is deliberately left alone. Nothing here changes the width, order or box model of any layout cell. Class map: .text main body copy cells (457px and 317px columns) .news sidebar cells AND the two footer cells - typography only .sidebar the cream 283px sidebar cells - carries the fill .footer the four footer nav links ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palette -------------------------------------------------------------------------- */ :root { --bes-bronze: #a76d1d; /* header rule, lettingagent_26.gif */ /* the footer bar (lettingagent_40.gif) is */ /* #976e38, a shade deeper; nothing in the */ /* markup needs it, so it is not a token */ --bes-cream: #f4eadb; /* sidebar tile, lettingagent_35.gif */ --bes-red: #840204; /* nav + "More Info" lettering */ --bes-link: #990000; /* body links */ --bes-link-hover: #c00000; --bes-gold: #cc9933; /* footer links */ --bes-gold-hover: #e0b155; --bes-ink: #666666; /* body copy */ --bes-ink-strong: #444444; --bes-rule: #d9cfc0; /* hairlines, derived from the cream */ --bes-page: #ffffff; } /* -------------------------------------------------------------------------- 2. Base The body rules below reproduce exactly what the deprecated bgcolor, leftmargin, topmargin, marginwidth and marginheight attributes already do on . They are duplicates on purpose: with both in place the attributes can be deleted from the markup with no rendering change. -------------------------------------------------------------------------- */ body { margin: 0; padding: 0; background-color: var(--bes-page); color: var(--bes-ink); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.65; -webkit-text-size-adjust: 100%; } /* -------------------------------------------------------------------------- 3. Layout images The header and nav are a mosaic of image slices sitting in table cells. Any stray space under a slice shows as a hairline crack in the artwork. vertical-align:bottom kills the inline descender gap. display:block on slices that are the only content of a cell takes them out of line-box layout altogether, so the mosaic no longer depends on line-height or on which rendering mode the doctype selects. This is what makes it safe to move these pages to . Under the current HTML 4.01 doctype the browser is in almost-standards mode, which already zeroes the strut for image-only line boxes; the HTML5 doctype would stop doing that and open gaps. With these rules the result is identical either way. See REVIEW.md item N1. -------------------------------------------------------------------------- */ img { border: 0; /* replaced border="0" on 121 tags */ vertical-align: bottom; } td > img, td > a > img, .news p > img { display: block; } td > a:has(> img) { display: block; } /* -------------------------------------------------------------------------- 4. Typography Headings are Georgia to sit with the lowercase serif lettering baked into the nav buttons and the "More Info" graphic. Body copy is Verdana, per the surviving inline style. -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: var(--bes-red); line-height: 1.25; } h1 { margin: 0 0 0.6em; font-size: 22px; letter-spacing: 0.01em; } h2 { margin: 1.5em 0 0.4em; font-size: 16px; color: var(--bes-bronze); } h3 { margin: 1.4em 0 0.4em; font-size: 14px; color: var(--bes-red); } /* First heading in a cell should not push the cell open. */ h1:first-child, h2:first-child, h3:first-child { margin-top: 0; } p { margin: 0 0 1em; } strong, b { color: var(--bes-ink-strong); font-weight: bold; } hr { height: 1px; margin: 1.6em 0; border: 0; background-color: var(--bes-rule); color: var(--bes-rule); } /* -------------------------------------------------------------------------- 5. Links -------------------------------------------------------------------------- */ a { color: var(--bes-link); text-decoration: underline; } a:hover, a:focus { color: var(--bes-link-hover); } a:active { color: var(--bes-red); } /* Keyboard focus was invisible on this site. Anything image-based gets an offset ring so it reads against the artwork. */ a:focus-visible, area:focus-visible { outline: 2px solid var(--bes-bronze); outline-offset: 2px; } /* -------------------------------------------------------------------------- 6. .text - main body copy -------------------------------------------------------------------------- */ .text { color: var(--bes-ink); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.65; } .text ul { margin: 0 0 1em; padding-left: 1.35em; list-style-type: square; } .text li { margin-bottom: 0.45em; } .text li::marker { color: var(--bes-bronze); } /* The address block in contact_details.htm. Genuine tabular data, so it is styled as a table rather than flattened. */ .text table td { padding: 0.15em 0; vertical-align: top; } .text table strong { color: var(--bes-red); font-weight: bold; } /* -------------------------------------------------------------------------- 7. .news - sidebar and footer cells .news is on the cream sidebar AND on the two footer cells, so it carries typography only. The cream fill is applied via the explicit .sidebar class. This used to key off td.news[rowspan], which worked while every sidebar sat in a two-row block. landlord_info_gfl.htm has a single-row body, so its sidebar has no rowspan and the attribute selector missed it. A real class is both more robust and easier to read. That background-color duplicates what background="images/lettingagent_35.gif" already does (the GIF is a single #f4eadb pixel), so the attribute can be removed from the markup with no rendering change. -------------------------------------------------------------------------- */ .news { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1.6; color: var(--bes-ink); } .sidebar { background-color: var(--bes-cream); } .sidebar a { color: var(--bes-red); font-size: 12px; text-decoration: none; } .sidebar a:hover, .sidebar a:focus { color: var(--bes-link-hover); text-decoration: underline; } /* -------------------------------------------------------------------------- 8. .footer - footer nav links The gold below is the same #cc9933 as the tags that currently wrap these links, so the two agree and the elements can be removed without any rendering change. The rule on the nav cell itself colours the " | " separators, which are the only thing the tag is really still doing. See REVIEW.md item R1. -------------------------------------------------------------------------- */ td.news[height="39"] { color: var(--bes-gold); } a.footer { color: var(--bes-gold); text-decoration: none; } a.footer:hover, a.footer:focus { color: var(--bes-gold-hover); text-decoration: underline; } /* -------------------------------------------------------------------------- 9. Selection -------------------------------------------------------------------------- */ ::selection { background-color: var(--bes-cream); color: var(--bes-red); } /* -------------------------------------------------------------------------- 10. Print The fee and Guidelines pages are the sort of thing people print. Drop the 740px border and print the copy in black on white at a readable size. -------------------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; font-size: 11pt; } /* the bordered 740px shell should not print a box round everything */ table[width="740"] { width: auto !important; border: 0 !important; } .sidebar { background-color: transparent; } h1, h2, h3 { color: #000; } a { color: #000; text-decoration: underline; } /* Print the destination of email links, so a printed page still carries a way to get in touch. There are no external http links on the site, so no rule is needed for those. */ .text a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } tr, li, h1, h2, h3 { page-break-inside: avoid; } h1, h2, h3 { page-break-after: avoid; } }