/* Regulates on-off display of template sections. Put display: none; to turn off display. Remove 'none' to display. */ /*July2022. Now only affects the single templates page*/ .template_container { display: none; } /*Aug2022: Note re template container. The nav aids normally do not appear until the pgae has been scrolled down some way. However, in one circumstance they can appear with minimal downward page scrolling, upon a page loading. This is when all the template sections are showing. That is, when, in sections_plain_modular.css, class template_container doesnt have display:none. Don't know why this happens. Just avoid it, by having display:none for template_container*/ /*SECTION STYLING AFFECTING ALL/MULTIPLE SCETIONS*/ section { margin:0; padding: 0; } /* MASTER BACKGROUND CONTROL */ /*May2022. NB: paired_sections_intro div also now appears AFTER a preceeding section, within a module*/ /*cant have box shadow here, cos would affect the two paired sections, yet it is their container that's to be box-shadowed. sections within*/ /*paired_sections_intro is a latterly thought-of class. Necessitated to style the intro to'counselling' of the paired sections on page three (Approach)*/ /*paired_sections_intro is for module34*/ section, .paired_sections_intro { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* NB. On Full Width modules, this padding will only amount to upper and lower padding, because padding-left and right is set within the css of each module*/ /*Apr 2019: padding isn't adjusted here now; use sections_padding, wide_sections_padding, and paired_section_right_master and paired_section_left_master above*/ padding:; /*from https://www.toptal.com/designers/subtlepatterns/seamless-paper-texture/ */ background-image: url(eamless_paper_texture.png); /* To blend in my own colour */ /* PapayaWhip #ffefd5 */ /* ivory #fffff0; */ /*background-color:; background-blend-mode: multiply;*/ /* Background, but not background-color, overrides background-image*/ background:; } /*This needed for full-screen landing site to fill the background space between the left and right sections on some modules: 3, 4, 13, 14, 15, 16, 17, 18, 23, 24, 25, 26, 34, 35, 39 (39ai 39aii 39bi 39bii). Styling 'affecting all sections' doesn't affect this strip of real estate*/ /*Apr 2019. Some gaps have been eliminated by having sections occupy the full space of their container width-wise*/ .gap_filler { background-image: url(eamless_paper_texture.png); } /* To change background all at once of: section, .paired_sections_intro, .gap_filler */ section, .paired_sections_intro, .gap_filler { background-image: url(eamless_paper_texture.png); /*light blue/greenish*/ /*:#adddcf; */ /*nicer light blue/greenish/turq*/ /*background:#9ae1e5; */ /*background: #b7e0f7;*/ /*background: #b7e0f7; Nice pale blue. Is rgb(183, 224, 247)*/ } /*To indicate tablet and mobile sizes*/ /*@media screen and (max-width: 768px){ section, .paired_sections_intro, .gap_filler { background:orange; } } @media screen and (max-width: 425px){ section, .paired_sections_intro, .gap_filler { background:lightyellow; } } */ /* ULTIMATE BACKGROUND COLOUR CHANGER */ /* To change background all at once of: section, .paired_sections_intro, .gap_filler, .all_sections_container */ section, .paired_sections_intro, .gap_filler, .all_sections_container { background-image: url(eamless_paper_texture.png); /*background: #b7e0f7; Nice pale blue. Is rgb(183, 224, 247)*/ /* As #b7e0f7 / rgb(183, 224, 247), with a bit more green */ background: rgb(183, 240, 247); /*briefs. Almost identical to above: rgb(183, 240, 247)*/ background: #c2FDFa; background: rgb(183, 240, 250); /*MyCloud colour background:#D4EAE4; */ /*briefs ebay pic*/ background:#9ED6FC; background:rgb(158, 214, 252); background:hsl(204, 94%, 80%); /*briefs ebay pic. More green*/ background:rgb(158, 230, 252); background:hsl(194, 94%, 80%); /*briefs ebay pic. More green and 100% saturation*/ background:hsl(194, 100%, 80%); background:rgb(153, 231, 255); /*from colour hex; users' latest fav colours */ background: #d1fdfe; /*pale blue in gradient of nightsky sit*/ background: rgb(197, 222, 234); /*background: #b7e0f7; Nice pale blue. Is rgb(183, 224, 247)*/ /* background: #b1e0fe; Another nice pale blue. One of the nicest. Bit bluer than #b7e0f7*/ /*LightBlue1 in Colour Hex. Is rgb(191, 239, 255)*/ background: #bfefff; /*As LightBlue 1 but with bit more green*/ background: rgb(191, 245, 255); background: hsl(189, 100%, 87%); /*from colour hex; users' latest fav colours */ background: #d1fdfe; } /* Use to turn on/off a container around all sections, and to set its width. When using this, MUST USE MQs BELOW, else container too narrow for small screen*/ /* Colour specified here will overrule what's given above for all_sections_container; it's of higher precedence here, coming after the above specifications*/ .all_sections_container { background-image: url(eamless_paper_texture.png); margin-left: 16%; margin-right: 16%; /*background: hsl(260, 100%, 89%);*/ /*background: #cae1ff; cool light blue*/ background: ; /*briefs ebay pic. More green*/ background:rgb(158, 230, 252); background:hsl(194, 94%, 80%); /*loco green*/ /* background: #012e03; */ background: #7ab; /* opaque black */ background: rgba(0, 0, 0, 0.43); } /*Just to see change from FS to Mob*/ /* @media screen and (max-width: 510px) { .all_sections_container { background-color: brown; } } */ /* MEDIA QUERIES for all_sections_container -Reduces the container's large FS margins, so that the container's width is proportionately bigger on smaller screens. - DONT USE IF NOT USING .all_sections_container above; will add unwanted margin to all sections, meaning full width secions wont be full width, and non full width sections will have a margin too big, given they'll receive a margin value in addition to what they already have. */ @media screen and (max-width: 1318px){ .all_sections_container { margin-left: 14%; margin-right: 14%; background:; } } @media screen and (max-width: 1268px){ .all_sections_container { margin-left: 12%; margin-right: 12%; background:; } } @media screen and (max-width: 1168px){ .all_sections_container { margin-left: 9%; margin-right: 9%; background:; } } @media screen and (max-width: 1068px){ .all_sections_container { margin-left: 4.5%; margin-right: 4.5%; background:; } } @media screen and (max-width: 968px){ .all_sections_container { margin-left: 2%; margin-right: 2%; background:; } } @media screen and (max-width: 868px){ .all_sections_container { margin-left:; margin-right:; background:; } } @media screen and (max-width: 768px){ .all_sections_container { margin-left: ; margin-right: ; background: ; } } @media screen and (max-width: 625px){ .all_sections_container { margin-left: ; margin-right:; background:; } } /*Margins set to zero, thus effectively removing any visible background, for mobile size. Two reasons. 1) Real-estate width anyway limited, so may as well maximise width available for text. 2) The background is dark on the far left and light on the far right; this doesn't look good on mobile size. */ @media screen and (max-width: 550px){ .all_sections_container { margin-left: 0; margin-right: 0; background:; } } /* Use to turn on/off a container around blocks of sections (chosen according to where the div of this class starts and ends), and to set its width. When using this, MUST USE MQ BELOW, if using the container, else container too narrow for small screen */ .ultiple_sections_container1 { background-image: url(eamless_paper_texture.png); margin-left: 16%; margin-right: 16%; background:; } /* MEDIA QUERIES for multiple_sections_container1 -Reduces the container's large FS margins, so that the container's width is proportionately bigger on smaller screens. - DONT USE IF NOT USING .multiple_sections_container1 above; will add unwanted margin to all sections, meaning full width secions wont be full width, and non full width sections will have a margin too big, given they'll receive a margin value in addition to what they already have. */ @media screen and (max-width: 1318px){ { margin-left: 14%; margin-right: 14%; background:; } } @media screen and (max-width: 1268px){ .ultiple_sections_container1 { margin-left: 12%; margin-right: 12%; background:; } } @media screen and (max-width: 1168px){ .ultiple_sections_container1 { margin-left: 9%; margin-right: 9%; background:; } } @media screen and (max-width: 1068px){ .ultiple_sections_container1 { margin-left: 4.5%; margin-right: 4.5%; background:; } } @media screen and (max-width: 968px){ .ultiple_sections_container1 { margin-left: 2%; margin-right: 2%; background:; } } @media screen and (max-width: 868px){ .ultiple_sections_container1 { margin-left:; margin-right:; background:; } } @media screen and (max-width: 768px){ .ultiple_sections_container1 { margin-left: ; margin-right: ; background:; } } /* END: MASTER BACKGROUND CONTROL */ /* MASTER PADDING CONTROL */ /*DOESN'T style flex modules. Style these individuallyin sectins_flex.modular.css*/ /*DOESN'T style modules 30, 30b, 36, & 36b. Style these individually in sections_plain_modular.css */ /*DOESN'T style module5d - statement box. This is styled with all the rest of module5d's styling. */ .sections_padding, .wide_sections_padding { /*Aug 2021 Was 1.5em, before left and right padding enlarged*/ padding-top: 2em; /*Aug 2021 Was 1.5em, before left and right padding enlarged*/ padding-bottom: 1.5em; /*Aug 2020. Was 1.5em. Enlarged cos had too many characters (107) per line; max should be 90.*/ padding-right: 3.5em; /*Aug 2021. Was 1.5em. Enlarged cos had too many characters (107) per line; max should be 90.*/ padding-left: 3.5em; } /*Aug2021 MQ for sections_padding. Necessary because want smaller padding with small screen. This was what FS had*/ @media screen and (max-width: 900px) { .sections_padding, .wide_sections_padding { padding-top: 1.75em; padding-bottom: 1.25em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: 2.5em; padding-left: 2.5em; } } /*Aug2021 MQ for sections_padding. Necessary because want smaller padding with small screen. This was what FS had*/ @media screen and (max-width: 800px) { .sections_padding, .wide_sections_padding { padding-top: 1.5em; padding-bottom: 1em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: 1.5em; padding-left: 1.5em; } } /*Aug2021 MQ for sections_padding. Necessary because want smaller padding with small screen. */ @media screen and (max-width: 700px) { .sections_padding, .wide_sections_padding { padding-top: 1em; padding-bottom: .5em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: 1em; padding-left: 1em; } } /*Aug2021 MQ for sections_padding. Necessary because want smaller padding with small screen. */ @media screen and (max-width: 700px) { .sections_padding, .wide_sections_padding { padding-top: 1em; padding-bottom: .5em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: .7em; padding-left: .7em; } } /* MQ for sections_padding. Necessary because want smaller padding with small screen. */ /*Aug2021 Was 520px. With the enlarged left & right padding there were too few words per line with smaller screen sizes, hence the max-width here increased, so that the small padding with begin 'sooner' with shrinking screen size*/ @media screen and (max-width: 620px) { .sections_padding, .wide_sections_padding { padding-top: 1em; padding-bottom: .5em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: .5em; padding-left: .5em; } } @media screen and (max-width: 425px) { .sections_padding, .wide_sections_padding { padding-top: 1em; padding-bottom: .3em; /*Small left and right padding to maximise real estate for text in mobile size*/ padding-right: .3em; padding-left: .3em; } } /*May2021 Wide_section_padding disabled (by class-name misspeling). May as well have padding in wide sections same as normal sections, hence the wide_sections_padding class is now styled above, to be the same as normal sections padding */ /*DOESN'T style flex modules. Style these individually in sectins_flex.modular.css*/ /*DOESN'T style modules 30, 30b, 36, & 36b. Style these individually in sections_plain_modular.css */ .ide_sections_padding { padding-top: 2em; /*Aug 2021 Was 1.5em, before left and right padding enlarged*/ padding-top: 1.5em; padding-bottom: 1.5em; /* Aug2021. Was 1.5em. Enlarged cos had too many characters (107) per line; max should be 90. */ padding-right: 3.5em; /* Aug2021 Was 1.5em. Enlarged cos had too many characters (107) per line; max should be 90. */ padding-left: 3.5em; color: green; } /* MQ for wide_sections_padding. Necessary because want smaller padding with small screen*/ /* MQ for sections_padding. Necessary because want smaller padding with small screen*/ @media screen and (max-width: 425px) { .ide_sections_padding { padding: .5em; } } /*For the left half of a paired section. Necessary to give a middle gap between the two halves. (Padding-right should match the padding-left; adjust both with the same value to alter the gap.) This nec now, apr 2019, because was fudged before by having each having 48% width. Now, though, doing properly and having width of each half 50% width. But this eliminates the gap, if isnt padding for each half (the sections_padding or wide_sections_padding doesnt apply padding to what is actually in each half)*/ /* Used in modules: 3, 3b, 13, 13b 34, 34b, 35, 35b, 35iia. 35iib, 39 (39ai 39aii 39bi 39bii). Cannot use on paired sections with a pic in one part, because will get visible padding around the pic, which isnt wanted*/ /*MQ is so only works beyond tablet size. Else adds unwanted padding which puts the two sections, when are vertically stacked in tablet size, out of alignment */ /*For the left part of a paired section. Should match padding-right in paired_section_right_master below*/ @media screen and (min-width: 768px){ .paired_section_left_master { /*Aug2021. Was 1.5em before left & right padding on all sections enlarged from 1.5em. The enlargement meant that the two colums had too much padding, given the the padding-right of the left section and the padding-left of the right section had two lots of the enlarged padding*/ padding-right: 1.1em; } /*MQ is so only works beyond tablet size. Else adds unwanted padding which puts the two sections, when are vertically stacked in tablet size, out of alignment */ /*For the right half of a paired section. Should match padding-left in paired_section_left_master above*/ .paired_section_right_master { /*Aug2021. Was 1.5em before left & right padding on all sections enlarged from 1.5em. The enlargement meant that the two colums had too much padding, given the the padding-right of the left section and the padding-left of the right section had two lots of the enlarged padding*/ padding-left: 1.1em; } } /* END: MASTER PADDING CONTROL */ /* MASTER BOX SHADOW CONTROL */ /*Use to turn off/on box-shadow, across all modules that have it. Affects all modules that orginally had box shadow. Note: instead of using this master, box-shadow can also be adjusted or turned on/off in individual modules' main section styling below*/ .ox_shadow_master { box-shadow: 3px 3px 20px 3px #333; } /*For the image in module 30, 31, 31b, 32, 32b These modules are for two thicknesses of box-shadow (for images); thickness depending on screen size*/ /*This MQ is for over tablet size*/ @media screen and (min-width: 769px) { .ox_shadow_master_normal { box-shadow: 3px 3px 20px 3px #333; } } /*This MQ is for up tablet size*/ @media screen and (max-width: 768px) { .ox_shadow_master_thin { box-shadow: 1px 1px 10px 1px #333; } } /* END: MASTER BOX SHADOW CONTROL */ /* NB Flex modules no longer have 'Section' tags. Section tags prevented targetting flex modules with their own background colors. Need to do this cos a module doesn't look good with all its divisions having the same background-image or colour*/ /*This class needed to target just certain sections with a background image. Previously, background image was applied via the above section tag; however this also applied to the flex containers, which preventing these from having their own background colour. Thus in the html, this class is applied to all modules except the flex ones. (And possibly,in future, any others where the background-image below isn't wanted)*/ /*END: SECTION STYLING AFFECTING ALL SECTIONS*/ /* MODULE1. SECTION STYLING: LEFT & RIGHT SEPARATES */ .module1_left_and_right_separate { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; padding:; width: 46%; /* box-shadow: 3px 3px 20px 3px #333; */ } .module1_left_separate { background:; float: left; margin-left:2%; color:; line-height:; /* font-family: 'ralewayregular'; */ font-size: ; } .module1_right_separate { background:; float: right; margin-right:2%; line-height:; /* font-family: "trebuchet ms"; */ font-size: ; } /*Tablet. Module1*/ @media screen and (max-width: 768px){ .module1_left_and_right_separate { float: none; width: 96%; margin-left: auto; margin-right: auto; } /*new for this version with contentcontainer class div. margin-top on #section1, #section2 for Full Size disabled, so have to separte the vertically sections, in Small Size, via specifying margin-top here for section 2*/ .module1_right_separate { margin-top: 30px; } } /* Tablet. END Module1*/ /* END: MODULE1. SECTION STYLING: LEFT & RIGHT SEPARATES */ /* Module2. SECTION STYLING: Background image right. LEFT & RIGHT SEPARATES */ .module2_left_and_right_separate { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; padding:; width: 46%; /* box-shadow: 3px 3px 20px 3px #333;*/ } .module2_left_separate { background:; float: left; margin-left:2%; color:; /* font-family: "helvetica"; */ font-size: ; } .module2_right_separate { background:; float: right; margin-right:2%; } .image11 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image11>h1 { color: white; } /*Tablet. Module2*/ @media screen and (max-width: 768px){ .module2_left_and_right_separate { float: none; width: 96%; margin-left: auto; margin-right: auto; } /*new for this version with contentcontainer class div. margin-top on #section1, #section2 for Full Size disabled, so have to separte the vertically sections, in Small Size, via specifying margin-top here for section 2*/ .module2_right_separate { margin-top: 30px; } } /* End Tablet Module2*/ /* END. Module2. SECTION STYLING: Background image right. LEFT & RIGHT SEPARATES */ /* Module3. SECTION STYLING: LEFT & RIGHT PAIRED */ .module3_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module3_left_and_right_paired { /*width:48%;*/ /*New, apr 2019*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; background:; } .module3_left_paired { background:; float: left; margin-left:0; /* font-family: "georgia"; */ font-size: ; } .module3_right_paired { background:; float: right; margin-right:0; /* font-family: "calibri"; */ font-size: ; } /* Tablet: Module3 */ @media screen and (max-width: 768px){ .module3_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module3_right_paired { margin-top: 30px; } } /* End tablet module3 */ /* END: Module3*/ /* Module3b. SECTION STYLING: LEFT & RIGHT PAIRED. Full width. */ .module3b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width:100%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module3b_left_and_right_paired { width: 50%; /*New for Full Width*/ /* Now controlled by for all wide sections by wide_sections_padding class*/ /* padding-left: 3%; padding-right: 3%; */ } .module3b_left_paired { background:; float: left; margin-left:0; /* font-family: "verdana"; */ font-size: ; } .module3b_right_paired { background:; float: right; margin-right:0; /* font-family: "tahoma"; */ font-size: ; } /* Tablet: Module3b */ @media screen and (max-width: 768px){ .module3b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module3b_right_paired { margin-top: 30px; } } /* End tablet module3b */ /* END: Module3b*/ /* Module4. SECTION STYLING: Background image right. LEFT & RIGHT PAIRED */ .module4_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module4_left_and_right_paired { width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module4_left_paired { background:; float: left; margin-left:0; /* font-family: 'robotoregular'; */ font-size: ; } .module4_right_paired { background:; float: right; margin-right:0; } .image10 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image10>h1 { color: white; } /* Tablet: Module4 */ @media screen and (max-width: 768px){ .module4_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4_right_paired { margin-top: 30px; } } /* End tablet module4 */ /* END: Module4*/ /* Module4b. SECTION STYLING: Background image right. LEFT & RIGHT PAIRED. Full width. */ .module4b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module4b_left_and_right_paired { width: 50%; line-height:; border:; /*New for Full Width*/ /* Now controlled for all wide sections by wide_sections_padding class*/ /* padding-left: 3%; padding-right: 3%; */ } .module4b_left_paired { background:; float: left; margin-left:0; /* font-family: "open_sansregular"; */ font-size: ; } .module4b_right_paired { background:; float: right; margin-right:0; } .image10 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image10>h1 { color: white; } /* Tablet: Module4b */ @media screen and (max-width: 768px){ .module4b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4b_right_paired { margin-top: 30px; } } /* End tablet module4b */ /* END: Module4b*/ /*Apr2022*/ /* Module4bii. SECTION STYLING: Background image left. LEFT & RIGHT PAIRED. Full width. */ .module4bii_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module4bii_left_and_right_paired { width: 50%; line-height:; border:; /*New for Full Width*/ /* Now controlled for all wide sections by wide_sections_padding class*/ /* padding-left: 3%; padding-right: 3%; */ } .module4bii_left_paired { background:; float: left; margin-left:0; /* font-family: "open_sansregular"; */ font-size: ; } .module4bii_right_paired { background:; float: right; margin-right:0; } .image10 { /* background-image: url("jensfriend_study_700h.jpg"); */ background-image: url("storm_lightning_girl_900w_50Q.jpg"); background-size:cover; background-position:center; /*Apr2022 Original 100vh*/ height: 40vh; color: white; } .image10>h1 { color: white; } /* Tablet: Module4bii */ @media screen and (max-width: 768px){ .module4bii_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4bii_right_paired { margin-top: 30px; } } /* End tablet module4bii */ /* END: Module4bii*/ /*June2022*/ /* Module4ci. ImageInWrapper_left. Paired equal sections.*/ .module4ci_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; } .module4ci_left_and_right_paired { width: 50%; line-height:; border:; } .module4ci_left_paired { background:; float: left; margin-left:0; } .module4ci_right_paired { background:; float: right; margin-right:0; } .module4ci_imagewrapper { /*100% needs to be specified, for when image is alone in a 'column' (upon sections collpasing for small size screen), else picture within this wrapper will be to the left, not in the middle*/ width:100%; /*Has to be inline block to be centered*/ display:inline-block; text-align: center; background-color:; /*Lowers iamge, so it's horizontally on a level with the text in the right section*/ padding-top: 25px; } .module4ci_image { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; } /* Tablet: Module4ci */ @media screen and (max-width: 768px){ .module4ci_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4ci_right_paired { /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Apply background-color to left nad right sections to see effect*/ margin-top:0; /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Padding-top for this section (which has the value set here, or if no value is set here it has that for sections padding) is one of two contributors to the gap between text of right_paired and botom edge of left_paired above; along with the default margin-top for paragraphs (in the right section). Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ /* ADJUST THIS IN THE FIRST INSTANCE, TO REDUCE THE GAP BETWEEN THE VERTICALLY STACKED SECTIONS. GIVE A VALUE SMALLER THAN THAT ALREADY APPLYING VIA SECTIONS PADDING. EG .25EM. IF CANNOT GET RID OF ENOUGH SPACE VIA THIS, THEN ADJUST MARGIN_TOP OF THE RIGHT SECTION'S PARAGRAPH*/ padding-top: .25em; } .module4ci_right_paired p{ /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Margin-top for this section's paragraph is one of two contributors to the gap between text of right_paired and botom edge of left_paired above; along with the padding-top for this section. Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ margin-top: ; } /*Cancels the padding-top that was applied in full size*/ .module4ci_imagewrapper { padding-top: 0; } } /* End tablet module4ci */ /* END: Module4ci. ImageInWrapper_left. Paired equal sections.*/ /*June2022*/ /* Module4cii. ImageInWrapper_right. Paired equal sections.*/ .module4cii_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; } .module4cii_left_and_right_paired { width: 50%; line-height:; border:; } .module4cii_left_paired { background:; float: left; margin-left:0; } .module4cii_right_paired { background:; float: right; margin-right:0; } .module4cii_imagewrapper { /*100% needs to be specified, for when image is alone in a 'column' (upon sections collpasing for small size screen), else picture within this wrapper will be to the left, not in the middle*/ width:100%; /*Has to be inline block to be centered*/ display:inline-block; text-align: center; background-color:; /*Lowers iamge, so it's horizontally on a level with the text in the right section*/ padding-top: 25px; } .module4cii_image { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; } /* Tablet: Module4cii */ @media screen and (max-width: 768px){ .module4cii_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4cii_right_paired { /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Apply background-color to left nad right sections to see effect*/ margin-top:0; /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Padding-top for this section (which has the value set here, or if no value is set here it has that for sections padding) is one of two contributors to the gap between photo of right_paired and botom text of left_paired above; along with the default margin-bottom for paragraphs (in the left section). Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ /* ADJUST THIS IN THE FIRST INSTANCE, TO REDUCE THE GAP BETWEEN THE VERTICALLY STACKED SECTIONS. GIVE A VALUE SMALLER THAN THAT ALREADY APPLYING VIA SECTIONS PADDING. EG .25EM. IF CANNOT GET RID OF ENOUGH SPACE VIA THIS, THEN ADJUST MARGIN_BOTTOM OF THE LEFT SECTION'S PARAGRAPH*/ padding-top:0.25em; } .module4cii_left_paired p{ /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Margin-bottom for this section's paragraph is one of two contributors to the gap between photo of right_paired and text of left_paired; along with the padding-top for the right. Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ margin-bottom:; } /*Cancels the padding-top that was applied in full size*/ .module4cii_imagewrapper { padding-top: 0; } } /* End tablet module4cii */ /* END: Module4cii. ImageInWrapper_right. Paired equal sections.*/ /*June2022*/ /* Module4di. ImageInWrapper_left. Paired equal sections. Full Width. */ .module4di_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; } .module4di_left_and_right_paired { width: 50%; line-height:; border:; } .module4di_left_paired { background:; float: left; margin-left:0; } .module4di_right_paired { background:; float: right; margin-right:0; } .module4di_imagewrapper { /*100% needs to be specified, for when image is alone in a 'column' (upon sections collpasing for small size screen), else picture within this wrapper will be to the left, not in the middle*/ width:100%; /*Has to be inline block to be centered*/ display:inline-block; text-align: center; background-color:; /*Lowers iamge, so it's horizontally on a level with the text in the right section*/ padding-top: 25px; } .module4di_image { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; } /* Tablet: Module4di */ @media screen and (max-width: 768px){ .module4di_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4di_right_paired { /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Apply background-color to left nad right sections to see effect*/ margin-top:0; /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Padding-top for this section (which has the value set here, or if no value is set here it has that for sections padding) is one of two contributors to the gap between text of right_paired and botom edge of left_paired above; along with the default margin-top for paragraphs (in the right section). Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /* ADJUST THIS IN THE FIRST INSTANCE, TO REDUCE THE GAP BETWEEN THE VERTICALLY STACKED SECTIONS. GIVE A VALUE SMALLER THAN THAT ALREADY APPLYING VIA SECTIONS PADDING. EG .25EM. IF CANNOT GET RID OF ENOUGH SPACE VIA THIS, THEN ADJUST MARGIN_TOP OF THE RIGHT SECTION'S PARAGRAPH*/ /*Apply background-color to left and right sections to see effect*/ padding-top: .25em; } .module4di_right_paired p{ /*To have no gap between text of right_paired and botom edge of left_paired above, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-top for for right_paired paragraph*/ /*Margin-top for this section's paragraph is one of two contributors to the gap between text of right_paired and botom edge of left_paired above; along with the padding-top for this section. Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ margin-top:0.25em; } /*Cancels the padding-top that was applied in full size*/ .module4di_imagewrapper { padding-top: 0; } } /* End tablet module4di */ /* END: Module4di. ImageInWrapper_left. Paired equal sections. Full Width.*/ /*June2022*/ /* Module4dii. ImageInWrapper_right. Paired equal sections. Full width.*/ .module4dii_sectionwrapper { display: block; box-sizing: border-box; width: 100%; margin: 0 auto; background:; } .module4dii_left_and_right_paired { width: 50%; line-height:; border:; } .module4dii_left_paired { background:; float: left; margin-left:0; } .module4dii_right_paired { background:; float: right; margin-right:0; } .module4dii_imagewrapper { /*100% needs to be specified, for when image is alone in a 'column' (upon sections collpasing for small size screen), else picture within this wrapper will be to the left, not in the middle*/ width:100%; /*Has to be inline block to be centered*/ display:inline-block; text-align: center; background-color:; /*Lowers iamge, so it's horizontally on a level with the text in the right section*/ padding-top: 25px; } .module4dii_image { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; } /* Tablet: Module4dii */ @media screen and (max-width: 768px){ .module4dii_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module4dii_right_paired { /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Apply background-color to left nad right sections to see effect*/ margin-top:0; /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Padding-top for this section (which has the value set here, or if no value is set here it has that for sections padding) is one of two contributors to the gap between photo of right_paired and botom text of left_paired above; along with the default margin-bottom for paragraphs (in the left section). Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ /* ADJUST THIS IN THE FIRST INSTANCE, TO REDUCE THE GAP BETWEEN THE VERTICALLY STACKED SECTIONS. GIVE A VALUE SMALLER THAN THAT ALREADY APPLYING VIA SECTIONS PADDING. EG .25EM. IF CANNOT GET RID OF ENOUGH SPACE VIA THIS, THEN ADJUST MARGIN_BOTTOM OF THE LEFT SECTION'S PARAGRAPH*/ padding-top: 0.25em; } .module4dii_left_paired p{ /*To have no gap between photo of right_paired and botom text of left_paired, set: 1) zero on margin-top and 2) zero on padding top, for right_paired; and 3) zero on margin-bottom for left_paired paragraph*/ /*Margin-bottom for this section's paragraph is one of two contributors to the gap between photo of right_paired and text of left_paired; along with the padding-top for the right. Together, they give enough gap without need of also setting distance using margin-top for the section.*/ /*Apply background-color to left and right sections to see effect*/ margin-bottom:; } /*Cancels the padding-top that was applied in full size*/ .module4dii_imagewrapper { padding-top: 0; } } /* End tablet module4dii */ /* END: Module4dii. ImageInWrapper_right. Paired equal sections. Full width.*/ /*Module5. SINGLE COLUMN SECTION*/ .module5_longways { margin-top:; width: 96%; background:; line-height:; padding:; margin-left:auto; margin-right:auto; box-sizing: border-box; /* box-shadow: 3px 3px 20px 3px #333; */ /* font-family: 'nunito_sansregular'; */ font-size:; } /*No MQ for Module5*/ /*END: Module5*/ /*Module5b. SINGLE COLUMN SECTION. Full width. */ .module5b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; /* font-family: 'latoregular'; */ font-size:; } /*No MQ for Module5b*/ /*END: Module5b*/ /*Module5c. SINGLE COLUMN SECTION. Small width.*/ .module5c_longways { margin-top:; width: 68%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; font-size:; /* box-shadow: 3px 3px 20px 3px #333; */ } /*Module5c, unlike modules 5 & 5b, DOES have MQ. This because cannot have small width module in less than FS screen*/ /*Tablet Module5c*/ @media screen and (max-width: 768px){ .module5c_longways { width: 96%; color:; } } /*END: Module5c*/ /*Module5cii. SINGLE COLUMN SECTION. Small width. Becoming full width in tablet screen size.*/ .module5cii_longways { margin-top:; width: 68%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; font-size:; color: ; /* box-shadow: 3px 3px 20px 3px #333; */ } /*Module5cii, unlike modules 5 & 5b, DOES have MQ. This because cannot have small width module in less than FS screen*/ /*Tablet Module5cii*/ @media screen and (max-width: 768px){ .module5cii_longways { width: 100%; color:; } } /*END: Module5cii*/ /*Module 5d. STATEMENT BOX. Small width*/ /*As 5c, single cloumn section,small width', but just for statements. Is not in a section, is in a div; so is styled separately here.*/ .module5d_statementbox_smallwidth { width: 68%; margin-left:auto; margin-right:auto; box-sizing: border-box; text-align:center; font-size: 1.8em; /*text-shadow: 1px 1px 2px #000;*/ /*border: solid 2px #666;*/ background: hsl(209, 21%, 35%); /*color: #ffefd5;*/ /*color: #0efde7;*/ color: yellow; /*module5d_text font-family: 'open_sansbold_italic'; font-family: 'open_sansextrabold_italic'; font-family: 'source_sans_problack_italic'; font-family: 'source_serif_problack_italic'; font-family: 'source_serif_prolight_italic'; font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif; font-family: 'josefin_sansitalic'; font-family: 'source_sans_problack_italic'; font-family: 'ubuntuitalic'; */ font-family: 'ubuntulight_italic'; /*Note, wanted with module5d is padding the same all around. A larger padding-top (like normal sections have) isn't wanted.*/ padding: 1em; line-height: 1.5; } /*MQ: Tablet Module5d*/ @media screen and (max-width: 768px){ .module5d_statementbox_smallwidth { width: 96%; padding: .75em; } } /*END MQ: Tablet Module5d*/ /*END: Module5d*/ /*Module 5e. Dynabox*/ /* For styling 'dynaboxes': supplemental info boxes with border*/ .module5e_dynabox { font-size:; width: 68%; margin-left:auto; margin-right:auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .5em; padding-left: 1.5em; border-left: solid 10px; /*The following three attributes are controlled in DarkLightToggleAcrosPages1.css */ border-left-color: #89444a ; background: #f0ebe5; color: black; } .module5e_dynabox p{ margin:; } .module5e_title { font-weight: bold; } @media screen and (max-width: 768px) { .module5e_dynabox { width: 96%; } } /*END: Module5e*/ /*Module6. Background image SINGLE COLUMN SECTION*/ .module6_longways { margin-top:; width: 96%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } .image9 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image9>h1 { color: white; } /*No MQ for Module6*/ /*END: Module6*/ /*Module6b. Background image SINGLE COLUMN SECTION. Full Width.*/ .module6b_longways { margin-top:; /* 96% in non Full Width */ width:100%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*New for Full Width. This will just affect the heading*/ /* Now controlled for all wide sections by wide_sections_padding class*/ /*padding-left: 3%; padding-right: 3%;*/ } .image9 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image9>h1 { color: white; } /*No MQ for Module6b*/ /*END: Module6b. Full Width.*/ /* Module7. SECTION STYLING: LEFT & RIGHT SEPARATES UNEQUAL. LEFT BIG. BOTH FLUID */ .module7_left_and_right_separate_unequal_withleftbig { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module7_left_separate_unequal_big { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:60%; background:; float: left; margin-left:2%; /* font-family: 'lucida_granderegular'; */ } .module7_right_separate_unequal_small { width:32%; background:; float: right; margin-right:2%; /* font-family:'montserratregular'; */ } /*Tablet Module7*/ @media screen and (max-width: 768px){ .module7_left_and_right_separate_unequal_withleftbig { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module7_right_separate_unequal_small { margin-top: 30px; } } /*End tablet module7*/ /* End Module 7*/ /* Module8. SECTION STYLING: Background Image left. LEFT & RIGHT SEPARATES UNEQUAL. LEFT BIG. BOTH FLUID */ .module8_left_and_right_separate_unequal_withleftbig { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module8_left_separate_unequal_big { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:60%; background:; float: left; margin-left:2%; } .module8_right_separate_unequal_small { width:32%; background:; float: right; margin-right:2%; /* font-family: 'montserratmedium'; */ } .image3 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image3>h1 { color: white; } /*Tablet Module8*/ @media screen and (max-width: 768px){ .module8_left_and_right_separate_unequal_withleftbig { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module8_right_separate_unequal_small { margin-top: 30px; } } /*End tablet module8*/ /* End Module8*/ /* Module9. BACKGROUND IMAGE RIGHT. SECTION STYLING: LEFT & RIGHT SEPARATES UNEQUAL. LEFT BIG. BOTH FLUID */ .module9_left_and_right_separate_unequal_withleftbig { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module9_left_separate_unequal_big { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:60%; background:; float: left; margin-left: 2%; /* font-family: 'latoregular'; */ font-size:; } /* .module9_left_separate_unequal_big h1 { font-family: 'merriweatherregular'; } */ .module9_right_separate_unequal_small { width:32%; background:; float: right; margin-right: 2%; } .image13 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image13>h1 { color: white; } /*Tablet Module9*/ @media screen and (max-width: 768px){ .module9_left_and_right_separate_unequal_withleftbig { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module9_right_separate_unequal_small { margin-top: 30px; } } /*End tablet module9*/ /* End Module9*/ /* Module10. SECTION STYLING: LEFT & RIGHT SEPARATES UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module10_left_and_right_separate_unequal_withleftsmall { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module10_left_separate_unequal_small { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:32%; background:; float: left; margin-left:2%; /* font-family: 'open_sansregular'; */ } /* .module10_left_separate_unequal_small h1 { font-family: 'merriweatherregular'; } */ .module10_right_separate_unequal_big { width:60%; background:; float: right; margin-right:2%; /* font-family: 'source_sans_proregular'; */ } /*Tablet Module10*/ @media screen and (max-width: 768px){ .module10_left_and_right_separate_unequal_withleftsmall { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module10_right_separate_unequal_big { margin-top: 30px; } } /*End tablet module10*/ /* End Module10*/ /* Module11. SECTION STYLING: Background-image right.LEFT & RIGHT SEPARATES UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module11_left_and_right_separate_unequal_withleftsmall { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module11_left_separate_unequal_small { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:32%; background:; float: left; margin-left:2%; /* font-family: 'droid_sansregular'; */ } .module11_right_separate_unequal_big { width:60%; background:; float: right; margin-right:2%; } .image4 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image4>h1 { color: white; } /*Tablet Module11*/ @media screen and (max-width: 768px){ .module11_left_and_right_separate_unequal_withleftsmall { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module11_right_separate_unequal_big { margin-top: 30px; } } /*End tablet module11*/ /* End Module11*/ /* Module12. SECTION STYLING: Background-image left.LEFT & RIGHT SEPARATES UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module12_left_and_right_separate_unequal_withleftsmall { /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ /* margin-top:px;*/ line-height:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module12_left_separate_unequal_small { /*This 60%, with the small width of 32%, add up to 92% - the same size as the two equal containers, which are 46% each*/ width:32%; background:; float: left; margin-left:2%; } .module12_right_separate_unequal_big { width:60%; background:; float: right; margin-right:2%; /* font-family: 'pt_sansregular'; */ } /* .module12_right_separate_unequal_big h1 { font-family: ; } */ .image14 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image14>h1 { color: white; } /*Tablet Module12*/ @media screen and (max-width: 768px){ .module12_left_and_right_separate_unequal_withleftsmall { float: none; width: 96%; margin-left: auto; margin-right: auto; } .module12_right_separate_unequal_big { margin-top: 30px; } } /*End tablet module12*/ /* End Module12*/ /* Module13. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID */ .module13_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module13_left_and_right_paired_unequal_withleftbig { line-height:; padding:; } .module13_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:63%;*/ width: 66.5%; background:; float: left; margin-left:0; /* font-family: 'open_sansregular'; */ } /* .module13_left_paired_unequal_big h1 { font-family: 'open_sansextrabold'; } */ .module13_right_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: right; margin-right:0; } /*Tablet Module13*/ @media screen and (max-width: 768px){ .module13_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module13_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module13*/ /* End Module13*/ /* Module13b. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID. Full width */ .module13b_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; /* 96% in non Full Width */ width:100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module13b_left_and_right_paired_unequal_withleftbig { line-height:; } .module13b_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: left; margin-left:0; /* font-family: 'open_sansregular'; */ } /* .module13b_left_paired_unequal_big h1 { font-family: 'source_sans_proregular'; } */ .module13b_right_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: right; margin-right:0; /* font-family: 'open_sansregular'; */ } /* .module13b_right_paired_unequal_small h1 { font-family: 'pt_sansregular'; } */ /*Tablet Module13b*/ @media screen and (max-width: 768px){ .module13b_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module13b_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module13b/ /* End Module13b*/ /* Module14. Background image left. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID */ .module14_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module14_left_and_right_paired_unequal_withleftbig { line-height:; padding:; } .module14_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:63%;*/ width: 66.5%; background:; float: left; margin-left:0; } .module14_right_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: right; margin-right:0; } /* .module14_right_paired_unequal_small h1 { font-family: 'source_sans_prolight'; } */ .image12 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image12>h1 { color: white; } /*Tablet Module14*/ @media screen and (max-width: 768px){ .module14_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module14_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module14*/ /* End Module14*/ /* Module14b. Background image left. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID. Full width */ .module14b_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; /*96% on non Full Width*/ width:100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module14b_left_and_right_paired_unequal_withleftbig { line-height:; } .module14b_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: left; margin-left:0; } .module14b_right_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: right; margin-right: 0; } /* .module14b_right_paired_unequal_small h1 { font-family: 'source_sans_probold'; } */ .image12 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image12>h1 { color: white; } /*Tablet Module14b*/ @media screen and (max-width: 768px){ .module14b_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module14b_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module14b*/ /* End Module14b*/ /* Module15. Background image right. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID */ .module15_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module15_left_and_right_paired_unequal_withleftbig { line-height:; padding:; } .module15_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:63%;*/ width: 66.5%; background:; float: left; margin-left:0; } /* .module15_left_paired_unequal_big h1 { font-family: 'source_sans_problack'; } */ .module15_right_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: right; margin-right:0; } .image5 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image5>h1 { color: white; } /*Tablet Module15*/ @media screen and (max-width: 768px){ .module15_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module15_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module15*/ /* End Module15*/ /* Module15b. Background image right. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL LEFT BIG. BOTH FLUID. Full width. */ .module15b_sectionwrapper_paired_unequal_withleftbig { display: block; box-sizing: border-box; /*96% on non Full Width*/ width:100%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module15b_left_and_right_paired_unequal_withleftbig { line-height:; } .module15b_left_paired_unequal_big { /*Not applicable, as of apr 2019: 63% & 33% on small = 96%. Matches, the equal sized pairs, of 48% each (x2, for 96). 96% allows for each to have an inside margin of 2%, making a 4% gap between the left and right. This gap will be automatically determined, and is the space 'left over' from fact of left and right elements having, respectively a left and right margin of zero, meaning the remaining 4% will necessarily be in the middle*/ /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: left; margin-left:0; /* font-family: 'open_sansregular'; */ } /* .module15b_left_paired_unequal_big h1 { font-family: 'open_sansbold';} */ .module15b_right_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: right; margin-right:0; } .image5 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image5>h1 { color: white; } /*Tablet Module15b*/ @media screen and (max-width: 768px){ .module15b_left_and_right_paired_unequal_withleftbig { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module15b_right_paired_unequal_small { margin-top: 30px; } } /*End tablet module15b*/ /* End Module15b*/ /* Module16. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module16_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module16_left_and_right_paired_unequal_withleftsmall { line-height:; padding:; } .module16_left_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: left; margin-left:0; } /* .module16_left_paired_unequal_small h1 { font-family: 'prataregular'; } */ .module16_right_paired_unequal_big { /*Was til apr 2019: width:63%;*/ width: 66.5%; background:; float: right; margin-right:0; } /*Tablet Module16*/ @media screen and (max-width: 768px){ .module16_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module16_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module16*/ /* End Module16*/ /* Module16b. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID.Full width*/ .module16b_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module16b_left_and_right_paired_unequal_withleftsmall { line-height:; } .module16b_left_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: left; margin-left:0; } .module16b_right_paired_unequal_big { /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: right; margin-right:0; } /*Tablet Module16b*/ @media screen and (max-width: 768px){ .module16b_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module16b_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module16b*/ /* End Module16b*/ /* Module17. Backgound image right. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module17_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module17_left_and_right_paired_unequal_withleftsmall { line-height:; padding:; } .module17_left_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: left; margin-left:0; } .module17_right_paired_unequal_big { /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: right; margin-right:0; } .image13 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image13>h1 { color: white; } /*Tablet Module17*/ @media screen and (max-width: 768px){ .module17_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module17_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module17*/ /* End Module17*/ /* Module17b. Backgound image right. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID. Full width*/ .module17b_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; /*96% on non Full Width*/ width:100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module17b_left_and_right_paired_unequal_withleftsmall { line-height:; } .module17b_left_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: left; margin-left:0; } .module17b_right_paired_unequal_big { /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: right; margin-right:0; } .image13 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image13>h1 { color: white; } /*Tablet Module17b*/ @media screen and (max-width: 768px){ .module17b_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module17b_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module17b*/ /* End Module17b*/ /* Module18. Background image left. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID*/ .module18_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module18_left_and_right_paired_unequal_withleftsmall { line-height:; padding:; } .module18_left_paired_unequal_small { /*Was til apr 2019: width:33%;*/ width: 33.5%; background:; float: left; margin-left:0; } .module18_right_paired_unequal_big { /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: right; margin-right:0; } .image6 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image6>h1 { color: white; } /*Tablet Module18*/ @media screen and (max-width: 768px){ .module18_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module18_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module18*/ /* End Module18*/ /* Module18b. Background image left. SECTION STYLING: LEFT & RIGHT PAIRED UNEQUAL. LEFT SMALL. BOTH FLUID. Full width*/ .module18b_sectionwrapper_paired_unequal_withleftsmall { display: block; box-sizing: border-box; /*96% on non Full Width*/ width:100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module18b_left_and_right_paired_unequal_withleftsmall { line-height:; } .module18b_left_paired_unequal_small { /*Was til apr 2019: width:35%;*/ width: 33.5%; background:; float: left; margin-left:0; } .module18b_right_paired_unequal_big { /*Was til apr 2019: width:65%;*/ width: 66.5%; background:; float: right; margin-right:0; } .image6 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image6>h1 { color: white; } /*Tablet Module18b*/ @media screen and (max-width: 768px){ .module18b_left_and_right_paired_unequal_withleftsmall { float: none; width:100%; margin-left: auto; margin-right: auto; background:; box-sizing:border-box; } .module18b_right_paired_unequal_big { margin-top: 30px; } } /*End tablet module18b*/ /* End Module18b*/ /* STYLING of 'FLEXIFIXED' - FIXED & FLUID SEPARATES. from: http://codepen.io/johnstonian/pen/guhid Ryan Johnson Did ruin burger. But was a box-sizing issues. Added box-sizing to left and right container, and the columns are separate ok.*/ /* Module19. SECTION STYLING: FIXED & FLUID SEPARATES. LEFT BIG FLUID.*/ /* NOTE: FS is also styled by tablet styling code below */ .module19_columnscontainer_bigleft_smallright { position: relative; /*was .5em;*/ margin: 2%; background:; } .module19_bigleftcolumn, .module19_smallrightcolumn { /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* box-shadow: 3px 3px 20px 3px #333; */ } .module19_bigleftcolumn { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } /* Tablet Module19 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module19_bigleftcolumn { margin-right: 21.5em; background:; } .module19_smallrightcolumn { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; background:; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 18.75em; } } /* END TABLET MQ. Module19*/ /* END Module19 */ /* Module20. SECTION STYLING: Background Image left. FIXED & FLUID SEPARATES. LEFT BIG FLUID*/ /* NOTE: FS is also styled by tablet styling code below */ .module20_columnscontainer_bigleft_smallright { position: relative; /*was .5em;*/ margin: 2%; background:; } .module20_bigleftcolumn, .module20_smallrightcolumn { padding:; /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* box-shadow: 3px 3px 20px 3px #333; */ line-height:; } .module20_bigleftcolumn { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image7 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image7>h1 { color: white; } /* Tablet Module20 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module20_bigleftcolumn { margin-right: 21.5em; } .module20_smallrightcolumn { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ width: 18.75em; } } /* END TABLET MQ. Module20*/ /* END Module20*/ /* Module21.SECTION STYLING: FIXED & FLUID SEPARATES. RIGHT BIG FLUID. LEFT SMALL NONFLUID*/ /* NOTE: FS also is styled by tablet styling code below */ .module21_columnscontainer_smallleft_bigright { position: relative; /*was .5em all round;*/ margin-left: 2%; margin-right:2%; background:; } .module21_smallleftcolumn, .module21_bigrightcolumn { /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* box-shadow: 3px 3px 20px 3px #333; */ } .module21_smallleftcolumn { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; /*If want to adjust padding in the module, do it here*/ padding: ; } /* Tablet Module21 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module21_bigrightcolumn { margin-left: 21.5em; } .module21_smallleftcolumn { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left:0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ width: 18.75em; } } /* END TABLET MQ. Module21*/ /* END Module21 */ /* Module22. SECTION STYLING: Background image right. FIXED & FLUID SEPARATES. RIGHT BIG FLUID*/ /* NOTE: FS is also styled by tablet styling code below */ .module22_columnscontainer_smallleft_bigright { position: relative; /*was .5em all round;*/ margin-left: 2%; margin-right:2%; background:; } .module22_smallleftcolumn, .module22_bigrightcolumn { /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* box-shadow: 3px 3px 20px 3px #333; */ } .module22_smallleftcolumn { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image8 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height: 100vh; color: white; } .image8>h1 { color: white; } /* Tablet Module22 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module22_bigrightcolumn { margin-left: 21.5em; } .module22_smallleftcolumn { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left:0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 18.75em; } } /* END TABLET MQ. Module22*/ /* END Module22*/ /* Module23. FIXED & FLUID PAIRED. LEFT BIG FLUID. RIGHT SMALL NONFLUID*/ /* NOTE: FS also is styled by tablet styling code below */ .module23_columnscontainer_bigleft_smallright_paired { position: relative; margin: 2%; /* box-shadow: 3px 3px 20px 3px #333; */ background:; } .module23_bigleftcolumn_paired, .module23_smallrightcolumn_paired { padding:; /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; line-height:; } .module23_bigleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } /* TABLET. Module23 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module23_bigleftcolumn_paired { /*was 19.5em. Am adjusting to give a bit of separation in FS*/ /*margin-right: 21.5em;*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-right: 26em; } .module23_smallrightcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /* END TABLET MQ. Module23*/ /* END Module23*/ /* Module23b. FIXED & FLUID PAIRED. LEFT BIG FLUID. RIGHT SMALL NONFLUID. Full width*/ /* NOTE: FS is also styled by tablet styling code below */ .module23b_columnscontainer_bigleft_smallright_paired { position: relative; /* margin: 2% on non Full width*/ margin: 0; /*box-shadow: 3px 3px 20px 3px #333;*/ background:; } .module23b_bigleftcolumn_paired, .module23b_smallrightcolumn_paired { /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .module23b_bigleftcolumn_paired { background:; /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; padding:; } /*New for Full Width*/ .module23b_smallrightcolumn_paired { padding:; } /* TABLET. Module23b AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module23b_bigleftcolumn_paired { /*was 19.5em. Am adjusting to give a bit of separation in FS*/ /*margin-right: 21.5em;*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-right: 26em; } .module23b_smallrightcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /* END TABLET MQ. Module23b*/ /* END Module23b*/ /* Module24. BACKGROUND IMAGE left. FIXED & FLUID PAIRED. LEFT BIG FLUID*/ /* NOTE: FS is also styled by tablet styling code below */ .module24_columnscontainer_bigleft_smallright_paired { position: relative; margin: 2%; /* box-shadow: 3px 3px 20px 3px #333; */ background:; } .module24_bigleftcolumn_paired, .module24_smallrightcolumn_paired { padding:; /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; line-height:; } .module24_bigleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image2 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height:100vh; background-repeat: no-repeat; color: white; } .image2>h1 { color: white; } /* TABLET. Module24 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module24_bigleftcolumn_paired { /*was 19.5em. Am adjusting to give a bit of separation in FS*/ /*margin-right: 21.5em;*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-right: 26em; } .module24_smallrightcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /* END TABLET MQ. Module24*/ /* END Module24*/ /* Module24b. BACKGROUND IMAGE left. FIXED & FLUID PAIRED. LEFT BIG FLUID. Full size.*/ /* NOTE: FS is also styled by tablet styling code below */ .module24b_columnscontainer_bigleft_smallright_paired { position: relative; /* margin: 2% on non Full width*/ margin: 0; /* box-shadow: 3px 3px 20px 3px #333; */ background:; } .module24b_bigleftcolumn_paired, .module24b_smallrightcolumn_paired { padding:; /*pn This needs box-sizing. Is also provided by overall styling for sections*/ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; line-height:; } .module24b_bigleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image2 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:center; height:100vh; background-repeat: no-repeat; color: white; } .image2>h1 { color: white; } /*New for Full Width*/ .module24b_smallrightcolumn_paired { } /* TABLET. Module24b AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module24b_bigleftcolumn_paired { /*was 19.5em. Am adjusting to give a bit of separation in FS*/ /*margin-right: 21.5em;*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-right: 26em; } .module24b_smallrightcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; right: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-right of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /* END TABLET MQ. Module24b*/ /* END Module24b*/ /* Module25 FIXED & FLUID PAIRED. RIGHT BIG FLUID*/ /* NOTE: FS is also styled by tablet styling code below */ .module25_columnscontainer_smallleft_bigright_paired { position: relative; /*was .5em all round;*/ margin-left: 2%; margin-right:2%; /* box-shadow: 3px 3px 20px 3px #333; */ background: ; } .module25_smallleftcolumn_paired, .module25_bigrightcolumn_paired { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .module25_smallleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } /*Tablet Module25 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module25_bigrightcolumn_paired { /*was 19.5em. Am adjusting to give a bit bit separation in FS*/ /*margin-left: 21.5em;*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-left: 26em; } .module25_smallleftcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left:0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /*End Tablet Module25*/ /* END Module25*/ /* Module25b FIXED & FLUID PAIRED. RIGHT BIG FLUID. Full width*/ /* NOTE: FS is also styled by tablet styling code below */ .module25b_columnscontainer_smallleft_bigright_paired { position: relative; /*was .5em all round;*/ /* margin: 2% on non Full width*/ margin-left: 0; /* margin: 2% on non Full width*/ margin-right:0; /*box-shadow: 3px 3px 20px 3px #333;*/ background:; } .module25b_smallleftcolumn_paired, .module25b_bigrightcolumn_paired { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .module25b_smallleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } /*New for Full Width*/ .module25b_bigrightcolumn_paired { } /*Tablet Module25b AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module25b_bigrightcolumn_paired { /*was 19.5em. Am adjusting to give a bit bit separation in FS*/ /*margin-left: 21.5em;*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-left: 26em; } .module25b_smallleftcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /*End Tablet Module25b*/ /* END Module25b*/ /* Module26. BACKGROUND_IMAGE right. FIXED & FLUID PAIRED. RIGHT BIG FLUID*/ /* NOTE: FS is also styled by tablet styling code below */ .module26_columnscontainer_smallleft_bigright_paired { position: relative; /*was .5em all round;*/ margin-left: 2%; margin-right:2%; /* box-shadow: 3px 3px 20px 3px #333; */ background:; } .module26_smallleftcolumn_paired, .module26_bigrightcolumn_paired { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .module26_smallleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image1 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:cover; background-position:center; height:100vh; color: white; } .image1>h1 { color: white; } /*Tablet Module26 AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module26_bigrightcolumn_paired { /*was 19.5em. Am adjusting to give a bit bit separation in FS*/ /*margin-left: 21.5em;*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-left: 26em; } .module26_smallleftcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; ; } } /*End Tablet Module26*/ /* END Module26*/ /* Module26b. BACKGROUND_IMAGE right. FIXED & FLUID PAIRED. RIGHT BIG FLUID. Full width.*/ /* NOTE: FS is also styled by tablet styling code below */ .module26b_columnscontainer_smallleft_bigright_paired { position: relative; /*was .5em all round;*/ /* margin: 2% on non Full width*/ margin-left: 0%; /* margin: 2% on non Full width*/ margin-right:0%; /*box-shadow: 3px 3px 20px 3px #333; */ background:; } .module26b_smallleftcolumn_paired, .module26b_bigrightcolumn_paired { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .module26b_smallleftcolumn_paired { /*Provides distance between the columns, when they are stacked. Was .5em*/ margin-bottom: 30px; } .image1 { background-image: url("jensfriend_study_700h.jpg"); background-size:cover; background-position:cover; background-position:center; height:100vh; color: white; } /*New for Full Width*/ .module26b_bigrightcolumn_paired { } .image1>h1 { color: white; } /*Tablet Module26b AND Styling here affects FS too*/ /* Til apr 2019 was: @media screen and (min-width: 47.5em... ) */ @media screen and (min-width: 768px) { /* so he aint reszing directly this element when screen width is above 47.5; he is instead pushing it away from the right side of the screen with this big right margin. Thus the right column has space. You'd think the big margin would push against the alongside right column; evidently not*/ .module26b_bigrightcolumn_paired { /*was 19.5em. Am adjusting to give a bit bit separation in FS*/ /*margin-left: 21.5em;*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ margin-left: 26em; } .module26b_smallleftcolumn_paired { /*he is using position:absolute ao floating to get this element alongside the other*/ position: absolute; top: 0; left: 0; /*he is achieving this element being non-fluid - ie text stays where it is when screen reduced in size, by having it's width specified, I guess. The gap between the two alongside elements is controlled via the difference between this right element, and the right margin - as set above - space for it. Seems a crappy way of doing it.*//*Later: I tried to do it differently,but was unable to. I guess his method is actually pretty smart*/ /*was 18.75em*/ /*Width of one part and margin-left of other part should be the same, in order for the two parts to abutt eachother, and so for there to be no background between them (as otherwise visible with eg, background:red)*/ width: 26em; } } /*End Tablet Module26b*/ /* END Module26b*/ /*Module27, Module28, & Module29 are flex sections, and are styled in sections_flex_modular.css. So too for Full Width flex modules: Module27b, Module28b, & Module 29b*/ /*Module30. One col. Variable size pic. Landscape.*/ .module30_longways { width: 96%; background:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies. However, for left and right, it makes no difference. The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/ padding-right:; padding-left: ; /*Needed to centre the image wrapper*/ text-align: center; font-size: 14px; font-family: 'ralewayregular'; } #module30_image_wrapper { background-color: ; width:60%; /*Had to be inline block to be centered*/ display:inline-block; /* Redundant, given the div (module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/ text-align: center; /*Ensures is background space above the image*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; } #module30_pic { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; /* box-shadow: 3px 3px 20px 3px #333; */ } /* MQ Module 30*/ /* pn June J021: new*/ @media screen and (max-width: 768px){ #module30_image_wrapper { background-color:; width:96%; } } /*END MQ*/ /* END. Module30. One col. Variable size pic. Landscape.*/ /*Module30b. One col. Variable size pic. Landscape. Full width*/ .module30b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ box-sizing: border-box; /*Insert values to 'squeeze' the image. With no value here, the .5em appicable to all sections notionally applies. However, for left ad right, it makes no difference. The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/ padding-right:; padding-left:; /*pn June 2021. Unlike on module 30, 'text-align: center' not needed here. Don't need to centre the image wrapper within this (30b) div, cos the image is 100% of the wrapper anyway*/ /*pn June 2021. Needed to centre the image wrapper*/ text-align: center; /*pn Aug 2022*/ font-size: 14px; font-family: 'ralewayregular'; } #module30b_image_wrapper { /* pn June 2021*/ background-color: ; width:60%; /*pn June 2021. Had to be inline block to be centered*/ display:inline-block; /* Redundant, given the div (module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/ text-align: center; /*Ensures is background space above the image*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; } #module30b_pic { height: auto !important; width: auto !important; /*This min-width ensures the pics occupies the full width of the image wrapper, even when a browser has small zoom size min-width: 100%; */ /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; /*box-shadow: 3px 3px 20px 3px #333;*/ } /* MQ Module 30b*/ /* pn Aug J022*/ @media screen and (max-width: 768px){ #module30b_image_wrapper { background-color:; width:96%; } } /* END. Module30b. One col. Variable size pic. Landscape. Full width*/ /*As module30, but for portrait pics */ /*module30portrait. One col. Variable size pic. Portrait*/ .module30portrait_longways { width: 96%; background:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies. However, for left and right, it makes no difference. The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/ padding-right:; padding-left: ; /*Needed to centre the image wrapper*/ text-align: center; font-size: 14px; font-family: 'ralewayregular'; } #module30portrait_image_wrapper { background-color:; width:40%; /*Had to be inline block to be centered*/ display:inline-block; /* Redundant, given the div (HP_module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/ text-align: center; /*Ensures is background space above the image*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; } #module30portrait_pic { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; /* box-shadow: 3px 3px 20px 3px #333; */ } #module30portrait_top_para { display:; } /* MQ module30portrait*/ @media screen and (max-width: 768px){ #module30portrait_image_wrapper { background-color:; width:60%; } } /*END MQ*/ /* END. module30portrait. One col. Variable size pic. Portrait*/ /*As module30b, but for portrait pics */ /*module30bportrait. One col. Variable size pic. Portrait. Full width.*/ .module30bportrait_longways { width: 100%%; background:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies. However, for left and right, it makes no difference. The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/ padding-right:; padding-left: ; /*Needed to centre the image wrapper*/ text-align: center; font-size: 14px; font-family: 'ralewayregular'; } #module30bportrait_image_wrapper { background-color:; width:40%; /*Had to be inline block to be centered*/ display:inline-block; /* Redundant, given the div (HP_module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/ text-align: center; /*Ensures is background space above the image*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; } #module30bportrait_pic { height: auto !important; width: auto !important; /*Without this a big pic will go beyond the image wrapper*/ max-width:100%; /* box-shadow: 3px 3px 20px 3px #333; */ } #module30bportrait_top_para { display:; } /* MQ module30bportrait*/ @media screen and (max-width: 768px){ #module30bportrait_image_wrapper { background-color:; width:60%; } } /*END MQ*/ /*END: module30bportrait. One col. Variable size pic. Portrait. Full width.*/ /*Module30c. One col. Variable size pic. Side-label in FS. June 2021*/ /*NB: To have enough space to left of the pic to have a side label, will need an image wrappper of big width, picture of small max-wdith*/ .module30c_longways { width: 96%; background:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies. However, for left and right, it makes no difference. The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/ padding-right:; padding-left: ; /*pn June 2021. Needed to centre the image wrapper*/ text-align: center; } #module30c_image_wrapper { /* pn June 2021*/ background-color:; /*Needs to be wide, helping towards creating space for the left side-label*/ width:98%; /*pn June 2021. Had to be inline block to be centered*/ display:inline-block; /* Redundant, given the div (module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/ text-align: center; /*Ensures is background space above the image*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; } #module30c_pic { /*allows for the first label text being in the middle, vertically. Can also specify bottom or top, to position the side-heading respectively*/ vertical-align:middle; height: auto !important; width: auto !important; /*Most pics will be so pic that in order to see the side label the max-width needs to small*/ max-width:40%; /* box-shadow: 3px 3px 20px 3px #333; */ } #module30c_top_para { /*enables to the first label to go alongside image*/ display:inline-block; margin-right: 10px; } /* MQ Module 30c*/ @media screen and (max-width: 990px) { /*not stricty nec, as image will anyway wrap below the text if not enough screen width for it and the text. This top-para: block just safeguards that the text cannot be on the same line as the image, when the image occupies all substantive width*/ #module30c_top_para { display:block; /*Cancelling the right margin that the heading needed when it was alongside the image position*/ margin-right:0; } } /* pn June J021: new*/ @media screen and (max-width: 768px){ #module30c_image_wrapper { background-color:; width:; } } /*END MQ*/ /* END. Module30c*/ /*Module31. One column section (RH variable-sized photo)*/ .module31_longways { margin-top:; width: 96%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } .module31_pic { float: right; /*height: 175px is good;*/ height: auto !important; width: auto !important; max-width: 30%; /*Use margin-left to determine space between left of picture and the text to the picture's left*/ margin-left:20px; margin-bottom: 10px; border: green solid 1px; /* Now controlled by .box_shadow_master_normal box-shadow: 3px 3px 20px 3px #333; */ } /*Note, max-width is 475, bigger than the usual 425 for mobile. Thus image gets bigger, going from 30% to 40% max width, before screen gets really small. Otherwise,image looks too small*/ @media screen and (max-width: 475px) { .module31_pic { /* Now controlled by .box_shadow_master_thin box-shadow: 1px 1px 20px 1px #333; */ max-width: 40%; } } /*End MQ*/ /*END: Module31*/ /*Module31b. One column section (RH variable-sized photo). Full width*/ .module31b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; /*New for Full Width*/ /* Now controlled for all wide sections by wide_sections_padding class*/ /*padding-left: 2%; padding-right: 2%; */ } .module31b_pic { float: right; /*height: 175px is good;*/ height: auto !important; width: auto !important; max-width: 30%; /*Use margin-left to determine space between left of picture and the text to the picture's left*/ margin-left:20px; margin-bottom: 10px; border: green solid 1px; /* Now controlled by .box_shadow_master_normal box-shadow: 3px 3px 20px 3px #333; */ } /*Note, max-width is 475, bigger than the usual 425 for mobile. Thus image gets bigger, going from 30% to 40% max width, before screen gets really small. Otherwise,image looks to small*/ @media screen and (max-width: 475px) { .module31b_pic { /* Now controlled by .box_shadow_master_thin box-shadow: 1px 1px 20px 1px #333; */ max-width: 40%; } } /*End MQ*/ /*END: Module31b*/ /*Module31c. One column section. Variable sized (RH) pnpic.*/ .module31c_longways_pnpic { margin-top:; width: 96%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } .module31c_pic_pnpic { float: right; height: auto !important; width: auto !important; /*Original: 30%*/ max-width: 30%; /*Use margin-left to determine space between left of picture and the text to the picture's left*/ margin-left:20px; margin-bottom: 10px; } @media screen and (max-width: 475px) { .module31c_pic_pnpic { max-width: 40%; } } /*End MQ*/ /*END. Module31c. One column section. Variable sized (RH) pnpic.*/ /*Module31d. One column section. Variable sized (RH) pnpic. Full Width.*/ .module31d_longways_pnpic { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; } .module31d_pic_pnpic { float: right; height: auto !important; width: auto !important; max-width: 30%; /*Use margin-left to determine space between left of picture and the text to the picture's left*/ margin-left:20px; margin-bottom: 10px; } @media screen and (max-width: 475px) { .module31d_pic_pnpic { max-width: 40%; } } /*End MQ*/ /*END. Module31d. One column section. Variable sized (RH) pnpic. Full Width.*/ /*One column section (LH variable-sized photo)*/ .module32_longways { margin-top:; width: 96%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } .module32_pic { float: left; /*height: 175px is good;*/ height: auto !important; width: auto !important; max-width: 30%; /*Use margin-right to determine space between right of picture and the text to the picture's right*/ margin-right: 20px; margin-bottom: 10px; border: green solid 1px; /* Now controlled by .box_shadow_master_normal box-shadow: 3px 3px 20px 3px #333; */ } /*Note, max-width is 475, bigger than the usual 425 for mobile. Thus image gets bigger, going from 30% to 40% max width, before screen gets really small. Otherwise,image looks to small*/ @media screen and (max-width: 475px) { .module32_pic { /* Now controlled by .box_shadow_master_thin box-shadow: 1px 1px 20px 1px #333; */ max-width: 40%; } /* End MQ*/ } /*END Module32*/ /*One column section (LH variable-sized photo)*/ .module32b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } .module32b_pic { float: left; /*height: 175px is good;*/ height: auto !important; width: auto !important; max-width: 30%; /*Use margin-right to determine space between right of picture and the text to the picture's right*/ margin-right:20px; margin-bottom: 10px; border: green solid 1px; /* Now controlled by .box_shadow_master_normal box-shadow: 3px 3px 20px 3px #333; */ } /*Note, max-width is 475, bigger than the usual 425 for mobile. Thus image gets bigger, going from 30% to 40% max width, before screen gets really small. Otherwise,image looks to small*/ @media screen and (max-width: 475px) { .module32b_pic { /* Now controlled by .box_shadow_master_thin box-shadow: 1px 1px 20px 1px #333; */ max-width: 40%; } /* End MQ*/ } /*END Module32b*/ /* Module33. One column UL */ .module33_longways { margin-top:; width: 96%; background:; line-height:; padding:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } /* End. Module33 */ /* Module33b. One column UL. Full Width. */ .module33b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ box-sizing: border-box; } /* End. Module33b. Full Width */ /* Module34. Paired equal sections (with master heading) */ .module34_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module34_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module34_left_paired { background:; float: left; margin-left:0; } .module34_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module34 */ @media screen and (max-width: 768px){ .module34_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module34 */ /* END: Module34*/ /* Module34b. Paired equal sections (with master heading). Full Width. */ .module34b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ /*New for Full Width. Needed here, rather than in .module34b_left_and_right_paired, so as to embrace the heading padding-left: 2%; padding-right: 2%; */ } .module34b_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module34b_left_paired { background:; float: left; margin-left:0; } .module34b_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module34b */ @media screen and (max-width: 768px){ .module34b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module34b.Full Width. */ /* END: Module34b. Full Width.*/ /* Module34iia. Paired equal sections. Master heading; sentence below; ONE subheading; these can all span both columns */ .module34iia_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module34iia_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module34iia_left_paired { background:; float: left; margin-left:0; } .module34iia_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module34iia */ @media screen and (max-width: 768px){ .module34iia_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module34iia */ /* END: Module34iia*/ /* Module34iib. Paired equal sections. Master heading; sentence below; ONE subheading; these can all span both columns. Full width */ .module34iib_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ /*New for Full Width. Needed here, rather than in .module34b_left_and_right_paired, so as to embrace the heading padding-left: 2%; padding-right: 2%; */ } .module34iib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module34iib_left_paired { background:; float: left; margin-left:0; } .module34iib_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module34iib */ @media screen and (max-width: 768px){ .module34iib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module34iib.Full Width. */ /* END: Module34iib. Full Width.*/ /* Module 35. LEFT & RIGHT PAIRED, ONE (RH) HEADING. Full Width.*/ .module35_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ } .module35_heading_section { width: 50%; } .module35_left_and_right_paired { /*width: 48%;*/ /*New apr 2019*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; } .module35_left_paired { background:; float: left; margin-left:0; } .module35_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module35 */ @media screen and (max-width: 768px){ .module35_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module35_heading_section { width: 100%; } } /* End tablet module35.*/ /* END: Module35.*/ /* Module 35b. LEFT & RIGHT PAIRED, ONE (RH) HEADING. Full Width.*/ .module35b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ /*New for Full Width. Needed here, rather than in .module35c_left_and_right_paired, so as to embrace the heading*/ /* padding-left: 2%; padding-right: 2%; */ } .module35b_heading_section { width: 50%; } .module35b_left_and_right_paired { /*48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; } .module35b_left_paired { background:; float: left; margin-left:0; } .module35b_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module35b */ @media screen and (max-width: 768px){ .module35b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } .module35b_heading_section { width: 100%; } } /* End tablet module35b. Full Width. */ /* END: Module35b. Full Width.*/ /* Module35iia. Paired equal sections (with master heading) */ .module35iia_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module35iia_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module35iia_left_paired { background:; float: left; margin-left:0; } .module35iia_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module35iia */ @media screen and (max-width: 768px){ .module35iia_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module35iia */ /* END: Module35iia*/ /* Module35iib. Paired equal sections. One heading - which can span both columns. Full width */ .module35iib_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module35iib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module35iib_left_paired { background:; float: left; margin-left:0; } .module35iib_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module35iib*/ @media screen and (max-width: 768px){ .module35iib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module35iib */ /* END: Module35iib*/ /*Module36. Background image in a div. The div is in a SINGLE COLUMN SECTION*/ .module36_longways { margin-top:; width: 96%; background:; /*Gives space above top comment*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } /*Styles comment above picture*/ .module36_topcomment { padding-left: 1.5em; } /*Styles comment below picture*/ .module36_bottomcomment { padding-left: 1.5em; } .image15 { background: url('storm_lightning_girl_900w_50Q.jpg'); background-size:cover; background-position:center; height: 100vh; text-align: center; } .image15 h1 { color: mediumpurple; position:relative; top: 100px; } /*No MQ for module36*/ /*END: Module36 */ /*Module36b. Background image in a div. The div is in a SINGLE COLUMN SECTION. Full Width.*/ .module36b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; /*Gives space above top comment*/ padding-top: 20px; /*Gives space under bottom comment*/ padding-bottom: 20px; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; /*New for Full Width.*/ padding-left: 2%; padding-right: 2%; } /*Styles comment above picture*/ .module36b_topcomment { padding-left: 1.5em; } /*Styles comment below picture*/ .module36b_bottomcomment { padding-left: 1.5em; } .image15 { background: url('storm_lightning_girl_900w_50Q.jpg'); background-size:cover; background-position:center; height: 100vh; text-align: center; } .image15 h1 { color: mediumpurple; position:relative; top: 100px; } /*No MQ for module36. Full Width.*/ /*END: Module36b. Full Width. */ /* Module37. One column UL. RH photo. Photos drop down in mobile size allowinga para to appear first */ .module37_longways { margin-top:; width: 96%; background:; /* box-shadow: 3px 3px 20px 3px #333; */ margin-left:auto; margin-right:auto; box-sizing: border-box; } /*for when image is uppermost, for all screen sizes bar mobile*/ #module37_uppermost_image { float: right; height: auto !important; width: auto !important; max-width: 55%; margin-left:10px; margin-bottom: 10px; border: green solid 1px; /* box-shadow: 3px 3px 20px 3px #333; */ } @media screen and (max-width: 475px) { #module37_uppermost_image { display:none; float:none; } } /*for when image is after first question, mobile only*/ #module37_image_lower { display:none; } @media screen and (max-width: 475px) { #module37_image_lower { max-width:100%; display:block; border: green solid 1px; /* box-shadow: 1px 1px 20px 1px #333; */ margin-top: 20px; } } /*END Module37*/ /* Module37b. One column UL. RH photo. Photos drop down in mobile size allowinga para to appear first. Full Width */ .module37b_longways { margin-top:; /*96% on non Full Width*/ width: 100%; background:; line-height:; padding:; /*box-shadow: 3px 3px 20px 3px #333;*/ margin-left:auto; margin-right:auto; box-sizing: border-box; /*New for Full Width. Needed here, rather than in .module34b_left_and_right_paired, so as to embrace the heading*/ /* padding-left: 2%; padding-right: 2%; */ } /*for when image is uppermost, for all screen sizes bar mobile*/ #module37b_uppermost_image { float: right; height: auto !important; width: auto !important; max-width: 55%; margin-left:10px; margin-bottom: 10px; border: green solid 1px; /*box-shadow: 3px 3px 20px 3px #333;*/ } @media screen and (max-width: 475px) { #module37b_uppermost_image { display:none; float:none; } } /*for when image is after first question, mobile only*/ #module37b_image_lower { display:none; } @media screen and (max-width: 475px) { #module37b_image_lower { max-width:100%; display:block; border: green solid 1px; /*box-shadow: 1px 1px 20px 1px #333;*/ margin-top: 20px; } } /*END Module37b. Full Width*/ /* Module38. Two colum UL. Paired equal sections (with master heading) */ .module38_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module38_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module38_left_paired { background:; float: left; margin-left:0; } .module38_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module38 */ @media screen and (max-width: 768px){ .module38_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module38 */ /* END: Module38*/ /* Module38b. Paired equal sections. One heading - which can span both columns. Full width */ .module38b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module38b_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module38b_left_paired { background:; float: left; margin-left:0; } .module38b_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module38b*/ @media screen and (max-width: 768px){ .module38b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module38b */ /* END: Module38b*/ /* Module39ai. Paired equal sections. Intro, across top of columns. No gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen.*/ .module39ai_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39ai_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39ai_left_paired { background:; float: left; margin-left:0; } .module39ai_right_paired { background:; float: right; margin-right:0; } /*For intro's paragraph above the list items. Needed so is no gap between intro and last items*/ .module39ai_marg_bottom_zero { margin-bottom: 0; } .module39ai_ul_tight_left { /*Needed so is no gap between intro and last items*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39ai_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39ai*/ @media screen and (max-width: 768px){ .module39ai_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39ai */ /* END: Module39ai*/ /*Module39aib. Paired equal sections. Intro, across top of columns. Intro, across bottom of columns. NO gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen.*/ .module39aib_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39aib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39aib_left_paired { background:; float: left; margin-left:0; } .module39aib_right_paired { background:; float: right; margin-right:0; } /*For intro's paragraph above the list items. Needed so is no gap between intro and last items*/ .module39aib_marg_bottom_zero { margin-bottom: 0; } .module39aib_ul_tight_left { /*Needed so is no gap between intro and last items*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39aib_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39aib*/ @media screen and (max-width: 768px){ .module39aib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39aib */ /* END: Module39aib*/ /* Module39aii. Paired equal sections. Intro, across top of columns. Gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen.*/ .module39aii_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39aii_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39aii_left_paired { background:; float: left; margin-left:0; } .module39aii_right_paired { background:; float: right; margin-right:0; } .module39aii_ul_tight_left { /*Because margin-top is 0 for right UL, this left UL needs margin-top 0 too; else the list items in the left UL start a line lower than those in the right UL*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39aii_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39aii*/ @media screen and (max-width: 768px){ .module39aii_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39aii */ /* END: Module39aii*/ /*Module39aiib. Paired equal sections. Intro, across top of columns. Intro, across bottom of columns. GAP between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen.*/ .module39aiib_sectionwrapper { display: block; box-sizing: border-box; width: 96%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39aiib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39aiib_left_paired { background:; float: left; margin-left:0; } .module39aiib_right_paired { background:; float: right; margin-right:0; } .module39aiib_ul_tight_left { /*Because margin-top is 0 for right UL, this left UL needs margin-top 0 too; else the list items in the left UL start a line lower than those in the right UL*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39aiib_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39aiib*/ @media screen and (max-width: 768px){ .module39aiib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39aiib */ /* END: Module39aiib*/ /* Module39bi. Paired equal sections. Intro, across top of columns. No gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen. Full width. */ .module39bi_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39bi_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39bi_left_paired { background:; float: left; margin-left:0; } .module39bi_right_paired { background:; float: right; margin-right:0; } /*For intro's paragraph above the list items. Needed so is no gap between intro and last items*/ .module39bi_marg_bottom_zero { margin-bottom: 0; } .module39bi_ul_tight_left { /*Needed so is no gap between intro and last items*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39bi_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39bi*/ @media screen and (max-width: 768px){ .module39bi_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39bi */ /* END: Module39bi*/ /*Module39bib. Paired equal sections. Intro, across top of columns. Intro, across bottom of columns. NO gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen. Full width.*/ .module39bib_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39bib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39bib_left_paired { background:; float: left; margin-left:0; } .module39bib_right_paired { background:; float: right; margin-right:0; } /*For intro's paragraph above the list items. Needed so is no gap between intro and last items*/ .module39bib_marg_bottom_zero { margin-bottom: 0; } .module39bib_ul_tight_left { /*Needed so is no gap between intro and last items*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39bib_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39bib*/ @media screen and (max-width: 768px){ .module39bib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39bib */ /* END: Module39bib*/ /* Module39bii. Paired equal sections. Intro, across top of columns. Gap between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen. Full width. */ .module39bii_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39bii_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39bii_left_paired { background:; float: left; margin-left:0; } .module39bii_right_paired { background:; float: right; margin-right:0; } .module39bii_ul_tight_left { /*Because margin-top is 0 for right UL, this left UL needs margin-top 0 too; else the list items in the left UL start a line lower than those in the right UL*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39bii_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39bii*/ @media screen and (max-width: 768px){ .module39bii_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39bii */ /* END: Module39bii*/ /*Module39biib. Paired equal sections. Intro, across top of columns. Intro, across bottom of columns. GAP between intro and list items. No line-gap list-items & which stack without gap in list in smallscreen. Full width.*/ .module39biib_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ } .module39biib_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module39biib_left_paired { background:; float: left; margin-left:0; } .module39biib_right_paired { background:; float: right; margin-right:0; } .module39biib_ul_tight_left { /*Because margin-top is 0 for right UL, this left UL needs margin-top 0 too; else the list items in the left UL start a line lower than those in the right UL*/ margin-top:0; /*Needed for no gap in list items when stacked in small screen*/ margin-bottom:0; } .module39biib_ul_tight_right { /*Needed for no gap in list items when stacked in small screen*/ margin-top:0; } /* Tablet: Module39biib*/ @media screen and (max-width: 768px){ .module39biib_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module39biib */ /* END: Module39biib*/ /* Module40a. Paired equal sections. Intro, across top of columns.*/ .module40a_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module40a_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module40a_left_paired { background:; float: left; margin-left:0; } .module40a_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module40a */ @media screen and (max-width: 768px){ .module40a_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module40a */ /* END: Module40a*/ /* Module40b. Paired equal sections. Intro, across both columns. Full width.*/ .module40b_sectionwrapper { display: block; box-sizing: border-box; /*96% on non Full Width*/ width: 100%; margin: 0 auto; background:; /*box-shadow: 3px 3px 20px 3px #333;*/ /*New for Full Width. Needed here, rather than in .module40b_left_and_right_paired, so as to embrace the heading padding-left: 2%; padding-right: 2%; */ } .module40b_left_and_right_paired { /*Originally 48% on non Full Width*/ width: 50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module40b_left_paired { background:; float: left; margin-left:0; } .module40b_right_paired { background:; float: right; margin-right:0; } /* Tablet: module40b */ @media screen and (max-width: 768px){ .module40b_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module40b.Full Width. */ /* END: Module40b. Full Width.*/ /*Module41a. Paired equal sections. Intro, across top of columns. Intro, across bottom of columns.*/ .module41a_sectionwrapper { display: block; box-sizing: border-box; width:96%; margin: 0 auto; background:; /* box-shadow: 3px 3px 20px 3px #333; */ padding:; } .module41a_left_and_right_paired { /*width: 48%;*/ /*new.Apr2019*/ width:50%; /*This no longer pushes the section away from the ul, cos the section is within a contentcontainer. This controlled by contentcontainer's padding-top now*/ line-height:; border:; } .module41a_left_paired { background:; float: left; margin-left:0; } .module41a_right_paired { background:; float: right; margin-right:0; } /* Tablet: Module41a */ @media screen and (max-width: 768px){ .module41a_left_and_right_paired { float: none; width:100%; margin-left: auto; margin-right: auto; background:; /*Needed, else the right section extends beyond the sectionwrapper. Dunno why does this*/ box-sizing:border-box; } } /* End tablet module41a */ /* END: Module41a*/ /*