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



.module7bReverse_contactformspecial_right_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 don't write to me message*/
.module7bReverse_contactformspecial_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%;
float: left;
margin-left:1.25%;
padding:0;
/*Need to specify 'position: relative' so that the absolute position will work, in class 'dontwriteReverse'*/
position: relative;
}

/*The contact form*/
.module7bReverse_contactformspecial_right_separate_unequal_big {
width:64%;
float: right;
margin-right: 1.25%;

padding:0;
}

/*The don't write to me message*/
/*NB: text color will be the toggled color*/
.dontwriteReverse {
border: solid 2px red;
padding: 5px;

/*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*/
.module7bReverse_contactformspecial_left_and_right_separate_unequal_withleftsmall {
float: none;
margin-left: auto;
margin-right: auto;
padding:0;
width: 96%;
}

/*The contact form*/
.module7bReverse_contactformspecial_right_separate_unequal_big {
margin-top: 30px;
}

/*NB: text color will be the toggled color*/
.dontwriteReverse {
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*/
.module7bReverse_contactformspecial_right_separate_unequal_big {
width: 100%;
}
}
/*End MQ_*/


/* End Module 7b contact form special*/