#index_body {
/*off white
background-color: #dedfe9;*/
/*skin colour I - too light
background-color: #f0ebe3;*/
/*Skin colour II.  As used for heading text.  This is papaya whip.  Just a bit too creamy/yellow for use as background colour 
background-color: #ffefd5; */
/*Skin colour III. From midnight bat.  Lighter than my  #fff2dd
background-color:
#f5ece3;*/
/*Skin colour IV; a slightly less creamy variant of Papaya Whip. Edited by PN  
background-color:
#fff2dd;*/
/* My indiared / salmon4: #89444a   */

/*--Background pattern from  https://www.toptal.com/designers/subtlepatterns/seigaiha/    */  /* Background-colour: Skincolour IV,#fff2dd, with opacity reduced*/
/*
background-image: url(seigaiha.png);
background-color:  hsla(37, 100%, 93%, 0.35);
background-blend-mode: multiply;
*/
/*Gradient reversed horizontally*/
/*Grey to light blue gradient*/
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;
}


#services_body {
/*blue to light blue gradient*/
/*
background: -webkit-linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
*/

/*Grey to light blue gradient*/
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
}


#approach_body {
/*--Background pattern from  https://www.toptal.com/designers/subtlepatterns/seigaiha/    */  /* Background-colour: Skincolour IV,#fff2dd, with opacity reduced*/
/*
background-image: url(seigaiha.png);
background-color:  hsla(37, 100%, 93%, 0.35);
background-blend-mode: multiply;
*/
/*Gradient reversed horizontally*/
/*Grey to light blue gradient*/
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;
}





/*Grey to light blue gradient*/
/*
#about_body {
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;
}
*/


#about_body{
/*blue to light blue gradient*/
/*
background: -webkit-linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
*/

/*Grey to light blue gradient*/
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
}




#faq_body {
/*--Background pattern from  https://www.toptal.com/designers/subtlepatterns/seigaiha/    */  /* Background-colour: Skincolour IV,#fff2dd, with opacity reduced*/
/*
background-image: url(seigaiha.png);
background-color:  hsla(37, 100%, 93%, 0.35);
background-blend-mode: multiply;
*/

/*Grey to light blue gradient*/
background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;
}



#contact_body{
/*blue to light blue gradient*/
/*
background: -webkit-linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #424d7a 0%,  #c6e2ff 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
*/

/*Grey to light blue gradient*/

background: -webkit-linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #c6e2ff 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;

/*Grey to light green gradient*/
/*
background: -webkit-linear-gradient(to right, #373b44 0%, #7bbb1f 100%), 
url('seigaiha.png');
background: 
linear-gradient(to right, #373b44 0%, #7bbb1f 100%), 
url('seigaiha.png') ;
background-blend-mode: multiply;
*/

/*
background: 
linear-gradient(to right, #373b44, #29d929 100%), 
url('seigaiha.png');
background-blend-mode: multiply;
*/


/* papaya whip: #ffefd5.  loco green (#012e03)*/
}

/* NB. font-size, line-height and font-family are over-ruled by the settings for these for the sections and flex modules*/
body {
margin: 0; 
padding: 0;
max-width: 100%;

/*Affects: menu words; 'back to top'; footer (ie.copyright). Fonts for everything else determined by more specific selectors*/
font-family: 'nunito_sansregular', 'latoregular', 'arial', sans-serif;

 /* Could specify an em value here to act as a multiplier of the other font sizes; eg 1.2em, like on previous version of this site (2NameNadge_SchoolBackground)*/
font-size: 100%;
line-height:1.5;
background-color: ;

/* 1b Theft Security.  To Disable Text Selection of the Complete Web Page Using CSS.  https://www.makeuseof.com/disable-text-selection-cut-copy-paste-right-click-on-web-page/#:~:text=If%20you%20want%20to%20disable,disabled%20for%20the%20input%20tag.   Also used javascript as as another method to achieve this, in the body tag of each page; see 1a Theft Security there*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}





#index_header {
background-image:url('cincinnati_library_GimpReducedQualityof30.jpg');
/* background-repeat: no-repeat;*/
height: 100vh;	 
background-size: cover;
text-align: center;
/*prev had as 2em to give distance between header's bottom and first module.  This distance now set by joint effects of padding-top on content_container and two <br> after header and before first section.  This necessary so that left and right borders on content_container (rather than on body, hence get to not have a border on left and right and top of the image) can go all the way up to bottom of image, without a gap - as there previously was. */
margin-bottom: 0;
padding-top: 0; margin-top: 0;
}





/*doesn't apply to index page because of above index page specific id selector*/
header {
width: 100%;
/*prev had as 2em to give distance between header's bottom and first module.  This distance now set by joint effects of padding-top on content_container and two <br> after header and before first section.  This necessary so that left and right borders on content_container (rather than on body, hence get to not have a border on left and right and top of the image) can go all the way up to bottom of image, without a gap - as there previously was. */
margin-bottom: 0;
padding-top: 0; margin-top: 0;
}


/*Doesn't apply to index page*/
/*Background colour here applies to the full width top strip (which contains the menu and logo) of pages 2 to 6*/
#header_upper {

/*Puts space under the nav bar.Is cancelled later.   The 14px works with  the 'top:12px' of the nav ul;  thus is effectively controlled height of header_upper*/
padding-bottom: 14px;
/* #000040 with a bit of red.  rgb(40, 0, 68) is #280044 */
background-color: rgb(40, 0, 68);
}


/* Height for all 5 pages below WAS reduced in media queries.  This meant the pic doesn't cover most of a mobile screen.  I instead set height to 64vh (giving size matching 400px in FS), for a variable sized background. With this, could only have page-reminder_conrainer underneath the pics.   With a variable sized background, I couldnt satisfactorily position the page_reminder_container at (within) the pic's bottom (I DID achieve bottom position with flex, but this messed up position of menstar badge in IE10).*/   

#header_lower_services {
height:64vh;
background-size:cover;
background-image: url(cincinnati_BigPic_Slice2_Q30_MirrorSIX_Q30.jpg);
background-blend-mode:;
/* To move pic a bit to left and up*/
background-position: 48% 30%;
/*For any abolute positioning of a container within this element*/
position: relative;
}

#header_lower_approach {
height:64vh;
background-size:cover;
background-image: url(cincinnati_BigPic_Slice2_Q30_vignetteQ30.jpg);
background-blend-mode:;
/* To move pic a bit to left and up*/
background-position: 48% 30%;
/*For any abolute positioning of a container within this element*/
position: relative;
}

#header_lower_about {
height:64vh;
background-size:cover;
background-image: url(cincinnati_BigPic_Slice2_Q30_PolarCoordinatesQ30.jpg);
background-blend-mode:;
/* To move pic a bit to left and up*/
background-position: 48% 30%;
/*For any abolute positioning of a container within this element*/
position: relative;
}

#header_lower_faq {
height:64vh;
background-size:cover;
background-image: url(cincinnati_BigPic_Slice2_Q30_illusion_q30.jpg);
background-blend-mode:;
/* To move pic a bit to left and up*/
background-position: 48% 30%;
/*For any abolute positioning of a container within this element*/
position: relative;
}

#header_lower_contact {
height:64vh;
background-size: cover;
background-image: url(cincinnati_BigPic_Slice2_Q30_WhirlQ30ClockwiseSmlRad_2.jpg);
background-blend-mode:;
/* To move pic a bit to left and up. is 48% 30% for others.  The 45% makes image higher, meaning whirl is better positioned - esp needed on a large size screen*/
background-position: 48% 45%;
/*For any abolute positioning of a container within this element*/
position: relative;
}




nav {
text-align:left;
}


/* Background colour here applies to background of nav words (doesn't go beyond the words, to cover the full screen width).  Is for when the menu is non-sticky - i.e. when scrolling hasn't happened.  Only applies to FS index page, cos the selector below targets pages 2-6 FS */
nav ul{
position: relative;
/*so nav bar doesnt stretch full screen*/
display:inline-block;
/*For background of nav words.  Only applies to FS index page, cos the selector below targets pages 2-6 FS.*/
/*opaque black   */
background-color: rgba(0, 0, 0, 0.53);

/*same blue as on pages 2-, except has opaqueness.   Blue on pages 2-6 is #000040 with a bit of red; that is rgb(40, 0, 68) aka #280044*/
background-color: rgba(40, 0, 68, 0.53);


overflow:hidden;
/*gets rid of bullets*/
list-style-type: none;
padding:0;
margin:0;
/*added lest needed re 'buttons*/
box-sizing: border-box;
/*Puts space above the FS nav bar.Is cancelled later.   The 12px is used with the 'padding_bottom of header_upper; thus is effectively controlled height of header_upper*/
top:12px;
margin-left: 8px;
margin-right: 8px;
}

/*Class only on pages 2-6. In nav ul.Determines colour, or its presence/absence, around the bar of nav words, in FS. Used here to effectively turn off the colour.   'Inherit' means it will always adopt the colour of whatever the header_upper is.*/
/* One of five times gotta change the value re when navbar_mobile operates.  Search: navsize.   (Plus there's a media query for this value in header_slogan_title_index) Here add one px to the media query value when navbar_mobile operates.  */
@media screen and (min-width:511px){

.background_colour_pp2_6_FS {

/*ie inherit the background-colour of upper header on pages 2-6, which contains the ul */
background-color: inherit;
}

}




nav ul li {
display:inline-block;
/*Padding somewhat affects spacing of buttons in relation to the 'bar' they're on. Moreover,padding also affects shape of buttons*/
padding-top:;
padding-bottom:;
padding-left:10px;
padding-right:10px;
box-sizing: border-box;
width:;
/*Margins most coursely affect amount of 'bar'above and below the buttons*/
margin-top: ;
margin-bottom: ;
margin-right:;
background-color:;
}

nav ul li a {
/*
background-color: #424d7a;
*/
text-decoration: none;
width: ;
height:;
display: inline-block;

/*affects spacing of buttons' text within each button*/
padding: ;
box-sizing: border-box; 
color: hsl(0, 0%, 90%);

/*new for slideout menu.was inline-block*/
display: block;
}

nav ul li a:hover{
color: white;
}

nav ul li a:active {
color: aqua;
font-style:italic;
}

/*for highlighting the text of the button pertaining to current page.  */

.currentpage_shower {
color: gold;
}


/*new for slideout menu*/
/*Background colour is re slideout menu.  For pages 2-6.  Determines rectangle containing 'Menu'/'X.  Is for when the menu is non-sticky - i.e. when scrolling hasn't happened. */
.navbar_mob {
/* NB: To adjust opacity of the mobile slide-out menu, adjust opacity in the class .sticky_header_upper in file sticky_plainnav.css*/

/*Affects width of rectangle containing 'Menu'/'X'.  Ensure is same as nav ul li and the label and the negative value on nav*/
width: 90px;
/*Determines colour  of rectangle containing 'Menu'/'X'*/
background-color:hsla(214, 41%, 78%, 0.31);
/* A tweeked dark blue.  If the same blue as used on the navbar (i.e. #280044) was used, then the square around the word 'menu' (when it is against the navbar - i.e. before the screen is scrolled, and isn't yet 'sticky) would have no differentiating colour*/
background-color: rgba(0, 0, 214, 0.31);
text-align: ;
box-sizing: border-box;

/*Determines how much background there is around 'Menu' /'X'*/
padding-top:8px;
padding-bottom:8px;
padding-left:0;
padding-right:0; 
cursor: pointer;
/*Colours 'Menu' and 'X'*/
color: white;
display: none;

/*centers 'Menu' in its background.Did have in upper_header, but didn't want it to apply to the later logo in the header*/
text-align:center;
}




/*new for slideout menu*/
#menutoggler{
    display: none;
}




/*media queries for nav*/
/* 510 is point at which FS menu changes to mobile menu.  Was 480, before had 'e' logo*/
/* Second of five times gotta change the value re when navbar_mobile operates.  Search: navsize. (Plus there's a media query for this value in header_slogan_title_index) */
@media screen and (max-width:510px ){
.navbar_mob {
display:block;

}

.navbar_mob:hover {
color: ;
}

.navbar_mob:active {
color: aqua;
}

nav {
/*odd that background-color doesn't 'take' here, though will below, in nav ul, or nav ul li*/
position: absolute;
/*ensure matches width of li*/
left: -90px;
/*doesn't seem needed; just insurance*/
z-index: 1;
transition: 0.3s;
-webkit-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
}

nav ul {
background-color:#424d7a;
}

nav ul li {
box-sizing: border-box;

/*This key. Makes them stack vertically,ao be all on the horizontal*/
display:block;
/*ensure is same as navbar)mobile and the label and the negative value on nav*/
width: 90px;
padding: ;
padding-top:8px;
padding-bottom:8px;
padding-left:10px;
padding-right:0;

text-align: left;
border-top: 1px solid green;
}

/*to 'turn off' top-border for 1st li*/ 
nav ul li:nth-of-type(1) {
border-top: none;
}


 /*for the 'menu' text, given it is to change to 'X'*/
.iconchange:before {
    content: 'Menu';
    /* gave a hamburger on codepen,but doesnt work*//*
    content: '\f0c9';*/
    /*does make a difference, but can't see is really needed*/
    /*Have disabled this in expander versions, but looks ok in this slideout version, with the sense of moving in unison with the slideout menu*/
    transition: 0.3s;
}

/*Cancels the padding bottom of FS which puts space under the nav bar. Cancellation needed else in mobile size that space exists unwanted under 'Menu'*/
#header_upper {
padding-bottom: 0;
}

}
  
  
  
/*media queries for nav to slide out*/
/* Third of five times gotta change the value re when navbar_mobile operates.  Search: navsize. (Plus there's a media query for this value in header_slogan_title_index)  */
@media screen and (max-width: 510px){
    #menutoggler:checked + .container nav {
        left:0;
        }
}
    
/*to switch the text 'menu' to 'X'*/
/* Fourth of five times gotta change the value re when navbar_mobile operates.  Search: navsize. (Plus there's a media query for this value in header_slogan_title_index)  */
@media screen and (max-width: 510px){
#menutoggler:checked + .container  .iconchange:before {
/*shunts the X away from the left margin a bit. margin-left:12px;*/

font-weight:;
/*removed font-weight: bold cos was slightly expanding the menu bar, pushing everything down slightly*/
/*Original was content: '\f0c9';*/
content: 'X';

/*Have disabled this in expander versions, but looks ok in this slideout version, with the sense of moving in unison with the slideout menu*/
transition: .3s;
}

        


/*altered from pre media query */
    
nav ul{
top:0;
margin-left: 0;
margin-right: 0;
}
    

nav ul li a {
width:;
height:;
/*affects spacing of buttons' text within each button*/
padding: ;
color: ;
}

nav ul li a:hover{
color: ;
}

nav ul li a:active {
color: ;
font-style: ;
}

/*for highlighting the text of the button pertaining to current page.  */
.currentpage_shower {
color: ;
}
 
 
/*First website to have this.  Prevents the whole width of the mobile navbar being 'alive'*/
/*Mustn't have before the media query for the mobile menu to work, else in FS the menu is pushed down*/
/*Had tried for a solution using display: inline-block.  This worked, except on iphone with index page - which showed the transparent 'menu' element in the page's middle (it would have been doing this cos of the text-align: center on that page). Solution was to dispay label as a block (so isn't going to be moved to the middle) and then - to stop it being the width of the page (and so 'alive' the whole width), to specify a width - which will be the same the 'menu' button and the nav ul li items*/
label {
display: block;
/*Ensure is same as navbar_mob and nav ul li and the negative value on nav*/
width: 90px ;
}
  
  
/*End media-queried menu */
}







/*Doesn't apply to index page*/
/*'Top' is reduced in media queries, matching the media-query reducing of the background image*/
#page_reminder_container {
/*This can be pos: relative.  If is, needn't specify the width*/
position:relative;
display: ;
text-align:;
padding-top:;
top:;
/*Matches the 20px top padding on the content container,which accounts for the space between bottom of lower header and the first section or the page reminder div*/
margin-bottom: 20px;;
/*Must equal (and is ok if exceeds) what's necessary for the contained lettering, else the words will wrap.  Put on a temp background-colour to gauge width needed*/
width:;
}

/* MOBILE media query.*/ 
@media screen and (max-width: 425px){
#page_reminder_container .additional_goto_button {
/*  This makes the second 'goto' button' have a bit of space between it and the goto button above it, when the second button wraps and goes under the first buttom.  This needs to be above #page_reminder_container h2*/
margin-top: 5px;
/*For when it would bang against the right edge*/
margin-right: 2%;
}
}
/*END: MQ*/

/*MQ*/
@media screen and (max-width: 565px){
#page_reminder_container .third_goto_button {
/*  This makes the third 'goto' button' have a bit of space between it and the goto button above it, when wrappping happens, with small screen.  This needs to be above #page_reminder_container h2*/
margin-top: 5px;
/*For when it would bang against the right edge*/
margin-right: 2%;
}
}
/*END: MQ*/

/* MOBILE media query.  New: needed now is a forth button */ 
@media screen and (max-width: 445px){
#page_reminder_container .third_goto_button {
/*  This makes the second 'goto' button' have a bit of space between it and the goto button above it, when the second button wraps and goes under the first buttom.  This needs to be above #page_reminder_container h2*/
/*This 0% means the third button, when wrapped, doesn't have too big a gap between it and the fourth button to its right.*/
margin-right: 0%;
}
}
/*END: MQ*/

/*MQ*/
@media screen and (max-width: 665px){
#page_reminder_container .fourth_goto_button {
/*  This makes the third 'goto' button' have a bit of space between it and the goto button above it, when wrappping happens, with small screen.  This needs to be above #page_reminder_container h2*/
margin-top: 5px;
/*For when it would bang against the right edge*/
margin-right: 2%;
}
}
/*END: MQ*/








#page_reminder_container h2 {
display: inline-block;
margin: 0;
padding: 0;
/*
font-family: 'Poiret One';
*/
color: white;
/*Need to turn off the default bold of a h2*/
font-weight: normal;

/*red4
background-color: #8b0000;
*/
/*This is maroon (#800000), with some transparency */
background-color: rgba(128, 0, 0, 0.84);

font-size: 18px;
padding: 2px 8px 2px 8px;
margin-left: 2%;

font-family: 'montserratmedium';
}


.page_reminder_separator {
display: inline-block;
margin: 0;
padding: 0;
color: yellow;
/*Need to turn off the default bold of a h2*/
font-weight: normal;
background-color: inherit;
font-size: 14px;
margin-left: 2%;
font-family: 'montserratmedium';
margin-top: 20px;
margin-bottom: 5px;
}


#page_reminder_container .helplite {
display: inline-block;
margin: 0;
padding: 0;
color: white;
/*Need to turn off the default bold of a h2*/
font-weight: normal;
background-color: blue;
font-size: 14px;
padding: 2px 8px 2px 8px;
margin-left: 2%;

font-family: 'montserratmedium';
}

.helplite_button_description {
color: white;
background-color:;
font-size: 14px;
}



/*
#page_reminder_container .drivingcool {
display: inline-block;
margin: 0;
padding: 0;
color: red;
font-weight: normal;

background-color: rgba(128, 0, 0, 0.84);
background-color: white;
font-size: 18px;
padding: 2px 8px 2px 8px;
margin-left: 2%;
font-family: 'montserratmedium';
}

.drivingcool_button_description {
color: red;
background-color:;
font-size: 14px;
}

*/












/* MOBILE media query.*/ 
@media screen and (max-width: 425px){
#page_reminder_container .helplite {
/*For when it would bang against the right edge*/
margin-right: 2%;

}
}
/*END: MQ*/

/*MQ*/
@media screen and (max-width: 940px){
 #page_reminder_container .drivingcool {
/*  This makes the third 'goto' button' have a bit of space between it and the goto button above it, when wrappping happens, with small screen.  This needs to be above #page_reminder_container h2*/
margin-top: 5px;
/*For when it would bang against the right edge*/
margin-right: 2%;
}
}
/*END: MQ*/




















/* This styles the a-tag that wraps around the svg tag.  Arrow down and its a-tag are centred differently and properly here for first time.  Was prompted to do this by fact the button wasnt centred properly in Internet explorer.*/
.to_textcontainer {
display: inline-block;
position: absolute;
bottom: 10px;
left:50%;
margin:0;
padding:0;
margin-left: -20px;
/*set same as svg width; prob unnecessary, but may help re centring problem*/
width:40px;
}



.go_down_arrow_svg {
/* This styles the svg. Border-radius has to be on the actual svg, not the containing a-tag, to round the visible button*/
border-radius:100%;

/*can specify color here, via fill: yellow;   or put fill="yellow" below, in the svg tag, specifically in the polygon.*/
fill:yellow;
border: 2px solid white;
height: 40px;
width: 40px;

/* colours background, not the pointer itself*/
background-color:rgba(0, 0, 0, 0.70);
}



.content_container_index {
margin: 0;
/*Match this value to that for margin-bottom on the divs with the class .subtitle_container_index_belowheader & .subtitle_container_pages2-6_belowheader (styled in header_subtitle_title.css).  Doing this will ensure equal space above and below the subtitle that appears (with small screen) below the header. (Space above the belowheader subtitles is sonctrolled by margin-bottom on on them, and by padding-top on the content-containers.)*/
padding-top: 20px;

/*original was #7D3E11; here is darker, producing in hex #63310d - which is same as favicon's brown*/
/*
border-left: solid 8px 
hsl(25, 76%, 20%);
border-right: solid 8px hsl(25, 76%, 20%);

border-left: solid 8px #310101;
border-right: solid 8px #310101;
*/
}


/*for all pages, bar index (cos has different header) */
.content_container_about, .content_container_approach, .content_container_services, .content_container_faq, .content_container_contact {
margin: 0;
/*Match this value to that for margin-bottom on the divs with the class .subtitle_container_index_belowheader & .subtitle_container_pages2-6_belowheader (styled in header_subtitle_title.css).  Doing this will ensure equal space above and below the lower subtitle (the one that's displayed below the header. (Space above the belowheader subtitles is sonctrolled by margin-bottom on on them, and by padding-top on the content-containers.)*/
padding-top: 20px;
}

/*For asterisk, used for separating purposes */
.central_asterisk {
text-align: center;
}

/*For the PLAIN hr, used for separating purposes */
.hr_plain_colour1 {
border-top-width:0;
/*'Width' here is the thickness of the line*/
border-bottom-width: 1px;
border-bottom-color: green;
/*'Width' here is the horizontal length across the page*/
width: 60%;
margin-top: 12px;
margin-bottom: 12px;
}



/*For GENERAL bullets*/
section ul li, .paired_sections_intro ul li {
list-style-type: circle;
}

/*For the different bullets in the left of the paired list, in services.php,    i.e. the ul that is module39aiib_ul_tight_right*/
.different_bullets li {
list-style-type:disc;
}

/* FOR THE FANCY BULLETS IN FAQ */

/* Applies only to any (two) module 33 that has the faq. The styling is in main.css*/

/* Will only color the back up bullets; not the writing hand - which can't be given a colour.  This doesn't work on Apple 5c, Xperia, Samsung J3; when doesn't work, colour specified in .FAQ ul li will be used*/ /*See elaboration_onecol.css for the old way I did this, without using ::marker, and that'll work across browsers better*/
.FAQ ul li::marker {
color: green;
}

.FAQ ul li{
/*Will colour the text of the UL (the italicised question), not the bullet of the UL - because the bullet's colour is targeted with li::marker */
/*color: #fd720f;*/
color: purple;
/*Back up bullet, lest writing hand symbol fails - which will on some mobiles */
list-style-type: circle;
/*writing hand.  From https://www.toptal.com/designers/htmlarrows/symbols/ */
list-style-type: "\0270D";
}

/*---TABLET MEDIA QUERY.--*/
@media screen and (max-width: 768px){
.FAQ ul {
margin: 0;
/* Removes the left-hand space of the ul*/
padding: 0;
}

.FAQ ul li {
/*Changes the default 'outside' (i.e. to the left) position of the bullets*/
list-style-position: inside;
color:;
}
}
/* END MQ*/
/* END: FOR THE FANCY BULLETS IN FAQ */


/*For the green 'rating stars' in answer to a FAQ*/
.rating_stars {
color:green; 
font-size:25px;
}


/*For the answer to the FAQ re seeing me urgently */
.urgentFAQ_answer {
background-color: blue;
color: white;
/*padding needed because background colour is applied - which, without padding, means the text abuts it on the left and right edge*/
padding: 4px;
}



/* HYPERLINKS IN SECTIONS AFFECTED BY TOGGLE OF LIGHT & DARK */
/*These colours chosen, as they're visible in both light and dark.  An easy alternative to specfifying different sets of hyperlink colours, for light and dark mode, in DarkLightToggleAcrosPages1.css*/
.override_blue_link {
color: rgb(253, 72, 163);
}
.override_blue_link:hover {
text-decoration: none;
}
.override_blue_link:active {
color: red;
font-style:italic;
}
/* END: HYPERLINKS IN SECTIONS AFFECTED BY TOGGLE OF LIGHT & DARK */




/*    SPECIFIC FONTS (i.e. different to the specified for 'body') */

/*HEADING FONTS.  Did select headings via content_container. */
section h1, .paired_sections_intro h1, .flex_module h1 {
/*Need to specify line height when using a large font size, even if the line height is the is same value as given to body.  Necessary to override the default h1 line-height, which is too small for the font-size Ive used*/
line-height: 1.3;
padding: 0;
margin-top: 0;
margin-bottom: 0;
/*
font-size: 1.5em;
*/
font-size: 1.6em;

/*color:darkgreen;*/
/*For the font of just the section headings*/
font-family: 'prataregular';
}

section h2, .paired_sections_intro h2, .flex_module h2 {
line-height: 1.3;
padding: 0;
margin-top: 0;
margin-bottom: 0;
 /*
font-size: 1.3em;
*/
font-size: 1.4em;
color: /*darkgreen*/;
/*For the font of just the section headings*/
font-family:;
font-family: 'prataregular';
}

section h3, .paired_sections_intro h3, .flex_module h3 {
line-height: 1.3;
padding: 0;
margin-top: 0;
margin-bottom: 0;
/*
font-size: 1.1em;
*/
font-size: 1.2em;
color: /*darkgreen*/;
/*For the font of just the section headings*/
font-family:;
font-family: 'prataregular';
}

/*COPY-TEXT FONT, copy-text in the sections and the flex modules.  Doesn't affect the menu, or text of prefooter and footer.  h1, h2, & h3 in the sections vary correspondingly with alteration to this font-size*/
section, .paired_sections_intro, .flex_module {
/*
font-family: 'source_serif_proregular';
*/
font-family: 'open_sansregular';
font-size: 16px;
/*color: hsl(0, 0%, 93%);*/
color:black;
line-height: 1.5em;

/* Prevent font scaling in landscape while allowing user zoom.  From https://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca */
-webkit-text-size-adjust: 100%;
}

/* END Specific Fonts */



/*for 'Back to top'*/
#to_top_via_jquery {
text-decoration: underline;
cursor: pointer;
margin-left:15px;
position: relative;
/*Was 15px in erectpsych*/
top: 35px;
}
.page1_to_top {
color: hsl(0, 0%, 90%);
}
.page2_to_top {
color: hsl(0, 0%, 90%);
}
.page3_to_top {
color: hsl(0, 0%, 90%);
}
.page4_to_top {
color: hsl(0, 0%, 90%);
}
.page5_to_top {
color: hsl(0, 0%, 90%);
}
.page6_to_top {
color: hsl(0, 0%, 90%);
}

#to_top_via_jquery:hover {
text-decoration: none;
/* No point in having. Not handled well on touchscreens*/
/*color: lime;*/
}
#to_top_via_jquery:active {
color: aqua;
}


/*Applies to all pages except contact page.  This cos contact page has the insurance seal.  See comment for contact_prefooter*/
.prefooter {
position: relative;
width: 100%;
padding: 0;
margin: 0;
margin-top: 60px;
color: hsl(0, 0%, 78%);
background: #262729;
/*One of the 'tints of the blue that's the menu background blue (#280044), as specified in header_upper.  Got from colourhex website 
background: #3d1956;*/
/*the menu background blue (#280044), as specified in header_upper*/
background :#280044;
font-family:'latoregular', 'arial', sans-serif;
}

/*Only difference from prefooter is that contact_prefooter has smaller margin-top (zero, in fact; cos space in the image square around the circle effectively provides the gap between the circle and the top of the prefooter).  This cos the insurance seal is present on contact page; thus not so much space above prefooter is needed*/
.contact_prefooter {
position: relative;
width: 100%;
padding: 0;
margin: 0;
margin-top: 0;
color: hsl(0, 0%, 78%);
background: #262729;
/*One of the 'tints of the blue that's the menu background blue (#280044), as specified in header_upper.  Got from colourhex website 
background: #3d1956;*/
/*the menu background blue (#280044), as specified in header_upper*/
background :#280044;
font-family:'latoregular', 'arial', sans-serif;
}





/* For the flex divs in the prefooter.  Same flex code as used for Module28 - which has three flex segments*/
.prefooter_flex_container_likemodule28 {
display:flex;
box-shadow: ;
width: 100%;
line-height: 1em;
padding-top: 22px;
/*This padding-botttom value is the addition of padding-top for this container and padding-top for the paragraphs inside it.  This is my trick to ensure spacing atop and below the paras is even in big and small screen sizes, and that the space between the first para and the container's top, and the space between the last para and the container's bottom, can effectivey be made to be equal.  Is needed cos padding-bottom isnt specifed on the paras (cos if was, there's be two values of padding in effect where paras vertically abut, when paras are stacked in small screen: padding -top and padding-bottom; yet would only be one or other single value with the top of the first and the bottom of the last para)*/
padding-bottom: 42px;
margin: 0;
}

.prefooter_flex_container_likemodule28 p {
margin-top:0;
margin-bottom:0;
margin-right:6px;
margin-left: 6px;
padding-top: 20px;
}

.prefooter_flex_firstofthree {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
line-height:;
background-color:;
flex: 1;
margin:0;
padding:0;
}

.prefooter_flex_secondofthree {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: ;
line-height:;
background-color:;
color:;
flex:1; 
margin:0;
padding:0 ;
}  

.prefooter_flex_thirdofthree {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box;
padding: ;
line-height:;
background-color:;
color:;
flex: 1;
margin:0;
padding:0;
}

/*---TABLET MEDIA QUERY.  Prefooter flex module --*/
@media screen and (max-width: 768px){
.prefooter_flex_container_likemodule28 {
display: block;
}
.prefooter_flex_firstofthree {
background-color: ;
}
}
/* END Prefooter LikeModule28. FLEX FOR THREE SECTIONS */ 
 
 
 
.footer_index, .footer_nonindex {
width: 100%;
/* Needs this cos of the padding would o/w enlargen it */
box-sizing: border-box;
position:relative;
/*This is prob redundant, given the subsequent sticky footer code*/
bottom: 0;
/*footer is positioned differently here than before in menstar.uk; in the latter, the margin-top was on the footertext; also padding-top wasnt used to push the text down, rather hard breaks (br) were used.  So I've done it more properly here.  Also 'back to top' is not in the footer*/
/*was 60px,before had prefooter*/
margin-top: 0;
/* By not specifying a height, visitor counter will always be at the very bottom, and won't be pushed outside, or rise higher, upon the screen size changing.  Effectively adjust the height of footer via the number of BRs above the counter, in index.php */
height:;
/*nov 2020. taken from DynDic19: height above footertext to under the divide (or under 'Landing page', if present) is now (nov 2020) solely controlled by padding */
/*was 40px, before 28tweeked...  This was clumsy; needed a corresponding bottom:40px on the divide, which can now just be zero*/
padding-top:0;

background-color: black;
background-image:url(burried.png);
color: rgba(255, 255, 255, .5);
}
 
.footer_nonindex {
/*Provides the space between 'all rights reserved' and bottom of page.  A value here cannot apply to index page cos no space is wanted under the counter*/
padding-bottom: 27px;
}



.footertext {
width:100%;
position: relative;
text-align:center;
/*margin:0 5px 0 5px;   This original spec seemed to contribute to horiz scoll bar appearing with smallest screen size*/
margin: 0;
padding:0;
/*making line-height smaller than elsewhere in body*/
line-height: 1;

/*nov 2020. taken from DynDic19: Use to adjust space above footext and below the divide (or below 'return to landing page', if present.  Thereby effectively control height of footer.  Could use padding-top on the footer itself, but then have to correspondingly adjust the  the bottom on the divide*/
padding-top:30px;
}

/* Adjusts space between 'all rights reserved' and the counter's span.*/
.footertext_index {
margin-bottom: 0;
}


.footertext p {
/*margin:0 5px 0 5px;   This original spec seemed to contribute to horiz scoll bar appearing with smallest screen size*/
margin: 0;
padding: 0;
}


/*For Visitor Counter.  */
.countercolour {
color: hsl(0, 0%, 20%);
}




/*  MEDIA QUERIiES */

/* Removes the down-arrow in a circle, when screen is short; thus the arrow isn't seen on top of the 'by me' and the title*/
@media screen and (max-height: 260px) {
.to_textcontainer {
display: none;
}
}
/* END MQ */

@media screen and (max-width:1070px){
#to_top_via_jquery {
/*was 30px, but given a prefooter, the 'back to top' text could only be seen on iphone screen when the page was scrolled up a bit from the bottom*/
top: 60px;
}
}
/* END MQ */


/*---TABLET MEDIA QUERY.--*/
@media screen and (max-width: 768px){
section h1, .paired_sections_intro h1, .flex_module h1{
/* 1.6em in FS */
font-size: 1.5em;
}

section h2, .paired_sections_intro h2, .flex_module h2 {
/* 1.4em in FS */
font-size: 1.3em ;
}

section h3, .paired_sections_intro h3, .flex_module h3 {
/* 1.2em in FS */
font-size: 1.1em;
}
}
/* END MQ */


/*Makes the hover colour only work on screen size bigger than tablet*/
@media screen and (min-width: 769px){
#page_reminder_container h2:hover {
background-color: forestgreen;
}
.go_down_arrow_svg:hover{
background-color: forestgreen;
}
}
/* END MQ */

/* THIS IS NOT A MQ*/
/* selector:active has to be placed in the code after selector:hover; it will not work if it follows selector:hover*/
.go_down_arrow_svg:active{
background-color:aqua;
}

@media screen and (max-width:600px){ 
.footertext {
/* margin: 30px 0 0 0 ;This, it was discoverd, helped prevent some kind of overflow, whereby a horiz scoll bar appeared on v small size.  Removing footer height spec, and setting margins of footer and footertext to zero, removed this prob */
margin: 0px;
/*shrinks copyright text, else the area at the bottom looks too crowded on small screen*/
font-size: 0.9em;
}
}
/* END MQ */


/*510 is the media query upon which slide menu is in effect*/
/* Fifth of five times gotta change the value re when navbar_mobile operates.  Search: navsize.  (Plus there's a media query for this value in header_slogan_title_index) */
@media screen and (max-width:510px){ 
#page_reminder_container h2 {
font-size: 16px;
}
}
/* END MQ */


/* MOBILE media query*/
@media screen and (max-width: 425px){
section h1, .paired_sections_intro h1, .flex_module h1{
/* 1.6em in FS */
font-size: 1.4em;
}

section h2, .paired_sections_intro h2, .flex_module h2 {
/* 1.4em in FS */
font-size: 1.2em ;
}

section h3, .paired_sections_intro h3, .flex_module h3 {
/* 1.2em in FS */
font-size: 1em;
}
}
/* END MQ */


/* For narrow screens, eg iphone 5c: 320px wide*/
@media screen and (max-width:380px){
section h1, .paired_sections_intro h1, .flex_module h1{
/* 1.6em in FS */
font-size: 1.3em;
}

section h2, .paired_sections_intro h2, .flex_module h2 {
/* 1.4em in FS */
font-size: 1.2em ;
}

section h3, .paired_sections_intro h3, .flex_module h3 {
/* 1.2em in FS */
font-size: 1em;
}
}
/* END MQ */

/*   End File */