/* 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; } /* All-media style sheet for http://www.lab99.com/ This version, with basic one-column layout for non-HTML5 browsers, 2024, copyright Lab 99 Web Design main colours: #94b0d7 : light grey-blue {body background} #5984be : medium blue {text-block background} #3875c9 : light blue (minor-block background) #fdf403 : yellow (h1, h2, etc) #ffc956 : orange (links) #15498f : dark blue (hover background) #020814 : almost black (header & footer background) */ html { height: 100%; width: 100%; } @-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: "montserrat"; font-style: normal; font-weight: 400; src: url("/fonts/montserrat-v13-latin-regular.eot"); src: local("Montserrat Regular"), local("Montserrat-Regular"), url("/fonts/montserrat-v13-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/montserrat-v13-latin-regular.woff2") format("woff2"), url("/fonts/montserrat-v13-latin-regular.woff") format("woff"), url("/fonts/montserrat-v13-latin-regular.ttf") format("truetype"), url("/fonts/montserrat-v13-latin-regular.svg#Montserrat") format("svg"); } /* eot: 22.4 kB; woff2: 19.2 kB; woff: 23.5 kB; ttf: 46.4 kB; svg: 53.7 kB */ @font-face { font-family: "open sans"; font-style: normal; font-weight: 400; src: url("/fonts/open-sans-v16-latin-regular.eot"); src: local("Open Sans Regular"), local("OpenSans-Regular"), local("open sans"), url("/fonts/open-sans-v16-latin-regular.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans-v16-latin-regular.woff2") format("woff2"), url("/fonts/open-sans-v16-latin-regular.woff") format("woff"), url("/fonts/open-sans-v16-latin-regular.ttf") format("truetype"), url("/fonts/open-sans-v16-latin-regular.svg#OpenSans") format("svg"); } /* eot: 16 kB; woff2: 14.4 kB; woff: 18.1 kB; ttf: 27.1 kB; svg: 56.3 kB */ @font-face { font-family: "open sans"; font-style: italic; font-weight: 400; src: url("/fonts/open-sans-v16-latin-italic.eot"); src: local("Open Sans Italic"), local("OpenSans-Italic"), url("/fonts/open-sans-v16-latin-italic.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans-v16-latin-italic.woff2") format("woff2"), url("/fonts/open-sans-v16-latin-italic.woff") format("woff"), url("/fonts/open-sans-v16-latin-italic.ttf") format("truetype"), url("/fonts/open-sans-v16-latin-italic.svg#OpenSans") format("svg"); } /* eot: 14.8 kB; woff2: 14.4 kB; woff: 18.1 kB; ttf: 27.1 kB; svg: 59.4 kB */ @font-face { font-family: "open sans"; font-style: normal; font-weight: 700; src: url("/fonts/open-sans-v16-latin-700.eot"); src: local("Open Sans Bold"), local("OpenSans-Bold"), url("/fonts/open-sans-v16-latin-700.eot?#iefix") format("embedded-opentype"), url("/fonts/open-sans-v16-latin-700.woff2") format("woff2"), url("/fonts/open-sans-v16-latin-700.woff") format("woff"), url("/fonts/open-sans-v16-latin-700.ttf") format("truetype"), url("/fonts/open-sans-v16-latin-700.svg#OpenSans") format("svg"); } /* eot: 15.4 kB; woff2: 15.1 kB; woff: 18.9 kB; ttf: 28.8 kB; svg: 55.7 kB */ /* 4 x woff2 = 63.1 kB */ /* Thanks: Google Web Font Helper: https://gwfh.mranftl.com/ */ /* main elements */ body { background: #94b0d7; color: #fff; font-family: "open sans", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; font-size: 100%; font-size: calc(15px + 0.390625vw); line-height: 1.8; text-align: left; width: 100%; } /* flexible font-size: https://matthewjamestaylor.com/responsive-font-size */ .block { background: #2b62ac; float: left; margin: 0.2em 0 0 0; padding: 0 2% 1.5em 2%; width: 100%; } /* in left-hand column in two-column layouts */ .block-minor { background: #3875c9; float: left; margin: 0.2em 0 0 0; padding: 0 2% 1.5em 2%; width: 100%; } /* in right-hand column in two-column layouts */ /* links */ a:link { border-bottom: 1px solid #ffc956; border-top: 1px solid transparent; color: #ffc956; text-decoration: none; word-wrap: break-word; } a:visited { border-bottom: 1px solid #fff; color: #ffc956; text-decoration: none; } a:hover { background: #15498f; border-bottom: 1px solid #fff; border-top: 1px solid #fff; color: #fff; text-decoration: none; } a:focus { background: #15498f; color: #fff; outline: 3px solid #fff; outline-offset: 0.25rem; } a:focus-visible { box-shadow: 0 0 0 6px white; outline: 9px double black; z-index: 100; } /* keyboard focus (see https://www.sarasoueidan.com/blog/focus-indicators/) */ a:active { color: #fdf403; } /* headings (thanks: https://royalfig.github.io/fluid-typography-calculator/) */ h1, h2, h3, h4 { color: #fdf403; font: normal 2.2rem/1.3 "montserrat", "open sans", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; letter-spacing: 0.02em; margin: 1.3em 0 0 0; padding: 0 0 0.3em 0; text-wrap: balance; } h1 { font-size: clamp(2.2rem, 2rem + 1vw, 3.2rem); margin: 0.8em 0 0.2em 0; padding: 0 0 0.4em 0; } .other-h1 { padding: 0 0 0.2em 0; } h2 { font-size: 1.7rem; font-size: clamp(1.7rem, 1.5999999999999999rem + 0.5000000000000002vw, 2.2rem); } h3, .sites-h2 { font-size: 1.4rem; font-size: clamp(1.4rem, 1.3199999999999998rem + 0.4000000000000002vw, 1.8rem); } h4 { font-size: 1.2rem; font-size: clamp(1.2rem, 1.14rem + 0.30000000000000004vw, 1.5rem); } /* paragraphs */ p { margin: 0.7em 0 0 0; } #eucookie { padding: 0 2.5%; } /* not currently in use */ #tutorial-credit { border-top: 1px solid #94b0d7; font-style: italic; margin: 1.5em 0 0 0; padding: 1em 0 0 0; } /* lists */ ul { line-height: 1.7; list-style: disc; padding: 0.6em 0 0 1.2em; } .sub-ul { padding: 0 0 0.2em 1.2em; } ol { line-height: 1.7; list-style: decimal; padding: 0.5em 0 0 1.5em; } .sub-ol { padding: 0 0 0.2em 1.2em; } li { padding: 0.2em 0; } li::marker { color: #fdf403; } /* coloured dots and numbers! */ .sub-li::marker { color: #fff; } dl { float: left; margin: 0 0 1em 0; width: 100%; } dt { font-weight: bold; padding: 0.5em 0 0.2em 0; } dd { padding: 0 0 0 1em; } /* minor elements */ img { background: #94b0d7; float: left; height: auto; max-width: 100%; padding: 3px; } .mini { margin: 1.2em 1em 0.5em 0; } .mini-alt { float: right; margin: 1.2em 0 1em 1em; } .logo { background: transparent; margin: 0.7em 1em 0 0; padding: 0; } .logo-alt { background: transparent; float: right; margin: 0.8em 0 0.8em 1em; padding: 0; } .imagewrapper { float: left; padding: 1.5em 0; width: 100%; } abbr { border-bottom: 1px dotted; cursor: help; speak: spell-out; text-decoration: none; } strong { font-weight: bold; } em, cite { font-style: italic; } blockquote { background: #3875c9; margin: 1em 0 0 0; padding: 0.2em 1em 1em 1em; } code { background: #15498f; color: #fdf403; font-family: monaco, courier, monospace; line-height: 1.5; overflow: auto; margin: 0.4em 0 0 0; padding: 0.2em 0.5em; } .domain, .password, .searchquery { color: #fdf403; } .lab99 { color: #fdf403; font-family: "montserrat", "open sans", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; } .spell { text-decoration: line-through; } .mob-chop { display: none; } /* reinstated below for non-mobiles */ /* header */ #site-name-p { background: #020814; border-bottom: 2px solid #fdf403; border-top: 2px solid #fdf403; color: #fdf403; font: normal 2.2rem/1.3 "montserrat", "open sans", system-ui, "segoe ui", roboto, helvetica, arial, sans-serif; margin: 0; padding: 0.2em 2%; } #site-name-alt { color: #fff; } /* not currently in use: a#site-name-a { color: #fdf403; } */ /* skipnav link */ #skipnav-p { position: absolute; right: 20px; top: 4px; } #skipnav-a, #skipnav-a:visited, #skipnav-a:hover { background: transparent; border: 2px solid transparent; color: transparent; padding: 0.2em 0.6em; } #skipnav-a:focus { background: #fff; border: 2px solid #000; color: #000; } /* breadcrumbs */ #breadcrumbs-nav { background: #588bd0; border-bottom: 1px solid #2b62ac; border-top: 1px solid #2b62ac; float: left; font-size: 90%; padding: 0 2%; width: 100%; } #breadcrumbs-p { display: none; } /* reinstated below for wider screens */ #breadcrumbs-ol { display: inline-block; line-height: 1.3; list-style: none; margin: 0; padding: 0; } .breadcrumbs-li { display: inline-block; padding: 0; } .bc-separator { font-weight: bold; padding: 0 0.5em; } /* primary navigation */ #nav-ul { border-bottom: 2px solid #fdf403; float: left; list-style: none; margin: 0; padding: 0.2em 2%; width: 100%; } .nav-li { float: left; padding: 0; text-align: center; width: auto; } .nav-a:link, .nav-a:visited { background: #134487; border: 1px solid #fff; color: #fff; display: block; float: left; font-size: 90%; margin: 0.2em 0.4em 0.2em 0; padding: 0 0.4em; text-decoration: none; } .nav-a:hover { background: #2b62ac; border: 1px solid #fdf403; color: #fdf403; text-decoration: underline; } .nav-a:focus { background: #2b62ac; color: #fdf403; } .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: #134487; color: #fdf403; border: 1px solid #fdf403; cursor: default; text-decoration: none; } /* footer */ #siteinfo { background: #020814; float: left; margin: 1em 0 0 0; padding: 0 2% 1em 2%; text-align: center; width: 100%; } #footer-nav-ul { border-bottom: 1px solid #2b62ac; display: inline; float: left; list-style: none; margin: 0 0 0.5em 0; padding: 1em 0; width: 100%; } .footer-li { margin: 0.5em 0; padding: 0 1em 0 0; } #copyright-p { float: left; font-size: 90%; margin: 0; padding: 0.8em 0 0 0; width: 100%; } #gotop-p { margin: 0; } #gotop-a { background: #94b0d7; border: 1px solid #94b0d7; border-top: none; color: #020814; display: block; float: left; padding: 0 0.8em 0 0.6em; text-align: center; text-decoration: none; } #gotop-a:hover { background: #020814; color: #94b0d7; } #gotop-a:focus { background: #020814; color: #fff; } #top-arrow { font-size: 140%; padding-right: 0.2em; } .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; border: none; color: #fff; cursor: default; text-decoration: none; } /* contact forms (old and new versions) & thank-you page */ form { float: left; width: 100%; } fieldset { border: none; } legend { visibility: hidden; } .form-p { margin: 0; width: 100%; } label { color: #fdf403; font-size: inherit; width: 100%; } input, textarea { background: #15498f; border: 2px solid #fdf403; color: #fff; font-size: inherit; font-family: inherit; line-height: 1.6; margin: 0.5em 0 1em 0; padding: 0.3em 0.6em; width: 100%; } input:hover, textarea:hover { background: #fff; color: #171a3a; } input:focus, .comSubmit:focus, textarea:focus { background: #fff; border: 2px solid #5984be; color: #171a3a; outline: 5px solid #fdf403; } input:user-invalid { border-color: red; } /* if the email or phone fields do not contain the correct format */ input:user-valid { border-color: #fdf403; } /* normal colour if the correct format is entered */ .comSubmit { background: #2b62ac; color: #fdf403; display: inline; font-weight: bold; letter-spacing: 0.1em; margin: 0 0 0 1em; padding: 0.3em 0.5em; text-transform: uppercase; width: auto; } .comSubmit:hover { background: #fff; border: 2px solid #fff; color: #2b62ac; cursor: pointer; } .comError { border: 2px solid #fdf403; color: #fdf403; font-weight: bold; list-style: none; margin: 0 0 2em 0; padding: 0.5em 1em; } input[type="submit"], label[for] { cursor: pointer; } input#phone, input#mail { margin: 0; padding: 0; } #thank-you-message { background: #3875c9; border: 1px solid #fdf403; font-size: 1.3rem; line-height: 1.5; margin-bottom: 0.4em; padding: 0.7em 1.5em; } /* tables */ table { background: #588bd0; float: left; margin: 0 0 0.5em 0; padding: 5px; text-align: center; width: 95%; } caption { color: #fdf403; font-size: 110%; font-variant: small-caps; font-weight: normal; padding: 0.5em 0; text-align: left; } th, tr.headrow:hover { background: #3875c9; color: #fff; font-weight: normal; padding: 0.5em 0; } td { border-bottom: 1px solid #3875c9; padding: 5px 7px; } td.name { border-left: none; font-weight: bold; } tr:nth-of-type(even) { background: #6a95d0; } tr:nth-of-type(even):hover, tr:hover { background: #fff; color: #588bd0; font-weight: bold; transition: background-color: 0.30s ease, color: 0.30s ease; } /* slimbox */ #lbOverlay { background-color: #000; cursor: pointer; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 9999; } #lbCenter, #lbBottomContainer { background-color: #fff; overflow: hidden; position: absolute; z-index: 9999; } .lbLoading { background: #fff url(images/loading.gif) center no-repeat; } #lbImage { background-repeat: no-repeat; border: 10px solid #fff; left: 0; position: absolute; top: 0; } #lbPrevLink, #lbNextLink { display: block; outline: none; position: absolute; top: 0; width: 50%; } #lbPrevLink { left: 0; } #lbPrevLink:hover { background: transparent url(images/prevlabel01.png) 0 15% no-repeat; } #lbNextLink { right: 0; } #lbNextLink:hover { background: transparent url(images/nextlabel01.png) 100% 15% no-repeat; } #lbBottom { border: 10px solid #fff; border-top-style: none; color: #666; font-family: "open sans", "helvetica neue", helvetica, arial, sans-serif; font-size: 10px; line-height: 1.4; text-align: left; } #lbCloseLink { background: transparent url(images/closelabel01.png) center no-repeat; display: block; float: right; height: 22px; margin: 5px 0; outline: none; width: 66px; } #lbCaption, #lbNumber { margin-right: 71px; } #lbCaption { font-weight: bold; } /* read-more links */ .morelink:link, .morelink:visited { background: #134487; border: 1px solid #ffc956; color: #ffc956; display: block; float: left; margin: 0.4em 0; padding: 0.2em 0.8em; text-decoration: none; } .morelink:hover { border: 1px solid #fff; color: #fff; text-decoration: underline; } .morelink:active { background: #134487; border: 1px solid #ffc956; color: #ffc956; } .morelink:focus { color: #fff; text-shadow: none; text-decoration: none; } .morearrows { font-size: 120%; font-weight: bold; } /* minor navigation */ .subnav-p { margin: 0; } .subnav-ul, .subnav-ol { border-bottom: 1px solid #94b0d7; border-top: 1px solid #94b0d7; line-height: 1.3; margin: 0.8em 0 0 0; padding: 0 0 0 1.2em; } .subnav-ul { list-style: none; padding: 0; } .subnav-li { border-top: 1px solid #94b0d7; padding: 0; } .subnav-li:first-of-type { border-top: none; } .subnav-a:link { border-bottom: none; border-top: none; display: block; padding: 0.5em 0; text-decoration: none; } .subnav-a:hover { background: none; text-decoration: underline; text-underline-offset: 0.25em; } .subnav-a[aria-current]:link, .subnav-a[aria-current]:visited, .subnav-a[aria-current]:hover, .subnav-a[aria-current]:focus, .subnav-a[aria-current]:active { background: none; color: #fff; cursor: default; text-decoration: none; } /* home, web design, & portfolio pages */ #offer-ul, #sites-ul { background: #2b62ac; float: left; list-style: none; padding: 0; width: 100%; } .offer-li, .sites-li { float: left; margin: 0; padding: 0 2% 1.5em 2%; width: 100%; } .offer-li:nth-of-type(odd), .sites-li:nth-of-type(odd) { background: #3875c9; } /* portfolio page */ .sites-h2 { padding: 0 0 0.5em 0; } .sites-h2-a:link, .sites-h2-a:visited { text-decoration: none; } .sites-h2-a:hover { text-decoration: underline; } .sites-img-container { float: left; margin: 0.7em 0 0 0; width: 100%; } .sites-text { float: left; width: 100%; } .sites-text-ul { line-height: 1.5; } /* small business websites page */ #packages-ul { float: left; list-style: none; margin: 1.5em 0 2em 0; padding: 0; width: 100%; } #package-li-01, #package-li-02 { background: #3875c9; border: 1px solid #fdf403; float: left; padding: 1em; width: 100%; } #package-02 { margin-top: 1em; } .package-price-p { font-size: 3.2rem; font-size: clamp(3.2rem, 2.8400000000000003rem + 1.7999999999999998vw, 5rem); line-height: 1.2; margin: 0; } .package-pages-p { color: #fdf403; font-size: 2em; margin: 0; } .package-features-ul { list-style: none; padding: 0.3em 0; } /* table of contents (T & C and free software pages) */ #toc-div { background: #3875c9; margin: 1em 0; padding: 0.1em 2% 1.5em 2%; width: 100%; } /* ============= ============= MEDIA QUERIES ============= ============= */ /* =========================================== SINGLE-COLUMN FOR NEWER MOBILES AND TABLETS =========================================== */ body { border-top: 5px solid #3875c9; display: flex; flex-direction: column; } .block, .block-minor { display: block; } table { padding: 0; width: 100%; } blockquote { display: flex; flex-direction: column; } /* header */ header { background: #020814; border-bottom: 2px solid #fdf403; border-top: 2px solid #fdf403; position: relative; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". site-name ."; } #site-name-p { border-bottom: none; border-top: none; grid-area: site-name; margin: 0; text-align: left; } /* breadcrumbs */ #breadcrumbs-nav { background: #588bd0; border-bottom: 1px solid #2b62ac; padding: 0.3em 0; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". crumbs ."; } #crumbs { background: #588bd0; display: flex; flex-flow: row-wrap; grid-area: crumbs; } #breadcrumbs-ol { display: flex; flex-flow: row wrap; width: auto; } .breadcrumbs-li { display: flex; } /* main navigation */ #primary-nav { background: #2b62ac; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". nav-ul ."; } #nav-ul { border-bottom: 1px solid #134487; display: flex; flex-flow: row wrap; grid-area: nav-ul; margin: 0; padding: 0.2em 0; text-align: center; } .nav-li { display: flex; flex-direction: row; } /* main */ main { border-bottom: 2px solid #020814; display: flex; flex-direction: column; padding: 0 0 1em 0; } /* footer */ footer { background: #020814; border-bottom: 2px solid #2b62ac; border-top: 2px solid #94b0d7; padding: 0 0 1.3em 0; display: grid; grid-template-columns: 2% 96% 2%; grid-template-areas: ". siteinfo ."; } #siteinfo { background: transparent; border-top: none; display: flex; flex-direction: column; grid-area: siteinfo; justify-content: center; margin: 0; padding: 0; width: 100%; } #gotop-p { display: flex; flex-direction: row; } #gotop-a { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* contact form */ form, fieldset, .form-p { display: flex; flex-direction: column; } #send-p { align-items: center; flex-direction: row; } input, textarea { border-radius: 3px; } /* minor navigation */ .subnav-ul, .subnav-ol { display: flex; flex-direction: column; } /* small business websites page */ #packages-ul { display: flex; flex-direction: column; gap: 1em; } #package-li-02 { margin: 0; } /* end of basic flex and grid replacements */ /* ============================================ MINOR ADJUSTMENTS FOR WIDER MOBILES : 550 PX ============================================ */ @media all and (min-width: 550px) { #breadcrumbs-p { display: inline-block; line-height: 1.3; margin: 0 0.5em 0 0; } /* had been 'display: none' */ #footer-nav-ul { display: flex; flex-direction: row; justify-content: center; line-height: 1.4; } /* had been default vertical list */ /* small business websites page */ #packages-ul { flex-direction: row; gap: 1em; justify-content: space-between; text-align: center; } /* table of contents (T & C page) */ #toc-div { border-radius: 3px; display: flex; flex-direction: column; margin: 1.5em 0 2.5em 0; padding: 0 1.5em 2em 1.5em; } .terms-section { border-bottom: 1px solid #94b0d7; margin: 2em 0; padding: 0 0 2.3em 0; } /* contact form */ .form-p { border-radius: 5px; padding: 0.5em 1em; } .form-p:focus-within { background: rgba(0, 0, 0, 0.3); outline: 1px solid #fff; } /* when input/textarea is in focus state */ } /* end of minor adjustments for mobiles */ /* =================================== SINGLE-COLUMN, FIXED WIDTH : 700 PX =================================== */ @media all and (min-width: 750px) { html { scrollbar-color: #15498f #fdf403; } ::-webkit-scrollbar { background: #fdf403; } ::-webkit-scrollbar-thumb { background: #15498f; } main { display: grid; grid-template-areas: ". article ." ". sub-nav ." ". more-info ."; } #with-ebook-subnav-main { grid-template-areas: ". article ." ". ebook-nav ." ". sub-nav ."; } #with-txp-subnav-main { grid-template-areas: ". article ." ". txp-nav ." ". more-info ." ". sub-nav ."; } header, #primary-nav, #breadcrumbs-nav, main, footer { grid-template-columns: 1fr 700px 1fr; } article { display: flex; flex-direction: column; grid-area: article; } #secondary-nav { display: flex; flex-direction: column; grid-area: sub-nav; } #more-info, #topic-aside { grid-area: more-info; } #ebook-nav { grid-area: ebook-nav; } #txp-nav { grid-area: txp-nav; } .block, .block-minor { border-radius: 7px; padding: 0 2rem 1.5em 2rem; } #package-li-01, #package-li-02 { border-radius: 5px; } #site-name-p { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } .mob-chop { display: inline; } .logo, .logo-alt { border: 5px solid #3875c9; border-radius: 9px; box-shadow: 3px 3px 9px rgba(0, 0, 0, 0.6); box-sizing: content-box; } /* primary navigation */ #nav-ul { border-radius: 0; } /* over-rides .block */ .nav-a { margin: 0.2em 0.6em 0.2em 0; padding: 0 0.6em; } /* breadcrumbs */ #breadcrumbs-nav { background: none; border-top: none; border-bottom: none; margin: 0.5em 0 0 0; padding: 0; } #crumbs { border: 1px solid #2b62ac; border-radius: 3px; padding: 0.3em 0 0.3em 2rem; } /* footer */ #siteinfo { background: #020814 url(images/lab99-logo-2025-67x59-01.png) 50% 1em no-repeat; } #footer-nav-ul { padding: 3em 0 1em 0; } /* tables: pair on domain names page */ .tables-container { display: flex; flex-direction: row; justify-content: space-between; } table { width: 48%; } /* home page */ #index-services { padding: 0; } /* cancels .block padding-bottom: 1em */ #index-services-inner { padding: 0 2rem 1.5em 2rem; } /* reinstates L & R padding */ /* home, portfolio, web design, & other services pages */ #with-offer-sites-ul-intro { border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-width: 100%; } #offer-ul { border-top-left-radius: 7px; border-top-right-radius: 7px; display: flex; flex-direction: column; margin: 0; } #sites-ul { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; display: flex; flex-direction: column; margin: 0; } .offer-li, .sites-li { border-top: none; padding: 0 2rem 1.5em 2rem; } .offer-li:last-of-type, .sites-li:last-of-type { border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; } } /* end of min-width: 750px */ /* ===================================== FIRST TWO-COLUMN LAYOUT : 970 PX WIDE ===================================== */ @media all and (min-width: 1010px) { body { border-top: 15px solid #3875c9; } header, #primary-nav, #breadcrumbs-nav, main, footer { grid-template-columns: 1fr 970px 1fr; } .block { margin: 1em 0 0 0; max-width: 100%; } .block-minor { margin: 1em 0 0 0; max-width: 100%; padding: 0 1rem 1.5em 1rem; } header { border-bottom: 3px solid #fdf403; border-top: 3px solid #fdf403; } #package-01, #package-02 { border-radius: 5px; } /* small business websites page */ #thank-you-message { border: 3px solid #fdf403; border-radius: 5px; } /* thank-you page */ input, textarea { border-radius: 5px; } .logo { margin: 0.7em 1.5em 0.8em 0; } .logo-alt { margin: 0.7em 0 0.8em 1.5em; } .multi-column { column-count: 2; gap: 3em; } /* web advice page */ /* header */ #site-name-p { line-height: 1.4; } #site-name-p.access { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat, url(images/willow-2025-310x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } #site-name-p.advice { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat, url(images/layout-code-2025-310x120.png) 100% 50% no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } #site-name-p.design { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat, url(images/22-nov-2025-310x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } #site-name-p.other { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat, url(images/stars-2025-02-310x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } #site-name-p.seo { background: url(images/lab99-logo-2025-100x120-01.png) 0 50% no-repeat, url(images/astronomy-2025-03-310x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 125px; } /* breadcrumbs */ #breadcrumbs-nav { margin: 1em 0 0 0; } /* primary navigation */ #primary-nav { background: #2b62ac; background: linear-gradient(#789bca, #2b62ac); } #nav-ul { background: transparent; border-bottom: none; max-width: 100%; padding: 0; width: 970px; } .nav-li { flex-grow: 1; } /* flex-grow:1 expands the element to occupy the full width available: apply it to .nav-li and .nav-a elements */ .nav-a:link, .nav-a:visited { background: transparent; border: none; border-right: 1px solid #5984be; border-radius: 0; flex-grow: 1; margin: 0; padding: 0.3em 0; } .nav-a:first-of-type { border-left: 1px solid #5984be; } .nav-a:hover { background: #2b62ac; border-bottom:none; border-top: none; border-right: 1px solid #5984be; color: #fdf403; text-decoration: underline; text-underline-offset: 0.25em; transition: background-color 0.30s ease, color 0.30s ease; } .nav-a:active { color: #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: #5984be; border: none; border-right: 1px solid #5984be; color: #fdf403; } .nav-a[aria-current]:first-of-type { border-left: 1px solid #5984be; } /* home page */ #index-intro { background: #2b62ac url(images/montage03.png) 100% 70% no-repeat; } #index-intro-text { padding-right: 530px; } #index-article { display: grid; grid-template-columns: 630px 20px 320px; grid-template-areas: "index-intro index-intro index-intro" "index-services . index-quality" "index-services . index-about" "index-services . index-testimonial" "index-services . ." "index-sussex index-sussex index-sussex" "index-contact . index-moreinfo"; } #index-intro { grid-area: index-intro; } #index-services { grid-area: index-services; } #index-quality { grid-area: index-quality; } #index-about { grid-area: index-about; } #index-testimonial { grid-area: index-testimonial; } #index-sussex { grid-area: index-sussex; } #index-contact { grid-area: index-contact; } #index-moreinfo { grid-area: index-moreinfo; } #offer-ul { max-width: 100%; } /* portfolio page */ #sites-ul { max-width: 100%; } .sites-li { display: grid; grid-template-columns: 418px 32px 1fr; /* 1fr because .sites-li contains L&R padding in rems */ grid-template-areas: "sites-h2 sites-h2 sites-h2" "sites-img . sites-text"; } .sites-h2 { grid-area: sites-h2; } .sites-img-container { grid-area: sites-img; } .sites-text { grid-area: sites-text; } .sites-text-p { margin: 0.3em 0 0 0; } /* pages with minor navigation */ #with-subnav-main { display: grid; grid-template-columns: 1fr 640px 20px 310px 1fr; grid-template-areas: ". article . sub-nav ." ". article . more-info ." ". article . . ."; } #with-ebook-subnav-main { grid-template-columns: 1fr 640px 20px 310px 1fr; grid-template-areas: ". article . ebook-nav ." ". article . sub-nav ." ". article . . ."; } #with-txp-subnav-main { grid-template-columns: 1fr 640px 20px 310px 1fr; grid-template-areas: ". article . txp-nav ." ". article . more-info ." ". article . sub-nav ." ". article . . ."; } } /* end of first two-column layout: 970px wide */ /* ======================================= SECOND TWO-COLUMN LAYOUT : 1200 PX WIDE ======================================= */ @media all and (min-width: 1250px) { header, #primary-nav, #breadcrumbs-nav, main, footer { grid-template-columns: 1fr 1200px 1fr; } .block, .sites-li { padding: 0.3rem 2.5rem 2rem 2.5rem; } .block-minor { padding: 0.3rem 2rem 2rem 2rem; } #crumbs { padding-left: 2.5rem; } /* = .block padding-left */ blockquote { padding: 0.2em 1.5em 1em 1.5em; } #package-li-01, #package-li-02 { border-radius: 9px; } /* header */ #site-name-p { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat; padding: 0.4em 0 0.4em 150px; } /* home page, etc: no right-hand image */ #site-name-p.access { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/willow-2025-370x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.advice { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/layout-code-2025-370x120.png) 100% 50% no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.design { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/22-nov-2025-370x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.other { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/stars-2025-02-370x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.seo { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/astronomy-2025-03-370x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } /* main navigation */ #nav-ul { width: 1200px; } .nav-a:link, .nav-a:visited, .nav-a:hover, .nav-a:first-of-type, .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,.nav-a[aria-current]:first-of-type { border-right: 2px solid #5984be; } /* home page */ #index-intro { background: #2b62ac url(images/montage03.png) 100% 60% no-repeat; } #index-article { grid-template-columns: 800px 20px 380px; } #index-services-inner, .offer-li { padding: 0.5rem 2.5rem 2em 2.5rem; } /* pages with minor navigation */ #with-subnav-main, #with-ebook-subnav-main, #with-txp-subnav-main { grid-template-columns: 1fr 810px 20px 370px 1fr; } /* table of contents (T & C and softwae pages) */ #toc-div { padding: 0 2em 2em 2em; } } /* end of second two-column layout: 1200px wide */ /* ====================================== THIRD TWO-COLUMN LAYOUT : 1500 PX WIDE ====================================== */ @media all and (min-width: 1550px) { header, #primary-nav, #breadcrumbs-nav, main, footer { grid-template-columns: 1fr 1500px 1fr; } .block, .sites-li { padding: 0.5rem 5rem 2em 5rem; } .block-minor { padding: 0.5rem 3rem 2.5rem 3rem; } #crumbs { padding-left: 5rem; } /* header */ #site-name-p.access { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/willow-2025-480x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.advice { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/layout-code-2025-480x120.png) 100% 50% no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.design { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/22-nov-2025-480x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.other { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/stars-2025-02-480x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } #site-name-p.seo { background: url(images/lab99-logo-2025-120x120-01.png) 0 50% no-repeat, url(images/astronomy-2025-03-480x120.png) 100% 0 no-repeat; margin: 0; padding: 0.4em 0 0.4em 150px; } /* main navigation */ #nav-ul { width: 1500px; } /* home page */ #index-intro { background: #2b62ac url(images/montage03.png) 100% 60% no-repeat; } #index-article { grid-template-columns: 800px 20px 380px; grid-template-columns: 1000px 20px 480px; } #index-services-inner, .offer-li { padding: 1rem 5rem 2em 5rem; } /* portfolio page */ .sites-li { grid-template-columns: 418px 42px 1fr; } .sites-h2 { padding: 0 0 0.8em 0; } .sites-text { display: flex; justify-content: space-between; } /* to separate p & ul */ .your-website-text { flex-direction: column; } .sites-text-p { margin: 0.4em 0 0 0; width: 48%; } .sites-text-ul { padding: 0.3em 0 0 1.2em; width: 48%; } /* pages with minor navigation */ #with-subnav-main, #with-ebook-subnav-main, #with-txp-subnav-main { grid-template-columns: 1fr 1000px 20px 480px 1fr; } .subnav-ul, .subnav-ol { margin: 0.8em 0 0 0; } } /* end of third two-column layout: 1500px wide */ /* ============ PRINT LAYOUT ============ */ @media print { @page { margin: 2cm 1.5cm; } body, #main { background: #fff; border: none; color: #000; font: 12pt/1.7 georgia, serif; } main, footer, #index-article, #with-subnav-main, .sites-li { display: flex; flex-direction: column; } .block { border-top: none; margin: 0; width: 100%; } header, #primary-nav, #secondary-nav, #breadcrumbs-nav, .block-minor, .morelink:link, a.morelink:visited, .mini, .mini-alt, .logo, .logo-alt, #send-div, #gotop-p, #footer-nav-ul, #eucookie { display: none; } a:link, a:visited { border: none; color: #000; text-decoration: none; } h1 { color: #000; font: bold 180%/1.4 georgia, serif; padding: 0; width: 100%; } h2 { color: #000; font: bold 130%/1.4 georgia, serif; padding: 0; page-break-after: avoid; width: 100%; } h3 { color: #000; font: bold 100%/1.4 georgia, serif; page-break-after: avoid; width: 100%; } p { orphans: 2; widows: 2; } li::marker, .sub-li::marker { color: #000; } dl { margin: 0.3em 0; padding: 0; width: 100%; } dt { padding: 0; width: 15%; } dd { width: 84%; } img { border: none; page-break-inside: avoid; } abbr { border: none; } blockquote { background: #fff; border: none; padding: 0 0 0 5%; width: 95%; } code, .lab99, .domain, .password, .searchquery { color: #000; } .lab99 { font-family: georgia, serif; } #packages-ul { flex-direction: row; gap: 2em; } #package-li-01, #package-li-02 { background: #fff; border: 1px dotted #000; } .package-price-p, .package-pages-p { color: #000; text-align: center; } .package-features-ul { background: #fff; border: none; list-style: none; text-align: center; width: 100%; } table { background: #fff; float: left; padding: 0; text-align: left; width: 95%; } caption { color: #000; } th, tr.headrow:hover { background: #fff; color: #000; } td { border: none; width: auto; } tr:nth-of-type(even) { background: #fff; } tr:nth-of-type(even):hover, tr:hover { background: #fff; color: #000; } .multi-column { column-count: 1; } input, textarea, .comSubmit { background: #fff; border: 1px dotted #000; border-radius: 0; color: #000; height: 2em; } label { color: #000; } footer { background: #fff; border-top: 1px dotted #000; border-bottom: none; } .footer-a { color: #000; } #siteinfo { background: #fff; } } /* end of print styles */