/* This contains tempate sections CSS (as taken from sections_plain_modular.css) that has been changed a bit for the HP website.  The prefix HP is used in all uses of 'module', to distinguish these modules from the actual template sections modules in sectrions_plain_modular,css*/



/*HP_module30. One col. Variable size pic*/
.HP_module30_longways {
width: 96%;
background:;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
/*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies.  However, for left and right, it makes no difference.  The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/
padding-right:;
padding-left:;

/*pn June 2021. Needed to centre the image wrapper*/
text-align: center;

/*pn Aug 2021*/
font-size: 14px;
font-family: 'ralewayregular';
}    

#HP_module30_image_wrapper {
/* pn June 2021*/
background-color:;
width:60%;
/*pn June 2021. Had to be inline block to be centered*/
display:inline-block;

/* Redundant, given the div (HP_module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/
text-align: center;

/*Ensures is background space above the image*/
/*padding-top: 20px;*/
/*Gives space under bottom comment*/
padding-bottom: 20px;
}

#HP_module30_pic {
height: auto !important;
width: auto !important;
/*Without this a big pic will go beyond the image wrapper*/
max-width:100%;
/*
box-shadow:  3px 3px 20px 3px #333;
*/
}

#HP_module30_top_para {
display:;
}

/* MQ HP_module30*/
/* pn June J021: new*/
@media screen and (max-width: 768px){
#HP_module30_image_wrapper {
background-color:;
width:96%;
}
}
/*END MQ*/

/* END. HP_module30*/


/* ======================================================== */



/*As HP_module30, but for portrait pics */
/*HP_module30portrait. One col. Variable size pic.  Portrait*/
.HP_module30portrait_longways {
width: 96%;
background:;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
/*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies.  However, for left and right, it makes no difference.  The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/
padding-right:;
padding-left: ;

/*pn June 2021. Needed to centre the image wrapper*/
text-align: center;

/*pn Aug 2021*/
font-size: 14px;
font-family: 'ralewayregular';
}    

#HP_module30portrait_image_wrapper {
/* pn June 2021*/
background-color:;
width:40%;
/*pn June 2021. Had to be inline block to be centered*/
display:inline-block;

/* Redundant, given the div (HP_module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/
text-align: center;

/*Ensures is background space above the image*/
/*padding-top: 20px;*/

/*Gives space under bottom comment*/
padding-bottom: 20px;
}

/*June 2022*/
#HP_module30portrait_image_wrapper_elaboration {
background-color:;
width:30%;
/*pn June 2021. Had to be inline block to be centered*/
display:inline-block;

/* Redundant, given the div (HP_module30_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/
text-align: center;

/*Ensures is background space above the image*/
/*padding-top: 20px;*/

/*Gives space under bottom comment*/
padding-bottom: 20px;
}


#HP_module30portrait_pic {
height: auto !important;
width: auto !important;
/*Without this a big pic will go beyond the image wrapper*/
max-width:100%;
/*
box-shadow:  3px 3px 20px 3px #333;
*/
}

#HP_module30portrait_top_para {
display:;
}


/* MQ HP_module30portrait*/
/* pn June J021: new*/
@media screen and (max-width: 768px){
#HP_module30portrait_image_wrapper {
background-color:;
width:60%;
}
}

/* MQ HP_module30portrait_elaboration*/
/* pn June J022: new*/
@media screen and (max-width: 768px){
#HP_module30portrait_image_wrapper_elaboration {
background-color:;
width:60%;
}
}
/*END MQ*/

/* END. HP_module30portrait*/


/* ======================================================== */


/*HP_Module30slideshow. One col. Variable size pic. Slideshow.*/
/*This based on Module30*/

.HP_module30slideshow_longways {
width: 96%;
background:;
/*
box-shadow: 3px 3px 20px 3px #333;
*/
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
/*Insert values to 'squeeze' the image. With no value here, the value appicable to all sections notionally applies.  However, for left and right, it makes no difference.  The visible (or not) left and right background will depend on how much bigger the screen size is compared to the image size; and when screen is smaller than the image size, and so, the when the image starts shrinking, there will be no left and right background showing*/
padding-right:;
padding-left: ;

/*pn June 2021. Needed to centre the image wrapper*/
text-align: center;
}    

#HP_module30slideshow_image_wrapper {
/* pn June 2021*/
background-color:;
width:80%;
/*pn June 2021. Had to be inline block to be centered*/
display:inline-block;

/* Redundant, given the div (module30slideshow_longways) containing the image wrapper anyway has text-align: centre - thus centring everything within it*/
text-align: center;

padding-top: 0px;
/*Gives space under bottom comment*/
padding-bottom: 70px;
}

#HP_module30slideshow_pic {
height: auto !important;
width: auto !important;
/*Without this a big pic will go beyond the image wrapper*/
max-width:100%;
/*
box-shadow:  3px 3px 20px 3px #333;
*/
}

#HP_module30slideshow_top_para {
display:;
margin: 0;
padding:0;
/*This line-height helps to bring the top heading close to the top of the images*/
line-height: 0;
font-size: 14px;
font-family: 'ralewayregular';
}

/*Aug 2021*/

.HP_module30slideshow_bottom_para {
font-size: 14px;
font-family: 'ralewayregular';
}

/* MQ HP_Module 30 slideshow*/
/* pn June J021: new*/
@media screen and (max-width: 768px){
#HP_module30slideshow_image_wrapper {
background-color:;
width:96%;
}
}
/*END MQ*/

/* END. HP_module30slideshow*/

/* ======================================================== */

/* For the div used instead of a section, for the image contained within the expanded 'spew-more' text in FAQ*/


/* ======================================================== */

.pic_in_expansion {
/*Needed to centre this image wrapper itself*/    
margin: 0 auto;
/*To centre the image within the image wrapper*/
text-align: center; 
/*Width is reduced to match the width of what sections normally have (i.e. 96% width).  Else the image is slightly too big.  Note: 97% width of this div is needed for the pic in it to match the size of the pics in the normal sections*/
width: 97%;
} 



/* ============ PIC OF ME ==========================*/

/*This code taken and adapted from that for "Module31c.  One column section. Variable sized (RH) pnpic"; in sections_plain_modular.css */

.module31c_pic_pnpic_badgerbingo {
float: right;
height: auto !important;
width: auto !important;
/*Was 20% for bingo picture 30%*/
max-width: 30%;
/*Use margin-left to determine space between left of picture and the  text to the picture's left*/
margin-left:20px;
/*margin-bottom was 10px on other than HP.com*/
margin-bottom: ;
/*New for HP.com*/
margin-top: 20px;

}

@media screen and (max-width: 475px) {
.module31c_pic_pnpic_badgerbingo {
/*Original: 40%*/
max-width: 30%;
}
}
/*End MQ*/


/* ============END: PIC OF ME ==========================*/