/*All moz and o vendor prefixes are by pn*/
/*  form pattern from : https://subtlepatterns.com/page/3/ */

#formcontainer {
font-family: sans-serif;
/*the translucent steelblue*/
/*background-color: 
rgba(70,130,180, .2);*/
/*Apr2022. Original = width:96%*/
width:100%;
margin: 0 auto;
/*top & bottom padding was 1em on tutoring wesbite and gives some reveal of formcontainer on top and below the form*/
padding-top: 0;
padding-bottom: 0;

/*May2021.  Attempt to reduce form real-estate above 'name', which is particularly noticeable in small screen size.*/
padding:0;

font-size: 1em;

/*
border-radius: 3px;
box-shadow: 3px 3px 20px 3px #333;
*/

}


/* Red & blue chevrons around form's perimeter.*/

/* 1st try.  Via SVG.  Code for the svg image from https://philiprogers.com/svgpatterns/#greenstripes, and as modified by me on the site */
/*
.form_sleeve {
border:17px;
border-style: solid;
border-image-source: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCI+CjxyZWN0IHdpZHRoPSI3MCIgaGVpZ2h0PSI3MCIgZmlsbD0icmVkIj48L3JlY3Q+CjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+CjxyZWN0IHdpZHRoPSI5OSIgaGVpZ2h0PSIyNSIgZmlsbD0iYmx1ZSI+PC9yZWN0Pgo8cmVjdCB5PSItNTAiIHdpZHRoPSI5OSIgaGVpZ2h0PSIyNSIgZmlsbD0iYmx1ZSI+PC9yZWN0Pgo8L2c+Cjwvc3ZnPg==");

border-image-slice: 10;
border-image-width: .4;
border-image-outset: ;
border-image-repeat: round repeat;
/*

/*2nd try.  Better.  Via a Gradient image.  Regular stripes with this.  (Above SVG method created irregular stripes). Basic code for this from  https://css-tricks.com/almanac/properties/b/border-image/  */
.form_sleeve {
/* Got to specify a border, even though it is to be a the gradient.  Discvered the szie must match that of the final figure in the gradient specification, for best results */
border: 8px solid;
/*The final figure must match that of the border size, for best results*/
border-image:
repeating-linear-gradient(45deg, red, red 2%, blue 2%, blue 4%) 8;
}

/* END: Red & blue chevrons around form's perimeter.*/




form {

position:relative;

/*May2021. Attempt to reduce form real-estate above 'name', which is particularly noticeable in small screen size.*/
padding:0;

/*gives some space above the word 'contact'
May2021: Not needed in absence of a heading on the form;
*/
/*
padding-top:5px.
*/

/*Does centre the form within my formcontainer.  Needed as when the screen is bigger than the form's set width (800px), the form needs to be centred*/
margin: 0 auto;

/*Without this the form would be too wide.  Setting a percentage instead creates a messy reduction in size as screen gets smaller. When screen is less than 800px the form shrinks autoamtically and cleanly*/
/*Apr2022. Original =  width:800px*/
width:100%;


/* Not needed with chevrons present*/
/*
border-radius:3px;
*/


/*purple that pops*/
background-color: #480df7;

/*My orange*/
background-color: rgb(253, 114, 15);

/*v blue*/
background-color: rgb(18, 126, 232);

/*coach brown*/
background-color: #310101;

/*grape*/
background-color: #8470a3;

/*coach cream*/
background-color: rgb(255, 231, 171);

background-color:skyblue;

}


/*
#formheading {
padding-left: 3.9em;;
font-size: 1.8em; 
margin: 0 0 .2em 0;
}
*/

.name_label, .email_label, .phone_label, .message_label {
margin-left: 0;
/*Apr2022. Original =  width:6em*/
width: 5em;
text-align: right;
/* vital for getting all the input boxes to sit vertically on eachother, via enabling the label's width to take effect and the text-align to work, pushing boxes over - making for uniform stacking of them*/
display: inline-block;
/*font-weight: bold;*/
/*Apr2022. Original =  font-size:1em*/
font-size: 1em;
/*Gap between right of label and left of input box*/
margin-right: .3em;
/*needed so that the textarea's label is on a level with the top of textarea*/
vertical-align: top;
/*nudges 'name', 'email', and 'message' downa little;*/
margin-top: 4px;
}

.non_radio_input {
/*non_radio_input class used to separate both email and name inputs from radio inputs, else radio buttons would be undesirably affected by the styling and wouldn't appear flush left; they'd be in the middle*/
/*Apr2022. Original = width:635px*/
width: 435px;
/*from travis, to get rid of the blue outline on input boxes*/
outline: none;
/*Apr2022. Original = font-size: 1.1em*/
font-size: 1em;
}
        
#namerinput {
margin:0 0 4px 0; 
padding: 4px;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/    
box-sizing: border-box;
background-color: azure;
}

#emailerinput {
margin:0 0 4px 0;
padding: 4px;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/
box-sizing: border-box; 
background-color: azure;
}


#phoneinput {
margin:0 0 4px 0;
padding: 4px;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/
box-sizing: border-box; 
background-color:azure;
}

textarea{
/*Apr2022. Original = width: 435px*/
width:435px;
padding: 4px;
outline: none;
/*odd that if the textarea and non_radio inputs are set by me to same size, textarea text looks smaller.  Hence bigger size set here.*/
/*Apr2022. Original = font-size: 1.4em*/
font-size:1em;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/
box-sizing: border-box; 
background-color:azure;
} 

#namerinput:focus, #emailerinput:focus, #phoneinput:focus, textarea:focus{
background-color:lightcyan;
}


/* New. Dec2021.  Radio Buttons.  Fiddly determining getting the correct display:inline / display: block, and need of radio button containers, so that both label and input circle wrap as one when screen is reduced*/
.radiobuttons_heading {
margin-bottom: 0;
margin-left: 6%
}

.first_radio_button_container {
display: inline;
}
.second_radio_button_container {
/*Apr2022. Original = display:inline.  Inline-block wanted to ensure wrapping of this container, on smaller screen sizes*/
display: inline-block;
/*Apr2021. Ensures radio button circle never touches right margin with shrinking screen size, and means container will wrap down with shrinking screen size*/
margin-right: 7px;
background-color: ;
}

.first_radio_choice_label {
margin-left: 6%;
}
.second_radio_choice_label {
margin-left: 30px;
}

/* For changing buttons colour.  Method 1: From: https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons */ 
.first_radio_button_container input {
filter: hue-rotate(280deg);
}
.second_radio_button_container input {
filter: hue-rotate(120deg);
}



/*ORGINAL @media screen and (max-width: 600px){*/
@media screen and (max-width: 600px){
.first_radio_button_container {
display: block;
margin-left: 6%;
}

.first_radio_choice_label {
margin-left: 0;
width: 100%;
display: inline;
color: ;
}
.second_radio_choice_label {
margin-left: 0;
width: 100%;
display: inline;
color: ;
}

.second_radio_button_container {
margin-top: 10px;
display: block;
margin-left: 6%;
}



/* For changing buttons colour.  Method 2: From: https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons */  
.first_radio_button_container input[type='radio']:after {

/* I added this, to cancel the 'filter: hue-rotate(280deg)' used in full size screen*/
filter: hue-rotate(-280deg);


        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: azure;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 1px solid black;
    }

    .first_radio_button_container input[type='radio']:checked:after {

/* I added this, to cancel the 'filter: hue-rotate(280deg)' used in full size screen*/
filter: hue-rotate(-280deg);

        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color:green;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 1px solid white;
    }
/* END: From: https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons */



.second_radio_button_container input {
display: inline;
margin: 0;
/*This needed cos for unknown reason the input circle has become close to the label's end, in small screen*/
margin-left: 5px;
}

/*  For changing buttons colour.  Method 2: From: https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons */  
.second_radio_button_container input[type='radio']:after {

/* I added this, to cancel the 'filter: hue-rotate(120deg)' used in full size screen*/
filter: hue-rotate(-120deg);

        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: azure;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 1px solid black;
    }

    .second_radio_button_container input[type='radio']:checked:after {

/* I added this, to cancel the 'filter: hue-rotate(120deg)' used in full size screen*/
filter: hue-rotate(-120deg);

        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: red;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 1px solid white;
    }
/* END: From: https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons */

}
/* END MQ*/
/* END: New. Dec2021.  Radio Buttons */








/*---Travis' button*/

        /*my preserved button code*/
button {
    margin-top:.9em;
/*Apr2022. Original = margin-left:8.7em*/
    margin-left:6.7em;
    /*can have a margin-bottom, cos it can buffer against a br I've put  under the button.  Dont forget, the br is taking up most of the room here.  Want a bit more spacethan this provides, hence added margin here, to better the shadow when the bottons rises */
    margin-bottom: 4px;
}

/*Travis' code*/
button {
/*if inline-block, button stretches most way across the screen*/
display: block;
/*was #4285f4*/
/*cornflowerbluewith bit less light.  Cornflowerblue is hsl(219, 79%, 66%).*/  
/* This was colour had up to post37\26.  Keep here as 'back-up', unless the linear-gradient*/
background-color: hsl(219, 79%, 56%);
/*Based on interpals. Actual interpals is: background: linear-gradient(to bottom, #7abcff 0, #60abf8 44%, #4096ee 100%); */ /*This one has my additions.  #3674e7 = my adjusted cornflowerblue of hsl(219, 79%, 56%)  
#7abcff from ipals
#60abf8 from ipals
#4096ee from ipals  */
background: -webkit-linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);
background: -ms-linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);
background: -moz-linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);
background: -o-linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);
background: linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);

color: #fff;
/*for button size*/
padding: 8px 13px;
/*  Default is 5px*/
border-radius:2px;
/*values were, lestI alter: 
box-shadow: 0px 17px 10px -10px rgba(0, 0, 0, 0.4);*/
/*box-shadow values: x y blur spread.  So the final -10 is 'pulling in' the shadow to less than the width of the button; expt with a positive value to see the difference*/
box-shadow: 0px 11px 10px -5px rgba(0, 0, 0, 0.4);
cursor: pointer;
-webkit-transition: all ease-in-out 10ms;
-moz-transition: all ease-in-out 10ms;
-o-transition: all ease-in-out 10ms;
transition: all ease-in-out 10ms;
}



button:hover{
/* values were, lest I alter:  box-shadow: 0px 37px 20px -20px rgba(0, 0, 0, 0.2);*/
box-shadow: 0px 26px 15px -11px rgba(0, 0, 0, 0.2);
/*was (0px, -10px, I think)*/
-webkit-transform: translate(0px, -4px) scale(1.1);
-moz-transform: translate(0px, -4px) scale(1.1);
-o-transform: translate(0px, -4px) scale(1.1);
transform: translate(0px, -4px) /*Travis'original: 1.2*/ scale(1.1);
}

button:active {
background: navy;
}

/*END Travis' button*/

/*----END BUTTON EXPTS---*/




/*For THANK YOU MESSAGE*/
	/*styles the div containing the heading's span*/
.thankscontainer {
text-align:center;
margin-top: 15px;
margin-bottom: 24px;
}	
	/*styles the span in the div*/
.thanksspan {

background-color: ;
background-color: black;
color: white;
font-size: 1.5em;
font-weight: bold;
font-style:italic;
/*lime green with some opacity; else border seems to sever man'slegs!*/
border: 2px solid white;
border-radius: 3px;
padding: 4px;
box-shadow:  3px 3px 20px 3px #333;
/* needed to stop bordered box breaking, given a personalised thanks message - which makes it longer.  Both block and inline-block would do this, but inline block prevents the background being the screen's width*/
display: inline-block;
/*needed with a personalised tx message, cos it now can be so long that the box could hit the screen's edges, with smaller screens.  The 2% reflect the left and right margins throughout*/
margin-left: 2%;
margin-right: 2%;
}
/*--end styling for full size thank you message*/







/*------SUB-FS (Sub-Desktop) MEDIA QUERY-----*/

/*1030 is size of ipad & samsung tablet,landscape,1024, plus five pixels 'for safety'*/
/*Ensures send-button (as done for oval buttons) don't raise on any screen smaller than 1031. Thus won't show on tablets.  Thus will be no hover, and problem thereof, on tablets downwards*/

@media screen and (max-width: 1029px){
button {
-webkit-transition: all ease-in-out 0ms;
-moz-transition: all ease-in-out 0ms;
-o-transition: all ease-in-out 0ms;
transition: all ease-in-out 0ms;
}

button:hover {
/*Box-shadow is as for FS send button (in unhovered state).  Is here, cos if isn't button-hover from FS will apply - with the moved shadow, which doesnt make sense with a button that doesnt move.  Could instead have box-shadow:none, but looks bland.Same as for oval button.*/
box-shadow: 0px 11px 10px -5px rgba(0, 0, 0, 0.4);
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

button:active {
box-shadow: none;
}

}

/*------END: SUB-FS (Sub-Desktop) MEDIA QUERY----*/
 
 




/*----EXTRA MEDIA QUERY FOR Sub-FULL SIZE ----*/

/*enables form and its inputs to have a big size when screen is fully FS*/

/*Apr2022.  Disabled.  Now not applicable.*/  

/*
@media screen and (max-width: 880px){
form {
width: 700px;
background-color:;
}

.non_radio_input {
width: 535px;
}

textarea{
width:535px;
}
}
*/

/*----END: EXTRA MEDIA QUERY FOR Sub-FULL SIZE ----*/



 




/*-----TABLET MEDIA QUERY.  First of two-------*/

/*Apr2022*. ORIGINAL @media screen and (max-width: 768px). This now doesn't serve alteration to suit a tablet.  Rather is just part of the reduction of the contact form with decreasing screen size. 980px for the MQ based on seeing when the right edge of the contact form gets close to - but doesn't touch - the right edge of the input boxes, before the alteration is needed to avoid the 'collision'*/
@media screen and (max-width: 980px){ 
#formcontainer {
/*padding top & bottom here makes the formcontainer not protrude above or below the form*/ 
/*Apr2022. Disabled.  Not needed*/
/*
padding-top: 0;
padding-bottom: 0;
*/
/*gets rid of formcontainer colour*/
/*Apr2022. Not needed*/
/*
background: inherit;
*/
/*Apr2022. Disabled.  Not needed*/
/*
/*
box-shadow: none;
*/
}

form {
/*So this is 100% of the form container's 96% width*/
/*Apr2022. Disabled. Not needed*/
/*
width:100%;
*/
/*Apr2022. Background-color just for testing*/
background-color:;
}

/*
#formheading {
padding-left: 3.3em;
font-size: 1.6em; 
}
*/

.name_label, .email_label, .phone_label, .message_label {
/*Apr2022. Disabled. Not needed*/
/*
width: 5em;
font-size:1em;
*/
margin-right: 0;
}   

.non_radio_input {
width:75%;
/*Apr2022. Not needed*/
/*
font-size: 1em;
*/
}

#namerinput {
}

#emailerinput {
}

/*odd that if the textarea and non_radio inputs are set by me to same size, textarea text looks smaller.  Hence bigger size set here.*/
textarea {
width:75%;
/*Original = font-size:1.4em; */
/*Apr2022. Not needed*/
/*
font-size: 1.4em;
*/
}

button {
margin-left: 6.3em;
}


/*for travis' button, just   for what's to be media-queried*/

button {
/*for button size*  FS was 8 & 13.  SS,small size is 6 & 9*/
padding: 6px 11px;
}

/*For tablet THANK YOU MESSAGE*/
	/*styles the div containing the heading's span*/
.thankscontainer {
text-align:center;
margin-top: 15px;
margin-bottom: 24px;
}	
	/*styles the span in the div*/
.thanksspan {
color:;
background-color:;
font-size: 1.3em;
font-weight:;
font-style:;
border:;
box-shadow:;
}
/*--end styling for tablet size thank you message*/

/*End first tablet MQ*/
}



/*NB: At width 769px the sections are restructured to FS*/
    
/*-----TABLET MEDIA QUERY.  Second of two.  Min-width one.  Special for graduation pic behind the form.  Is nec that the pic only comes into existence with FS.  If, by contrast, it's 'non-existence' is jusy entrusted to the tablet max-width 768 MQ, with the image specified before this for FS, then get a problem: image isn't actually seen in tablet and mobile screens, but is new space, unwanted, below the form. And this space is distorted.  background-image:none, set for tablet gets rid of the distortion, but still not the space.  Only the used min-width mq would get rid of everything, as wanted-------*/
@media screen and (min-width: 769px){ 
/*Reverse direction of chevrons on hover*/
.form_sleeve:hover {
border: 8px solid;
border-image:
repeating-linear-gradient(-45deg, red, red 2%, blue 2%, blue 4%) 8;
}

#formcontainer {
/*these 4 lines for background to form.  Note, don't have background-repeat: none.  It made removed bottom part of photo via giving equal perimeter*/
/*had graduation pic here, in tutoring form*/
background-image: ;
background-size:;
background-position:;
height:;
}

/*Apr2022.  New here.  Was not in a MQ.  Is in this MQ so that it won't apply to smaller sizes (box-shadow: none didn't work, in a max-width MQ)*/
form {
box-shadow: 3px 3px 20px 
3px #333;

/*For testing*/
background-color: ;
}

}
/*End Second MQ for Tablet*/
  
  
  
  
  

/*-----LARGE MOBILE MEDIA QUERY-------*/
/*This is the point the form is 'restructured' for small size screens*/
/*nb: larger than the 425px is used, to accomadate fact the standard-(full-size)-layout form was messing-up just before 425 size is reached.  Dunno why here, and not on tutoring sitw*/

@media screen and (max-width: 475px) {


/*Apr2022 (when made contact form appear in one of two horiz columns in FS, and only in responsive size is the form the only column).  #formcontainer:98% disabled so that the formcontainer, and visible form, will be full width in small screen*/
/*
#formcontainer {
width: 98%;
}
*/

.form_sleeve {
/* Got to specify a border, even though it is to be a the gradient.  Discovered the size must match that of the final figure in the gradient specification, for best results */
border: 3px solid;
/*The final figure must match that of the border size, for best results*/
border-image:
repeating-linear-gradient(-45deg, red, red 2%, blue 2%, blue 4%) 3;
}




form {
background-color: ;
}

/*
#formheading {
padding-left:.8em;
font-size: 1.4em; 
margin-bottom:8px;
}
*/

.name_label, .email_label, .phone_label, .message_label {
display: block;
width:inherit;
/*Apr2022. Not needed*/
/*
font-size: 1em;
*/
vertical-align: none;
text-align: center;
}   

.non_radio_input {
width:90%;
/*Apr2022. Not needed*/
/*
font-size: 1em;
*/
outline: none;
}

#namerinput {
display:block;
margin-bottom:10px;
margin-left: auto;
margin-right: auto;
padding:;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/    
box-sizing: border-box;
background-color: white;
}

#emailerinput {
display:block;
margin-bottom:10px;
margin-left: auto;
margin-right: auto;
padding:;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/    
box-sizing: border-box;
background-color: white;
}

#phoneinput {
display:block;
margin-bottom:10px;
margin-left: auto;
margin-right: auto;
padding:;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/    
box-sizing: border-box;
background-color: white;
}

textarea {
display:block;
margin-bottom:10px;
margin-left: auto;
margin-right: auto;
padding:;
/*new. gets rid of slight right hand edge uneveness between the three text inputs*/    
box-sizing: border-box;
background-color: white;
width:90%;
font-size: 1.3em;
outline: none;
} 

#namerinput:focus, #emailerinput:focus, textarea:focus{
background-color: lightcyan;
}

button{
margin: 0 auto;
}
 
/*for travis' send-message button, just   for what's to be media-queried*/
button {
/*for button size*  FS was 8 & 13*/
padding: 4px 9px;
}


/*For Mobile THANK YOU MESSAGE*/
	/*styles the div containing the heading's span*/
.thankscontainer {
text-align:center;
margin-top: 15px;
margin-bottom: 24px;
}	
	/*styles the span in the div*/
.thanksspan {
color:;
background-color:;
font-size: 1.2em;
font-weight:;
font-style:;
border:;
box-shadow:;
}
/*--end styling for mobile size thank you message*/

/*END LARGE MOBILE MQ*/
}


/*END FILE*/