body {
background-color: #E0E0E0;
color: #000000;
font-family: arial, sans-serif;
font-size: 12pt;
margin: 0.5em;
padding: 0;
max-width: 1600px;
}

p {
margin: 0 0 1em 0;
}


a {
color: #485098;
}

a img {
border: 0;	
}


h2 {
font-size: 18px;
margin: 1.4em 0;
}

.pp h2 {
font-size: 12pt;
margin: 1.2em 0 1.4em 0;
}

h3 {
font-size: 16px;
margin: 1.3em 0;
}

ol, ul {
margin: 0 0 1em 0;
padding: 0 2em;
}

li {
padding: 0 0 0.2em 0.1em;
margin: 0;
}

hr {
border: 1px solid #000;
height: 1px;
border-width: 1px 0 0 0;
margin: 1.5em 0;
}

.content p + ul {
margin-top: -0.25em;
}

.pimg {
margin-bottom: 0.5em;
}

.underline {
text-decoration: underline;	
}

.label {
margin: 0.2em 0;	
}

.centre {
text-align: center;	
}

.left {
text-align: left;	
}

.right {
text-align: right;	
}

.clear {
clear: both;
}

.small {
font-size: 85%;	
}

.smaller {
font-size: 13px;	
}

.big {
font-size: 17px;	
}

.bigger {
font-size: 19px;	
}

.italic {
font-style: italic; 
}

.serif {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 120%; 
line-height: 1;
}

.qhighlight {
color: #0000FF;	
}

.indent {
margin-left: 1.5em;  
} 

p + .indent {
margin-top: -0.25em;
}

em + sup {
padding-left: 0.125em;  
}

.no-border, a img.no-border, .wrapper a img.no-border {
border: 0;	
}

img.border {
border: 1px solid #aaa; 	
}

a img:hover {
border-color: #8171ff !important; 
}

.header h1 {
font-family: 'Roboto Slab', serif;
text-transform: uppercase;
font-weight: 700;
font-size: 13pt;
letter-spacing: 0.02em;
float: left;
margin: 0;
padding: 0;
}

.header {
margin: 0.5em;
}

h1 .fl {
font-size: 15pt; 
}

#hlogo, #htitle {
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}

#htitle {
padding-top: 5px; 
}

.rtext table {
margin-bottom: 1em;
border: 0;
border-collapse: collapse;
}

.rtext img {
max-width: 100%;
height: auto;
}

.rtext td, .rtext th {
border: 1px solid;
padding: 0.1em 0.3em;
}

.rtext th {
font-weight: normal;
text-align: left;
}

.rtext .noborder td, .rtext .noborder th {
border: 0;
padding: 0.1em 0.6em 0.1em 0;
}

.navi {
float: right;
font-family: 'Roboto Slab', serif;
font-size: 9pt;
text-align: center;
text-transform: uppercase;
margin-bottom: 0.5em;
margin-left: 1em;
}

.navi a {
text-decoration: none;
color: #404040;
}

.navi .button img, .navi .button object {
max-width: 30px; 
display: block;
margin: 0 auto;
}

.navi .button img:hover, .navi .button object:hover {
opacity: 0.7;
}

.navi .button {
display: inline-block;
margin: 0 0.8em;
}

.wrapper {
border: 1px solid #000;
border-width: 1px 0;	
clear: both;
}

.page {
margin: 1em 0 1em 1em;	
}

.page {
max-width: 1400px;	
}

.limage {
max-width: 850px;
padding: 1em 0;
text-align: center;
}

.rtextextra {
font-size: 9pt;
clear: right;
}

#footer {
font-size: 8pt;
margin: 0.5em 0.2em 0 0.2em;
}

.contenti {
display: grid;
grid-template-columns: calc(180px + 1.4em) 4fr 6fr;
grid-template-rows: auto;
grid-template-areas: "left-info pp-text pp-image"; 
max-width: 1400px;
}

.linfo {
grid-area: left-info;
margin: 1.5em 1em 1.5em 0.4em;
font-size: 10pt;
max-width: 200px;
}

.linfo img {
border: 1px solid #ccc;
width: calc(100% - 1em);
height: auto !important;
max-width: 500px;
}

.rtext {
grid-area: pp-text;
max-width: 500px;
text-rendering: optimizeLegibility;
padding: 1em 0 1em 1em; 
}

.limage {
grid-area: pp-image;
}

.limage img {
width: calc(100% - 2em);
max-width: 800px;
height: auto !important;
margin: 0.5em 1em;
border: 1px solid #aaa;
}

@media screen and (max-width: 900px) {
.contenti {
grid-template-columns: 4fr 6fr;
grid-template-rows: auto 1fr;
grid-template-areas: "left-info left-info" "pp-text pp-image"; 
}

.linfo {
border: 1px solid #000;
border-width: 0 0 1px 0;
padding: 1em 1em 0 0.4em;
margin: 0;
max-width: none;
}

.linfo img {
max-width: 150px;
}

.linfo .pimg {
float: left;
}

.pp h2 {
margin-top: 0.8em;
}
}

@media screen and (max-width: 650px) {
.contenti {
grid-template-columns: auto;
grid-template-rows: auto auto 1fr;
grid-template-areas: "left-info" "pp-image" "pp-text"; 
}

.limage {
padding-bottom: 0;
}

.rtext {
max-width: none;
padding: 0.2em 1.1em 1em 1.1em;
}
}

@media screen and (max-width: 475px) {
.header h1, .navi {
float: none;
}

.navi {
text-align: right;
margin-top: 0.2em;
}
}