/* My paypal button, which is a paypal link.  I coded this button */



.my_paypal_button_container {
color:black;
background: plum;
background: lightskyblue;
padding: 20px;
}
/*-----TABLET MEDIA QUERY.  ------*/
@media screen and (min-width: 768px){ 
.my_paypal_button_container {
width:80%;
margin: 0 auto;
background:;
}
}





.mypaypallink {
border: 2px silver solid;
border-style: outset;

/*if inline-block, .mypaypallink stretches most way across the screen*/
display: inline-block;
background: linear-gradient(to bottom, #7abcff 0, #60abf8 10%, #4096ee, #3674e7 80%, #3674e7 100%);
color: #fff;
padding: 8px 13px;
border-radius:2px;
/*box-shadow values: x y blur spread.  So the final -10 is 'pulling in' the shadow to less than the width of the .mypaypallink; 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;
}

.mypaypallink: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);
}

.mypaypallink:active {
background: navy;
}



/*------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){
.mypaypallink {
-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;
}
.mypaypallink: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;
}
.mypaypallink:active  {
box-shadow: none;
}
}
/*------END: SUB-FS (Sub-Desktop) MEDIA QUERY----*/



/*-----TABLET MEDIA QUERY.  ------*/
@media screen and (max-width: 768px){ 
.mypaypallink {
/*for .mypaypallink size*  FS was 8 & 13.  SS,small size is 6 & 9*/
padding: 6px 11px;
}
}



/*-----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) {
.mypaypallink {
/*for .mypaypallink size*  FS was 8 & 13*/
padding: 4px 9px;
}
}

/* END: FOR PAYPAL LINK BUTTON - THAT I CODED*/

/*     END FILE    */