/* This styles a one column 'elaboration page: elaboration_onecol.css'*/

body {
margin:0;
padding:0;
max-width: 100%;
/*slategray hsl(210, 13%, 50%), but lighter*/
background-color: hsl(210, 13%, 65%);
font-family: 'nunito_sansregular', 'latoregular', 'arial', sans-serif;

font-size: 16px;
line-height: 1.5;

/*green and black stripes.  From https://philiprogers.com/svgpatterns/  

background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MCIgaGVpZ2h0PSIxMCI+CjxyZWN0IHdpZHRoPSI5MCIgaGVpZ2h0PSIxMCIgZmlsbD0iYmxhY2siPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjkwIiBoZWlnaHQ9IjA1IiBmaWxsPSJncmVlbiI+PC9yZWN0Pgo8L3N2Zz4=");

*/


/*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;


}

.elaboration_content_wrapper_payformsecondary {
margin: 0;
padding: 0;
background-color:;
}

.title_container_onecol_elaboration_payformsecondary {
margin:0;
padding:0;
text-align: center;
display:block;
position: relative;
/* MUST use 'top' ao margin-top.  Using margin-top stopped the index page from scrolling filly to the top, with the 'to top of page' scrolls.  Creates a gap at the very top*/
top: 25px;
}

.title_container_onecol_elaboration_payformsecondary h1
{
margin: 0;
padding: 0;
/*
color: #ffefd5;
*/
font-size: 40px;
/*Margin left and right just so the title-heading never bangs against screen edges*/
margin-left:10px;
margin-right:10px;
line-height:1;
/*So text's background, if have one, isn't full width*/
display: inline-block;
background-color:;
font-family:'source_sans_proregular';
}

.elaboration_returnlink_payformsecondary {
padding: 0;
margin: 0;
color: darkgoldenrod;
color: hsl(0, 0%, 94%);
font-size: ;
margin-left: 10px;
margin-right: 10px;
margin-top: 50px;
}

.elaboration_totoplink_payformsecondary {
padding: 0;
margin: 0;
color: darkgoldenrod;
color: hsl(0, 0%, 94%);
font-size: ;
margin-left: 10px;
padding-bottom: ;
}

.elaboration_returnlink_payformsecondary a,
.elaboration_totoplink_payformsecondary a {
color: white;
}
.elaboration_returnlink_payformsecondary a:hover,
.elaboration_totoplink_payformsecondary a:hover {
color:gold;
text-decoration: none;
}
.elaboration_returnlink_payformsecondary a:active,
.elaboration_totoplink_payformsecondary a:active {
color:aqua;
text-decoration: none;
}




/*payformsecondary_name needs to be inline-block, rather than block, else on tablet size it goes to the far left margin, with the bullet being on the line above; rather than as should be, with bullet to far left margin, and the text on the same line to the right of the bullet*/
.payformsecondary_name {
display: inline-block;
}

/*payformsecondary_name needs to be block, rather than inline-block, so that details for each picture are on a seperate line */
.payformsecondary_details {
display: block;
}



/*-------------------------------------*/

.content_wrapper {
margin-left: 18%;
margin-right: 18%;
background: ;
}

.text_container {
margin-top: 20px;
margin-bottom: 20px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
font-size: 16px;
font-family: 'ubuntulight';
background: orange;
}

.form_masterwrapper {
margin-left: ;
margin-right: ;
background-color: ;
font-family: 'open_sansregular';
font-size: 16px;

}


.text_container p {
margin: 0;
background-color: ;
}



.coloured-capital {
color: purple;
}

/*-------------------------------------*/


/*MQ*/
@media screen and (max-width: 968px){
.content_wrapper {
margin-left: 13%;
margin-right: 13%;
background-color:;
}


.form_masterwrapper {
margin-left: ;
margin-right: ;
background-color: ;
}

}
/*END: MQ*/

/*-------------------------------------*/


/*MQ*/
@media screen and (max-width: 868px){
.content_wrapper {
margin-left: 10%;
margin-right:10% ;
background-color: ;
}

.text_container  {
margin-left: ;
margin-right: ;
background-color: ;
}
.form_masterwrapper {
margin-left: ;
margin-right: ;
background-color: ;
}
}
/*END: MQ*/


/*-------------------------------------*/


/* MQ Tablet size*/
@media screen and (max-width: 768px){
.title_container_onecol_elaboration_payformsecondary h1 {
font-size: 30px;
}


.content_wrapper {
margin-left: 8%;
margin-right: 8%;
background-color: ;
}

.text_container  {
margin-left: ;
margin-right: ;
background-color: ;
}
.form_masterwrapper {
margin-left: ;
margin-right: ;
/*Won't see background colour because paypal_smartbutton1_mycontainer goes from 80% width to 100% width*/
background-color:;
}



.example_list_payformsecondary ul {
/* Removes the left-hand space of the ul*/
padding: 0;    
}

.example_list_payformsecondary ul li {
/*Changes the default 'outside' (i.e. to the left) position of the bullets*/
list-style-position: inside;    
}

}
/* END: MQ Tablet size*/

/*-------------------------------------*/


/*MQ*/
@media screen and (max-width: 668px){

.content_wrapper {
margin-left: 6%;
margin-right: 6%;
margin-left: ;
margin-right: ;
background-color:;
}

.text_container  {
margin-left: ;
margin-right: ;
background-color:;
}
.form_masterwrapper {
margin-left: ;
margin-right: ;
}

}
/*END: MQ*/


/*-------------------------------------*/

/*MQ*/
@media screen and (max-width: 568px){

.content_wrapper {
margin-left: 3%;
margin-right: 3%;
margin-left: ;
margin-right: ;
background-color: ;
}

.text_container  {
margin-left: ;
margin-right: ;
background-color: ;
}
.form_masterwrapper {
margin-left: ;
margin-right: ;
}

}
/*END: MQ*/

/*-------------------------------------*/


/* MQ */
@media screen and (max-width: 425px){
.title_container_onecol_elaboration_payformsecondary h1 {
font-size: 26px;
}

.content_wrapper {
margin-left: 0%;
margin-right: 0%;
background-color: ;
}

.text_container  {
margin-left: ;
margin-right: ;
background-color: ;
}
.form_masterwrapper {
margin-left: ;
margin-right: ;
}

}
/* END: MQ */


/*-----------END FILE--------------------------*/