/* vw = viewport width with 1vw being 1% and vh = viewport height; alternative fixed sizes given first in case if incompatibility 
sizes used on development machine (1920px x 1080px and x150%) are as follows:-
font-size: 10pt=1.05vw;
font-size: 11pt=1.15vw;
font-size: 14pt=1.45vw;
font-size: 18pt=1.85vw;
font-size: 28pt=2.9vw;
-----------------------
font-size: 22px=1.72vw;

height sizes
56px = 56vh
*/

/* even if no content in the page ensure footer is near bottom of viewport */
html, body { height: 96%; }

/* normal screen size css */
/* text styles vary with width of screen for this size of screen */
p.titles {font-family:"Palatino Linotype",serif; line-height:100%; font-size:3.40vw;}
p.header2 {font-family:"Palatino Linotype",serif; line-height:100%; font-size:1.60vw;}
div.buttontext {position:absolute; font-family:"Palatino Linotype",serif; line-height:100%; top:0; left:0; margin: 2vw 1vw 0 2vw; font-size:1.5vw; font-weight: bold;}
div.container-800 { max-width: 900px; position: relative; margin: 5% auto 3% auto; padding-right: 1.5%; min-height: 380px; }
div.content-1 { width: 90%; margin: auto; }
div.content-2 { width: 90%; margin: auto; }
div.smallfont {font-size: 1.2vw;}
div.colclass { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; }
/* -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;} */
columns: <column-width> || <column-count>;
table.maintable { }
td.lmargin { width: 15%; background-color: #edeed4; }
td.rmargin { width: 15%; background-color: #edeed4; }
td.middlecontent { text-align: justify; font-size: 1.6vw; padding: 0 2vw 0 2vw; }
td.presscontent { font-size: 1.1em; }
td.tabtable { padding: 1.5%; background-color: #edeed4; text-align: center; cursor:pointer; }
span.dropdowntext { font-family:"Palatino Linotype",serif; line-height:100%; font-size:2.0vw; font-weight: bold;}
img.downarrow { width:8%; padding: 0.45%;}
img.plonkpics { max-width: 292px; border: black solid 4px; margin: 2em 0 2em  0; }
button.roundbutton{ xmin-width: 14%; xmax-width:16%; min-width: 90px; max-width:140px; text-decoration: none; font-weight: bold; display: inline-block; outline: none; cursor: pointer;border-style: none; color: black; border-radius: 100%; overflow: none; text-align: center; padding:0; opacity: 0.7;}
span.roundbutton { display:inline-block; vertical-align:middle; max-width:90%; }
button.roundbutton:before { content:''; display:inline-block; vertical-align:middle; padding-top:100%; }
button.roundbutton:hover { opacity:1 !important;}
/* small screen size css */
/* text styles are fixed otherwise they would be too small */
/* @media only screen and (max-width: 900px), only screen and (max-device-width: 900px) */
@media only screen and (max-width: 900px)
{
div.container-800 { margin: 0; padding: 0; min-height: auto; }
div.content-1 { width: 100%; }
div.content-2 { width: 100%; }
p.titles { line-height:100%; font-size:1.8em;}
p.header2 { line-height:100%; font-size:1.2em;}
div.buttontext { line-height:100%; font-size:0.8em; }
div.smallfont {font-size: 0.8em;}
td.lmargin { width: 0.1%; }
td.rmargin { width: 0.1%; }
td.middlecontent { font-size: 1em; padding: 0 1em 0 1em; }
td.presscontent { font-size: 1em; }
span.dropdowntext { font-size:1.3em; }
}
/* large screen size css */
/* text styles are fixed otherwise they would be too large */
/* @media only screen and (min-width: 1440px), only screen and (min-device-width: 1440px) */
@media only screen and (min-width: 1440px)
{
p.titles { line-height:100%; font-size:3.40em;}
p.header2 { line-height:100%; font-size:1.8em;}
div.container-800 { max-width: 1200px; }
div.content-1 { width: 90%; margin: auto; }
div.content-2 { width: 90%; margin: auto; }
div.buttontext { line-height:100%; font-size:1.1em; padding: 0.2em;}
div.smallfont {font-size: 0.9em;}
td.middlecontent { font-size: 1.2em; padding: 0 1em 0 1em; }
td.presscontent { font-size: 1.2em; }
td.lmargin { width: 6em; }
td.rmargin { width: 6em; }
}