/* --- General Specifications --- */
body {
  margin: 0;
  padding: 0;
  font-family: Calibri, sans-serif;
  font-size: 107%;
  height: 100%
}

h1 {  font-size: 120%; }
h2 {  font-size: 110%; }

h1.ots1 {
  font-size: 200%;
  margin-top: 0;
  font-family: "Century Gothic", Arial, sans-serif;
  font-weight: bold;
}

h3 {
  font-size: 120%;
  font-family: "Century Gothic", Arial, sans-serif;
  font-weight: bold;
}

.narrow { display: none; }
.wide { display: block; }
.red { color: red; }
.center { text-align: center; }
.right { text-align: right; }
.nob { border: none; }
.wh { color: #fff !important; text-decoration: none; }

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

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Banner & Navigation */

#banner {
  background-color: #54afe3;
  background-image: url('logo50.png');
  background-repeat: no-repeat;
  background-size: contain;
  height: 137px;
}

.flag { 
   display: inline-block;
   width: 20px;  
   height: 15px;  
   background-image: url('uk.gif');
   background-size: contain;
   background-repeat: no-repeat;
   vertical-align: middle; 
}

#menu {
  clear: both;
  padding: 6px 0 0 0;
  background: #fff;
  border-bottom: 1px solid #cdf;
  margin-bottom: 1em;
}

#menu table { display: inline-block; }
#menu td { background: #fff; }
#menu a {
  padding: 0 20px;
  font-weight: 600;
  color: black;
  text-decoration: none;
}

#menu a:hover {
  display: block;
  color: blue;
  background: #fff;
}

#nav {
  float: left;
  width: 280px;
  margin-left: 25px;
  padding: 0 0 0 10px;
  font-size: 100%;
  background-color: #ffffff;
}

#nav a { text-decoration: none; }
#nav a:link { color: #543; }
#nav a:visited { color: black; }
#nav a:hover { color: blue; }
#nav p { color: #c24700; font-weight: bold; text-align: left; }
#nav ul {
  margin: -0.8em 0 0 1.7em;
  line-height: 1.2em;
  padding-left: 0;
  text-align: left;
}

/* Content Area */
#cont {
  padding: 20px;
  padding-top: 1em;
  margin: 0 2em 0 280px;
  background-color: #ffffff;
}

#cont h2 {
  margin: 0;
  color: #c24700;
  font-size: 115%;
}

#cont a { color: black; }
#cont a:hover { color: blue; }

/* Lists & Tables */
ul { margin-left: 10px; margin-top: 0px; }
ul li { margin-left: -5px; }
#cont ul.wos { margin-top: -1em; padding-left: 1.5em; }

table.ip {
  border: 2px solid #54afe3;
  border-collapse: collapse;
  padding: 5px;
  width: 95%;
}

tbody, tr, th, td { border: inherit; padding: inherit; }
td { vertical-align: top; }

#les ul { 
  cursor: default; 
  margin: 5px 15px 9px 15px; 
  padding-left: 10px; 
}
#les li { 
   margin-bottom: 0px; 
   margin-top: 0px; 
   vertical-align: middle; 
}
#les li ul { margin-left: 20px; margin-right: 20px; }
#les td { vertical-align: top; }

li.aaold { margin-top: -12px; }
li.aa { margin-top: 8px; }

#footer {
  clear: both;
  background: #54afe3;
  color: #fff;
  text-align: center;
  font-size: 85%;
  padding: 10px;
}

/* --- Narrow Screens (Mobile) --- */
@media screen and (max-width: 901px) {
  body { font-size: 95%; font-family: verdana, calibri, sans-serif; }
  
  .narrow { display: block; }
  .wide { display: none; }
  
  .content-grid { grid-template-columns: 1fr; gap: 0; }
  
  #cont { padding: 0; margin: 0 0.7em; }
  #cont h2 { font-size: 95%; }
  
  h1, h2, h3 { font-size: 110%; }
  h5 { font-size: 80%; padding: 0; }

  .header-nar {
    background: #54afe3 url('logo50.png') no-repeat;
    background-size: contain;
    height: 68px; 
  }

  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffffff;
    border-right: 1px solid #333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 35px;
  }

  .sidenav .closebtn {
    position: absolute;
    background-color: #ffffff;
    border: none;
    top: 0;
    right: 25px;
    font-size: 36px;
  }

  .mbut {
    background-color: #ffffff;
    border: none;
    color: black;
    padding-bottom: 15px;
    font-size: 30px;
    cursor: pointer;
  }

   #nav { margin-left: 3px; }

  #les ul, #les ol { margin: 5px 2px 9px 20px; padding-left: 0; }
  #les li ul { margin-left: 5px; }

  #footer { font-size: 80%; padding:0px; }
}