body
{
margin:0px;
color:#000;
background-color:#257226;
font-family:Tahoma,Helvetica,Arial,Verdana,sans-serif;
}
/*web-safe fonts*/

div.wrapper
{
max-width:1200px;
position:absolute; left:0;right:0; margin:0 auto;
background-color:#ffd;
border-style:solid;
border-width:1px;
/*border-color:#545F30;*/
border-color:#257226;
border-radius:2vw;
} /* "position:absolute;left:0;right:0; margin:0 auto;" replaces "margin:auto;", to centre the wrapper div when positioned absolutely, which allowes the 'skip intro' box to be positioned relative to the wrapper. (otherwise it was relative to the edge of the screen) */

div.parchment
{
max-width:900px;
margin:auto;
border-style:solid;
border-width:2px;
border-color:#714a2d;
background-image:url("background1.jpg");
background-color:#ebd9b9;
border-radius:0vw;
box-shadow:0.8vw 0.8vw 0.3vw #dda;
/* creates a ragged edge; you create a path of points as x y pairs, the browser joins the co-ordinates and clips off anything outside the path.
clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);
*/
}

p.parchment
{
font-family:"Times New Roman",Garamond,Georgia,serif;
font-size:clamp(19px, 2.4vw, 25px);
line-height:1.2;
}

hr.parchment{height:2px;border-width:0;background-color:#714a2d;width:40%;}

div.image{text-align:center;}
div.floatleft{float:left;text-align:center;padding:0.5em 2vw 0.2vw 1.5vw;}
div.floatright{float:right;text-align:center;padding:0.8rem 2vw 0.2vw 1.5vw;}

p.toplinks
{
font-size:clamp(16px, 1.9vw, 18px);
text-align:center;
line-height:1.5em;
background-color:#d7ebb5;
border-style:solid;
border-width:2px 0px 2px 0px;
border-color:#257226;
padding:0.2em;
}

a.toplinks, a.disabled
{
display:inline-block;
border-style:solid;
border-width:1px;
padding:0.15em 0.3em 0.15em 0.3em;
text-align:center;
font-size:clamp(16px, 1.9vw, 18px);
margin:0.2em 0em 0.2em 0em;
border-radius:0.5vw;
}

a.toplinks{transition-duration:0.2s;border-color:#060;background-color:#fff;}
a.toplinks:hover, a.toplinks:focus{color:#fff;background-color:#060;}
a.disabled{border-color:#000;color:#fff;background-color:#545F30;}
a.disabled:hover{border-color:#000;color:#fff;background-color:#545F30;cursor:default;}
/* could add a.toplinks:active in here somewhere to stop links staying green when returning? */

ul
{
color:#000;font-size:clamp(16px, 1.9vw, 18px);padding:0vw 1.5vw 0vw 1.5vw;line-height:1.4;
margin-left:2vw;
list-style-type:none;
}

a:link{color:#00f;}
a:visited{color:#606;}
a:focus{color:#00f;outline:2px solid #00c;padding:0em 0.2em 0.1em 0.2em;scroll-margin-bottom:15vh;scroll-margin-top:15vh;border-radius:0.2em;}
a:hover{color:#000;background-color:#9f3;}
a:active{color:#606;}
/* must be in this order */

a.to-top
{
transition-duration:0.2s;
border-style:ridge;
border-width:4px;
border-color:#0c0;
background-color:#060;
color:#fff;
padding:0.15em 0.5em 0.4em 0.5em;
text-align:center;
text-decoration-thickness:2px;
margin-left:2vw;
border-radius:0.5em;
box-shadow:0.6vw 0.6vw 0.2vw #cc9;
scroll-margin-bottom: 10vh;
}

a.to-top:hover, a.to-top:focus{color:#fff;background-color:#609;border-color:#c9c;}

table.images{margin:auto;width:98%;max-width:1100px;border-collapse:collapse;table-layout:fixed;}
td.images{text-align:center;padding:0px 5px 0px 3px;vertical-align:top;}
/* vertical-align:top; moves cell content to top, meaning a larger caption doesn't shift that particular image upwards */

table.text
{
margin:auto;
width:98%;
max-width:600px;
border-collapse:collapse; /* collapses borders into one. Opposite is 'separate' */
}

th
{
font-weight:normal;
padding:6px;
border:1px solid #000;
font-size:clamp(15px, 1.8vw, 20px);
color:#030;
background-color:#fff;
}

td.text
{
text-align:center;
padding:6px;
border:1px solid #000;
font-size:clamp(12px, 1.6vw, 17px);
color:#000;
background-color:#fff;
}

caption /* for tables */
{
font-size:clamp(16px, 1.8vw, 19.5px);
padding:0em 0em 0.2em 0em;
color:#606;
}

img
{
max-width:100%;
height:auto;
border-style:solid;
border-width:1px;
border-color:#000;
border-radius:0.5vw;
box-shadow:0.6vw 0.6vw 0.2vw #dda;
}

audio{width:98%;max-width:700px;margin:0 auto;display:block;border-style:solid;border-color:#000;border-width:3px;}

h1, h2, h3, h4{font-family:"Times New Roman",Garamond,Georgia,serif;line-height:1.1;}

h1
{
text-align:center;
font-size:clamp(30px, 5vw, 55px);
color:#257226;
padding:0vw 2vw 0vw 2vw;
text-shadow:0.6vw 0.6vw 0.4vw #dda; /* x-offset, y-offset, blur radius, colour */
}

h2{text-align:center;font-size:clamp(24px, 3.5vw, 38px);color:#060;margin:3% 3% 2% 3%;}
h3{text-align:center;color:#903;font-size:clamp(20px, 3.4vw, 30px);margin:3% 3% 2% 3%;}
h3.left{text-align:left;}
h4{text-align:left;color:#309;font-size:clamp(18px, 3vw, 26px);margin:3vw 0vw 2vw 4vw;}

hr.divider
{
height:5px;
border-width:0; /* border-width:0; is needed, as otherwise a border is added to the width of the line. */
background-color:#257226;
width:100%;
margin-top:3vw;
}

hr.thin{height:1px;border-width:0;background-color:#257226;width:100%;}
hr.short{height:1px;border-width:0;background-color:#257226;width:40%;}

p{color:#000;font-size:clamp(16px, 1.9vw, 22px);padding:0vw 1.3vw 0vw 1.5vw;line-height:1.4;}
p.me{font-family:"Comic Sans MS",cursive,sans-serif;color:#000;text-align:center;}
p.caption{color:#030;font-size:clamp(15.5px, 2vw, 18px);margin:0.3em 0em 0.4em 0em;line-height:1.1; padding:0px;letter-spacing:0.01em;}
p.padded{padding-bottom:2.5em;}
p.middle{text-align:center;}
p.nojava{font-size:clamp(14px, 1.6vw, 18px);color:#f00;text-align:center;font-style:italic;}
p.copyright{margin:0% 8% 1% 8%;text-align:center;color:#c00;}
p.no-ai{text-align:center;color:#a00;}
pre{white-space:pre-wrap;font-size:clamp(16px, 2.2vw, 19px);padding:0vw 2vw 0vw 2vw;}
span.reply{font-family:"Comic Sans MS","Comic Sans",Arial,sans-serif;font-style:italic;color:#520;}
span.red{color:#900;}
span.brown{color:#520;font-style:italic;}
span.green{color:#040;font-style:italic;}
span.blue{color:#009;font-style:italic;}
span.subhead{color:#060;font-weight:bold;padding:0vw 0vw 0vw 1.5vw;}
span.strike{text-decoration-line:line-through;text-decoration-thickness:3px;}

/* The code below is for the 'skip to main content' box, and only works properly with the main 'wrapper' div being positioned absolute, as otherwise the skipnav box is positioned relative to the edge of the screen, not the wrapper div */
.skip {
  position: absolute;
  top:-300px;left:2em;
  z-index:9;
  width:auto;height:auto;
  text-decoration:none;
  background: #ffffff;
  padding: 0.3em 0.4em 0.4em 0.4em;
  font-size:clamp(17px, 2vw, 22px);
  border-style:solid;border-width:1px;border-color:#00c;
  transition-duration:0.3s;
border-radius:0.5em;
}

.skip:focus {
  left:2em; top:2.5em;
  padding: 0.3em 0.4em 0.4em 0.4em;
  border-radius:0.5em;
}

/* The code below is for tool tips to appear. Currently unused. */
.tip .tiptxt-l, .tip .tiptxt, .tip .tiptxt-r{visibility:hidden;z-index:1;width:12em;font-family:"Comic Sans MS",Arial,Tahoma,sans-serif;font-size:clamp(14px, 2vw, 16px);background-color:#060;color:#fff;text-align:center;padding:0.2em 0.4em 0.4em 0.4em;border-radius:0.8em;position:absolute;opacity:0;transition:opacity 0.3s;top:135%;}
.tip{position:relative;display:block;}
.tip .tiptxt-l{left:50%;margin-left:-3.1em;font-weight:normal;}
.tip .tiptxt{left:50%;margin-left:-6.2em;font-weight:normal;}
.tip .tiptxt-r{right:50%;margin-right:-3.3em;font-weight:normal;}
.tip .tiptxt-l::after, .tip .tiptxt::after, .tip .tiptxt-r::after{position:absolute;content:"";bottom:100%;margin-left:-0.5em;border-width:0.5em;border-style:solid;border-color:transparent transparent #060 transparent;}
.tip .tiptxt-l::after{left:25%;}
.tip .tiptxt::after{left:50%;}
.tip .tiptxt-r::after{left:75%;}
.tip:hover .tiptxt{visibility:visible;opacity:1;}
.tip:hover .tiptxt-l{visibility:visible;opacity:1;}
.tip:hover .tiptxt-r{visibility:visible;opacity:1;}