/* June2023.  Added this section to wrap around everything else; i.e. the Contact Form, and the 'Don't write' box)'.  Thus provided is a background for everything, which didn't exist before.  Can colour background as wanted, or just have bacjground colour as 'none', so the appearance of the two main components will be as before, with nothing behind them'.  Regardless, onto the background can go the email adresss; hence the reason for this addition. */

.combinedsection {
background: none ;
}

.combinedsection h2{
margin-left: 1.25%
}

.combinedsection p {
margin-left: 1.25%
}





/* Module7b. contact form special. SECTION STYLING: LEFT & RIGHT SEPARATES UNEQUAL.  LEFT BIG.  BOTH FLUID */

.module7b_contactformspecial_left_separate_unequal_big {
/*Needed, else text on contact form (all the input labels) would be white in toggle light mode, which I don't want.*/
color: black ;
}



/*FULL SIZE: TWO COLUMNS SHOWING ON A LINE*/
@media screen and (min-width: 769px){
/*The contact form*/
.module7b_contactformspecial_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:64%;
float: left;
margin-left:1.25%;
padding:0;
}

/*The don't write to me message*/
/*NB: text color will be the toggled color*/
.module7b_contactformspecial_right_separate_unequal_small {
width:32%;
float: right;
margin-right: 1.25%;
/*Need to specify 'position: relative' so that the absolute position will work, in class 'dontwriteReverse'*/
position: relative;
padding:0;
}

/*NB: text color will be the toggled color*/
.dontwrite {
border: solid 1px red;
padding: 5px;
padding-top: 10px;

/*This is to get the text section appear part way down the vertical height of contact form */
/*Because this element is position-absolute, it's not going to automatically inherit the background colour of any  containing element; thus is won't automatically have the sections' colour.  So to make it have the sections' colour, got to specify background-color: inherit.  I think.  Works anyway!  NB: Remember sections' colour is now - because of the dark/light toggle - specified in DarkLightToggleAcrosPages1.css*/  
background-color:inherit ;
position: absolute;
top:60px;
}

}
/*End MQ_*/



/*RESPONSIVE SIZE: ONE COLUMN SHOWING ON A LINE*/
@media screen and (max-width: 768px){
/*The contact form AND The don't write to me message*/
.module7b_contactformspecial_left_and_right_separate_unequal_withleftbig {
float: none;
margin-left: auto;
margin-right: auto;
padding:0;
width: 96%;
}

/*The don't write to me message*/
/*NB: text color will be the toggled color*/
.module7b_contactformspecial_right_separate_unequal_small {
margin-top: 30px;
}

/*NB: text color will be the toggled color*/
.dontwrite {
border: solid 2px red;
padding: 5px;
/*Don't need to specify background colour, as this WILL be inherited from sections colour.  NB: Remember sections' colour is now - because of the dark/light toggle - specified in DarkLightToggleAcrosPages1.css*/
background-color:;
position: relative;
top:0;
}

}
/*End MQ_*/



/*This is the point the form is 'restructured' for very small size screens.  The 475 MQ value here should match the 475 MQ for #formcontainer - in form_personalisedTX.css (the 475MQ is where the form restructing is coded).  The MQ here is just to just to make the containing div 100%, rather than 96% - which is a bit too small to accomodate the contact form nicely on a small screen*/
@media screen and (max-width: 475px) {
/*The contact form*/
.module7b_contactformspecial_left_separate_unequal_big {
width: 100%;
}
}
/*End MQ_*/


/* End Module 7b contact form special*/