/* ++++++++++++++++++++++++++++ THIS IS THE NEW MULTI-PAGE SITE ++++++++++++++++++++++++++++++ */ /* Colours: Margin -> Border -> Padding Top, Right, Bottom, Left */ /* New Noto sans information (may be required); for information, see: https://fonts.google.com/noto https://fonts.google.com/selection/embed : Use a unique and descriptive class name : Use a value from 100 to 900 .noto-sans- { font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings:"width" 100; } */ /* ++++ Check and see if this actually sets ALL items to be this font ++++ */ * {box-sizing:border-box; font-family:"noto sans", sans-serif;} #html, #body {scroll-behavior:smooth; color:black; text-align:left; text-decoration:none; } #html, #footer, #header {border-style:solid; border-color:#00bfff; border-width:2px; border-radius:15px; padding:2px; } #body {border:10px; margin:0; padding:0;} #html {margin:2px} #header, #menu ul {background-color:white; width:calc(100%); } #footer {background-color:white; margin:10px 20px 20px 0px; text-align:centre; } /* #content {} */ #content, #header {position:relative; margin:10px, 20px, 10px, 50px; padding:0; } a, .list-item {font-size:1em; list-style-type:disc; list-style-position:inside; margin-left:0; padding-bottom:0.25em; padding-left:0; } .list-item {font-size:1em; /* margin-left:0.25em; */ margin-left:-1.5em; padding-left:0; border-left:0; list-style-type:disc; list-style-position:inside; } /* May 1st: list-item:0.25em */ a {font-size:1em; padding-top:0; margin-top:0; border-top:0; } #content p {font-size:1em; display:block; color:black; text-align:left; text-decoration:none; } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {color:black; line-height:normal; font-style:italic; } #booklet-rotate p.picture-legend {rotate:-2deg; } /* ++++++++++++++++++++++++ MENU DEFINITIONS ++++++++++++++++++++++++ */ /* #menu ORIGINAL 30th April 2026 {position:absolute; left:-1.5em; top:1.5em; z-index:20; } */ #menu {position:absolute; left:-2.0em; top:1em; z-index:20; } #menu li a, #menu ul, #menu li, #menu a {list-style:disc; position:relative; margin:0; padding:0; /* color:deeppink; background-color:aquamarine; */ } #menu .sub {display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 1s; } #menu .sub > ul {min-height:0; align-self:end; padding:0; margin:0; } /* #menu li li:not(:first-child):not(:last-child) {border-left:1px solid maroon; } Temporarily remove */ #menu > li > .sub {box-shadow: 2px 2px 1px 0px #00bfff; line-height:normal; font-size:1.25em; } /* This is the font size etc of the Menu items */ /* Weirdly: Right Bottom In use */ #menu li:has(:checked) > .sub {grid-template-rows:1fr; transition:grid-template-rows 1;} #menu li a {display:inline-block; text-decoration:underline; color:#00bfff; padding-left:0px; } #menu li a:hover {text-decoration:underline; color:black; font-weight:bold; background-color:#00bfff; } #menu li li span {position:absolute; left:200px; } #menu li li li span {position:absolute; left:180px; } #menu li li li li span {position:absolute; left:160px; } #menu li span label {display:inline-block; width:30px; text-align:center; cursor:pointer; font-size:2em; color:#00bfff; } #menu li span label:last-child {position:absolute; left:-9999px;} #menu li:has(:checked) > span label:first-child {position:absolute; left:-9999px;} #menu li:has(:checked) > span label:last-child {left:0;} #menu ul {width:auto; border-left:2px solid #00bfff; } #menu > li > span {display:block; position:relative; width:50px; height:50px; margin-bottom:38px; color:maroon; } #menu > li > .sub {font-size:1em; } ol.numbers {list-style-type:decimal; list-style-position:inside; color:#00bfff; margin-left:1em;} /* Used only in MEMBERSHIP to indicate 2 stages.*/ ol.bullets {list-style-type:disc; list-style-position:inside; color:black; margin-left:2em;} /* Used only in MEMBERSHIP to indicate 2 stages.*/ /* ++++++++++++++++++++++++ END of MENU DEFINITIONS ++++++++++++++++++++++++ */ /* ****************************** Start of GRID DEFINITIONS, from the One-page site; EQUI-SPACED. ****************************** */ /* TESTING: */ .2col-header {display:inline-grid; grid-template-columns:fit-content(10%) fit-content(30%); width:auto; gap:2%; padding:1%; } .1col-equalspacing {display:inline-grid; grid-template-columns:fit-content(100%); width:auto; gap:2%; padding:1%; } .2col-equalspacing {display:inline-grid; grid-template-columns:fit-content(30%) fit-content(65%); width:auto; gap:2%; padding:1%; } .2col-equalspacing > div {background-color:purple; text-align:left; padding: 20px 0; font-size: 1em; } .3col-equalspacing {display:inline-grid; grid-template-columns:fit-content(32%) fit-content(32%) fit-content(32%); width:auto; gap:2em; padding:1%; } .3col-equalspacing {display:inline-grid; grid-template-columns:fit-content(100%) fit-content(20%) fit-content(42%); /* width:auto; gap:2em; */ padding:1%; } /* ****************************** Start of GRID DEFINITIONS, from the One-page site; UNEQUAL SPACING [Porch page]. ****************************** */ .1col-unequalspacing {display:inline-grid; grid-template-columns:fit-content(100%); width:auto; gap:2%; padding:1%; } .2col-unequalspacing {display:inline-grid; grid-template-columns:fit-content(18%) fit-content(53%); width:auto; gap:2%; padding:1%; } .2col-unequalspacing > div {text-align:left; padding: 20px 0; font-size: 1em; } .3col-unequalspacing {display:inline-grid; grid-template-columns:fit-content(100%) fit-content(20%) fit-content(42%); /* width:auto; gap:2em; */ padding:1%; } /* +++++++ End of GRID DEFINITIONS +++++++++++++++ */ /* THREE COLUMNS: Text + Picture + Picture */ .container-text-pics {display:inline-grid; grid-template-columns:fit-content(25%) fit-content(25%) fit-content(50%); margin-right:0; border:0; padding:0; margin-right:0; border:0; padding:0; } .container-text-pics > div {text-align:left; font-size:1em; padding:0; margin:0; border:0; margin-right:0.5em;} /* New items: 24th January 2026 */ .flex-stuff {display:flex; flex-wrap:wrap; justify-content:left; } .contact-us-2-columns {display:inline-grid; grid-template-columns:fit-content(25%) fit-content(75%); margin-right:0; border:0; padding:0; margin-right:0; border:0; padding:0; text-align:left; } .contact-us-2-columns > div {text-align: left; font-size:1em; padding:0; margin:0; border:0; margin-right:0.5em;} /* End of new items */ .text-container {display:inline-grid; grid-template-columns:fit-content(33%) fit-content(33%) fit-content(34%); margin-right:0; padding:0; } .text-container > div {text-align:left; font-size:1em; padding-right:10px; margin:0; } /* TWO COLUMN SPECIAL DEFINITION FOR HEADER PAGE ONLY */ .two-col-homepage {display:inline-grid; grid-template-columns:fit-content(30%) fit-content(100%); width:auto; gap:1em; padding:0; /* padding-left:10.5em; */ margin:0; } .two-col-homepage > div {text-align:left; font-size:1em; color:#000000; padding-left:0.5em} #header .logo-homepage {width:calc(80%); display:inline-block; border:none; padding-left:calc(15%); float:none; } /* 30th April: was 10% */ /* End of special HOMEpage definition. NOTE: this is adjusted in the 4 size definitions. */ /* This is the HAMBURGER colour, etc: */ #menu > li > span label {display:block; width:40px; height:40px; text-align:center; cursor:pointer; font-size:2.25em; font-weight:900; color:darkslategrey; } /* Alan's choice of color, I changed it to BLACK: 29th April 2026, ALSO added the font-weight; 3rd May: I changed it to DarkSlateGrey */ #menu li li:before {position:relative; left:-5px; } #menu li li:first-child:before {position:relative; left:-7px; top:1px; margin-right:-2px; } #menu li li:last-child:before {position:relative; left:-7px; top:-1px; margin-right:-2px; } /* ++++++++++++++++++++++++ GENERAL HEADER SIZES, etc ++++++++++++++++++++++++ */ h1, h2, h3, h4, #header, #header h1, #header h2 {text-decoration:none; color:darkslategrey; padding:0 0 0.5em 0; font-weight:400; } #photo1, #photo2, #photo3, #photo4, #footer {padding:0; margin:0; margin-left:0.25em; padding-left:0.5em; } /* The comment is used by me to flag-up areas of interest, concern, errors that I'm trying to get fixed. p.comment{font-family:"noto sans", sans-serif; color:red; background-color:cyan; padding:0; margin:0; border:0; font-size:large; font-style:italic;} */ /* ++++++++++++++++++++++++ HEADER ++++++++++++++++++++++++ */ #header {text-align:left; display:flex; flex-wrap:wrap; justify-content:left;} #header h1 {font-weight:800; padding-left:0; padding-top:1em; margin:0; } #content h2, #header h2 {font-weight:600; color:#00bfff; font-style:italic; font-weight:600;} #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } #header .logo.flip {transform:scaleX(-1); } /* #central {text-align:center; padding-left:25%; margin-left:25%; border-left:25%;} */ .photo-church, .logo {position:relative; width:calc(100% - 10px); margin:2px; float:left; display:inline-block; clear:both; padding:2px; } .logo-home-page {position:relative; width:200px; margin:2px; float:left; display:inline-block; clear:both; padding:2px; } /* ++++++++++++++++++++++++ FOOTER Definition ++++++++++++++++++++++++ */ #footer p {color:black; text-align:center; } /* ++++++++++++++++++++++++ COLOUR Definitions ++++++++++++++++++++++++ */ .blue {color:#00bfff; } .slategrey {color:darkslategrey; } .slategrey-italic {color:darkslategrey; font-style:italic; } .blue {color:#00bfff; } .blue-italic {color:#00bfff; font-style:italic; } .black {color:black; } .black-italic {color:black; font-style:italic; } #container {display:grid; grid-template-columns:repeat(12, [col-start] 1fr); gap:1px; margin:0; padding:0; border:0;} #container > * {padding:1px; grid-column: col-start 1 / span 12; } .title-block {color:black; } p, a {font-size:1em; color:black; margin:0; padding:0; border:0; margin-top:0.2em; } /* h3 {font-size:1.75em; margin:0; padding:0; border:0; margin-top:0.2em; } */ a.return-to-top {clear:both; line-height:normal; padding-left:0; padding-top:1em; padding-bottom:0; border-bottom:0; margin-top:0; text-align:center; } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Start of SCREEN MEDIA QUERIES ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Start of SCREEN MEDIA QUERIES ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* =============================================== MINIMUM 10001px THIS SHOULD NEVER BE REACHED =========================================== */ @media only screen and (min-width: 10001px) { /* FOUR Column NORMAL */ #description {grid-column:col-start 1 / span 4; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 5 / span 2; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 7 / span 2; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 9 / span 2; grid-row: 2; background-color:white; } #photo4 {grid-column:col-start 11 / span 2; grid-row: 2; background-color:white; } #footer {grid-column:col-start 1 / span 12; } p, a, #content p, .list-item {font-size:1.5em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1.25em; } a, .list-item {font-size:1.5em; line-height:normal; border-left:0; padding-left:0; /* background-color:antiquewhite; */ } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:150px; height:150px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:2.5em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1.25em; text-align:center; } #menu > li > .sub {font-size:1.25em; } } /* End of Media query */ /* =============================================== 2000px =========================================== */ @media only screen and (max-width: 10000px) { /* FOUR Column NORMAL */ #description {grid-column:col-start 1 / span 4; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 5 / span 2; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 7 / span 2; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 9 / span 2; grid-row: 2; background-color:white; } #photo4 {grid-column:col-start 11 / span 2; grid-row: 2; background-color:white; } #footer {grid-column:col-start 1 / span 12; } p, a, #content p, .list-item {font-size:1.5em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ /* color:red; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1.25em; } a, .list-item {font-size:1.5em; line-height:normal; border-left:0; padding-left:0; /* background-color:chocolate; */ } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:150px; height:150px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:2.5em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1.25em; text-align:center; } #menu > li > .sub {font-size:1.25em; } } /* End of Media query */ /* =============================================== 2000px =========================================== */ @media only screen and (max-width: 2000px) { /* TWO Column */ #description {grid-column:col-start 1 / span 6; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 3; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 10 / span 3; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 7 / span 3; grid-row: 3; background-color:white; } #photo4 {grid-column:col-start 10 / span 3; grid-row: 3; background-color:white; } #footer {grid-column:col-start 1 / span 12; } p, a, #content p, .list-item {font-size:1.25em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend, .list-item {font-size:1em; } a, .list-item {font-size:1.25em; line-height:normal; border-left:0; padding-left:0; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:140px; height:140px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:2.25em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1.25em; text-align:center; } #menu > li > .sub {font-size:1.25em; } } /* End of Media query */ /* =============================================== 1500px =========================================== */ @media only screen and (max-width: 1500px) { /* TWO Column */ #description {grid-column:col-start 1 / span 6; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 3; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 10 / span 3; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 7 / span 3; grid-row: 3; background-color:white; } #photo4 {grid-column:col-start 10 / span 3; grid-row: 3; background-color:white; } #footer {grid-column:col-start 1 / span 12; } p, a, #content p, .list-item {font-size:1.25em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1em; } a, .list-item {font-size:1.25em; line-height:normal; border-left:0; padding-left:0; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:130px; height:130px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:2.25em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1.25em; } } /* End of Media query */ /* =============================================== 1200px =========================================== */ @media only screen and (max-width:1200px) { /* Extra large devices (large laptops and desktops, 4 COLUMNs */ .columns {columns:4; column-gap:3em; column-rule:1px solid maroon; clear:both; padding-bottom:20px; display:grid; grid-auto-flow:row; } #header p {font-size:1.1em; } p, a, #content p, .list-item {font-size:1.25em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend, .list-item {font-size:1em; } a, .list-item {font-size:1.25em; line-height:normal; /* margin-left: 0; */ border-left:0; padding-left:0; /* background-color:pink; */ } #footer p.footer-message {font-size:1em; padding-top:0.5em; padding-bottom:0.75em; } #content h1 {font-size:2.5em; margin:0; padding:0; } #content h2, #header h2 {font-size:2em; border:0; margin:0; padding:0; } #content h3{font-size:2em; border:0; margin:0; padding:0; } #content h4{font-size:1.5em; border:0; margin:0; padding:0; } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1em; } .row {clear:both; margin-bottom:1.5em; padding-bottom:1em; } .row_building {clear:both; margin:0; margin:0; padding:0; } .col-2 {width:60%; border-bottom: 1px solid maroon; margin:0 20px 0 20px; border-style:solid; border-color:#00bfff; border-width:20px; border-radius:15px; padding:2px; } /* TWO COLUMN SPECIAL DEFINITION FOR HEADER PAGE ONLY */ .two-col-homepage {display:inline-grid; grid-template-columns:fit-content(30%) fit-content(100%); width:auto; gap:1em; padding:0; padding-left:0.5em; margin:0; } .two-col-homepage > div {text-align: left; font-size: 1em; color:#000000; } /* Testing, to try and vary the effective width of the (Text+Picture+Picture) 3 column layout: */ .text-container {grid-template-columns:fit-content(33%) fit-content(33%) fit-content(34%); } .text-container > div {text-align:left; font-size:1.25em; padding-right:10px; margin:0; } #description {grid-column:col-start 1 / span 6; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 3; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 10 / span 3; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 7 / span 3; grid-row: 3; background-color:white; } #photo4 {grid-column:col-start 10 / span 3; grid-row: 3; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:120px; height:120px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:2em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /*=============================================== 1000px =========================================== */ @media only screen and (max-width: 1000px) { /* Single Column */ #description {grid-column:col-start 1 / span 6; grid-row: 2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 3; grid-row: 2; background-color:white; } #photo2 {grid-column:col-start 10 / span 3; grid-row: 2; background-color:white; } #photo3 {grid-column:col-start 7 / span 3; grid-row: 3; background-color:white; } #photo4 {grid-column:col-start 10 / span 3; grid-row: 3; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:110px; height:110px; display:inline-block; border:none; margin:0; padding:0; } p, a, #content p, .list-item {font-size:1.25em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ /* color:red; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1em; } a, .list-item {font-size:1.25em; line-height:normal; border-left:0; padding-left:0; /* color:aqua; */ } #header p {font-size:1.1em; } #header h1 {font-size:1.75em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1; } } /* End of Media query */ /* =============================================== 900px =========================================== */ @media only screen and (max-width:900px) { /* Large devices (laptops/desktops, 992px 3 COLUMNs */ .columns {columns:3; column-gap:1.25em; column-rule:1px solid maroon; clear:both; padding-bottom:20px;} #footer p.footer-message {font-size:1em; padding-top:0.75em; padding-bottom:1em; } #content h2, #header h2 {font-size:1.5em; border:0; margin:0; padding:0; /* font-weight:600; */ } #content h3 {font-size:1.5em; border:0; margin:0; padding:0; } #content h4 {font-size:1.25em; border:0; margin:0; padding:0; } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:1em; } .row {clear:both; margin-bottom:1.5em; padding-bottom:1em; } .row_building {clear:both; margin:0; margin:0; padding:0; } .col-2 {width:60%; border-bottom:1px solid maroon; margin:0 20px 20px 20px; } /* TWO COLUMN SPECIAL DEFINITION FOR HEADER PAGE ONLY */ .two-col-homepage {display:inline-grid; grid-template-columns:fit-content(40%) fit-content(100%); width:auto; gap:1em; padding:0; padding-left:0.5em; margin:0; } .two-col-homepage > div {background-color: white; text-align: left; font-size: 1em; color:#000000; } /* Testing, to try and vary the effective width of the (Text+Picture+Picture) 3 column layout: */ .text-container {grid-template-columns:fit-content(45%) fit-content(27%) fit-content(28%); } .text-container > div {text-align:left; font-size:1em; padding-right:10px; margin:0; /* border:0; */} #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:110px; height:110px; display:inline-block; border:none; margin:0; padding:0; } p, a, #content p, .list-item {font-size:1em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:1em; line-height:normal; border-left:0; padding-left:0; } #header h1 {font-size:1.75em; line-height:normal; width:auto; } /* p { background-color:green; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /*=============================================== 800px =========================================== */ @media only screen and (max-width: 800px) { /* Single Column */ #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } p, a, #content p, .list-item {font-size:1em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:1em; line-height:normal; /* margin-left: 0; */ border-left:0; padding-left:0; } #header h1 {font-size:1.75em; line-height:normal; width:auto; } /* p { background-color:pink; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /*=============================================== 700px =========================================== */ @media only screen and (max-width: 700px) { /* Single Column */ #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } p, a, #content p, .list-item {font-size:1em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:1em; line-height:normal; border-left:0; padding-left:0; } #header h1 {font-size:1.75em; line-height:normal; width:auto; } /* p { background-color:cyan; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /*=============================================== 600px =========================================== */ @media only screen and (max-width: 600px) { /* Single Column */ #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:600px; } #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } p, a, #content p, .list-item {font-size:1em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:1em; line-height:normal; border-left:0; padding-left:0; /* background-color:gold; */ } #header h1 {font-size:1.5em; line-height:normal; width:auto; } /* p { background-color:blue; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /* =============================================== 500px =========================================== */ @media only screen and (max-width:500px) { /* Small devices (portrait tablets and large phones, 768px 600px and up 2 COLUMNs */ .columns {columns:2; column-gap:1em; column-rule:1px solid maroon; clear:both; padding-bottom:20px; display:grid; grid-auto-flow:column; } #header p {font-size:1em; } #footer p.footer-message {font-size:1em; padding-top:0.75em; padding-bottom:1em; } p, a, #content p, .list-item {font-size:1em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:1em; line-height:normal; padding-left:0; border-left:0; /* background-color:chartreuse; */} content h1 {font-size:1.5em; border:0; margin:0; padding:0; } #content h2, #header h2 {font-size:1.5em; border:0; margin:0; padding:0; /* font-weight:600; */ } */ #content h3 {font-size:1.5em; border:0; margin:0; padding:0; } #content h4 {font-size:1.25em; border:0; margin:0; padding:0; } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } .row {clear:both; margin-bottom:1.5em; padding-bottom:1em; } .row_building {clear:both; margin:0; margin:0; padding:0; } .col-2 {width:60%; border-bottom: 1px solid maroon; margin:0 20px 20px 20px; } /* TWO COLUMN SPECIAL DEFINITION FOR HEADER PAGE ONLY */ .two-col-homepage {display:inline-grid; grid-template-columns:fit-content(50%) fit-content(100%); width:auto; gap:1em; padding:0; padding-left:0.5em; margin:0; } .two-col-homepage > div {background-color: white; text-align: left; font-size: 1em; color:#000000; } /* Testing, to try and vary the effective width of the (Text+Picture+Picture) 3 column layout: */ .text-container {grid-template-columns:fit-content(40%) fit-content(30%) fit-content(30%); } .text-container > div {text-align:left; font-size:1em; padding-right:10px; margin:0; } #header .logo-homepage {width:calc(80%); display:inline-block; border:none; max-width:500px;} #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:1.5em; line-height:normal; width:auto; font-stretch:semi-condensed; } #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } /* p { background-color:pink; */ } a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:1em; } } /* End of Media query */ /*=============================================== 400px =========================================== */ @media only screen and (max-width: 400px) { /* Single Column */ .columns {columns:1; column-rule:0px solid maroon; clear:both; padding:0; border:0; margin:0; } #description {grid-column:col-start 1 / span 6; grid-row:2 / 5; background-color:white; } #photo1 {grid-column:col-start 7 / span 6; grid-row:2; background-color:white; } #photo2 {grid-column:col-start 7 / span 6; grid-row:3; background-color:white; } #photo3 {grid-column:col-start 7 / span 6; grid-row:4; background-color:white; } #photo4 {grid-column:col-start 7 / span 6; grid-row:5; background-color:white; } #footer {grid-column:col-start 1 / span 12; } #header .logo-homepage {width:calc(30%); display:inline-block; border:none; max-width:600px; } #header .logo {width:100px; height:100px; display:inline-block; border:none; margin:0; padding:0; } #header h1 {font-size:1.25em; line-height:normal; width:auto; } #footer p.footer-message {font-size:1em; padding-top:0.75em; padding-bottom:1em; } p, a, #content p, .list-item {font-size:0.8em; line-height:normal; padding-bottom:0.5em; /* margin:0; */ } #content p.picture-legend, #booklet-rotate p.picture-legend, #header p.picture-legend {font-size:0.75em; } a, .list-item {font-size:0.8em; line-height:normal; border-left:0; padding-left:0; /* background-color:darkorange; */ } #header h1 {font-size:1.25em; line-height:normal; width:auto; } /* p { background-color:red; } */ a.return-to-top, p.centred {font-size:1em; text-align:center; } #menu > li > .sub {font-size:0.8em; } } /* End of Media query */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++ END of SCREEN MEDIA QUERIES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++ END of SCREEN MEDIA QUERIES +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* ++++++++++++++++++++++++ PICTURES ++++++++++++++++++++++++ */ .date-line {font-size:1.1em; line-height:125%; margin-bottom:55px; } .event {margin:0; padding:0; } .event p {font-size:1.35em; text-align:left; } /*.display-box {float:left; width:200px; margin: 0 10px 4em 0px; } This is the size of the small sized display */ /*.display-box p {font-size:0.9em; margin:0; height:9em; line-height:normal; } This is the text below each photo */ /*.display-box .p-credit {font-style:italic; } This is the text after a set of photos, crediting the photographer */ /* This is the usage: width: calc(100% - 3em) */ .photo_75, .photo_booklet, .photo_50, .photo {position:relative; clear:both; margin-right:1%; padding:0; } .photo_building {position:relative; clear:both; margin-right:1%; border:0; margin :0; padding:0; } img {float:left; margin:0; border-style:solid; border-color:white; border-width:1px; border-radius:15px; padding:0; } .photo img {width:calc(100%); height:calc(100%); } .photo_15 {width:calc(15%); height:calc(15%); } .photo_25 {width:calc(25%); height:calc(25%); } .photo_50 {width:calc(50%); height:calc(50%); } #booklet-rotate {rotate:2deg; } .photo_booklet {width:calc(70%); height:calc(70%); float:none; clear:both; padding-left:20%; padding-right:10%; } .photo_75 {float:left; position:relative; width:calc(75%); height:calc(75%); border:0; margin:0; padding:0; clear:both; } .photo_99 {float:left; position:relative; width:calc(99%); height:calc(99%); border:0; margin:0; padding:0; clear:both; } /* .photo_33 img {width:calc(33%); height:calc(33%); } */ /* .photo_50_r img {width:calc(50%); height:calc(50%); rotate:90deg; } */ /* .photo_75_r img {width:calc(75%); height:calc(75%); rotate:90deg; } */ /* .photo_50_c img {width:calc(50%); height:calc(50%); max-width:40px; max-height:40px; border-radius:50%; } */ /* .photo p {font-size:1em; line-height:10%; border:10px; } */ .row::after {content:""; clear:both; } [class*="col-"] {float:left; padding:1px; } /* NOTE: .col-2 is defined in the Media queries, so that a line is only drawn on bigger screens if requied, with columns more than 1 */ .col-1 {width: 20%;} .col-3 {width:100%;} /* +++++++ LINK styling ++++++++ */ a {color:#00bfff; } a:link {text-decoration:underline; color:#00bfff; background-color:white; } a:visited {text-decoration:underline; color:#00bfff; background-color:white; } a:hover {text-decoration:underline; color:black; background-color:#00bfff; } #menu a:hover {text-decoration:underline; color:black; font-weight:normal; background-color:#00bfff; } a:active {text-decoration:underline; } /* ++++++++++++++++++++++++ Various COLOR definitions: ++++++++++++++++++++++++ */ .blue {color:#00bfff; } .slategrey {color:darkslategrey; } .slategrey-italic {color:darkslategrey; font-style:italic; } .blue {color:#00bfff; } .blue-italic {color:#00bfff; font-style:italic; } .black {color:black; } .black-italic {color:black; font-style:italic; } p.centred {text-align:centre; font-style:italic; clear:both; }