* { box-sizing: border-box; }

body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 100%;
   line-height: 1.4em;
   text-align: justify;
   text-justify: inter-character;
   max-width: 600px;
   margin: auto;
   background: white;
   color: #1e368a; /* Main site colour */
}

.container {
   margin: 3px;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

header, footer, nav, .page a { border-radius: 6px; }

header, footer {
   background: #1e368a; /* Main site colour */
/* background-image: linear-gradient(to bottom right, #1e368a, purple, #1e368a); */
   color: white;
   text-align: center;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

header {
   padding: 10px;
   margin-bottom: 6px;
}

header h1 {
   font-size: 38px;
   font-weight: normal;
}

h4 {
   font-size: 0.95em;
   font-weight: bold;
   text-align: center;
   font-style: italic;
}

h4 a { text-decoration: none; }
h4 a:hover { background: #bbb; }

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.center { text-align: center; }

nav {
   overflow: hidden; /*???*/
   background: #d60;
   border: 4px solid #d60;
}

nav a {
/*   float: left;*/
   color: white;
   font-weight: normal;
   padding: 1px 15px;
   text-decoration: none;
}

nav a:hover {
   background: white;
   color: black;
   text-decoration: none;
}

.active {
   text-decoration: underline;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.page a {
   padding: 3px 8px;
   text-decoration: none;
   border: 1px solid #1e3680;
   margin-right: 6px;
   background: #e3e3ff;
}

.page a:hover {
   color: white;
   background: #1e3680;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

main {   
   font-size: 0.95em;
   width: auto;
   margin-left: 5px;
   margin-right: 5px;
   background: white;
}

img {
   padding: 2px;
   border: 2px solid #bbb;
   margin-top: 5px;
}

.cd {
   display: block;
   width: 67%;
   margin: 25px auto;
   padding: 0px;
}

audio {
   height: 20px;
   width: 300px;
   display: block;
   margin-top: 6px;
   margin-left: auto;
   margin-right: auto;
}

.inset {
   width: 70%;
   margin: auto;
  
}

.inset {
   font-style: normal;
   font-weight: bold;
   text-align: justify;
/*   line-height: 1.6em;*/
}

hr {
   margin-top: 20px;
   margin-bottom: 20px;
   color: #b4bcd7;
}

.buttons {
    margin: auto;
    border: 2px solid #1e368a;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.top {
   text-align: right;
   color: black;
   font-size: 1.3em;
   line-height: 0.2em;
}

.top a {
   text-decoration: none;
}

.top a:hover {
   background: #bbb;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

footer {
   margin-top: 20px;
   padding: 4px;
   font-size: 0.8em;
}

footer a {
   color: white;
}

footer a:hover {
   color: #1e368a; /* Main site colour */
   background: white;
}