/* CSS Gotchas -------------------------------------------------------------------------------------------------- */

/*----------------------------------------------------------------------------------------------------------------*/
/* CHROME needs a hard reset before it will load a revised CSS file: Press Ctrl-F5                                */
/*----------------------------------------------------------------------------------------------------------------*/

/*  Note!  If CSS seems to stop working - try clearing browser data, a reboot, and a full recompile..  */

/*  Note!  Inline elements, such as <a>, <span>, etc can't be 'dimensioned' unless you change them to block...  */

/*  Note!  Control sizing seems to be done within one CSS element, this means if you apply more than one CSS sizing
   you WILL get even more unpredictable results than normal.  */
/* -------------------------------------------------------------------------------------------------------------- */


/*  This link gives a useful intro to CSS syntax: http://www.jqjacobs.net/web/css.html   */
/*  And this is good for grammar: http://www.w3.org/wiki/CSS_basics#Combining_Selectors  */

/*  CSS does not support any form of internal nesting or cross-referencing by name, hence is hugely complex to use,
    wasteful, inefficient, and non-intuitive to use.
    Look up 'CSS mixins' or 'CSS nesting' for how this can be implemented using CSS pre-processors or for possible
    future CSS implementation.
    In the meantime we are stuck with having to specify lots in code


/* Page basics--------------------------------------------------------------------------------------------------- */

/*  Use #name for HTML id names                                */
/*  Use #parent .child for element within id (more reliable)   */
/*  Use .name for HTML CSS class                               */
/*  Use name for HTML tags                                     */






/*  THIS IS VITAL!!!  Under ASP.NET the outer layer is usually named 'form1', and this sets it to browser size
  and all the other controls can then size against this!  */
#form1 {
    /* 5/11/17 swap to viewport size rather than something that may be screen size.. */
    /*height: 90vh;*/
    /*width: 100%;*/ /* Unfortunately this does not work welllll...*/

    height: 98%;
    width: 100%;
}

html, body {
    padding: 0;
    margin: 0;
    height: 100%; /* Generally, need to specify this so that subsequent sizing is valid, else subsequent gets ignored */
    width: 100%;
    /*  13/6/23 DO NOT SET BASE FONT SIZE AS IT CAN OVERRIDE USER'S ACCESSIBILITY SETTING (though 100% should actually be OK)
        Use 'rem' to give font sizes that refer to the user's default font size
        'em' sets size relative to the container, so can get scaled fonts confused..
        'vw' should be similar to 'rem' but offers the potential for a user to resize their browser window and get odd font sizes; we'll try to stick to 'rem' as a single reliable scale
        font-size: 100%;  /* 10/6/23 Moved to html to give a default font that meets accessibility requirements (I hope) 100% interprets as the basic font size set by the user */
        
}


/*  This is quoted as a way to get IE6 to do min-height
* html #container {
height: 100%;
}
*/
body {
    /*background:#fff url(images/Fading/fading_background_12.png) repeat-x;*/
    /*    background:#55CC55 url(VerticalFader.ashx?TOP=FFFFFF&BOTTOM=55CC55) repeat-x; */
    background: #DDEEFF url(VerticalFader.ashx?TOP=FFFFFF&BOTTOM=DDEEFF) repeat-x;
    /*  1/11/17 TESTING - do away with this min-width setting for now */
    /* min-width: 750px;      /* 2x LC width + RC width */
    /*font-size: 12pt;  10/6/23 Moved to html to give a default font that meets accessibility requirements (I hope) */
    /*  8/6/23 begin to introduce scaling fonts (this should scale all 'em' sizes too) 
        Placed after fixed setting to allow for legacy browsers
    */
    /*font-size: 1.0vw; Moved to 'html' */
}

/*** IE6 Fix  '*' is the universal selector and 'html' covers the whole document, hence this is an overriding positioning command
 but is applied only to elements with ID 'left' ???... ***/
 /*  1/11/17  Let's get rid of this now...
* html #left
{
  left: 150px;          */ /* RC width */ /*
}
*/


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

/* Colour themes = moved to eg PersonalityStyle.css or PathStyle.css  2/10/15------------------------------------- */

/* Typefaces ----------------------------------------------------------------------------------------------------- */

/*  Web-safe fonts (see http://www.w3schools.com/css/css_websafe_fonts.asp,
   http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html,  and others)
  In approximate order of appeal (within group)

Palatino Linotype, Book Antiqua, Palatino, serif
Georgia, Times New Roman, serif

Tahoma, Geneva, sans-serif
Lucida Sans Unicode, Lucida Grande, sans-serif
Trebuchet MS, Helvetica, sans-serif
Arial, Helvetica, sans-serif
Comic Sans MS, cursive, sans-serif
Arial Black, Gadget, sans-serif

Lucida Console, Monaco, monospace
Courier New, Courier, monospace
*/

#leader, #footer, h1, h2, h4
{
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    /*font-family: Comic Sans, Comic Sans MS, cursive;*/
    /*font-family: helvetica narrow, helvetica, avantgarde, geneva, sans-serif;*/
    /*font-family: Arial Black, Gadget, sans-serif;*/
    /*font-family: Andale Mono, Georgia, Times New Roman, serif;*/
    font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
    font-style: normal; 
}


h3, h5, h6, .text
{
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    /*font-family: Comic Sans, Comic Sans MS, cursive;*/
    /*font-family: helvetica narrow, helvetica, avantgarde, geneva, sans-serif;*/
    /*font-family: Arial Black, Gadget, sans-serif;*/  /* Arial Black is constantly bold */
    font-family: Tahoma, Geneva, sans-serif;
    /*font-family: Georgia, serif;*/
    font-style: normal; 
}

body, .fontmain, .buttontab, .fontverdana, .fontarial
{
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-family: Tahoma, Geneva, sans-serif;
}

.fontalt
{
    /*font-family: Charcoal, Chicago, sans-serif;*/
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    /*font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;*/
    font-style: italic; 
}

.fontcomic
{
    font-family: Comic Sans MS, cursive, sans-serif;
}

.fontserif
{
    font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}

.fontmono, .fontcourier
{
    /*font-family: "Courier New", "Andale Mono", Courier, monospace; */
    font-family: Lucida Console, Monaco, monospace;
}

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



/* Common HTML tags ---------------------------------------------------------------------------------------------- */
h1 {
    text-align: center;
    color: Green;
    font-size: 1.6rem;
    font-size: max(100%, min(1.6vw, 170%));
    /*font-size: 5.9vw;    9/6/23  TESTING /* 8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /* font-size: clamp(2em, 5.9vw, 2.5em);  min-size, variable-size, max-size   unfortunately this does not seem to work at all, even though should be good in 2023  */
    /* font-size: max(100%, 150%); 10/6/23 This was supposed to give a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) it gave a non-scaling font size */
    /*font-size: min(100%, 5.9vw);*/
    /* font-size: 150%;  */
    /*font-size: max(100%, 1.6vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    /*font-weight:bold;*/
    margin-top: 3px;
    margin-bottom: 8px;
    margin-top: 0.3vh; /* 13/6/23 convert px to eg. 1/10vh */
    margin-bottom: 0.8vh;
}

h2 {
    color: Green;
    font-size: 1.5rem;
    font-size: max(100%, min(1.5vw, 160%));
    /*  font-size: 5.7vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.5vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    font-weight: bold;
    margin-top: 2px;
    margin-bottom: 5px;
    margin-top: 0.2vh; /* 13/6/23 convert px to eg. 1/10vh */
    margin-bottom: 0.5vh;
}

h3 {
    color: Black;
    font-size: 1.4rem;
    font-size: max(100%, min(1.4vw, 150%));
    /* font-size: 5.23vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.4vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    /*font-weight:bold;*/
    margin-top: 0px;
    margin-bottom: 3px;
    margin-bottom: 0.3vh; /* 13/6/23 convert px to eg. 1/10vh */
}

h4, #cookie {
    color: Black;
    font-size: 1.3rem;
    font-size: max(100%, min(1.3vw, 140%));
    /*font-size: 2.64vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.3vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    margin-top: 0px;
    margin-bottom: 3px;
    margin-bottom: 0.3vh; /* 13/6/23 convert px to eg. 1/10vh */
}

h5 {
    color: Black;
    font-size: 1.2rem;
    font-size: max(100%, min(1.2vw, 130%));
    /*font-size: 2.2vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.2vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    margin-top: 0px;
    margin-bottom: 3px;
    margin-bottom: 0.3vh; /* 13/6/23 convert px to eg. 1/10vh */
}

h6 {
    color: Black;
    font-size: 1.1rem;
    font-size: max(100%, min(1.1vw, 120%));
    /*font-size: 1.76vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.1vw); /* 10/6/23 This gives a scaling font size with a minimum (assuming 'max' means the bigger of the two alternatives) */
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*
div
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}
*/
/* --------------------------------------------------------------------------------------------------------------- */
/*  can't realistically have CSS controlling tables 1) cos it messes Personality forms 2) cos probably want different tables to appear differently!
table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px 10px 10px 10px; // top right bottom left
}

th {
    //background-color: CadetBlue;
    background-color: gainsboro;
}
table
{
    border-collapse: collapse;
}
*/
/* General containers; panels (html div), labels (html span)  */
.unobtrusive
{ /* css class for a positioning (non-visible) panel  */
    /*border:none;  */
    border-style: none;
    border-width: 0;
    background-color: transparent;
}

#leader, #footer
{  /* css class for bordered panel  */
    border-style:solid;
    border-width: 1;
}

#cookie {
    font-family: Tahoma, Geneva, sans-serif; /* fontarial */
    color: CadetBlue;
    /*font-size: 14px;  8/6/23 */
    /*font-size: 1.4vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: 100%;  /* 10/6/23 Keep to user's preferred font size */
    margin-top: 0px;
    margin-bottom: 0px;
}


/* Main page containers - column types --------------------------------------------------------------------------- */
/* The first specifications apply to all screen sizes                                                              */


#pagecontainer { /*  holds the whole page inc. leader and footer */
    /*position:absolute;  /* This allows us to specify position and size as % of browser - no it doesn't!! */
    position: relative; /* Prime all following controls to be positioned within this one */
    height: auto !important; /* real browsers: !important means this takes precedence over code */
    /* Trial and error shows 85% height + 10% for footer works reasonably well  */
    /*	height:85%; /* IE6: treated as min-height - but it messes up others...  */
    min-height: 85%; /* for standards-compliant browsers */
    /*  5/11/17  padding : 0 1% 10% 1%;  /* margin around page - not very pleasing.  10% allows for footer */ /* shorthand form: top right bottom left */
    padding: 0 0% 10% 0%; /* inner margin around page - not very pleasing.  10% allows for footer */ /* shorthand form: top right bottom left */ /*background-color:Aqua;  /*  Useful for testing... */
    /*width : 98%;  Testing */
    width: 100%; /* 26/9/15 This needs to fill browser so that contained items can position themselves */
}

#leader {
    width: 100% - 2px; /* full width of pagecontainer less 2px for border */
    /*width:100vw;  7/11/17 Tried this, to stretch a 'spread' leader, but it did no good. */
    /*position:relative;*/
    clear: both;
    margin: 0;
    padding: 4px 0px 4px 0px;
    text-align: center;
    /*font-size: 2.0em;  8/6/23 */ 
    /* font-size: 8.8vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: 200%; /* 10/6/23 Keep to user's preferred font size */
    font-weight: bold;
    /*background:#FFFFFF;
	color:#444466;*/
    overflow: hidden; /*  Don't show anything beyond border */
    z-index: 10;
}

/*  WARNING!  Don't use numbers in (1st character of)CSS names!
#1Column */
#onecolumn
{  /* holds the main page columns - just the one in this case, with possible internal floated columns */
    overflow: hidden;
}
#onecolumn .column 
{ /* class for general behaviour for full-height columns in multi-column layouts */
    /*position: relative;  */
    float:left;
    text-align:left;  /* default text alignment for columns */
    /* Stretch columns to be full-height */
    padding-bottom: 20002px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
        /*min-width:100%;  TESTING */
    /*min-width:98%;  /* CSS sizing is very tricky & unforgiving....  */
    min-width:100%;  /* 5/11/17 */
    /*width:100%;*/
    /*height:70%;  /* This is ignored.. */
}
 
#twocolumn 
{  /* holds the main page columns - 200px left and a main column  */
    overflow: hidden;
}
#twocolumn .column 
{ /* class for general behaviour for full-height columns in multi-column layouts */
    text-align:left;  /* default text alignment for columns */
    /* Stretch columns to be full-height */
    padding-bottom: 20002px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
}

#threecolumn 
{  /* holds the main page columns - left and right columns and a central main column  */
    overflow: hidden;
}
#threecolumn .column 
{ /* class for general behaviour for full-height columns in multi-column layouts */
    text-align:left;  /* default text alignment for columns */
    /* Stretch columns to be full-height */
    padding-bottom: 20002px;  /* X + padding-bottom */
    margin-bottom: -20000px;  /* X */
}


#maincolumn
{  /*  centre column */
   /* Don't set padding etc here - do that in 'mainborder'  */
    width:100%;  /* without this the column width may reduce to match width required for some content */
    z-index:50;
}

/*
.column
{
*/  /* Try to get the column to use as much width as there is */
    /*display:inline-block;  tried and failed to get full-width behaviour */
    /*
    width:100%;
}
*/



#mainborder
{  /*  centre column */
   width: 99%;  /* trial and error - at 100% the right-hand edge is lost  */
   display:inline-block;  /* This allows border panel to stretch to fill maincolumn vertically */
	/*margin:2px 2px -5px 2px; */
	/*padding: 5px 5px 5px 5px; */
    /* display:inline-block; */
    /*margin:0px 0px 0px 0px;*/
   border: 2px groove Teal;
   padding: 3px 3px 3px 3px;
    /*outline:Teal groove 2px;  */
}



#leftcolumn 
{
    font-weight:200;
    /*padding:10px 0px 5px 20px;*/
    padding:5px 0px 5px 5px;  /*  Have not been able to set padding on right - just ignored... */
    z-index:30;
	overflow: hidden;  /*  Don't show anything beyond border */
}
#leftcolumn .hover:hover  /*  Does NOT work well, but leave it for now... */
{  /*  Converts links to show red and italic on mouse-over */
    color:red;
    font-style:oblique;
}
#leftfloatcolumn
{
    margin: 0px 10px 10px 0px;
    padding:10px 20px 5px 5px;
    font-weight:300;
	text-align:left;  /* default text alignment for columns */
	z-index:30;
	overflow: hidden;  /*  Don't show anything beyond border */
}

#rightcolumn 
{
    padding:10px 0px 5px 10px;  /*  this moves the content within the column */
    font-weight:300;
    z-index:40;  /* changing z-index does not change the position of this column */
	overflow: hidden;  /*  Don't show anything beyond border */
}

#rightfloatcolumn
{
    /*padding:10px 0px 5px 20px;  */
    padding:5px 5px 5px 5px;
    font-weight:300;
	text-align:left;  /* default text alignment for columns */
	z-index:40;
	overflow: hidden;  /*  Don't show anything beyond border */
}
#rightfloatcolumn:hover, .button:hover
{  /*  This is an attempt to overcome IE hover bugs - one source implies sporadic issues can be overcome by applying hover rule to container..  does not seem to work 4 me :-( */
    visibility:visible;  /* do nothing other than give IE a heads-up */
}
.hoverholder input:hover
{  /*  This is an attempt to overcome IE hover bugs - one source implies sporadic issues can be overcome by applying hover rule to container..  does not seem to work 4 me :-( */
    visibility:visible;  /* do nothing other than give IE a heads-up */
}
#rightfloatcolumn input  /* 'input' for button *//*  Does NOT always work well, but leave it for now... */
{  /* When we set stuff in code, it generally cannot be reset by CSS...  */
   border-width:1px;
    font-variant:small-caps;
    font-family:Tahoma;
}
/*  hover is not reliable in IE - have never found a cure... */
#rightfloatcolumn input:hover  /* 'input' for button *//*  Does NOT always work well, but leave it for now... */
{  /*  Converts button text on mouse-over - seems we can only change some things...*/
  border-color:Black;  /* Change the border to indicate hover
    /*font-size:smaller;  /* Does nothing */
    /*font-size:small;    /* Does nothing */
    /*color:red;          /* Does nothing */
    /*background-color: #999999;/* Does nothing */
    /*font-size:8pt;*/  /* Does nothing */
    /*font-style:oblique;*/
    font-variant:small-caps;
    /*font-weight:bolder;  */
    font-family:Tahoma;
}


#footer {
    /* Using position:absolute makes positioning easier but removes footer from other controls,
       hence can cause spacing problems */
    position: absolute; /* This allows us to move footer to bottom of container, but loses the width setting (it no longer has a parent to set width to) */
    /*position:relative;*/
    bottom: 0px; /* pin to bottom of container (browser window) - push up a bit through trial and error */
    height: 2.5em; /* 5/11/17 */
    /*  height: 60px; */
    min-height: 40px; /*  fixed minimum height to make positioning etc easier */
    /*  Although the following calc'n is not supported, it seems to work! But not if position:absolute  */
    /*width:100% - 2px; /* full width less border */
    /*  5/11/17 width:98%; /* full width less border */
    /*width: 100%;*/
    /*width: 100% - 2px; /* full width of pagecontainer less 2px for border */
    /*  5/11/17  This seems to be a better way to fill the browser... */
    left: 0px;
    right: 0px;
    clear: both; /* make sure this is placed clear of preceding objects */
    padding: 2px 0px 4px 0px;
    /*padding:4px 0px 6px 0px; */
    text-align: center;
    /*font-size: 1.2em;  8/6/23 */
    /*  font-size: 5.3vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size */
    /*background:#444466;
    color:#FFFFFF;*/
    z-index: 100;
    overflow: hidden; /*  Don't show anything beyond border */
}
    #footer .copyright { /* class for placing a copyright notice to the bottom-right of footer */
        /* font-size: 50%;  */
        /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size */
        /*  METHOD 1 - Use relative placing to move copyright - tends to mess other footer positionings though...*/
        /*position:relative;  /*  Allows us to move the copyright in relation to its 'normal' placing */
        /*float:right;  /* this takes us to the right of the footer */
        /*margin:0px 5px 0;  /* gives a bit of a gap on the right */
        /* METHOD 2 - Use absolute positioning within footer.  Easier to place but need to make sure there is space */
        position: absolute; /* place in front of holding container (footer) (care: removes this from footer sizing)*/
        bottom: 5px; /* place at bottom of holding container (footer) */
        right: 5px; /* place at right of holding container (footer) */
    }

/*  1/11/17 Implement variable screen-size effects.                                                                */
/*  7/11/17  Moved down to try to make sure that screen-size effects take priority over other settings...          */
/*          The further down the setting appears the more likely it will be the one that applies on-screen!        */





/* --------------------------------------------------------------------------------------------------------------- */
#HoldQuestionnaire img
{
    display: none; /* This hides the 'Skip Navigation Links' <a><img ...></a> generated as part of the questionnaire */
}


/* Main menu ----------------------------------------------------------------------------------------------------- */
#menu { /* Menu master and menu holder */
    /*  5/12/14 Move these to sub-class so each menu level has the appropriate display and position definition */
    /* display:inline;  /* 5/12/14 No improvement but this is probably what we want as default behaviour */
    /*    display:inline;  /* force all elements to 'flow'*/ /* inline = column to left,    block, inline-block, inherit = column at center, run-in lines up with main column  */
    /*    position:relative; /* make this non-static so contained items can be placed relative to this
/*    z-index:200;  /* Although this is logically placed 2nd, the drop-down menu may not show unless z-index is increased */
    z-index: 200; /*  Bring menu (all menu items) to the front */ /* Although this is logically placed 2nd, the drop-down menu may not show unless z-index is increased */
    /*  display:inline-block;/**/
    /* position:relative;*/
    /* position:relative;  /* 2nd-level menu does not show if this is not set!  */
    width: 100%;
    clear: both; /* make sure this is placed clear of preceding objects */
    /*margin:5;  */
    padding: 2px 0px 4px 0px;
    padding: .12vw 0vw .25vw 0vw;
    text-align: center;
    background: #444466;
    color: #FFFFFF;
    /*    z-index:200;  /* Although this is logically placed 2nd, the drop-down menu may not show unless z-index is increased */
}
    #menu .menuHolder
    {
        /*width: 100%; /* 4/11/17 */
/*        display: inline-block; /* 5/11/17  */
    }

    #menu img
    {
        display: none;  /* This hides the 'Skip Navigation Links' <a><img ...></a> generated as part of the menu */
       /* width: 0px;
        height: 0px;
        border-style: none;
        border-width: 0;
           */
        /*background-color: transparent;*/
        /*background-color: red;*/
        /*visibility:hidden;  /* This makes it invisible but it still has size */
    }

    /* #menu .menuclass     5/11/17 this didn't work at all, which is a shame because I've used it for my preferred approach...*/
#menuclass
{
    /*  5/11/17 Trying all sorts to stretch the menu to the full available width......*/
    /*z-index: 250; /*  Bring menu (all menu items) to the front */ /* Although this is logically placed 2nd, the drop-down menu may not show unless z-index is increased */
    /* display:inline-block;  /* force children to show in a row, even if they don't want to */ /* run-in, inherit, block, inline, inline-block, list-item, table = centered list */
    /*position:relative; /* make this non-static so contained items can be placed relative to this  */
    /*text-align:center;

/*
    margin-left:auto;
    margin-right:auto;
    display:inline-block;  */ /* some content will be inline by definition (egASP.NERT Panel = div) - so we have to force it to block */
    /*min-width: 100%; /* 4/11/17 */
    /* width: 100% */
    width: 100vw; /* 5/11/17  Ah Ha! This stretches the menuclass div to full viewport width! = best yet*/
    /*display:inline-block;  /* 3/11/17  doesn't really seem to make any difference */
    /*display:block;  /* 3/11/17  doesn't really seem to make any difference */
    /*border:solid 3 #FFFFFF;*/
    /*background-color: red;  Only used for testing...*/
}


/*
ul .level1
{ /*  5/11/17 Want to stretch the menu to the full width available, ul is the holding container */
    /* width: 100vw; /* 5/11/17  Ah Ha! This stretches the menuclass div to full viewport width! = best yet*//*
    list-style-type: none; /* Removes any bullets *//*
    margin: 0;
    padding: 0;
    overflow: hidden;
}
li .level1
{
    float:left;
}
a .level1
{
    display:block; /* makes full block clickable, not just the text but tends to stretch to full width *//*
}
                                                                                                             */


/*  Display a multi-level menu using CSS!  */
/*  Comes from here: https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ */

level1 {
    display: block; /* makes full block clickable, not just the text but tends to stretch to full width */
    text-align: center;
}

    level1 ul {
        margin: 0;
        padding: 0;
        list-style: none; /* removes any bullets */
    }

.level1 a {
    display: block; /* makes full block clickable, not just the text but tends to stretch to full width */
    /* background: #111;  Colour defined in style setting in code CssClass */
    /* color: #fff;  Colour defined in style setting in code CssClass */
    text-decoration: none;
    padding: 0.2em 0.45em;   /*padding: 0.8em 1.8em;  Too much padding */
    /*text-transform: uppercase;  I don't want upper-case only */
    /*font-size: 80%; Too big for me! */
    /*letter-spacing: 2px; I'll stick with my standard font */
    /*text-shadow: 0 -1px 0 #000;  Not really... */
    position: relative;
}

.level1 {
    vertical-align: top;
    display: inline-block;
    /*box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;  This doesn't seem to be doing anything */
    border-radius: 6px;
}

    .level1 li {
        position: relative;
    }


/* TESTING control of the drop-down menus.  Can't seem to get this working properly though */
.level2 ul, .level2 a, .level2 li {
    outline: Teal groove 1px;
    /*display: inline-block;*/
    /*padding: 0px 10px 0px 10px;*/
    /*  Try a font-related scaling...
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;  */
    /*  This does not do much, if anything, but leave it here as a future intention...*/
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    -khtml-border-radius: 0.2em;
    border-radius: 0.2em;
}


/*  NOTE! '>' basically seems to identify a single child rather than all children */

    .level1 > li {
        float: left;  /* positions the primary menu options horizontally from left to right */
        /*border-bottom: 4px #aaa solid;*/
        /*margin-right: 1px;*/
    }

/* This sets the big blue/black box look for the main menu and the clunky bottom border.
        I think we are better of without it!...
        .level1 > li > a {
            margin-bottom: 1px;
            box-shadow: inset 0 2em .33em -0.5em #555;
        }

        .level1 > li:hover,
        .level1 > li:hover > a {
            border-bottom-color: orange;
        }

    .level1 li:hover > a {
        color: orange;
    }

    .level1 > li:first-child {
        border-radius: 4px 0 0 4px;
    }

        .level1 > li:first-child > a {
            border-radius: 4px 0 0 0;
        }

    .level1 > li:last-child {
        border-radius: 0 0 4px 0;
        margin-right: 0;
    }

        .level1 > li:last-child > a {
            border-radius: 0 4px 0 0;
        }

    .level1 li li a {
        margin-top: 1px;
    }
        */

    /* Then the magic happens (hide the sub-menus until we want them to show) */
    /* create a visible border above the submenus that shows as an arrow shape */
.level1 li a:first-child:nth-last-child(2):before {
    content: "";  /* Nothing to see here... */
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    top: 50%;
    right: 0.1em; /*right: 5px;  Getting better placement of the arrow */
}

/* text and backgroun colour changes when hovering */
#menu .level1 :hover {
    color:gainsboro;
}
#menu .level2 :hover {
    color: darkgray;
    background-color: gainsboro;
    /*background-color: #FFB967;  this is orange. it is the papermediumalt for Personality/X submenus = not very nice */
}

/* submenu positioning*/
    .level1 ul {
        position: absolute;
        white-space: nowrap;
        /*border-bottom: 5px solid orange;  Clunky*/
        /*z-index: 1;  I think I need to increase this to match the z-index's already defined */
        z-index: 201; /* This is essential for the submenu to show on hover!  */
        left: -99999em;
    }

.level1 > li:hover > ul {
    left: auto;
    margin-top: 5px;
    min-width: 100%;
}

.level1 > li li:hover > ul {
    left: 100%;
    margin-left: 1px;
    top: -1px;
}
/* arrow hover styling (I have no idea how or why this works.. Where does the arrow come from???  This just sets its colour) */
.level1 > li > a:first-child:nth-last-child(2)::before {
    /*border-top-color:fuchsia;  */
    border-top-color: aqua;
}
.level1 > li:hover > a:first-child:nth-last-child(2):before {
    border: 5px solid transparent;
    /*border-bottom-color: orange;*/
    border-bottom-color: gainsboro; /* Upward pointing arrow that comes out more or less gray */
    margin-top: -5px; /*  I think this positions the arrow from the submenu over the top-level menu ? */
}

    /*  These cover subsubmenus */
.level1 li li > a:first-child:nth-last-child(2):before {
    border-left-color: #aaa;
    margin-top: -5px;
}

    .level1 li li:hover > a:first-child:nth-last-child(2):before {
        border: 5px solid transparent;
        border-right-color: orange;
        right: 10px;
    }



/*TESTING...
#menu #level2 {
    outline: Teal groove 1px;
    display: inline-block;
    padding: 0px 10px 0px 10px;
}
#menu, #menu .level1
{
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}
    
#menu #level2 {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
    }
... TESTING*/


/*
ul .level2 { /*  5/11/17 Want to stretch the menu to the full width available, ul is the holding container *//*
    list-style-type: none; /* Removes any bullets *//*
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: aqua;
}

li .level2 {
    float: left;
    width: 96%;
    background-color: brown;
}

a .level2 {
    display: none; /* This hides the sub-menu until we want it to show */
    /*display: block; /* makes full block clickable, not just the text but tends to stretch to full width *//*
    background-color: forestgreen;
}


#menu .level1
{  /* main menu items */
   /*display:inline-block;  /* 5/12/14 No improvement but this is probably what we want as default behaviour *//*

   z-index:300;  /* Although this is logically placed 3rd, the drop-down menu may not show unless z-index is increased */
   /*display:block;  /* force children to form into a column */ /* run-in, inherit, block, inline, inline-block, list-item, table = centered list */
  /* position:relative;  /* non-static  */       /* inherit, relative = centered list    fixed, absolute = messed up*/
    
/*float:left;  /*  3/11/17  TESTING  *//*
    
    text-indent:5px;
    letter-spacing:3px;
    padding:4px 2px 4px 2px;
    /*color: White;
    background-color:#666688;*//*
    font-variant: small-caps;
    font-size:medium;
    font-weight:normal;
}
#menu .level1 :hover
{
    color:#cccccc;
}
#menu .level2
{  /* drop-down menu items exposed by mouse-over */
/*    display:inline-block;  /* 5/12/14 No improvement but this is probably what we want as default behaviour *//*

   z-index:400;  /* Although this is logically placed 4th, the drop-down menu may not show unless z-index is increased *//*
   display:block;   /* block =  OK,  inline = not good,   inline-block = poor */
   /*visibility:hidden;  /* 3/11/17  This makes .level2 invisible but it still takes up space */
   /*position:static;*//*
    
    padding:3px 2px 3px 2px;
    letter-spacing:1px;
    /*color:Navy;
    background-color:Silver;*//*
    font-family:Tahoma !important;  /* Need !important else this is ignored... *//*
    font-size:small;
    font-variant: small-caps;
}
#menu .level2 :hover
{
   /*z-index:300;  /* Bring to the front */
   /*display:block;
   visibility:visible;
   position:static;*//*


    color:black;
    background-color:White;
}
#menu .level3
{
    padding:2px 2px 2px 2px;
    letter-spacing:1px;
    /*color: black;
    background-color:Gray;*//*
    font-family:Tahoma !important;  /* Need !important else this is ignored... *//*
    font-size:smaller;
    font-variant: small-caps;
}

/*#menu .hoverstyle*/  /* this does nothing as far as I can tell  */
/*#menu:hover*/  /* this affects level2: - all options at once..*/
/*
{
    font-weight:bolder;
}
*/
/* --------------------------------------------------------------------------------------------------------------- */

/*  Buttons ------------------------------------------------------------------------------------------------------ */
/*  Now here's an odd thing..  By setting up a button class the buttons now appear as silver, domed, rounded
    and I have no idea how this is happening!  - Found out it is browser standard, unless you specify background
    colour, in which case the browser reverts to ugly box design..
    Some things can still be changed...
    This seems to modify the effect but not ruin it... */

    /*.tiny-rounded-corners*/
.button {
    /*
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
*/
    color: #050; /* font colour */
    /* font: bold small 'trebuchet ms',helvetica,sans-serif;   12/6/23 define any non-default (100%) size elsewhere */
    font: bold 'trebuchet ms',helvetica,sans-serif;
    /*font-weight:bold;*/
}


/*
.button:hover
{
  border-color:Black;
}
*/
/* --------------------------------------------------------------------------------------------------------------- */

/*  LinkButtons -------------------------------------------------------------------------------------------------- */
/*  Finally gave up trying to use ASP.NET Button (which renders as <input>) because CSS support is useless.
    LinkButtons render as <a> which is is better, more versatile, and more flexible  */
/*  17/11/17  Add 'slimbutton' which is basically a smaller, slimmer, linkbutton */
/*  19/2/23  Add 'padbutton' which copies slimbutton but with bigger margins     */

/*.tiny-rounded-corners*/
.linkbutton, .slimbutton {
    /*border:1px solid #a0a0f2;*/
    border: 1px solid rgba(0, 0, 0, .4); /* use transparency to show border based on background colour */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    /*font-size: 12px;  8/6/23 */
    /* font-size: 0.9vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.0vw); /* 10/6/23 Keep to user's prefered font size */
    /* 9/6/23 font: bold medium 'trebuchet ms', helvetica, sans-serif;  */
    font: bold, 'trebuchet ms', helvetica, sans-serif;
    padding: 5px 5px 5px 5px;
    padding: 0.3vh 0.3vw 0.3vh 0.3vw; /* 9/6/23 top right bottom left*/
    text-decoration: none;
    display: inline-block;
    color: rgba(0, 0, 0, .75); /* Black with transparency to show colour derived from background = text is darker shade of background */
    /*  8/6/23  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.25);  White with transparency */
    text-shadow: 0.1vw 0.1vw 0 rgba(255, 255, 255, 0.25);
    font-weight: bold;
    /*background-color: #8686ff;  */
    /*background-color: #008080;  /* Teal */
    /*background-color: #4682B4;  /* SteelBlue */
    /*background-color: #8A2BE2;  /* BlueViolet */
    /*background-color: #8FBC8F;  /* DarkSeaGreen */
    background-color: #228B22; /* ForestGreen */ /* Potential for default */
    /*background-color:Fuchsia;*/
    /*background:#FFEFD5;  /* PapayaWhip */

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .8)), to(rgba(255, 255, 255, .2)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .8), rgba(255, 255, 255, .2));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgba(255, 255, 255, .8), endColorstr=rgba(255, 255, 255, .2));
}

.linkbutton:hover, .slimbutton:hover
{
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .6)), to(rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgba(255, 255, 255, .6), endColorstr=rgba(255, 255, 255, 0));
}

.slimbutton
{  /*  This is what makes the slimbutton slim  */
    padding: 0px 2px 0px 2px; /* top right bottom left */
    padding: 0vh 0.2vw 0vh 0.2vw; /* 9/6/23 */
}

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

/*  Tab Buttons on paged document displays ----------------------------------------------------------------------- */
.buttonTab { /* Controls the button/tab main body display  */
    /*background:#fff url(images/Fading/fading_background_12.png) repeat-x;*/
    /*font-size: 12pt;  8/6/23 */
    /*  font-size: 1.2vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size */
    font-weight: bold;
    text-align: center;
    /*  CSS does not support design of border etc on buttons (rendered as <input> tags)  */
}

.buttonTabActive
{
	background:#F5FFFA;  /* 'mintcream'  */
    color:Green;
}

.buttonTabInactive
{
	background:#DFDFD3;  /* grey with a slight boost to red and green  */
	color:#008060;  /* green with a bit of blue  */
}


.bTabHolder
{  /* Controls the button/tab border and surround - moved down by 1px to overlay text page border  */
    display:inline-block;  /*  So we can arrange tabs side-by-side */
	margin: 0px 0px -1px 0px;  /* top right bottom left */
	overflow: hidden;   /* Don't show anything beyond border */
	border-style:solid;
	border-color:#80C080 #004000 Green #A0E0A0; /* use paler border left and top to give raised effect */
	/* border-width:2px 1px 0px 1px; /* top right bottom left */
}

.bTabHolderInactive
{  /* bottom border to seperate tab from page plus thinner top border */
	border-width:2px 1px 1px 1px; /* top right bottom left */
}

.bTabHolderActive
{  /* no bottom border to join tab to page plus thicker top border */
	border-width:3px 1px 0px 1px; /* top right bottom left */
}

.tabbedPage
{  /*  Controls the page border to match the button/tabs */
    padding : 0px 5px 0px 5px;  /* top right bottom left margin inside object */
	/*margin: 0px 5px 0px 5px;  /* top right bottom left invisible margin outside object */
	overflow: hidden;   /* Don't show anything beyond border */
	border-style:solid;
	border-color:Green;
	border-width:1px 1px 1px 1px; /* top right bottom left */
	background:#F5FFFA;  /* 'mintcream'  */
}
/* --------------------------------------------------------------------------------------------------------------- */

/*  Bulleted Lists ----------------------------------------------------------------------------------------------- */
/*  Usual pig's ear trying to get the positioning to actually work sensibly, and the same in different browsers
    This is the result of loads of trials....  */
.bulletlist
{
    padding-left:30px;
}

.bullet
{
/*    display:inline-block;*/
/*    position:relative; 
    top:15px;*/
position:absolute;
margin-top:3px;
}

.bulletitem
{
    position:relative;
    left:20px;
}


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


/* 22/9/15  Spread a contained list of items evenly -------------------------------------------------------------- */
/*  Yet again the usual pig's ear trying to get the positioning to actually work sensibly, and the same in different browsers
    This is the result of loads of trials....
    DON'T USE ID="blah" with #blah in the CSS - The priority is too low and it simply does not work very often despite lots of people claiming it does,
    use class="blah" and .blah */

.spread {
    /*width:100%;  TESTING */
    display: inline-block;  /*  TESTING  */
    /*  This is the vital bit: it spreads items (as if they are justified text) across the page.
       Note that the first item will be right-justified though with additional items spread with equal spacing from the first item  */
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

/* This creates a false final line so that the actual content-items line will be justified, the final line is not
    - just like the final line of a block of justified text */
    .spread:after {
        content: '';
        width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
        display: inline-block;
        /*font-size: 0.001;*/
        /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size, even though this is a spacer with no text! */
        line-height: 0
    }

/*  could not get this to work:  #spread > div   Select all divs that are a first-generation child of 'spread' and no others  */

.spreaditem
{
    display: inline-block;
    vertical-align: middle;   
 /*   *display: inline;  /*  IE 7 */
   /* zoom: 1;  */
    /*border:1px solid red;*/
    /*text-align:center; */
}


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



/* 1/10/15 Text-scroller converted from many-times repeated code, most usefully by Fabrizio Calderan------------- */

.textscroller {
    width: 100%;
    /* min-width: 80vw; Gives us better initial width control but goes unstable on browser resize  */
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    /*font-size: 12px;  8/6/23 */
    /* font-size: 1.2vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size */
}

    .textscroller span {
        /*width: 60vw;  This seems to reset the width as desired on first display but the whole thing goes unstable on resize! */
        display: inline-block;
        padding-left: 100%; /* start the banner to the right */
        animation: textscroller 25s linear infinite;
        /* And try and get other browsers to work too!  */
        -moz-animation: textscroller 25s linear infinite;
        -webkit-animation: textscroller 25s linear infinite;
    }

.textscroller span:hover
{
    animation-play-state: paused
}

/* Make it move */
@keyframes textscroller
{
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
/* And try and get other browsers to work too!  */
@-moz-keyframes textscroller
{
 0%   { -moz-transform: translateX(0%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes textscroller
{
 0%   { -webkit-transform: translateX(0%); }
 100% { -webkit-transform: translateX(-100%); }
}


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


/*  Misc text-effects -------------------------------------------------------------------------------------------- */

.indented { /* class to give additional indent for column content.  Used in menu class and others */
    margin-left: 20px;
    padding-right: 5px;
    margin-left: 0.2vw;  /* 13/6/23 */
    padding-right: 0.5vw;
    /*text-indent:10px;*/ /*  only indents 1st line*/
}

.boxed /* 5/11/17 move menu def'n to menu section   , #menu #level2  */ {
    outline: Teal groove 1px;
    display: inline-block;
    padding: 0px 10px 0px 10px;
    padding: 0px 1vw 0px 1vw;  /* 13/6/32 */
}

.outline
{
    display:inline-block;
    /*margin:0px 0px 0px 0px;*/
    border: 2px groove Teal;
    /*padding: 3px 3px 3px 3px;*/
    /*outline:Teal groove 2px;  */
}

.inline
{
    display:inline-block;
}

.block
{
    display:block;
}

.paragraph { /* meant for a panel to pad contained text to give the appearance of paragraphs */
    /*  TESTING  */
    /*   outline:Teal groove 1px;*/
    /*   background:#FFFF44;*/
    /*padding-top:5px;*/
    padding-bottom: 14px; /*  13/12/10 Increased from 10px - set to approximate to most common text size  */
    padding-bottom: 1.4vh;  /* 13/6/23 */
    /*clear:both; */ /* TESTING 26/8/10 -  SUCCESS!!!  */
}

.rounded-corners {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    /* 13/6/23 */
    -moz-border-radius: 1vw;
    -webkit-border-radius: 1vw;
    -khtml-border-radius: 1vw;
    border-radius: 1vw;
}

/* 5/11/17 move menu def'n to menu section   , #menu, #menu .level1 */
.small-rounded-corners, #leader, #menu, #menu .level1, #leftfloatcolumn, #rightfloatcolumn, leftcolumn, #rightcolumn, #userHolder,
.textboxholder {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    /* 13/6/23 */
    -moz-border-radius: 0.6vw;
    -webkit-border-radius: 0.6vw;
    -khtml-border-radius: 0.6vw;
    border-radius: 0.6vw;
}

/* 5/11/17 move menu def'n to menu section   , #menu #level2 */
    .tiny-rounded-corners, .button, #menu #level2 {
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -khtml-border-radius: 4px;
        border-radius: 4px;
        /* 13/6/23 */
        -moz-border-radius: 0.4vw;
        -webkit-border-radius: 0.4vw;
        -khtml-border-radius: 0.4vw;
        border-radius: 0.4vw;
    }

.big-rounded-corners, #footer {
    -moz-border-radius: 18px;
    -webkit-border-radius: 18px;
    -khtml-border-radius: 18px;
    border-radius: 18px;
    /* 13/6/23 */
    -moz-border-radius: 1.8vw;
    -webkit-border-radius: 1.8vw;
    -khtml-border-radius: 1.8vw;
    border-radius: 1.8vw;
}

.marginsmall { /* marginsmall can be used to add space around an html element */
    /*margin: 3px 3px 3px 3px;   top right bottom left */
    margin: 1% 1% 1% 1%; /* top right bottom left */
    margin: 0.1vh 0.1vw 0.1vh 0.1vw; /* 13/6/23 top right bottom left */
}

.marginmedium { /* marginmedium can be used to add more space around an html element */
    margin: 2% 2% 2% 2%; /* top right bottom left */
    margin: 0.2vh 0.2vw 0.2vh 0.2vw; /* 13/6/23 top right bottom left */
}

.marginlarge { /* marginlarge can be used to add more space around an html element */
    margin: 4% 4% 4% 4%; /* top right bottom left */
    margin: 0.4vh 0.4vw 0.4vh 0.4vw; /* 13/6/23 top right bottom left */
}

/* Scaling heights for eg. padding labels */
.heightone {
    height: 1%;
    height: 1vh;
}

.heighttwo {
    height: 2%;
    height: 2vh;
}

.heightfive {
    height: 5%;
    height: 5vh;
}

.heightten {
    height: 10%;
    height: 10vh;
}

.heighttwenty {
    height: 20%;
    height: 20vh;
}

.heightthirty {
    height: 30%;
    height: 30vh;
}

/* Scaling widths */
.one
{
    width: 1%;
}

.two
{
    width: 2%;
}

.three
{
    width: 3%;
}

.four
{
    width: 4%;
}

.five
{
    width:5%;
}

.ten
{
    width:10%;
}

.fifteen
{
    width: 15%;
}

.twenty
{
    width:20%;
}

.twentyfive
{
    width:25%;
}

.thirty
{
    width:30%;
}

.thirtyfive
{
    width: 35%;
}

.forty
{
    width:40%;
}

.fortyfive
{
    width: 45%;
}

.fifty
{
    width:50%;
}

.fiftyfive
{
    width: 55%;
}

.sixty
{
    width:60%;
}

.sixtyfive
{
    width: 65%;
}

.seventy
{
    width:70%;
}

.seventyfive
{
    width:75%;
}

.eighty {
    width: 80%;
}

.eightyfive
{
    width: 85%;
}

.ninety
{
    width:90%;
}

.ninetyfive
{
    width:95%;
}


.hundred, .fullwidth
{
    width:100%;
}


/* Mobile-friendly scaling column widths = widths that trend to full width on smaller screens */
/* These scalings should also be used for sclaing images */

.columnthree {
    width: 3%;
    width: min(100%, 3.4rem);
}
.columnfive {
    width: 5%;
    width: min(100%, 5.7rem);
}
.columnten {
    width: 10%;
    width: min(100%, 11.4rem);
}
.columnfifteen {
    width: 15%;
    width: min(100%, 17rem);
}
.columntwenty {
    width: 20%;
    width: min(100%, 23rem);
}

.columntwentyfive {
    width: 25%;
    width: min(100%, 29rem);
}

.columnthirty {
    width: 30%;
    width: min(100%, 34rem);
}

.columnforty {
    width: 40%;
    width: min(100%, 46rem);
}


.columnfifty {
    width: 50%;
    width: min(100%, 57rem);
}

.columnsixty {
    width: 60%;
    width: min(100%, 69rem);
}
.columnseventy {
    width: 70%;
    width: min(95%, 80rem);
}

.columneighty {
    width: 80%;
    width: min(100%, 91rem);
}

.columnninety {
    width: 90%;
    width: min(100%, 103rem);
}




.autowidth
{
    width:auto;
}

.scale
{  /* scale eg an image to fit within the width of its container */
    max-width:100%;
    height:auto;
}

.hyperlink img
{ /* special required to resize the image generated within a hyperlink, which makes it difficult to resize */
    /*max-height:100%;*/
    /*width:auto;*/
    width:100%;
}

.clearboth
{
  	clear:both;
}

.centrecontents {
    margin: 0 auto; /* 6/10/15  A cleaner way to center a div?? Specifies zero top and bottom, left and right calculated by browser */
}

/* Alternative centering for contained text rather than contained controls */
.centretext
{
    text-align:center;
}

.lefttext
{  /*  7/3/18 */
    text-align:left;
}

/* Alternative centering for eg menus */
.centred  /* 22/11/10 Said to be an 'approved' way to centre content for CSS2 - but it ONLY works for fixed-width or 'block' content :-(  */
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;  /* some content will be inline by definition (eg ASP.NET Panel = div) - so we have to force it to block */
}

.floatright
{
    position:relative;
    float:right;
}

.floatleft
{
    position:relative;
    float:left;
}

.floatnone
{
    position:relative;
    float:none;
}


/*.topleft, #topleft */

.topleft {
    /* Vaguely position an item towards the top-left of a container (eg. for MP3 text) */
    /* Appearance depends on actual size of container  */

    position: relative;
    top: 16px;
    top: 1.6vh; /* 13/6/23 */
    /*    vertical-align:top;  use this instead of top:16px for actual 'top' positioning  */

    float: left;
    display: inline-block;
}





#P
{
    background-color:#0000FF;
}
/* --------------------------------------------------------------------------------------------------------------- */


/* Font effects -------------------------------------------------------------------------------------------------- */

/* Variable font sizes for scaling ------------------------------------------------------------------------------- */
/*  June 2023 Try to allow variable font scaling but make sure that the user can define the minimum font size for accessibility requirements */
/* 9/6/23 scaled font size, to try to fit fonts to the client screen size */

.font100 {
    font-size: 1.0rem; /* Browsers that do not support vw, "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.0vw, 110%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.0vw, 110%);
}

.font110 {
    font-size: 1.1rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.1vw, 120%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.1vw, 1200%);
}

.font120 {
    font-size: 1.2rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.2vw, 130%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.2vw, 130%);
}

.font130 {
    font-size: 1.3rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.3vw, 140%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.3vw, 140%);
}

.font140 {
    font-size: 1.4rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.4vw, 150%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.4vw, 150%);
}

.font150 {
    font-size: 1.5rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.5vw, 160%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.5rvw, 160%);
}

.font160 {
    font-size: 1.6rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.6vw, 170%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.6vw, 170%);
}

.font170 {
    font-size: 1.7rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.7vw, 170%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.7vw, 170%);
}

.font180 {
    font-size: 1.8rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.8vw, 190%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.8vw, 190%);
}

.font190 {
    font-size: 1.9rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.9vw, 200%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.9vw, 200%);
}

.font200 {
    font-size: 2.0rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(2.0vw, 210%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 2.0vw, 210%);
}

.font250 {
    font-size: 2.5rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(2.5vw, 260%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 2.5vw, 260%);
}

.font300 {
    font-size: 3.0rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(3.0vw, 310%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 3.0vw, 310%);
}

.font350 {
    font-size: 3.5rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(3.5vw, 360%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 3.5vw, 360%);
}

.font400 {
    font-size: 4.0rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(4.0vw, 410%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 4.0vw, 410%);
}

.font450 { /* June 23 */
    /*font-size: 100%; /* Browsers that support nothing much at all! */
    font-size: 4.5rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(4.5vw, 460%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 4.5vw, 460%);
}

.font500 {
    font-size: 5.0rem; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(5.0vw, 510%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 5.0vw, 510%);
}

/*  14/6/23 Time to retire these
.fontsmall {
    /*font-size: small;  8/6/23 
    /*  font-size: 1.0vw;  8/6/23 scaling font size, placed after older sizing for legacy browsers 
    /*font-size: 100%; /* 10/6/23 Keep to user's prefered font size
}

.fontmedium {
    /*  font-size: 1.2vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers 
    font-size: 1.3vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.
    font-size: max(100%, min(1.3vw, 140%)); /* Browsers that do not support the "clamp ()" function will take this value. 
}

.fontlarge {
    /*font-size: large;  8/6/23 
    /*  font-size: 1.5vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers 
    font-size: 1.5vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.
    font-size: max(100%, min(1.5vw, 160%)); /* Browsers that do not support the "clamp ()" function will take this value.
}
*/

.bold
{
    font-weight:bold;
}

.italic
{
    font-style:italic;
}

.title {
    /*font-size: large;  8/6/23 */
    /*  font-size: 5.0vw; 8/6/23 scaling font size, placed after older sizing for legacy browsers */
    /*font-size: max(100%, 1.5vw); /* 10/6/23 Keep to user's prefered font size */
    /* 13/6/23 */
    font-size: 1.5vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
    font-size: max(100%, min(1.5vw, 160%)); /* Browsers that do not support the "clamp ()" function will take this value. */
    font-size: clamp(100%, 1.5vw, 160%);
    font-weight: bold; /* TESTING */
}

.underline
{
    text-decoration:underline;
}
/* --------------------------------------------------------------------------------------------------------------- */

/* Background colours -------------------------------------------------------------------------------------------- */
.hintcolor
{
    background:#FFEFD5;  /* PapayaWhip */
}
.contrastcolor
{
    background:#FFE4C4;  /* Bisque */
}
.greenhighlight
{
    background:#CCFFCC;
}
.redhighlight
{
    background:#FF6666;
}
.bluehighlight
{
    background:#8888FF;
}
.yellowhighlight
{
    background:#FFFF44;
}
.nohighlight
{
    background:#FFFFFF;
}

/* Font/Foreground colours --------------------------------------------------------------------------------------- */
.darkblue
{
	color:#444466;
}
.fontblue
{
    color:Blue;
}
.fontred
{
    color:Red;
}
.fontgreen
{
    color:Green;
}
.pagecolour
{
    color:#444466;
}
.contrastcolour
{
    color:#660044;
}
/* --------------------------------------------------------------------------------------------------------------- */


/* Misc. ---------------------------------------------------------------------------------------------------------- */
/*  This works, but messes menu...
a:hover
{  /*  Converts links to show red and italic on mouse-over *//*
    color:red;
    font-style:oblique;
    font-family:Arial;
}
*/


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


#rightfloatcolumn
{
    border-style:double;
}

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


/*  1/11/17 Implement variable screen-size effects.                                                                */
/*  Employ a 'mobile-first' approach as some mobile browsers (and older PC browsers) won't recognise @media        */


/* ============= Mobile Screen ====================================================================================*/
/*  These are our default (mobile) sizes......... */


.mobileoff, .tabletoff { /* Allow some objects to be excluded from displays on eg mobile phones */
    display: none;
}


#twocolumn { /* show left column above main column, both full width  */
    padding-left: 0px; /* Left Column width */
}

    #twocolumn .column {
        width: 100%; /*The width is 100%, when the viewport is 40.5em or smaller*/
        /*width:auto; /*The width is 100%, when the viewport is 40.5em or smaller*/
        /*position: relative;  /* Allows us to move the columns into place */
        float: none;
    }

#threecolumn { /* holds the main page columns - left and right columns and a central main column  */
    /*  Use padding to make space for left and right columns  */
    padding-left: 0px; /* Left Column width */
    padding-right: 0px; /* Right Column width (if fixed column)*/
}

    #threecolumn .column { /* class for general behaviour for full-height columns in multi-column layouts */
        width: 100%; /*The width is 100%, when the viewport is 800px or smaller*/
        /*width:auto; /*The width is 100%, when the viewport is 800px or smaller*/
        /*position: relative;  /* Allows us to move the columns into place */
        float: none;
    }

#leftcolumn {
    width: 100%; /*The width is 100%, when the viewport is 800px or smaller*/
    /*width:auto; /*The width is 100%, when the viewport is 800px or smaller*/
    /*position:relative;  /*  covered by .column -*/
    /*width: 245px;          /* LC width - reduced by 5px to mimic 5px margin */
    right: 0px; /* Move to the left by LC width */
    float: none;
    margin-left: 0%; /* move to the left into position over container padding */
}

#leftfloatcolumn {
    /*  Floating column */
    float: none;
    width: 100%; /*The width is 100%, when the viewport is 800px or smaller*/
    /*width:auto; /*The width is 100%, when the viewport is 800px or smaller*/
}

#rightcolumn {
    /*position:relative;  /*  covered by .column */
    width: 100%; /*The width is 100%, when the viewport is 800px or smaller*/
    /*width:auto; /*The width is 100%, when the viewport is 800px or smaller*/
    /*  This moves the column to the right, but does not move it up - that has to be done through code order */
    /*left:100%; */
    left: 0%;
    /*  These next 2 cancel each other out...*/
    /* right: 150px;       /* LC width */
    /* margin-left:150px;  /* move to the right into position over container padding */
    margin-left: 0%; /* This magically allows column to float up! */
}

#rightfloatcolumn {
    /*  Floating column */
    /*position: relative;*/
    float: none;
    width: 100%; /*The width is 100%, when the viewport is 800px or smaller*/
    /*width:auto; /*The width is 100%, when the viewport is 800px or smaller*/
}


/* ============= Landscape Mobile or Tablet Screen ================================================================*/
/* Note: we can use pixels to measure the user screen size but this can prove awkward because some devices report  */
/* a misleading screen size.  An 'em' is basically a unit roughly equal to a single character size (typically      */
/* ~16px).  By using em to get an idea of scale we can allow for user or automatic browser zooming etc. and so get */
/* a hopefully more reliable way to accomodate changing screen size. We may also need to allow for landscape!      */
@media screen and (min-width: 40em) {

    .tabletoff { /* Allow some objects to be excluded from displays on eg mobile phones */
        display: none;
    }


    .mobileoff { /* Allow some objects to be excluded from displays on eg mobile phones */
        display: inline-block;
    }


    #twocolumn { /* show left column above main column, both full width  */
        padding-left: 250px; /* Left Column width */
        padding-left: 25vw; /* 13/6/23 Left Column width */
    }

        #twocolumn .column {
            position: relative; /* Allows us to move the columns into place */
            float: left;
        }

    #threecolumn { /* holds the main page columns - left and right columns and a central main column  */
        /*  Use padding to make space for left and right columns  */
        padding-left: 250px; /* Left Column width */
        padding-left: 25vw; /* 13/6/23 Left Column width */
        padding-right: 0px; /* Right Column width (if fixed column)*/
    }

        #threecolumn .column { /* class for general behaviour for full-height columns in multi-column layouts */
            position: relative; /* Allows us to move the columns into place */
            float: left;
        }

    #leftcolumn {
        /*position:relative;  /*  covered by .column -*/
        width: 245px; /* LC width - reduced by 5px to mimic 5px margin */
        width: 24.5vw; /* 13/6/23 Left Column width */
        right: 250px; /* Move to the left by LC width */
        right: 25vw; /* 13/6/23 Move to the left by LC width */
        /*  We can set column widths as %, but different browsers may calculate %age differently
        With IE we need 20% * 100/60 = 33.3%*/
        /*width: 33.33%;          /* LC width */
        /*right: 33.33%;          /* LC width */
        margin-left: -100%; /* move to the left into position over container padding */
        /*margin-left:-200px;  /* move to left - but also moves down...*/
    }

    #leftfloatcolumn {
        /*  Floating column */
        float: left;
        /*display:inline-block;  /* This doesn't seem to make any difference to behaviour... */
        width: 20%;
    }

    #rightcolumn {
        /*position:relative;  /*  covered by .column */
        /*width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
        width: auto; /*The width is 100%, when the viewport is 800px or smaller*/
        /*  This moves the column to the right, but does not move it up - that has to be done through code order */
        /*left:100%; */
        left: 0%;
        /*  These next 2 cancel each other out...*/
        /* right: 150px;       /* LC width */
        /* margin-left:150px;  /* move to the right into position over container padding */
        margin-left: 0%; /* This magically allows column to float up! */
    }

    #rightfloatcolumn {
        /*  Floating column */
        /*position: relative;*/
        float: none;
        /*width:100%; /*The width is 100%, when the viewport is 800px or smaller*/
        width: auto; /*The width is 100%, when the viewport is 800px or smaller*/
    }
}


/* ============= PC Browser =======================================================================================*/
@media screen and (min-width: 60em) {

    .mobileoff, .tabletoff { /* Allow some objects to be excluded from displays on eg mobile phones */
        display: inline-block;
    }


    #twocolumn { /* holds the main page columns - 200px left and a main column  */
        /*  Use padding to make space for left columns  */
        padding-left: 250px; /* Left Column width */
        padding-left: 25vw; /* 13/6/23 Left Column width */
        /*  We can set column widths as %, but different browsers calculate %age differently?
        With IE we need 20% * 100/60 = 33.3%*/
        /*padding-left: 20%;    /* LC width */
    }

        #twocolumn .column { /* class for general behaviour for full-height columns in multi-column layouts */
            position: relative; /* Allows us to move the columns into place */
            float: left;
        }

    #threecolumn { /* holds the main page columns - left and right columns and a central main column  */
        /*  Use padding to make space for left and right columns  */
        padding-left: 250px; /* Left Column width */
        padding-left: 25vw; /* 13/6/23 Left Column width */
        padding-right: 150px; /* Right Column width (if fixed column)*/
        padding-right: 15vw; /* 13/6/23 Right Column width (if fixed column)*/
        /*  We can set column widths as %, but different browsers calculate %age differently
        With IE we need 20% * 100/60 = 33.3%*/
        /*padding-left: 20%;    /* LC width */
        /*padding-right: 20%;   /* RC width */
    }

        #threecolumn .column { /* class for general behaviour for full-height columns in multi-column layouts */
            position: relative; /* Allows us to move the columns into place */
            float: left;
        }


    #leftcolumn {
        /*position:relative;  /*  covered by .column -*/
        width: 245px; /* LC width - reduced by 5px to mimic 5px margin */
        width: 24.5vw; /* 13/6/23 LC width - reduced by 5px to mimic 5px margin */
        right: 250px; /* Move to the left by LC width */
        right: 25vw; /* 13/6/23 Move to the left by LC width */
        /*  We can set column widths as %, but different browsers may calculate %age differently
        With IE we need 20% * 100/60 = 33.3%*/
        /*width: 33.33%;          /* LC width */
        /*right: 33.33%;          /* LC width */
        margin-left: -100%; /* move to the left into position over container padding */
        /*margin-left:-200px;  /* move to left - but also moves down...*/
    }

    #leftfloatcolumn {
        /*  Floating column */
        float: left;
        /*display:inline-block;  /* This doesn't seem to make any difference to behaviour... */
        width: 20%;
    }

    #rightcolumn {
        /*position:relative;  /*  covered by .column */
        width: 150px; /* RC width */
        width: 15vw; /* 13/6/23 RC width */
        /*  We can set column widths as %, but different browsers may calculate %age differently
        With IE we need 20% * 100/60 = 33.3%*/
        /*width: 33.33%;          /* LC width */
        /*right: 33.33%;          /* LC width */
        /*float:right;  /* Ignored here - set in .column */
        /*float:left;*/
        /*  This moves the column to the right, but does not move it up - that has to be done through code order */
        left: 100%;
        /*  These next 2 cancel each other out...*/
        /* right: 150px;       /* LC width */
        /* margin-left:150px;  /* move to the right into position over container padding */
        margin-left: -100%; /* This magically allows column to float up! */
    }

    #rightfloatcolumn {
        /*  Floating column */
        /*position: relative;*/
        float: right;
        width: 25%; /*100px;*/
        /*margin: 0px 0px 10px 10px;  */
        /*  Fixed column */
        /* width: 150px;          /* RC width */
        /* margin-right: -150px;  /* RC width */
        /*  We can set column widths as %, but different browsers calculate %age differently
        With IE we need 20% * 100/60 = 33.3%*/
        /*width: 33.33%;          /* RC width */
        /*margin-right: -33.33%;  /* RC width */
    }
}