body
{
margin:0px;
font-family: Arial, Tahoma, sans-serif;
color:#000000;
background-color:#337733;
}

div.wrapper
{
max-width:1100px;
margin:auto; /* centres it */
background-color:#ffffcc;
border-style:solid; /* specify border style before width! */
border-width:3px 1px 3px 1px;
border-color:#337733;
border-radius:1.5vw;
}

div.image
{
text-align:center;
}

h1
{
font-size:clamp(18px, 5vw, 45px);
color:#3333cc;
text-shadow:0.7vw 0.7vw 0.4vw #DDDDAA; /* x-offset, y-offset, blur radius, colour */
text-align:center;
}

h2
{
font-family: 'Times New Roman', Garamond, Georgia, serif;
font-size:clamp(15px, 3vw, 25px);
color:#3333cc;
text-align:center;
}

h3
{
font-family: 'Times New Roman', Garamond, Georgia, serif;
font-size:clamp(24px, 3.5vw, 30px);
color:#CC0033;
text-align:center;
text-decoration:underline;
text-decoration-thickness: 1px;
}

h4
{
font-size:clamp(14px, 2vw, 22px);
color:#006600;
text-align:left;
text-decoration:underline;
text-decoration-thickness: 1px;
margin:0px;
padding:0vw 1vw 0vw 2vw;
}

hr
{
height:3px;
border-width:0;
background-color:#009900;
width:50%;
}

img
{
max-width:100%;
height:auto;
border-style:solid;
border-width:1px;
border-color:#FFFFCC; /* same as background */
border-radius:0.8vw;
}

div.figureleft
{
float:left;
text-align:center;
margin:0.5em 0.5em 0.5em 0.2em;
}

div.figureright
{
float:right;
text-align:center;
margin:0.5em 0.3em 0.5em 0.5em;
}

/* ------ link effects below here ------ */

/* a:hover must come after link & visited to work properly! */

a:link {color:#000099; text-decoration:none;}
a:visited {color:#000099;text-decoration: none;}
a:hover {color:#006600;text-decoration: underline;}

/* ----------- */

#linkeffecttop a:link
{
color:#FFFFFF;
background-color:#337733;
text-decoration:none; */ seems to be needed for old browsers */
}

#linkeffectbottom a:link
{
color:#FFFFFF;
background-color:#337733;
text-decoration:none;
}

/* ----------- */

#linkeffecttop a:visited
{
color:#FFFFFF;
background-color:#337733;
text-decoration:none;
}

#linkeffectbottom a:visited
{
color:#FFFFFF;
background-color:#337733;
text-decoration:none;
}

/* ----------- */

#linkeffecttop a:hover
{
color:#000000;
background-color:#FFFFCC;
padding:0.6em 0em 0.9em 0em;
}

#linkeffectbottom a:hover
{
color:#000000;
background-color:#FFFFCC;
padding:0.6em 0em 0.9em 0em;
}

/* ------ link effects above here ------ */

span.currentpage
{
color:#000000;
background-color:#FFFFCC;
font-style:normal;
padding:0.6em 0em 0.9em 0em;
}

p.links
{
color:#FFFFFF;
background-color:#337733;
font-style:normal;
text-align:center;
padding:0.8em 0em 0.8em 0em;
}

p
{
color:#000000;
font-size:clamp(14px, 2.2vw, 19px);
padding:0vw 2vw 0vw 2vw;
}

p.padded
{
padding-bottom:2vw;
}

p.contact
{
font-size:clamp(16px, 2.2vw, 20px);
line-height:1.3em;
text-align:center;
color:#990033;
}

p.copyright
{
font-size:clamp(14px, 2vw, 18px);
text-align:center;
}

p.nojs
{
text-align:center;
font-style:italic;
}

span.subhead
{
font-family: 'Times New Roman', Garamond, Georgia, serif;
font-size:clamp(16px, 2.3vw, 22px);
color:#000066;
font-style:normal;
font-weight:600;
}

span.bullet
{
color:#003300;
font-style:italic;
font-weight:400;
}