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

body {
margin:0;
padding:0;
max-width: 100%;
background-color:black;
font-family: 'nunito_sansregular', 'latoregular', 'arial', sans-serif;

font-size: 100%;
line-height: 1;
/* green and black stripes.  From https://philiprogers.com/svgpatterns/

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



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

.title_container_onecol_elaboration {
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 h1
{
margin: 0;
padding: 0;
/*Same as colour for h1 in pages 1-6*/
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 {
padding: 0;
margin: 0;
color: darkgoldenrod;
font-size: ;
margin-left: 10px;
margin-right: 10px;
/*
margin-top: 50px;
*/
margin-top: 30px;
}

.elaboration_totoplink {
padding: 0;
margin: 0;
color: darkgoldenrod;
font-size: ;
margin-left: 10px;
padding-bottom: ;
}

.elaboration_returnlink a,
.elaboration_totoplink a {
color: goldenrod;
}
.elaboration_returnlink a:hover,
.elaboration_totoplink a:hover {
color:gold;
text-decoration: none;
}
.elaboration_returnlink a:active,
.elaboration_totoplink a:active {
color:aqua;
text-decoration: none;
}







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


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


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


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

.text_container {
margin-left: 10%;
margin-right: 10%;
}


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


.example_list 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){
.text_container {
margin-left: 6%;
margin-right: 6%;
background-color:;
}
}
/*END: MQ*/


/*MQ*/
@media screen and (max-width: 568px){
.text_container {
margin-left: 3%;
margin-right: 3%;
background-color: ;
}
}
/*END: MQ*/


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

.text_container {
margin-left: 0%;
margin-right: 0%;
}
}
/* END: MQ */








.example_list {
margin-top: ;
}

.example_list p {
margin:;
padding:0;
}

.example_list h2 {
margin:0;
padding:0;
}

.example_list ul{
list-style-type: circle;
margin: 0;
}

.example_list ul li span {
/*Same as color for dark mode text in pages 1-6: rgb(238, 228, 211*/
color:  #eee4d3;
}

/*THIS MY OLD WAY TO COLOUR BULLETS */
/* Use to colour the bullets.  Will colour too the text, but this is over-ruled in the span colouring immediately below */
/*
.example_list ul > li {
    color: darkgreen;
}
*/
/*makes the text of the li a different colour from that of the bullets*/
/*
.example_list ul > li > span {
    color: greenyellow;
}
*/

/*THIS THE PROPER WAY TO COLOUR BULLETS*/
ul li::marker {
color: lime;
}






/*For the lampwoman picture in helplite.html*/

/*Based on HP_module30portrait. One col. Variable size pic.  Portrait*/
.HP_module30portrait_longways_lampwoman {
width: 100%;
margin-left:auto;
margin-right:auto;
box-sizing: border-box;
/*Need to centre the image wrapper*/
text-align: center;
font-size: 14px;
font-family: 'ralewayregular';
/*Same as color for dark mode text in pages 1-6: rgb(238, 228, 211*/
color:  #eee4d3;
}  

.HP_module30portrait_image_wrapper_lampwoman {
background-color:;
width:40%;
/*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;
}

/* MQ HP_module30portrait*/
/* pn June J021: new*/
@media screen and (max-width: 768px){
.HP_module30portrait_image_wrapper_lampwoman {
background-color:;
width:70%;
}
}
/*END MQ*/

.HP_module30portrait_pic_lampwoman {
height: auto !important;
width: auto !important;
/*Without this a big pic will go beyond the image wrapper*/
max-width:100%;
}

/*END: For the lampwoman picture in helplite.html*/




.urgent_para {
border: 1px solid grey;
padding: 10px;
background-color: blue;
color: white;
}


/* HYPERLINKS IN SECTIONS AFFECTED BY TOGGLE OF LIGHT & DARK */
/*These colours chosen, as they're visible in both light and dark.  An easy alternative to specfifying different sets of hyperlink colours, for light and dark mode, in DarkLightToggleAcrosPages1.css*/
.override_blue_link_helplitepage {
color: rgb(253, 72, 163);

}
.override_blue_link_helplitepage:hover {
text-decoration: none;
}
.override_blue_link_helplitepage:active {
color: aqua;
font-style:italic;
}
/* END: HYPERLINKS IN SECTIONS AFFECTED BY TOGGLE OF LIGHT & DARK */