body {
margin: 0;
padding: 0;
background-color: #ccc;
color: #000;
font-size: 12pt;
font-family: 'ralewaymedium', sans-serif;
}

#header,#left {
font-weight: 500;
-moz-font-feature-settings: "ss01";
-webkit-font-feature-settings: "ss01";
-ms-font-feature-settings: "ss01";
-o-font-feature-settings: "ss01";	
font-feature-settings: "ss01";
}

hr {
border: 1px solid;
border-width: 1px 0 0 0;
color: #000;
}

.front.page, .content.page {
max-width: 1200px;
}

.centre {
text-align: center;	
}

.content h2 {
font-size: 16pt;
margin: 1em 0;
}

.content h3 {
font-size: 12pt;
margin: 1.5em 0 1em 0;
}

.content h3:first-of-type {
margin: 1em 0;
}

.content h4 {
font-size: 11pt;
}

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

.content td, .content th  {
border: 1px solid #888;
padding: 0.5em;
vertical-align: middle;
}

#header::after {
clear: both;
content: '';
display: block;    
}

#head1 {
margin: 18px 15px 14px 15px;
padding: 0;
float: left;
}

#head1 img {
border: 1px solid #000;	
}

#head2 {
text-align: right;
margin: 0 22px 0 22px;
padding: 38px 0 15px 0;
font-size: 18pt;
color: #444;
}

h3.h-small {
font-size: 16px;
font-weight: normal;
}

span.line {
display: block;
}

.examples-link-top {
display: none;
}

.large-number {
vertical-align: top;
font-family: 'Montserrat', sans-serif;
font-size: 50pt;
font-weight: 800;
padding-left: 10px;
}

.label {
  background-color: #ff5555;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  transform: rotate(-5deg);
  display: inline-block;
  font-size: 14pt;
  margin: 0.5rem 0 0 0;
  border: 1px solid #ccc;
  box-shadow: 2px 3px 5px #ccc;
  font-weight: bold;
}

@media screen and (max-width: 570px) {
#head1 {
float: none;
margin-bottom: 0;
}

#head2 {
text-align: left;
padding: 6px 0 15px 0;
font-size: 16pt;
}

span.line {
display: inline;
}
}

#grid-container {
display: grid; 
grid-template-columns: 150px auto; 
grid-template-rows: auto 1fr;
grid-template-areas: "left-links main-content"
"left-examples main-content";
margin-right: 20px;
}

#main-container {
grid-area: main-content;
background-color: #fff;
}

#main-container.col-2-50-50 {
display: grid;  
grid-template-columns: 1fr 1fr;  
grid-template-rows: auto 1fr; 
grid-template-areas: "heading-content heading-content" "main1 main2";
}

#main-container.col-2-40-60 {
display: grid;  
grid-template-columns: 4fr 6fr;  
grid-template-rows: auto 1fr; 
grid-template-areas: "heading-content heading-content" "main1 main2";
}

#contenthead {
grid-area: heading-content; 
margin: 0 1em;  
}

#main-container img {
max-width: 100%;
height: auto !important;
}

#left-links { 
grid-area: left-links;
text-align: center;
padding: 0 5px;
}

#left-examples { 
grid-area: left-examples;
text-align: center;
padding: 0 5px;
}

#left-examples img {
border: 1px solid;
}

#pbody img, #pbodyl img, #pbodyr img {
border: 1px solid #777;
}

#page, .content {
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;	
}

#pbody, #pbodyl, #pbodyr {
grid-area: main1;
background-color: #fff;
font-family: Arial, Helvetica, sans-serif;
}

#pbodyr {
grid-area: main2;
}

.content.rightcolwider #pbodyl {
width: 46%;
}

.content.rightcolwider #pbodyr {
width: 54%;
}

.content.leftcolwider #pbodyl {
width: 54%;
}

.content.leftcolwider #pbodyr {
width: 46%;
}

.content.narrowleftcol #pbodyl {
width: 40%;
}

.content.narrowleftcol #pbodyr {
width: 60%;
}

#pbodylinner,#pbodyrinner {
margin: 1em;
}

#pbodyinner {
padding: 1px 1em;
}

#pbodyrinner {
margin-left: 0;
}

.page1col {
padding: 1px 1em;
}

#pbody p {
margin-left: 2px;
margin-right: 2px;
}

.bodypara {
font-size: 10pt;	
}

.bodypara.small, .smallpara {
font-size: 10pt;	
}

.cover-img {
margin-left: 0.5rem;
}

#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 7pt;
margin: 1em 20px 1em 10px;
}

.imgrightfloat {
float: right;
}

p.imgrightfloat {
margin: 1em 0 1em 0.5em !important;
}

img.imgrightfloat {
margin: 0 0 0.8em 0.5em !important;
}

#navilinks {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
font-size: 16px;
font-weight: 500;
color: #232323;
}

.examples-link-lower {
font-size: 14px;
font-weight: 500;  
}

#navilinks li {
line-height: 100%;
margin-bottom: 0.6rem;
}

#navilinks li.menu-toggle {
display: none;
}

.examples-link-top a, #navilinks li.examples-link-top a, .examples-link-lower a {
color: #e32300;
font-weight: 600;
}
#navilinks a {
text-decoration: none;
color: #000;
}

#navilinks a:hover {
text-decoration: underline;
}

#numbers-days {
width: 120px;
display: inline-block;
margin: 0 0.3em 5px 0.3em;
text-align: left;
font-weight: bold; 
border: 1px solid #000;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
background-color: #fff;
}

#numbers-days a {
display: block;
width: 120px;
border: 2px solid #4afe04;
margin: 0;
box-sizing: border-box;
padding: 2px 3px;
text-decoration: none;
font-size: 12pt;
line-height: 14pt;
opacity: 0.9;
}

#numbers-days-text-1 {
color: #2a2a2a;
}

#numbers-days-text-2 {
color: #813f32;
}

a {
color: #666633;	
}

@media screen and (max-width: 650px) {
#main-container.col-2-50-50, #main-container.col-2-40-60 {
grid-template-columns: auto; 
grid-template-rows: auto auto 1fr;
grid-template-areas: "heading-content" "main1"
"main2";
}

#pbodylinner, #pbodyrinner {
padding: 1px 0 !important;
margin: 0 1em !important;
}

.cover-img {
text-align: center;  
margin-left: 0;
}
}

@media screen and (max-width: 500px) {
#grid-container {
grid-template-columns: 1fr; 
grid-template-rows: auto;
grid-template-areas: "left-links"
"main-content"
"left-examples";
margin: 15px 15px 5px 15px;
}

#left-links {
padding: 0;
}

#navilinks {
margin: -10px 0 0 0; 
border: 1px solid #888; 
border-bottom-color: #aaa;  
}

#navilinks li {
display: none;
margin-bottom: 0;
font-size: 18px;
}

#navilinks.open li {
display: block;    
}

#navilinks li a {
display: block;
padding: 0.5rem 0;
}

#navilinks li.menu-toggle, #navilinks li.menu-toggle:hover {
background-color: #888;
}

#navilinks li:hover {
background-color: #c8b7b7;
}

#navilinks li:first-of-type a {
margin-top: 0;
}

#navilinks li.menu-toggle {
display: list-item;
padding: 0.5rem 0;
cursor: pointer;
}

#navilinks li.menu-toggle a {
display: inline-block;
}

#navilinks.hoveropen:hover li {
display: list-item;
}

.examples-link-top {
display: list-item;
}

#left-examples {
border-width: 0 0 1px 0;
border-style: solid;
border-color: #000;
padding-bottom: 20px;
}

#left-examples p {
display: inline-block; 
margin: 0.4rem 0.2rem 0 0.2rem;
}

#left-examples p.examples-link-lower {
display: block;
margin: 1rem 0;
}

#footer {
margin-left: 20px;
}
}

@media screen and (max-width: 400px) {
table.collapsable tr {
 display: block;  
 border: 1px solid #888;
 border-bottom-width: 0;
 }
  
table.collapsable tr:last-of-type {
 border-bottom-width: 1px;
 }
  
table.collapsable td {
 display: block;
 border: 0 !important;;
 }

.imgrightfloat {
float: none;
}

img.imgrightfloat {
margin-bottom: 0 !important;
}
}

.ie11 #left-links {
float: left;
width: 150px;
}

.ie11 #main-container {
display: block;
padding: 1em 0;
margin-left: 162px;
}

.ie11 #main-container::after {
display: block;
content: '';
clear: both;
height: 0;
}

.ie11 #left-examples p {
display: inline-block; 
margin-top: 0;
}

.ie11 #left-examples p.examples-link-lower {
display: block; 
margin-top: 1em;
}

.ie11 #pbodyrinner {
margin-left: 1em;
}

@media screen and (max-width: 500px) {
.ie11 #left-links {
float: none;
width: auto;
}

.ie11 #main-container {
margin-left: 0;
}
}