/* Based on: CSS Reset by Eric Meyer - Released under Public Domain http://meyerweb.com/eric/tools/css/reset/ with new HTML 5 elements added */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } /* remember to set this! */ ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } *, *:before, *:after { box-sizing: border-box; } /* ================= 1 : fundamental stuff ================= */ html { --background-colour-darker: #7d1919; /* dark red */ --background-colour-medium: #efcbcb; /* light pink */ --background-colour-lighter: #fbf6f6; /* very light pink */ --font-family-headings: "raleway", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; --font-family-print: georgia, serif; --hover-colour: #0945ef; /* medium blue */ --hover-colour-alt: yellow; /* in footer, & nav-a:hover */ --link-colour: #e06f13; /* dark orange */ --print-colour: #000; /* black */ --site-name-colour: #fff; /* white */ --text-colour: #272525; /* dark reddish grey */ --theme-colour: #b32424; /* red */ } @-ms-viewport { width: device-width; } /* IE10 hack */ @viewport { width: device-width; zoom: 1; } /* to replace HTML meta tag in due course */ @font-face { font-family: "raleway"; font-style: normal; font-weight: 400; src: url("fonts/raleway-v36-latin-regular.eot"); /* 25.5 kB - IE9 Compat Modes */ src: local("Raleway"), local("Raleway Regular"), local("Raleway-Regular"), url("fonts/raleway-v36-latin-regular.eot?#iefix") format("embedded-opentype"), /* 25.5 kB - IE6-IE8 */ url("fonts/raleway-v36-latin-regular.woff2") format("woff2"), /* 22.4 kB - Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("fonts/raleway-v36-latin-regular.woff") format("woff"), /* 27.4 kB - Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */ url("fonts/raleway-v36-latin-regular.ttf") format("truetype"), /* 49.6 kB - Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ url("fonts/raleway-v36-latin-regular.svg#Raleway") format("svg"); /* 52.1 kB - Legacy iOS */ } /* thanks to Google Web Font Helper: https://gwfh.mranftl.com/ */ /* =============================================== 2 : basic styles: links, headings, paragraphs, lists, images, etc =============================================== */ /* duplication of colours and fonts is for old browsers that don't recognise variables and other new-ish CSS features: will look presentable even if variables change later */ body { background: #fff; color: #000; font-family: system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; font-size: 100%; line-height: 1.7; position: relative; text-align: left; width: 100%; } #container { margin: 0 auto; max-width: 750px; padding: 0 3%; } a:link { color: #e06f13; text-decoration: underline; } a:hover { border-bottom: 2px solid #0945ef; color: #0945ef; } a:focus { color: #b32424; } h1, h2, h3 { color: #b32424; font-family: "raleway", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; } #site-name-p, .search-input { background: #b32424; color: #fff; } img { border: 1px solid #efcbcb;} blockquote { background: #fbf6f6; border-left: 2px solid #b32424; } #nav-ul { background: #b32424; } .nav-a:link, .nav-a:visited { border-top: 1px solid #fff; border-bottom: #fff; color: #fff; } .nav-a:hover { background: #7d1919; border-top: 1px solid yellow; border-bottom: yellow; color: yellow; } .nav-a:focus { color: #fff; outline: 3px solid #fff; } .nav-a[aria-current]:link, .nav-a[aria-current]:visited, .nav-a[aria-current]:hover, .nav-a[aria-current]:focus, .nav-a[aria-current]:active { background: #7d1919; border-top: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; } /* for newer browsers */ body { color: var(--text-colour); font-size: calc(15px + 0.390625vw); } /* flexible font-size tip: https://matthewjamestaylor.com/responsive-font-size */ /* links */ a:link { color: var(--link-colour); text-decoration: underline solid var(--text-colour) 1px; text-underline-offset: 0.25em; word-break: break-word; } a:visited { color: var(--link-colour); text-decoration: underline solid var(--link-colour) 1px; } a:hover { border-bottom: 2px solid var(--hover-colour); color: var(--hover-colour); text-decoration: none; } a:focus { color: var(--theme-colour); outline: 3px solid #000; outline-offset: 0.25rem; } a:focus-visible { box-shadow: 0 0 0 6px var(--site-name-colour); outline: 9px double #000; z-index: 100; } /* keyboard focus (see https://www.sarasoueidan.com/blog/focus-indicators/) */ a:active { background: var(--theme-colour); color: var(--site-name-colour); } /* headings */ h1 { border-bottom: 1px solid var(--theme-colour); color: var(--theme-colour); font: normal 220%/1.2 var(--font-family-headings); letter-spacing: 0.02em; margin: 0 0 0.5em 0; padding: 0.6em 0; text-wrap: balance; word-break: break-word; } h2 { color: var(--theme-colour); font: normal 170%/1.3 var(--font-family-headings); margin: 0.8em 0 0 0; word-break: break-word; } .h2-top { margin: 0.5em 0 0 0; } .alert-h2 { margin: 0.3em 0 0 0; } h3 { color: var(--theme-colour); font: normal 130%/1.3 var(--font-family-headings); margin: 0.8em 0 0 0; } h4 { color: var(--theme-colour); font: bold 115%/1.3 system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; margin: 0.8em 0 0 0; } /* not in use yet, but you never know */ /* paragraphs and lists */ p { margin: 0.8em 0 0 0; } ul { list-style: disc; margin: 0.2em 0 0 1.2em; } ol { list-style: decimal; margin: 0.2em 0 0 1.5em; } li { line-height: 1.5; padding: 0.4em 0 0 0; } li::marker { color: var(--theme-colour); } /* coloured dots and numbers! */ .sub-li::marker { color: var(--text-colour); } /* directory landing page & site map page - if classes can't be added to auto-generated li, use .sub-ul li::marker instead */ dl { display: flex; flex-direction: column; } dt { color: var(--theme-colour); font: normal 130%/1.3 var(--font-family-headings); margin: 0.8em 0 0 0; } /* same size as h3 */ /* images & containers */ figure { margin: 1em 0 1.2em 0; } figcaption { font-style: italic; margin: 0.3em 0 0 0; } picture { margin: 0 0 -0.5em 0; } /* to enclose images which are under 850px, so that they fill the entire available width */ img { background: var(--background-colour-lighter); border: 1px solid var(--background-colour-medium); float: left; height: auto; margin: 1em 0 1.2em 0; max-width: 100%; padding: 0.2em; } .img-small { margin: 1em 1.8em 1.2em 0; } /* a bit more padding-left needed due to vertical text */ .img-small-alt { float: right; margin: 1em 0 1.2em 1.5em; } .img-small-top { margin: 1.2em 1.8em 1.2em 0; } .img-small-alt-top { float: right; margin: 1.2em 0 1.2em 1.5em; } /* default for old article-images */ .img-fig, .img-map { margin: 0; } /* within figure: full-width, but with figcaption below */ #img-bonus { margin: 0.5em 0; } /* minor elements */ strong { font-weight: bold; } cite, em, noscript { font-style: italic; } abbr { border-bottom: 1px dotted var(--text-colour); cursor: help; speak: spell-out; text-decoration: none; } .strike { text-decoration: line-through; } blockquote { background: var(--background-colour-lighter); border-left: 2px solid var(--theme-colour); margin: 0.8em 0 0 0; padding: 0.1em 1em 0.8em 1em; } noscript { border: 2px solid var(--theme-colour); border-radius: 3px; display: block; margin: 1em 0; padding: 0 1em 0.5em 1em; } .alert { background: var(--background-colour-lighter); border: 2px solid var(--theme-colour); border-radius: 3px; margin: 1.5em 0 1.5em 0; padding: 0.5em 1em 0.5em 1em; } /* apply to a paragraph or a divimmediately below h1 */ .read-more { border-top: 1px dashed var(--theme-colour); border-bottom: 1px dashed var(--theme-colour); line-height: 1.4; padding: 0.5em 0; } /* ======================================================================= 3 : basic component styles: skipnav, header, main & other navigation, breadcrumbs, footer, plug, etc ======================================================================== */ /* skipnav link */ #skipnav-p { position: absolute; right: 40%; top: 0px; z-index: 100; } #skipnav-a:link, #skipnav-a:visited, #skipnav-a:hover { border: 2px solid transparent; color: transparent; padding: 0.2em 0.6em; text-decoration: none; } #skipnav-a:focus { background: #fff; border: 2px solid #000; color: #000; text-decoration: underline; } /* header */ header { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0.5em 0.2em; } #site-name-p { color: var(--site-name-colour); font: normal 150%/1.3 var(--font-family-headings); line-height: 1.2; margin: 0; } /* contact form */ form { display: flex; flex-direction: column; margin: 0; width: 100%; } legend { visibility: hidden; } .form-message { color: var(--theme-colour); font: normal 130%/1.3 var(--font-family-headings); margin: 1.5em 0 0 0; } .form-p { margin: 1em 0 0 0; } input, textarea { background: #fff; border: 2px solid var(--background-colour-medium); border-radius: 3px; color: var(--text-colour); font-size: 110%; font-family: inherit; line-height: 1.6; margin: 0.2em 0 0 0; padding: 0.4em 1em; width: 100%; } textarea { height: 10em; } label { float: left; padding: 0.4em 0; text-align: left; width: 100%; } input:hover, textarea:hover { border: 2px solid var(--hover-colour); color: var(--text-colour); } input:focus, textarea:focus { background: #fff; color: var(--text-colour); outline: 3px solid #000; outline-offset: 0.25rem; } input:user-invalid { border-color: red; } /* if the email or phone fields do not contain the correct format */ input:user-valid { border-color: var(--background-colour-medium); } /* normal colour if the correct format is entered */ input.comSubmit { font-weight: bold; margin: 0 0 0 1em; width: auto; } input.comSubmit:hover { background: var(--theme-colour); border: 2px solid var(--theme-colour); color: #fff; } input#phone, input#mail { margin: 0; padding: 0; } .comThanks, .comError { border: 2px solid var(--theme-colour); float: left; font-weight: bold; list-style: none; margin: 1em 0; padding: 0.5em 1em 1em 1em; width: 100%; } /* thank-you message not currently needed */ /* search form */ #search-form { border-top: 1px solid var(--site-name-colour); border-bottom: 1px solid var(--site-name-colour); display: flex; margin: 0; padding: 0; width: auto; } #cs-search { display: flex; flex-wrap: wrap; } .search-input { border: 0; border-radius: 0; color: var(--site-name-colour); font-size: 85%; line-height: 1.2; margin: 0; padding: 0.25em 0.5em; width: auto; } .search-text { background: var(--theme-colour); border-right: 1px dashed var(--site-name-colour); color: var(--site-name-colour); max-width: 15ch; } .search-text:hover { background: var(--site-name-colour); border: 0; color: var(--text-colour); text-decoration: none; } .search-submit { background: var(--theme-colour); font-family: var(--font-family-headings); } .search-submit:hover { background: var(--background-colour-darker); border: 0; color: var(--hover-colour-alt); text-decoration: underline; } .search-input:focus { outline: 3px solid var(--site-name-colour); outline-offset: 0.25rem; } /* main navigation */ #primary-nav { display: flex; } #nav-ul { background: var(--theme-colour); display: flex; flex-flow: row wrap; gap: 0.3em; list-style: none; margin: 0; padding: 0.5em 0.2em; width: 100%; } .nav-li { display: flex; line-height: 1.2; padding: 0; } .nav-a:link, .nav-a:visited { border-top: 1px solid var(--site-name-colour); border-bottom: 1px solid var(--site-name-colour); color: var(--site-name-colour); display: block; flex-grow: 1; font-family: var(--font-family-headings); font-size: 95%; padding: 0.25em 0.5em; text-align: center; text-decoration: none; width: auto; } .nav-a:hover { background: var(--background-colour-darker); border-top: 1px solid var(--hover-colour-alt); border-bottom: 1px solid var(--hover-colour-alt); color: var(--hover-colour-alt); text-decoration: underline; } .nav-a:focus { color: var(--site-name-colour); outline: 3px solid var(--site-name-colour); } .nav-a:active { color: var(--text-colour); } .nav-a[aria-current]:link, .nav-a[aria-current]:visited, .nav-a[aria-current]:hover, .nav-a[aria-current]:focus, .nav-a[aria-current]:active { background: var(--background-colour-darker); border-top: 1px solid var(--site-name-colour); border-bottom: 1px solid var(--site-name-colour); color: var(--site-name-colour); cursor: default; text-decoration: none; } .mob-chop { display: none; } /* not currently required (shortened nav menu names; reinstated for wider screens) */ /* breadcrumbs */ .breadcrumbs-nav { border-top: 1px solid var(--theme-colour); border-bottom: 1px solid var(--theme-colour); display: flex; font-size: 95%; font-style: italic; line-height: 1.3; padding: 0.3em 0; width: 100%; } #breadcrumbs-p { display: inline-block; line-height: 1.3; list-style: none; margin: 0 0.5em 0 0; } #breadcrumbs-ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; } .breadcrumbs-li { display: flex; line-height: 1.3; padding: 0; } .breadcrumbs-a:hover { border-bottom: none; text-decoration: underline; } .bc-separator { font-weight: bold; padding: 0 0.5em; } /* footer */ footer { background: #fff; font-size: 95%; } #footer-dl { border-top: 1px solid var(--theme-colour); display: flex; flex-direction: column; line-height: 1.5; margin: 1em 0 0 0; padding: 1em 0; width: 100%; } .footer-dt { font-size: 100%; font-variant: small-caps; margin: 0.5em 0 0 0; } .footer-dd { padding: 0 0 0 1em; } .thanks #dt-top, .thanks #dd-top { display: none; } /* not enough text to make it worthwhile */ .footer-a[aria-current]:link, .footer-a[aria-current]:visited, .footer-a[aria-current]:hover, .footer-a[aria-current]:focus, .footer-a[aria-current]:active { border: none; color: var(--text-colour); cursor: default; text-decoration: none; } /* individual contact details */ .contact-dt { padding-left: 30px; } #dt-website { background: url(images/icons-2416x18.png) 0 50% no-repeat; } #dt-email { background: url(images/icons-2416x18.png) -800px 50% no-repeat; } #dt-phone { background: url(images/icons-2416x18.png) -1600px 50% no-repeat; } #dt-address { background: url(images/icons-2416x18.png) -2400px 50% no-repeat; } /* plug - may not be in use */ #plug { background: var(--background-colour-lighter); border-top: 1px solid var(--background-colour-medium); border-bottom: 1px solid var(--background-colour-medium); margin: 2.5em 0 0 0; padding: 0 1.5em 1.5em 1.5em; } #img-plug { background: var(--site-name-colour); float: right; margin: 1.2em 0 1.2em 1em; } /* home page */ #link-box-ul { display: flex; flex-direction: column; gap: 1em; list-style: none; margin: 0; } .link-box-li { display: flex; flex-direction: column; align-items: center; padding: 0; } .link-box-img, .link-box-p { margin: 0.3em 0 0 0; } /* history navigation */ .history-a[aria-current]:link, .history-a[aria-current]:visited, .history-a[aria-current]:hover, .history-a[aria-current]:focus, .history-a[aria-current]:active { background: none; border: 0; color: var(--text-colour); text-decoration: none; cursor: default; outline: none; } /* photo gallery (misc) page */ .gallery-ul { display: flex; flex-flow: row wrap; gap: 1.5em; margin: 0.5em 0 0 0; padding: 1em 0; width: 100%; } .gallery-li { display: flex; flex-flow: row wrap; padding: 0; } .gallery-ul img { border: 0; margin: 0; padding: 0; } .gallery-a:link { border: 2px solid var(--link-colour); border-radius: 3px; padding: 4px; text-decoration: none; text-underline-offset: 0; } .gallery-a:hover { border: 2px solid var(--hover-colour); text-decoration: none; } .slideshow { display: none; } /* not applicable to mobiles; reinstated below */ /* others */ article { padding: 0 0 3em 0; } #individual-contact { margin: 1em 0 0 0; } #related-dir, #related-gov, #related-misc, #bonus { border-top: 1px dashed var(--theme-colour); margin: 2.5em 0 0 0; } #related-hist, #also-hist { margin: 1.5em 0 0 0; } .search-li { border-bottom: 1px dashed var(--theme-colour); padding-bottom: 1.5em; } /* ======================================================== 4 : basic one-column flex and grid layout for newer browsers ======================================================== */ @supports (display: grid) { /* to weed out older browsers */ #container { margin: 0; max-width: 100%; padding: 0; width: 100%; display: grid; grid-template-columns: 2% 96% 2%; } header, nav, main, footer { grid-column: 2; } header, #search-form { background: var(--theme-colour); align-items: center; display: flex; justify-content: space-between; } main, footer, article, #search-form, #individual-contact, #contact-dl, #related-dir, #related-gov, #related-misc, #related-hist, figure, picture { display: flex; flex-direction: column; } /* =============================================== 5 : decoration added for tablets & large mobiles =============================================== */ @media all and (min-width: 600px) { body { background: var(--theme-colour); } #container { grid-template-columns: 3% 94% 3%; } main, footer { padding: 0 3%; } main { background: #fff; } header { margin: 0; padding: 0.5em 0; } #site-name-p { font-size: 180%; } #nav-ul { padding: 0 0 0.5em 0; } .nav-a { font-size: 100%; } .breadcrumbs-nav { border-top: none; padding: 0.4em 0; } #img-plug { margin: 1.2em 0 1.2em 1.5em; } /* home page */ #link-box-ul { flex-flow: row wrap; justify-content: space-around; } /* directory landing page, directory & government category pages, & site-map page */ #businesses, #services, #districts, #site-hist, #site-gov, #site-gov-cats, #site-misc, #site-dir-cats, #site-dir-indiv { border-top: 1px dashed var(--theme-colour); margin: 2.5em 0 0 0; padding: 0.25em 0 0 0; } #directory-latest-ul, #directory-businesses-ul, .sitemap-ul { columns: 260px auto; gap: 3em; } #category-ul { columns: 300px auto; gap: 3em; } } /* end of min-width: 600px */ /* =========================================== 6 : grid areas defined; some minor menus side by side; footer enhanced; includes optional plug on individual pages; size OK for most tablets in 2025 =========================================== */ @media all and (min-width: 850px) { html { scrollbar-color: var(--theme-colour) #fff; } ::-webkit-scrollbar { background: #fff; } ::-webkit-scrollbar-thumb { background: var(--theme-colour); } #container { grid-template-columns: 1fr 800px 1fr; } header { padding: 0.7em 0; } #site-name-p { background: url(images/cs-logo-2025-01-60x40.png) 0 50% no-repeat; font-size: 200%; padding: 0.2em 0 0.2em 84px; text-shadow: 1px 1px 1px #000; } .search-text { max-width: 20ch; } main { padding: 0 30px} .breadcrumbs-nav { padding: 0.5em 0; } .slideshow { display: block; } /* instructions & noscript activated for devices which can display a slideshow */ /* nav: stretches to entire width */ #nav-ul { justify-content: space-between; } .nav-li { flex-grow: 1; } .nav-a:link, .nav-a:visited { border-radius: 5px; padding: 0.3em 0; } /* article: default grid settings */ article { display: grid; grid-template-columns: 355px 30px 355px; } h1 { grid-area: h1; } #plug { grid-area: plug; } /* included in case it's required; layout will ignore it if page doesn't contain a plug */ #bonus { grid-area: bonus; } /* article: home page */ #article-index { grid-template-columns: 100%; grid-template-areas: "h1" "landing" "link-box" "listings"; } #landing { grid-area: landing; } #link-box-ul { grid-area: link-box; } #listings { grid-area: listings; } /* article: directory landing page */ #article-landing-dir { grid-template-areas: "h1 h1 h1" "dir-intro dir-intro dir-intro" "businesses businesses businesses" "services . districts"; } #dir-intro { grid-area: dir-intro; } #businesses { grid-area: businesses; } #services { grid-area: services; } #districts { grid-area: districts; } /* article: government landing page */ #article-landing-gov { grid-template-areas: "h1 h1 h1" "rep . pol"; } #rep { grid-area: rep; } #pol { grid-area: pol; } /* article: history landing page */ #article-landing-history { grid-template-columns: 100%; grid-template-areas: "h1" "prehistory" "saxons" "steam" "new-town"; } #prehistory { grid-area: prehistory; } #saxons { grid-area: saxons; } #steam { grid-area: steam; } #new-town { grid-area: new-town; } /* article: miscellaneous landing page */ #article-landing-misc { grid-template-columns: 100%; grid-template-areas: "h1" "landing"; } /* article: directory & government category pages */ #article-category { grid-template-columns: 100%; grid-template-areas: "h1" "cat-list"; } #category-ul { grid-area: cat-list; } /* article: directory & government individual pages */ #article-dir, #article-gov { grid-template-areas: "h1 h1 h1" "info info info" "contact . related" "plug plug plug"; } #individual-info { grid-area: info; } #individual-contact { grid-area: contact; } #related-dir, #related-gov { border-top: 0; grid-area: related; } #related-h2-dir, #related-h2-gov { margin: 0; } /* article: history individual pages */ #article-hist { grid-template-areas: "h1 h1 h1" "info info info" "related . also" "plug plug plug"; } #related-hist { grid-area: related; } #also-hist { grid-area: also; } /* article: miscellaneous individual pages */ #article-misc { grid-template-columns: 100%; grid-template-areas: "h1" "info" "related" "bonus" "plug"; } #related-misc { grid-area: related; } /* article: contact page */ #article-contact { grid-template-columns: 62% 8% 30%; grid-template-areas: "h1 h1 h1" "form . free" "form . notes" "form . privacy" "form . ."; } #contact-form { grid-area: form; } #contact-free { grid-area: free; } #contact-notes { grid-area: notes; } #contact-privacy { grid-area: privacy; } #contact-free-h2 { margin: 0.5em 0 0 0; } /* article: location page */ #article-location { grid-template-areas: "h1 h1 h1" "loc-intro . loc-links" "loc-map loc-map loc-map"; } #location-intro { grid-area: loc-intro; } #location-links { grid-area: loc-links; } #location-map { grid-area: loc-map; } /* article: search results page */ #article-search { grid-template-columns: 100%; grid-template-areas: "h1" "search-p" "search-ul"; } #search-p { grid-area: search-p; } #search-ul { grid-area: search-ul; } /* article: site map page */ #article-site-map { grid-template-columns: 100%; grid-template-areas: "h1" "sm-main" "sm-hist" "sm-gov" "sm-misc" "sm-cats" "sm-indiv"; } #site-main { grid-area: sm-main; } #site-hist { grid-area: sm-hist; } #site-gov { grid-area: sm-gov; } #site-misc { grid-area: sm-misc; } #site-dir-cats { grid-area: sm-cats; } #site-dir-indiv { grid-area: sm-indiv; } /* article: about/copyright page */ #article-about { grid-template-columns: 100%; grid-template-areas: "h1" "images" "design"; } #images-etc { grid-area: images; } #design { grid-area: design; } /* article: privacy policy page */ #article-privacy { grid-template-columns: 100%; grid-template-areas: "h1" "h2" "visitors" "form"; } #privacy-h2 { grid-area: h2; } #visitors { grid-area: visitors; } #form { grid-area: form; } /* article: thank-you & error pages */ #article-thanks, #article-error { grid-template-columns: 1fr; grid-template-areas: "h1" "landing"; } /* footer */ footer { background: transparent; padding: 0; } #dt-top { grid-area: dt-1; } #dd-top { grid-area: dd-1; } #dt-map { grid-area: dt-2; } #dd-map { grid-area: dd-2; } #dt-priv { grid-area: dt-3; } #dd-priv { grid-area: dd-3; } #dt-about { grid-area: dt-4; } #dd-about { grid-area: dd-4; } #dt-by { grid-area: dt-5; } #dd-by { grid-area: dd-5; } #footer-dl { background: var(--background-colour-darker); border-top: none; color: #fff; margin: 1.5em 0; padding: 1em 0.5em; display: grid; grid-template-columns: 25% 75%; grid-template-areas: "dt-1 dd-1" "dt-2 dd-2" "dt-3 dd-3" "dt-4 dd-4" "dt-5 dd-5"; } .footer-dt { color: #fff; font-weight: normal; margin: 0; padding: 0.3em 1em 0.3em 0; text-align: right; } .footer-dd { padding: 0.2em 0; } .footer-a:link, .footer-a:visited { background: none; border-bottom: none; color: #fff; padding: 0.1em 0; text-decoration: underline 1px; } .footer-a:hover { background: rgba(0, 0, 0, 0.5); color: var(--hover-colour-alt); text-decoration: underline; } .footer-a:focus { background: #fff; color: #000; outline: 1px solid #000; } .footer-a[aria-current]:link, .footer-a[aria-current]:visited, .footer-a[aria-current]:hover, .footer-a[aria-current]:focus, .footer-a[aria-current]:active { background: none; color: var(--hover-colour-alt); outline: none; text-decoration: none; } } /* end of min-width: 850px */ /* ============================================ 7 : first proper two-column layout; size OK for small monitors & top-end tablets ============================================ */ @media all and (min-width: 1000px) { #container { grid-template-columns: 1fr 950px 1fr; } main { border-radius: 5px; padding: 0 40px; } .breadcrumbs-nav { padding: 0.6em 0; } /* footer */ footer-dl { border-radius: 5px; } #lab99-a:link, #lab99-a:hover { background: url(images/lab99-logo-24x24-03.png) 6px 50% no-repeat; padding-left: 40px; } #lab99-a:focus { background-color: #fff; } /* tweaks to individual contact details, minor menus, etc */ #contact-h2 { margin: 0; } #related-dir, #related-gov { border-top: 1px dashed var(--theme-colour); } #related-hist { margin: 0; padding: 0; } #related-misc { border-top: 0; margin: 0; } #related-h2-dir, #related-h2-gov { margin: 0.8em 0 0 0; } #related-h2-hist, #related-h2-misc { margin: 0.5em 0 0 0; } /* reduced from 0.8em (from now on, directly below h1, so = .h2-top) */ #also-hist { border-top: 1px dashed var(--theme-colour); margin: 2.5em 0 0 0; } /* article: all individual pages except (one-column) misc */ article { grid-template-columns: 560px 40px 270px; } #article-dir, #article-gov { grid-template-areas: "h1 h1 h1" "info . contact" "info . related" "info . ." "plug . ."; } #article-hist { grid-template-areas: "h1 h1 h1" "info . related" "info . also" "info . ." "plug . ."; } /* article: misc individual page (up to now, one column) */ #article-misc { grid-template-columns: 560px 40px 270px; grid-template-areas: "h1 h1 h1" "info . related" "info . ." "plug . ." "bonus . ."; } /* article: all landing pages except (one-column) misc */ #article-landing-gov, #article-location { grid-template-columns: 415px 40px 415px; } #article-landing-dir { grid-template-columns: 415px 40px 415px; grid-template-areas: "h1 h1 h1" "dir-intro dir-intro dir-intro" "businesses businesses businesses" "services . districts"; } } /* end of min-width:1000px */ /* ======================= 8 : quick expansion: +100px ======================= */ @media all and (min-width: 1100px) { #container { grid-template-columns: 1fr 1050px 1fr; } main { padding: 0 50px; } header { padding: 1em 0; } #nav-ul { gap: 0.5em; } .nav-a:link, .nav-a:visited { padding: 0.4em 0; } .breadcrumbs-nav { padding: 0.7em 0; } /* articles */ article, #article-misc { grid-template-columns: 620px 50px 280px; } #article-landing-dir, #article-landing-gov, #article-location { grid-template-columns: 450px 50px 450px; } #article-landing-history { grid-template-columns: 450px 50px 450px; grid-template-areas: "h1 h1 h1" "prehistory . saxons" "steam . new-town"; } #steam, #new-town { margin: 1.5em 0 0 0; } /* individual contact details */ .contact-dt { padding-left: 34px; } /* medium-sized icons: max width 290px inc padding */ #dt-website { background: url(images/icons-1518x20.png) 0 50% no-repeat; } #dt-email { background: url(images/icons-1518x20.png) -500px 50% no-repeat; } #dt-phone { background: url(images/icons-1518x20.png) -1000px 50% no-repeat; } #dt-address { background: url(images/icons-1518x20.png) -1500px 50% no-repeat; } } /* end of min-width:1100px */ /* ============================== 9 : further +100px expanasion suitable for 1280x720 monitors ============================== */ @media all and (min-width: 1200px) { #container { grid-template-columns: 1fr 1150px 1fr; } #site-name-p { background: url(images/cs-logo-2025-01-75x50.png) 0 50% no-repeat; padding-left: 106px; } .breadcrumbs-nav { padding: 0.8em 0; } article, #article-misc { grid-template-columns: 710px 50px 290px; } #article-landing-dir { grid-template-columns: 1fr 1fr 70px 1fr; grid-template-areas: "h1 h1 h1 h1" "dir-intro dir-intro . services" "businesses businesses . services" "businesses businesses . districts" "businesses businesses . ."; } #services { border: 0; margin: 0; padding: 0; } #article-landing-gov, #article-location { grid-template-columns: 500px 50px 500px; } #article-landing-history { grid-template-columns: 495px 60px 495px; } #article-about { grid-template-columns: 47% 6% 47%; grid-template-areas: "h1 h1 h1" "images . design"; } #article-privacy { grid-template-columns: 47% 6% 47%; grid-template-areas: "h1 h1 h1" "h2 h2 h2" "visitors . form"; } #visitors, #form { margin: 0.5em 0 0 0; } } /* end of min-width:1200px */ /* ============================== 10 : penultimate expansion: +200px ============================== */ @media all and (min-width: 1400px) { #container { grid-template-columns: 1fr 1350px 1fr; } header { border-top: 3px solid var(--background-colour-darker); } #site-name-p { padding-left: 110px; } /* a bit more space for logo */ .search-text { max-width: 25ch; } main { border-radius: 7px; padding: 0 60px; } .nav-a:link, .nav-a:visited { padding: 0.5em 0; } .breadcrumbs-nav { padding: 0.9em 0; } #footer-dl { border-radius: 7px; } /* articles */ article, #article-misc { grid-template-columns: 830px 60px 340px; } #article-index { grid-template-columns: 830px 60px 340px; grid-template-areas: "h1 h1 h1" "landing . listings" "link-box . listings"; } #listings-h2 { margin: 0.5em 0 0 0; } #article-landing-dir { grid-template-columns: 435px 435px 60px 300px; } #directory-latest-ul, #directory-businesses-ul, #sitemap-dir-ul { columns: 280px auto; } #article-landing-gov, #article-location { grid-template-columns: 575px 60px 575px; } #article-landing-history { grid-template-columns: 580px 70px 580px; } #article-site-map { grid-template-columns: 570px 90px 570px; grid-template-areas: "h1 h1 h1" "sm-main sm-main sm-main" "sm-gov . sm-hist" "sm-gov . sm-misc" "sm-cats sm-cats sm-cats" "sm-indiv sm-indiv sm-indiv"; } /* individual contact details */ .contact-dt { padding-left: 40px; } /* larger-sized icons: max width 345px inc padding */ #dt-website { background: url(images/icons-1521x24.png) 0 40% no-repeat; } #dt-email { background: url(images/icons-1521x24.png) -500px 40%% no-repeat; } #dt-phone { background: url(images/icons-1521x24.png) -1000px 40% no-repeat; } #dt-address { background: url(images/icons-1521x24.png) -1500px 40% no-repeat; } } /* end of min-width: 1400px */ /* ========================================================== 11 : extra column for 1920x1080px monitors breadcrumbs & h1 moved right in individual & contact pages ========================================================== */ @media all and (min-width: 1850px) { #container { grid-template-columns: 1fr 1800px 1fr; } header { border-top: 3px solid var(--background-colour-darker); padding: 1em 80px; } #site-name-p { background: url(images/cs-logo-2025-01-90x50.png) 0 50% no-repeat; padding-left: 130px; } nav, main { padding: 0 80px; } #footer-dl { grid-template-columns: 465px 1fr; } /* so that
s line up with left edge of main column on 'alt' pages (465 = 80 + 340 + 45) */ /* on individual article & contact pages (padding is necessary to retain decorative borders */ #breadcrumbs-alt, #h1-alt { padding-left: 385px; } /* article - generic for individual pages except misc */ article { grid-template-columns: 340px 45px 840px 70px 345px; } /* article - directory & government individual pages */ #article-dir, #article-gov { grid-template-areas: "h1 h1 h1 h1 h1" "related . info . contact" ". . info . ." ". . plug . ."; } #related-dir, #related-gov { border-top: 0; margin: 0; } #related-h2-dir, #related-h2-gov { margin: 0.8em 0 0 0; } /* article - history individual pages */ #article-hist { grid-template-areas: "h1 h1 h1 h1 h1" "also . info . related" ". . info . ." ". . plug . ."; } #also-hist { border-top: 0; margin: 0; } #also-hist-h2 { margin: 0.5em 0 0 0; } /* article - misc individual pages (bonus is necessary to fill the left-hand column) */ #article-misc { grid-template-columns: 335px 50px 840px 70px 345px; grid-template-areas: "h1 h1 h1 h1 h1" "bonus . info . related" ". . info . ." ". . plug . ."; } #bonus { border-top: 0; margin: 0; } #bonus-h2 { margin: 0.5em 0 0 0; } /* individual pages - contact details (icons moved up slightly) */ #dt-website { background: url(images/icons-1521x24.png) 0 40% no-repeat; } #dt-email { background: url(images/icons-1521x24.png) -500px 40% no-repeat; } #dt-phone { background: url(images/icons-1521x24.png) -1000px 40% no-repeat; } #dt-address { background: url(images/icons-1521x24.png) -1500px 40% no-repeat; } /* article - home page & directory, government & history landing pages */ #article-index { grid-template-columns: 1000px 100px 540px; } #article-landing-dir { grid-template-columns: 600px 600px 90px 350px; } #article-landing-gov, #article-landing-history { grid-template-columns: 780px 80px 780px; } /* article - location page */ #article-location { grid-template-columns: 1200px 70px 370px; grid-template-areas: "h1 h1 h1 " "loc-map . loc-intro" "loc-map . loc-links" "loc-map . ."; } #location-intro { margin: 0.5em 0 0 0; } #location-links { border-top: 1px dashed var(--theme-colour); margin: 1.5em 0 0 0; padding: 0.8em 0 0 0; } /* article - contact page */ #article-contact { grid-template-columns: 335px 50px 800px 70px 385px; grid-template-areas: "h1 h1 h1 h1 h1" "free . form . notes" "privacy . form . notes" ". . form . notes" ". . form . ."; } #contact-free-h2, #contact-notes-h2 { margin: 0.5em 0 0 0; } /* article: site map page */ #article-site-map { grid-template-columns: 770px 100px 770px; } } /* end of min-width:1850px */ } /* end of @supports (display: grid) */ /* ============ 12 : print styles ============ */ @media print { @page { margin: 1.5cm 2cm; } body, main { color: #000; font: 12pt/1.7 georgia, serif; } /* for old browsers which don't recognise variables */ body, main { background: #fff; border: none; color: var(--print-colour); font: 12pt/1.7 var(--font-family-print); padding: 0; width: 100%; } #container { grid-template-columns: 1fr; margin: 0 auto; width: 100%; } #skipnav-p, #search-form, #primary-nav, .breadcrumbs-nav, footer, #bonus, #plug, #plug-misc, #related-dir, #related-gov, #related-hist, #related-misc, #also { display: none; } a:link, a:visited { background: none; color: var(--print-colour); text-decoration: none; } a::after { content: " [" attr(href) "]"; } a.gallery-a::after, a.url-no-print::after { content: ""; } #site-name-p { background: none; border-top: 1px solid var(--print-colour); border-bottom: 1px solid var(--print-colour); color: var(--print-colour); font-size: 1.3rem; font-weight: normal; height: auto; line-height: 1.3; margin: 0 0 0.5em 0; padding: 0.3em 0; text-align: left; } h1 { border: none; color: var(--print-colour); font: bold 180%/1.4 var(--font-family-print); padding: 0.2em 0; width: 100%; } #h1-indiv { padding-left: 0; } h2 { background: #fff; color: var(--print-colour); font: bold 140%/1.4 var(--font-family-print); padding: 0; break-after: avoid; width: 100%; } h3 { color: var(--print-colour); font: bold 110%/1.4 var(--font-family-print); break-after: avoid; width: 100%; } p { orphans: 2; widows: 2; } li::marker { color: var(--print-colour); } dl { margin: 0.3em 0; padding: 0; width: 100%; } dt { color: var(--print-colour); font: normal 12pt/1.7 var(--font-family-print); padding: 0.2em 0 0 0; width: 100%; } .contact-dt { padding-left: 0; } #dt-website, #dt-email, #dt-phone, #dt-address { background: none; } dd { padding: 0; width: 100%; } img { box-decoration-break: clone; } abbr { border-bottom: 1px dotted var(--text-colour); } abbr[title]::after { content: " [" attr(title) "]"; } blockquote { background: #fff; border-left: 2px solid var(--print-colour); } noscript { border: 2px solid var(--print-colour); } .alert { background: #fff; border: 2px solid var(--print-colour); } .read-more { border-top: 1px dashed var(--print-colour); border-bottom: 1px dashed var(--print-colour); } } /* end of print styles */ /* ======= The End ======= */