/* comment goes in here
this is the basic widecombe site style sheet page - will grow over time
newly updated July 2017 for responsive design and bigger banner
*/
html {

    font-family: 'Open Sans', sans-serif;
    font-weight: 600; 
    font-size:100%;
    font-size:-moz-calc(85% + 0.25vw);
    font-size: -webkit-calc(85% + 0.25vw);
    font-size: calc(0.85em + 0.25vw);

}

body {
    background-color: #dbe5c8;
    /*
    margin:auto;
    */
    text-align:center;
    word-wrap:break-word;
    overflow-wrap: break-word;

    margin:0 0 0 0 ;
}
@media only screen and (max-width: 600px) {
    /*
    remove for now
    html{font-size:4vw;
    }
    */
}
/*
trying to get style into select/option elemenst
*/

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    padding: .25em;
    /*
    rgb(228, 233, 207);  #efefef
    */
    background:  #EDF9EA;
    border: 1;
    border-radius: 3px;
    /*
    padding: 1em 2em 1em 1em;
    */
    font-size: 1em;
}
select:focus {
    background-color: #ffef08;
}

.select-container {position:relative; display: inline;}
.select-container:after {content:""; width:0; height:0; position:absolute; pointer-events: none;}
.select-container:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: .3em;
    right: .75em;
    border-top: 8px solid black;
    opacity: 0.5;
}
select::-ms-expand {
    display: none;
}


/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {	text-align: right; }




div {
}
div#bodywrapper {
}
div#body2wrapper {
}
div#body3wrapper {
    position:relative;
}
div#mainwrapper {
    position:relative;
    /*
    overflow:hidden;
    */
    overflow-x:auto;
    height:1%;
}
div#header {
    /*
    background-image:url(images/wid_from_west2.jpg);
    */
    background-repeat:no-repeat;
    background-position:top;
    text-align:center;
}
div#ph {
    float:left;
}
div.clear {
    clear:left;
}
div.clear_both {
    clear:both;
}
div.clear_right {
    clear:right;
}
.form-group:focus-within {
    background-color: #ffef08;
    background: #ffef08;
    
}
ul {
    padding-left:2em;
    margin-left:1em;
    list-style-position: outside;
}
a {
    color: #006600;
    /*
    font-weight:600;
    */
    text-decoration: none;
}
a.longword {
    color: #006600;
    font-weight:600;
    text-decoration: none;
    display:inline-block; /* these are to deal with long url's that don't break across lines otherwise */
    word-break: break-all; 
}
a:link {
    color: #006600;
}
a:visited {
    color: #006600;
}
a:hover {
    /*
    color: #EEEE00; CC6600 FF9900 #660000 #996600;
    */
    color: #4E2E28;
    font-weight: 900;
    font-style: italic;
}
a:active {
    color: #4E2E28;
}
a:focus {
    background-color: #ffef08;
    background: #ffef08;
}
a:focus-within {
    background-color: #ffef08;
    background: #ffef08;
}


a.footer:link {
    color: #008000;
    font-weight:bold;
}
a.footer:visited {
    color: #336600;
    font-weight:bold;
}
a.footer:active {
    color: #4E2E28;
    font-weight:bold;
}
a.footer:hover {
    color: #4E2E28;
    font-weight:bold;
    text-decoration: none;
}
a.footer:focus {
    background-color: #ffef08;
}


a.banner {
    color: #660000;
    text-decoration: none;
}
a.banner:link {
    color: #660000;
    text-decoration: none;
}
a.banner:visited {
    color: #660000;
    text-decoration: none;
}
a.banner:hover {
    color: #4E2E28;
    text-decoration: none;
}
a.banner:active {
    color: #4E2E28;
    text-decoration: none;
}
a.banner:focus {
    background-color: #ffef08;
}
a.recent {
    color: #333300;
    font-size: 0.9em;
    text-decoration: none;
}
a.recent:link {
    color: #333300;
}
a.recent:visited {
    color: #333300;
}
a.recent:hover {
    color: #4E2E28;
    font-style: italic;
}
a.recent:active {
    color: #4E2E28;
}
a.recent:focus {
    background-color: #ffef08;
}
.quicklinx {
    color: #660000;
    font-size: 1.2em;
    font-weight:bold;
    padding: 5px 5px 5px 5px;
    text-decoration: none;
}
a.quicklinx:link {
    color: #660000;
}
a.quicklinx:visited {
    color: #660000;
}
a.quicklinx:hover {
    color: #4E2E28;
}
a.quicklinx:active {
    color: #4E2E28;
}
a.quicklinx:focus {
    background-color: #ffef08;
}
a.history:link {
    color: #FFE600;
    font-weight:bold;
}
a.history:visited {
    color: #FFE600;
    font-weight:bold;
}
a.history:hover {
    color: #FEE5AC;
    font-weight:bold;
}
a.history:active {
    color: #FEE5AC;
    font-weight:bold;
}
a.history:focus {
    background-color: #ffef08;
}

p.quicklinx {
    color: #666600;
    font-family: "Century Gothic";
    /*
    font-size: 14pt;
    */
    font-size: 1.2em;
    font-weight:bold;
}
td.quicklinx {
    width: 100%;
    margin-top: 1; 
    margin-bottom: 1;
    vertical-align:central;
    text-align: center;
    color: #FEE5AC;
    font-weight:bold;
    font-family: "Century Gothic";
    font-size: 14pt;
}

h4.recent {
    color: #FFE600;
    font-weight:bold;
    font-size: 10pt;
}
li.recent {
    color: #FF9900;
}
p.news {
    color: #00611C;
    padding-top: 5px;
    padding-bottom: 5px;
}
td.news {
    color: #000000;
    font-weight:normal;
}
a.news:link {
    color: #FFFFFF;
    font-weight:bold;
}
a.news:visited {
    color: #FFFFFF;
    font-weight:bold;
}
a.news:active {
    color: #EEAD0E;
    font-weight:bold;
}
a.news:hover {
    color: #EEEE00;
    font-weight:bold;
}

.small {
    font-size: 0.8em;
}
.large {
    font-size: 1.2em;
    font-weight:bolder;
}
.italic {
    font-style: italic;
}
/*
p {
    font-size: 1.0em;
}
*/
p.top {
    vertical-align:-10px;
}
p.block {
    font-size: 1.2em;
}
p.nospace {
    margin-top: 0; 
    margin-bottom: 0;
}
p.poem {
    margin-top: 0; 
    margin-bottom: 0;
    text-indent: 20%;
    text-align: left;
}
p.poem_line1st {
    margin-top: 1; 
    margin-bottom: 0;
    text-indent: 20%;
    text-align: left;
}
p.poem_line1st_indent {
    margin-top: 1; 
    margin-bottom: 0;
    text-indent: 16.7%;
    text-align: left;
}
p.poem_line2_indent {
    text-indent: 20%;
    text-align: left;
    margin-top: 0; 
    margin-bottom: 0;
}
p.poem_line2 {
    text-indent: 16.7%;
    text-align: left;
    margin-top: 0; 
    margin-bottom: 0;
}
p.poem_center {
    margin-top: 0; 
    margin-bottom: 0;
    text-align: center;
}
p.poem_center_line1st {
    margin-top: 1; 
    margin-bottom: 0;
    text-align: center;
}
.nospace {
    margin-top: 0; 
    margin-bottom: 0;
    padding-top: 0; 
    padding-bottom: 0;
}
.divlbasic {
    float:left;
    font-size: 10pt;
}
div.nicepanel {
    border: 0.2em solid ;
    margin: 1em;
    background:#EDF9EA;
    padding: 1em;
}
hr.basic {
    margin-top: 0;
    margin-bottom: 0px;
    padding-top: 0;
    height:0.2em;
}
hr.basic_bottom_5 {
    margin-top: 0;
    margin-bottom: 5px;
    padding-top: 0;
    height:0.2em;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto 
}
img.displayed {
    display: block;
    max-width: 100%;
    width:auto;
    height: auto;
    margin-left: auto;
    margin-right: auto 
}
/*
image alignment for where to stay pages
*/
img.img_inline {
    display: inline;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px #888888;
}
.img_center {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px #888888;
}
.img_center_plain {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
img.img_left {

    float:left;

    max-width: 100%;
    height: auto;
    margin: 0px 10px 10px 10px;
    box-shadow: 5px 5px 5px #888888;
    vertical-align:text-top;
    border:0;
}
img.img_left_plain {
    float:left;
    max-width: 100%;
    height: auto;
    margin: 2px;
    border: 1px solid black;
}
img.img_left_really_plain {
    float:left;
    max-width: 100%;
    height: auto;
    margin: 2px;
    border: 0px;
}
img.img_left_middle {
    float:left;
    max-width: 100%;
    height: auto;
    margin: 10px;
    box-shadow: 5px 5px 5px #888888;
    vertical-align:middle;
}
img.img_right {

    float:right;

    max-width: 100%;
    height: auto;
    margin: 0px 10px 10px 10px;
    box-shadow: 5px 5px 5px #888888;
    vertical-align:text-top;
}
img.img_right_plain {
    float:right;
    max-width: 100%;
    height: auto;
    margin: 2px;
    border: 1px solid black;
}
img.img_right_really_plain {
    float:right;
    max-width: 100%;
    height: auto;
    margin: 2px;
    border: 0px;
}
img.img_right_middle {
    float:right;
    max-width: 100%;
    height: auto;
    margin: 10px;
    box-shadow: 5px 5px 5px #888888;
    vertical-align:middle;
}
video.center_plain {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.valign_parent {
    display: table;
    width: 100%;
    border-spacing: 0;

}
.table_parent {
    display: table;
    width: 100%;
border-collapse: separate;
  border-spacing: 1em;
}
.valign_row {
    display:table-row;
    padding: 0.5em;
}
.valign_child {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
}
.valign_child_right {
    display: table-cell;
    width: 50%;
    text-align: right;
}
.valign_child_3 {
    display: table-cell;
    width: 33%;
    vertical-align: middle;
    padding: 0 5px 0 5px;
}
.valign_child_4 {
    display: table-cell;
    width: 25%;
    vertical-align: middle;
}
.valign_child_5 {
    display: table-cell;
    width: 12.5%; /* used for spacing */
    vertical-align: middle;
}
.valign_child_3_right {
    display: table-cell;
    width: 33%;
    text-align: right;
}
.inline_block {
    display: inline-block; /* will use center text align from parent */
}
td {
    vertical-align:middle;
}
.right {
    text-align:right;
}
.tbanner {
    width: 100%;
    margin-top: 0; 
    margin-bottom: 0;
    font-size: 0.9em;
    text-align: center;
}
.head {
    font-family: "Century Gothic";
    font-size: 2em;
    font-weight:bold;
    color: #FFFFFA;
    width:650px;
    text-align: center;
}
li {
    font-size: 0.9em;
}
.pft-directory {
    font-size: 1em;
}
input {
    font-size:1em;
}
input:focus {
    background: #ffef08;
}

textarea {
    font-size:1em;
    width:100%;
    outline: none;
}
/*
.pft-choose {
        font-size: 10pt;
                font-style: italic;
}
.pft-file {
                font-style: italic;
}
.pft-filesmall {
                font-style: italic;
        font-size: 8pt;
}
*/
.h3center {
    /*
    font-family: "Century Gothic";
    font-size: 18pt;
    */
    font-size: 1.6em;
    text-align: center;
    color: #FFFFFA;
}
.h3centerbanner {
    /*
    font-family: "Perpetua";
    font-size: 24pt;
font: italic 40px 'Lucida Calligraphy';
    */
    font-family: "Georgia";
    margin:3px 0px 3px 0px;
    /*
    font-size: 24pt;
    */
    font-size: 2.0em;
    font-variant:small-caps;
    text-align: center;
    color: #660000;
    /*
    margin:15px 0px 15px 0px;
    */
    /*
    padding:15px 0px 15px 0px;
    position:fixed;
    */
}
.hcenter {
    text-align: center;
}

.justify {
    text-align: center;
  word-spacing: -1em;
}
 
.justify:after {
  content: "";
  display: inline-block;
    text-align: center;
  width: 100%;
}
.plegend {
    font-family: "Bookman Old Style";
    margin:0;
    font-size: 1.6em;
    text-align: center;
    color: #008000;
}
.ptracey {
    font-family: "Candara";
    margin:5;
    font-weight: normal;
    font-size: 1.2em;
    text-align: center;
}
.ptraceyhead {
    font-family: "Papyrus";
    font-style:italic;
    margin:5;
    font-size: 1.4em;
    text-align: center;
}
.ptraceyhead2 {
    font-family: "Georgia";
    font-variant:small-caps;

    margin:5;
    font-size: 1.6em;
    text-align: center;
}

.pcopyright {
    margin:0;
    font-size: 1.0em;
    text-align: center;
}
.pfooter {
    margin-top: 0; 
    margin-bottom: 0;
    font-size: 0.9em;
    text-align: center;
}
.pbanner {
    margin-top: 2px; 
    margin-bottom: 2px;
    font-size: 1.0em;

    text-align: center;
}
.pcenter {
    font-size: 1.0em;
    text-align: center;
}
.center_text {
    text-align: center;
}
.pjustify {
    font-size: 1.0em;
    text-align: justify;
}
.pheader {
    font-size: 1.2em;
    color: #008000;
    text-align: center;
}
.pbannerheader {
    /*
        position:fixed;
    */
    margin:3px 0px 3px 0px;
    /*
    font-family: "Candara";
    font-family: "Verdana";
    */
    /*
    font-size: 18pt;
    */
    font-size: 1.6em;
    font-weight:bold;
    color: #660000;
    /*
     color: #FEE5AC; 
     color: #333300;
     text-shadow:
         -1px -1px 0 #000,
         1px -1px 0 #000,
         -1px 1px 0 #000,
         1px 1px 0 #000;
    */
    text-align: center;
}
.pbannersubheader {
    /*
    margin:5px;
    */
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    /*
    font-family: "Century Gothic";
    */
    /*
    font-size: 16pt;
    */
    font-size: 1.4em;
    /*
    color: #FFFFFF;  #006400
    */
    color: #660000;
    font-weight:bold;
    text-align: center;
}
/*
.recent {
    font-family: Verdana;
    font-size: 8pt;
    font-color: white;

}
*/
.tablemain {
    border-style: none;
    border-spacing: 1px 1px;
    /*
            background-color: #CCD9B3;
    */
    width: 100%;
}
.tdwhatson {
    background-color: edf9ea;
}
.tdhist {
    font-size: 1em;
    background-color: #80FF80;
}
.tdborder {
    /*
    top right bottom left
        border-color: #600;
    */
    border-width: 0 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 0 5px 0 5px;
}


button {
    font-size:1em;
}

button:focus {
    background-color: #ffef08;
}
/* accessibility */

.access_logo:focus {
    padding:0;
    border:3px solid;
    border-color: #ffef08;
    border-style: ridge;
}
.access_logo {
    padding:0;
    border:3px solid;
    border-color: White;
    border-style: ridge;
}

button.accessibility {
    font-size:1.25em;
    padding: 2.5%;
    
}
/* PHP File Tree Default Theme

        By Cory LaViska (http://abeautifulsite.net/)
        Featuring the Silk Icon Set from famfamfam (http://www.famfamfam.com/lab/icons/silk/)

*/

.php-file-tree {
    /*
    font-family: Georgia;
    */
    font-size: 1em;
    letter-spacing: .1em;
    /*
    line-height: 1.5;
    */
}

.php-file-tree A {
    color: #000000;
    text-decoration: none;
}

.php-file-tree A:hover {
    color: #666666;
}

.php-file-tree .open {
    font-style: italic;
}

.php-file-tree .closed {
    font-style: normal;
}

.php-file-tree .pft-directory {
    list-style-image: url(images/directory.png);
}
.pft-choose {
    font-size: 1em;
    font-style: italic;
    font-weight:bolder;
}

/* Default file */
.php-file-tree LI.pft-file { list-style-image: url(images/file.png); }
/* Additional file types */
/*
.php-file-tree LI.ext-css { list-style-image: url(images/css.png); }
.php-file-tree LI.ext-doc { list-style-image: url(images/doc.png); }
.php-file-tree LI.ext-exe { list-style-image: url(images/application.png); }
.php-file-tree LI.ext-gif { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-fla { list-style-image: url(images/flash.png); }
.php-file-tree LI.ext-htm { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-html { list-style-image: url(images/html.png); }
.php-file-tree LI.ext-jpg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-jpeg { list-style-image: url(images/picture.png); }
.php-file-tree LI.ext-js { list-style-image: url(images/script.png); }
.php-file-tree LI.ext-log { list-style-image: url(images/txt.png); }
.php-file-tree LI.ext-pdf { list-style-image: url(images/pdf.png); }
.php-file-tree LI.ext-php { list-style-image: url(images/php.png); }
.php-file-tree LI.ext-txt { list-style-image: url(images/txt.png); }
*/
/* This CSS is used for the Show/Hide functionality. */
.more {
    display: none;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666; 
    margin-bottom: 10px;
}
a.showLink, a.hideLink {
    text-decoration: none;
    color: #008000;
    padding-left: 8px;
    background: transparent url(/images2/down1.gif) no-repeat left; }
a.hideLink {
    background: transparent url(/images2/up1.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
    border-bottom: 1px dotted #36f; }



/* This CSS is used for the MENU Show/Hide functionality. Different behaviour to normal show/hide */
.moreM {
    display: none;
    /* border-top: 1px solid #666;
    width:120px; 
    height:20px;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
    */ 
}
a.showLinkM, a.hideLinkM {
    text-decoration: none;
    color: #008000;
    padding-left: 0px;
    background-color: rgb(228, 233, 207);
    width:100%;
    /*
    max-width:173px;
    */
    /*
    width:148px;
    */
    /*
    background: transparent url(down.gif) no-repeat left; 
    */
}
a.hideLinkM {
    /*
       background: transparent url(up.gif) no-repeat left; 
    */
}
a.showLinkM:hover, a.hideLinkM:hover {
    /*
    border-bottom: 1px dotted #36f; 
    */
}

/*
archive pages - new design - avoid tables if poss
#=id
*/
.arch_table {
    display: table;
    border-spacing: 5px;
}
/*
for nice table layout not using tables - that's the idea
*/
.arch_table2 {
    display: table;
    border-spacing: 5px;
    margin:auto;
    width:80%}
.arch_table_hdr {
    display: table-header-group;
    background:#F1FCF9;
}
.arch_row {
    display: table-row;
    background:#F1FCF9;
}
.arch_cell {
    display: table-cell;
    padding: 5px;
    border: thin solid black;
    width: 350px;
}
.arch_cell2 {
    display: table-cell;
    padding: 5px;
    border: thin solid black;
    width:50%;
}
.arch_element {
    font-family: Arial;
    font-size: 10pt;
    border: 1px solid ;
    margin: 5px;
    background:#F1FCF9;
    padding: 5px;
}
div.arch1 {
    border: 1px solid ;
    margin: 0px;
    background:#F1FCF9;
    padding: 5px;
    width: 800px;

}
.arch2 {
    position: relative;
    border: 0px solid ;
    margin: 0px;
    padding: 5px;
    float: left;
    width: 350px;
}

.arch3 {
    position: relative;
    border: 0px solid ;
    margin: 0px;
    padding: 5px;
    float: right;
    width: 350px;
}
/*
blockquote old background #FAFAFA 
*/
blockquote {
    margin: 15px; 	padding: 0 0 0 60px;  	
    background: #dbe5c8 url("quote6.jpg") no-repeat 3px 5px; 
    border: 1px solid #eee; 
    border-radius: 25px;
    font: bold 1.2em/1.5em 'Trebuchet MS', Tahoma, sans-serif; 
    color: #666666;	
    opacity: 0.75;
}
.blockquote2 {
    display:block;
    width:50%;
    margin-left: auto;
    margin-right: auto;
    /*
    margin: 15px; 	padding: 20px;  
    */
    padding: 20px; 
    background: #dbe5c8 url("/images4/peter_rennells_pic3.jpg"); 
    background:contain;
    background-repeat: repeat;

    border: 1px solid #eee; 
    border-radius: 5px;
    font: italic 1.0em/1.2em 'Trebuchet MS', Tahoma, sans-serif; 
}
.blockquote2x {
    display:block;
    width:50%;
    margin-left: auto;
    margin-right: auto;
    /*
    margin: 15px; 	padding: 20px;  
    */
    padding: 20px; 
    background: #dbe5c8 url("/images4/peter_rennells_pic3.jpg"); 
    background:contain;
    background-repeat: repeat;

    border: 1px solid #eee; 
    border-radius: 5px;
    font: italic 1.0em/1.2em 'Trebuchet MS', Tahoma, sans-serif; 
}
.blockquote3 {
    margin: 15px; 	
    padding: 0 12 0 12px;  	
    background-color: #dbe5c8; 
    border: 1px solid #eee; 
    border-radius: 5px;
    opacity: 0.75;
}
/* class for semi-transparent image */
.opaque1 {
    background-image: url("/images5/banner_2_opaque2.png");
      background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}
/* start - new table */
/* basic table should spread across width - prefer to use display div table and table-cell*/
table {
/*
    width:90%;
    */
   margin-left:5%; 
    margin-right:5%;

}
.form {

    width:50%;
}
table.normal {
    border-collapse: collapse;
    margin: 1.5em;	
}
th strong {
    color: #fff;
}
th.normal {
    background: #657751;
    height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    color: #FFF;
    text-align: left;
    border-left: 1px solid #D68686;
    border-bottom: solid 2px #FFF;
}
.col_width_10 {
    width:10%;
}
.col_width_15 {
    width:15%;
}
.col_width_20 {
    width:20%;
}
.col_width_25 {
    width:25%;
}
.col_width_30 {
    width:30%;
}
tr.normal {
    height: 30px;
}
td.normal {
    padding-left: 1em;
    padding-right: 1em;
    vertical-align: middle;
    border-left: 1px solid #E8E8E8;
    border-bottom: 1px solid #DFDFDF;
}
td.first,th.first {
    border-left: 0px;
}
tr.row-a {
    background: #F8F8F8;
}
tr.row-b {
    background: #EFEFEF;		
}
tr.normal:nth-child(even) {
    background: #F8F8F8;
}

tr.normal:nth-child(odd) {
    background: #F2F5EB;
}/* end - table #EFEFEF #E9EFDE */

/*
new three column attempts #dbe5c8
*/
.maincontainer{
    position: relative;
    /*
    overflow:hidden;
    overflow-x:auto;
    */
    /*
    height:1%;
    */
    height:100%;
}

.contentwrapper{
    position: relative;
    height:100%;
}
/*
1 is for the heading banner which is 3 olumns with left and right = 100 pixels and centre is what is left
might like to look at this again as treated differently by chrome and IE within our other divs
*/
.contentcolumn{
    background-color: #dbe5c8;
    /*
    position: sticky;
    */
    /*
    overflow:hidden;
    */
    overflow-x:auto;
    height:1%;
    /*
    margin: 0 100px 0 100px; 
    */
    /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
/* left column not used */
.leftcolumn{
    float: left;
    width: 100px; /*Width of left column in pixel*/
    /*
    margin-left: -900px;  */  /*Set margin to that of -(MainContainerWidth)*/
}
/* right column not used */

.rightcolumn{
    /*
    float: left;
    */
    float: right;
    width: 120px; /*Width of right column*/
}

.pageheading{
    margin: 0 0px 0 0px; 
    background-color: #dbe5c8;
    text-align:center;
    /*
    margin: 100px 0px 0 0px;*/  /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
.pagemenulinks{
    display:block;
    background-color: #dbe5c8;
    text-align:center;
    /*
    overflow:hidden;
    height:1%;
    */
    margin: 5px 0px 0 0px;
}
.menuicon {
    height: 40px; 
    width: 60px;   
    background-image: url('/images/menuicon.png');
    background-repeat:no-repeat;
    background-size: contain;

}

/*
2 is for the main body area on home page which is 3 columns with left = 150 pixels and right = 200 pixels and centre is what is left


*/
.contentcolumn2{
    background-color: #dbe5c8;
    display: table; /* Make the container element behave like a table */
    position: relative; 
    /*
    overflow:hidden;
    */
    overflow-x:auto;
    /*
    height:1%;
    */
    height:100%;
    top:auto;
    /*
    margin: 200px 0px 0 0px; */ /*Margins for content column - pushing down from top. */
    border-collapse:collapse;
    border-spacing: 1em 0;
    text-align:left;
    vertical-align:top;
}
@media only screen and (min-width: 601px) {
    /* menu icon controlled from lower down */
    .leftcolumn2{
        display: table-cell; /* Make elements inside the container behave like table cells */
        width:20%;
        max-width:200px;
        padding:1em 0.5em 0 1em;
        vertical-align:top;
    }
    .midcolumn2{
        display: table-cell; /* Make elements inside the container behave like table cells */
        padding:0.5em 1em 0 1em;
        vertical-align:top;
    }

    .rightcolumn2{
        display: table-cell; /* Make elements inside the container behave like table cells */
        width: 20%;
        max-width:200px;
        padding:0.5em 1em 0 1em;
        vertical-align:top;
    }
}
/* If the browser window is smaller than 600px, alter the columns behaviour a bit */
@media only screen and (max-width: 600px) {
    .leftcolumn2 { 
        display: none;
        width: 100%;
        max-width:100%;
    }
    .midcolumn2 { 
        display: block;
        width: 100%;
    }
    .rightcolumn2 { 
        display: block;
        width: 100%;
        max-width:100%;
    }
}
/*
3 is for the main body area on other than the home page which is really 2 columns with left 150 pixels and centre is what is left
but to keep life simple i have included the 3rd column but with token 11 pixels

margins: top right bottom left
*/
/* USED FOR NON HOME PAGES 2017*/
.contentcolumn3{
    display:table;
        min-width:100%;
    position: relative; 
    overflow-x:auto;
    height:1%;
    background-color: #dbe5c8;
    border-collapse:collapse;
    border-spacing: 1em 0;
    text-align:left;
    vertical-align:top;
}

@media only screen and (min-width: 601px) {
    .leftcolumn3{
        display: table-cell; /* Make elements inside the container behave like table cells */
        width:20%;
        max-width:200px;
        vertical-align:top;
        padding:1em 0.5em 0 1em;
    }
    .innertube{
        /* USED FOR NON HOME PAGES 2017*/
        display: table-cell; /* Make elements inside the container behave like table cells */
        width:80%;
        /*
        min-width:80%;
        */
        background-color: #dbe5c8;
        padding:0.5em 1em 0 1em;
    }
    .menuicon{
        display:none; /* display icon only on small screens*/
    }

}
@media only screen and (max-width: 600px) {
    .leftcolumn3{
        display: none; /* initially suppress menu column but menuicon will open it */
        width:100%;
        max-width:100%;
        vertical-align:top;
    }
.contentcolumn3{
    display:block; /* on small screen */
        min-width:100%;
    font-size: calc(0.85em + 0.20vmin);
    position: relative; 
    overflow-x:auto;
    height:1%;
    background-color: #dbe5c8;
    border-collapse:collapse;
    border-spacing: 1em 0;
    text-align:left;
}
    .innertube{
        /* USED FOR NON HOME PAGES 2017*/
        display: block; /* on small screen */
        background-color: #dbe5c8;
    }
    .menuicon{
        display:block; /* display icon on small screens*/
    }

}

.contentcolumnfooter{
    position: relative; 
    width:100%;
    overflow:hidden;
    height:1%;
    background-color: #dbe5c8;
    top:auto;
}

/* not wanted anymore - non-home pages are 2 columns */
.rightcolumn3{
    float: right;
    width: 11px; /*Width of right column*/
    /*
    margin-left: -11px; */ 
    /*Set left margin to -(RightColumnWidth)  */
}
/*
4 is for the main body area on other than the home page where there is no left column in use
but to keep life simple i have included the 1st and 3rd column but with token 11 pixel
*/
.contentcolumn4{
    margin: 0 11px 0 11px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

/* slider slider */
@-webkit-keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
@-moz-keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
@-o-keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
#slider { overflow: hidden; }
#slider figure img { width: 20%; float: left; }
#slider figure { 
    position: relative;
    /*
    top:50px;
    */
    width: 500%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    -webkit-animation: 30s slidy infinite; 
    -moz-animation: 30s slidy infinite; 
    -o-animation: 30s slidy infinite; 
    -ms-animation: 30s slidy infinite; 
    animation: 30s slidy infinite; 
    /*
    z-index: -1;
    */
}
#nonslider { overflow: hidden; }

#nonslider figure img { width: 100%; float: left; }

#nonslider figure { 
    /*
  position: fixed ;
    
    non-slider slots in where slider is but is not animated and is therefore not a slider
    */
    position: relative;
    /*
    top:50px;
    */
    width: 100%;
    margin: 0;
    left: 0;
    text-align: left;
    font-size: 0;
    /*
    z-index: -1;
    */
}
/* mailchimp styling */

	#mc_embed_signup{
	    /*
	    background:#fff; 
	    */
	    clear:left; 
	    font:1.2em; 
	    
	}
.indicates-required {
    font-size: 0.9em;
    
}

/* figure */
figure {
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
  margin: 0.5em;
  padding: 0.5em;
}
.f_right {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
  margin: 0.5em;
  padding: 0.5em;
}
.f_left {
  float: left;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
  margin: 0.5em;
  padding: 0.5em;
}
/* For side by side images. 50 = two images. */
.f_left_50 {
  float: left;
  width: 50%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
  margin: 0.5em;
  padding: 0.5em;
}
.f_right_50 {
  float: right;
  width: 50%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
  margin: 0.5em;
  padding: 0.5em;
}
figure_center {
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: 0.8em;
  text-indent: 5;
  border: none;
}

figcaption {
  padding: 0.5em;
  /*
  border: thin silver solid;
  border-bottom: none;
  */
}


/* menus */
.menuDiv {border-style:solid;border-width:1px;border-color:#000;width:100%;}
p.menu1 {width:100%;margin:0;padding:0;}
p.menu1  a, 
p.menu1  a:visited {display:block;width:100%;  height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;border-style:solid;border-width:1px;background-color: #EDF9EA;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
p.menu1  a:hover {display:block;width:100%;  height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:#dfff80;font-size:0.9em;border-style:solid;border-width:1px;text-shadow:none;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
p.menu1  a:focus {display:block;width:100%;  height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;font-size:0.9em;border-style:solid;border-width:1px;background-color: #FFEF00;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
ul.menu1 {list-style-type:none;margin:0;padding:0;background-color: rgb(228, 233, 207);}
ul.menu1 li a, 
ul.menu1 li a:visited {display:block;margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #EDF9EA;overflow:hidden;text-overflow:ellipsis;}
ul.menu1 li a:hover {display:block; margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em); height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}
ul.menu1 li a:active {display:block;margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #FFEF00;overflow:hidden;text-overflow:ellipsis;}
ul.menu1 li a:focus {display:block;margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:bold;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #FFEF00;overflow:hidden;text-overflow:ellipsis;}
ul.menu11 {list-style-type:none;margin:0;padding:0;background-color: #EDF9EA;}
ul.menu11 li a, 
ul.menu11 li a:visited {display:block;margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #EDF9EA;overflow:hidden;text-overflow:ellipsis;}
ul.menu11 li a:hover {display:block; margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em); height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}
ul.menu11 li a:active {display:block;margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #FFEF00;overflow:hidden;text-overflow:ellipsis;}
ul.menu11 li a:focus {display:block;margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em);  height:1.5em; line-height: -moz-calc(1.5em - 0.1em);line-height: -webkit-calc(1.5em - 0.1em);line-height:calc(1.5em - 0.1em); text-decoration:none; color:#000;font-weight:bold;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #FFEF00;overflow:hidden;text-overflow:ellipsis;}

.clsCMOn {
    font-size: 1.2em;
    padding: 2px 4px;
    color: black;
}
.clsCMOver {
    font-size: 1.2em;
    padding: 2px 4px;
    color: black;
}
/*
new (2013) History Group menu styles - see also menu1 and menu11 styles for new menus (non-Histoey Group)
which will at some point soon be made the same

old color background #E2E9E0
the 21 menu has a different background colour to the 11 menu - small difference only
not added active to these stylers - active doesnt appear to do much in the browser
*/


.gif1 {
    height:90%;
    float:right;
    border-spacing:0;
    border:0;
}
p.menu2 {width:100%;margin:0;padding:0;}
p.menu21 {margin:0;padding:0;}
p.menu2  a,
p.menu2  a {display:block; width:100%;height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;border-style:solid;border-width:1px;background-color: #EDF9EA;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
p.menu2  a:hover {display:block; width:100%; height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;border-style:solid;border-width:1px;text-shadow:none;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
p.menu2  a:focus {display:block; width:100%; height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:rgb(255, 239, 8);font-size:0.9em;border-style:solid;border-width:1px;text-shadow:none;padding:0 0 0 0;overflow:hidden;text-overflow:ellipsis;}
p.menu21  a,
p.menu21  a {display:block; width:100%; height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;border-style:solid;border-width:1px;background-color: #c0dca3;}
p.menu21  a:hover {display:block; width:100%; height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;border-style:solid;border-width:1px;text-shadow:none;}
p.menu21  a:focus {display:block; width:100%; height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:rgb(255, 239, 8);font-size:0.9em;border-style:solid;border-width:1px;text-shadow:none;}
ul.menu2 {list-style-type:none;margin:0;padding:0;background-color: #e4e9cf;}
ul.menu2 li a,
ul.menu2 li a:visited {display:block;margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #EDF9EA;overflow:hidden;text-overflow:ellipsis;}
ul.menu2 li a:hover {display:block; margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}
ul.menu2 li a:focus {display:block; margin:0;padding-left:1em;width: -moz-calc(100% - 1em);width: -webkit-calc(100% - 1em);width:calc(100% - 1em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:rgb(255, 239, 8);font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}
ul.menu21 {list-style-type:none;margin:0;padding:0;background-color: #cde3b5;}
ul.menu21 li a,
ul.menu21 li a:visited {display:block;margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em); width:calc(100% - 2em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:normal;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;background-color: #cde3b5;overflow:hidden;text-overflow:ellipsis;}
ul.menu21 li a:hover {display:block; margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:#d9eac8;font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}
ul.menu21 li a:focus {display:block; margin:0;padding-left:2em;width: -moz-calc(100% - 2em);width: -webkit-calc(100% - 2em);width:calc(100% - 2em); height:1.5em; line-height: -moz-calc(1.5em - 1px);line-height: -webkit-calc(1.5em - 1px);line-height:calc(1.5em - 1px); text-decoration:none; color:#000;font-weight:bold;background:rgb(255, 239, 8);font-size:0.9em;font-style:italic;border-style:solid;border-width:1px;overflow:hidden;text-overflow:ellipsis;text-shadow:none;}

/* rgb(255, 239, 8) is bright yellow #ffef08 focus colour
/* #d9eac8 very light green hover colour
/* #cde3b5 - light green level 2 list colour
/* #e4e9cf level 1 list colour

/* Don't think the below is used anywhere
/* Modal Content */
/* The Modal (background) W3C*/
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
	.modal.left .modal-dialog,
	.modal.right .modal-dialog {
		position: fixed;
		margin: auto;
		width: 320px;
		height: 100%;
		-webkit-transform: translate3d(0%, 0, 0);
		    -ms-transform: translate3d(0%, 0, 0);
		     -o-transform: translate3d(0%, 0, 0);
		        transform: translate3d(0%, 0, 0);
	}

	.modal.left .modal-content,
	.modal.right .modal-content {
		height: 100%;
		overflow-y: auto;
	}
	
	.modal.left .modal-body,
	.modal.right .modal-body {
		padding: 15px 15px 80px;
	}

/*Left*/
	.modal.left.fade .modal-dialog{
		left: -320px;
		-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
		        transition: opacity 0.3s linear, left 0.3s ease-out;
	}
	
	.modal.left.fade.in .modal-dialog{
		left: 0;
	}
        
/*Right*/
	.modal.right.fade .modal-dialog {
		right: -320px;
		-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
		   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
		     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
		        transition: opacity 0.3s linear, right 0.3s ease-out;
	}
	
	.modal.right.fade.in .modal-dialog {
		right: 0;
	}

/* ----- MODAL STYLE ----- */
	.modal-content {
		border-radius: 0;
		border: none;
	}

	.modal-header {
		border-bottom-color: #EEEEEE;
		background-color: #FAFAFA;
	}