* {
    box-sizing: border-box;
}
/* The CSS ::after pseudo-element matches a virtual last child of the selected element. 
It is typically used to add cosmetic content to an element by using the content CSS property. 
This element is inline by default. */
.row::after {
    content: "";  /* maybe content is a reserved word? */ 
    clear: both;
    display: block;
}
[class*="rcontent-"] {
    float: left;
    padding: 15px;
}
html {
    font-family: "Lucida Sans", sans-serif;
}
p.ql{color:green; font-style:italic}     /* style for quoted text */
p.q{color:green; font-style:italic; font-weight:bold} /* same as for desktop pages */
h1 {
    font-size: 12pt;
        }
.header {
    background-color: #f7FEcA; /* #9933cc; */
   /* color: #ffffff; 
 	height: 30px; */
    margin: auto;
    width: 95%;
    padding: 10px;
	text-align: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.21), 0 1px 20px rgba(0,0,0,0.24);
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#E7FEcE; /*#33b5e5; */
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	text-align: center;
	}
.menu li a {	/* I may want to change some colours here */
	text-decoration: none;
	display: block;
}
.menu li:hover {
	color: #c2144A; background: #E7FEaE;
   /* background-color: #0099cc; */
}
.footer {
    background-color: #A7FEcA;
    color: #ffffff;
   margin: auto;
    width: 50%;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
.footer a { text-decoration: none;
}
/* For desktop: */
.rcontent-menu {width: 200px; }  /* so I should be able to call the rightcontent or just content */
.rcontent-main {width: 75%;}

@media only screen and (max-width: 500px) {
    /* For mobile phones:               Things in square brackets seem to match and replace? so changing col into leftcontent breaks the logic */
    [class*="rcontent-"] {           /* rightcontent-menu is 200px for widths over 500px and 100% for mobile */
        width: 100%; 
    }
}