/* for HTML5 MACC pages
edited from mid September 2018
latest 2022-05-01
CASCADES SCREEN DIMENSIONS AS:
FOR VERY SHORT SCREENS
EG SMALL IPHONES IN LANDSCAPE
(max-height: 319px) and (min-width: 416px) {
FOR SHORT SCREENS and MANY PHONES IN LANDSCAPE
(max-height: 416px) {
FOR TALL & NARROW SCREENS
EG SMALL IPHONES IN PORTRAIT
(min-height: 399px) and (min-width: 260px) and (max-width: 415px) {
iPhone 4+ Portrait or Landscape
(max-width: 260px), (max-width: 415px) and (max-height: 399px) {
print {
*/
/* viewport code changed 2025-02-16 */
@-ms-viewport {
/* width: device-width */;
width: 100vw;
}
@viewport {
/* width: device-width */;
width: 100vw;
}
/* Set the body width to the viewport width */
/* but checking says device-width is not a valid value for width*/
header, section, footer, aside, nav, main, article, figure {
display: block;}
/* for old browsers */
* {
box-sizing: border-box;}
body {
background-color: #FFFFFF;
font-family: normal Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
/*width: 100%;*/
max-width: 1200px;
/*for RHS menu within headerwidth */
margin: auto;
}
/* html code added 2025-02-16 */
html
{
/*font-size: 2vw; 2% of the viewport width makes most things grow with window width */
width: 100vw;
/* Set the body width to the viewport width */
margin: 0;
padding: 0;
/* Remove default margins */
font-size: 16px;
overflow-x: hidden;
/* Hide horizontal scrollbar */
line-height: 1.15; /* Improve readability */
-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
}
div.all {
border-style: none;
background-color: white;
max-width: 1200px;
margin: auto;
top: 0;
word-wrap: break-word;
border-width: 50px;}
/* focus colour changed 2025-02-16 */
input:focus {
background-color: #9CFFFF;}
p {
left: 1%;
width: 99%;
background-color: #ffffff;
color: #000000;
visibility: visible;
text-decoration: none;
font-family: medium Garamond,Times,"Times New Roman",serif;
border: 0 none white;
border-left-style: solid;
border-left-width: 3px;}
h2 {
font-family: Garamond,Times,"Times New Roman",serif;
color: #000000;
font-weight: bold;
font-size: 140%;
text-align: center;
background-color: #ffffff;
display: inline;
top: 3px;
position: relative;}
h3 {
font-family: Garamond,Times,"Times New Roman",serif;
font-size: 120%;
font-weight: bold;
color: #336633;
background-color: #ffffff;
position: relative;
left: 1%;
width: 98%;}
h4 {
font-family: Garamond,Times,"Times New Roman",serif;
font-size: 100%;
font-weight: bold;
color: #336633;
background-color: #ffffff;
position: relative;
left: 1%;
width: 98%;
padding-top: 5px;
border-top: 5px;
border-bottom: 0;
border-left: 0;
border-right: 0;
border-color: #eeeeee;
border-style: solid;
z-index: 90;
column-span: all;}
h5 {
font-family: Garamond,Times,"Times New Roman",serif;
font-size: 80%;
font-weight: bold;
color: #336633;
background-color: #ffffff;
position: relative;
left: 1%;
width: 98%;
padding-top: 5px;
border-top: 5px;
border-bottom: 0;
border-left: 0;
border-right: 0;
border-color: #eeeeee;
border-style: solid;
z-index: 90;}
hr {
color: #dddddd;
height: 3px;
background-color: #dddddd;
border-bottom-style: solid;
width: 99%;
}
table {
empty-cells: hide;
left: 0;
width: 95%;
font-size: small;
color: #000000;
background-color: #eeeeee;
visibility: visible;
border: 2px solid #999999;
overflow: auto;
text-align: center;}
th {
background-color: transparent;
text-align: center;
border: 2px solid #a9a9a9;
font-weight: bold;}
td {
background-color: transparent;
text-align: center;
border: 2px solid #a9a9a9;}
a.dontprint:link {
background-color: #ffffff;
color: #333366;
text-decoration: underline;
border-radius: 5px;
z-index: 5800;
font-family: normal medium Garamond,Times,"Times New Roman",serif;}
.hidden {
display: inline;
width: 98%;
font-family: normal medium Helvetica, sans-serif;
color: #000000;
margin-left: 0;
background-color: #ffffff;
overflow: scroll;
left: 1%;}
ul {
padding-left: 1em;
padding-bottom: 0.1em;
color: #000000;
background-color: #ffffff;
list-style-type: disc;
word-wrap: break-word;
width: 99%;
font-family: normal medium Helvetica, sans-serif;}
li {
padding-left: 1em;
padding-bottom: 0.1em;
color: #000000;
background-color: transparent;
list-style-type: disc;
word-wrap: break-word;
font-family: normal medium Helvetica, sans-serif;}
ol {
padding-left: 2.5em;
padding-bottom: 0.1em;
color: #000000;
background-color: #ffffff;
list-style-type: decimal;
font-family: normal medium Helvetica, sans-serif;}
/* ------ start of titles ------ */
img {
max-width: 100%;
height: auto;
color: black;
font-family: italic small Helvetica, sans-serif;
background-color: transparent;}
/*keeps images within 100% of container*/
div.logo {
width: 154px;
max-width: 20%;
height: 160px;
border-style: none;
background-color: transparent;
z-index: 6;
top: 0;
position: relative;
left: 0;
float: left;}
img.logo {
width: auto;
height: auto;
display: inline;
border-style: none;
background-color: transparent;
z-index: 6;
position: relative;
left: 0;
top: 0;
float: left;}
img.headerpix-1st {
height: 170px;
z-index: 3;
width: 100%;
max-width: 1200px;
margin: auto;
z-index: 1;
text-align: center;
background-color: transparent;
display: none;
visibility: visible;
position: absolute;
display: block;
top: 1px;}
img.headerpix-rotate {
height: 168px;
z-index: 3;
width: 100%;
max-width: 1200px;
margin: auto;
top: 1px;
z-index: 4;
text-align: center;
background-color: transparent;
visibility: visible;
position: absolute;
display: block;}
p.macc {
font-family: Garamond,Times,"Times New Roman",serif;
color: #ffdd00;
font-weight: bold;
font-size: 160%;
text-shadow: #000000 2px 2px 0px;
background-color: transparent;
margin: 1px;
z-index: 5;
flex-flow: row wrap;
width: calc(98% - 150px);
height: auto;
left: 1%;
text-align: center;
position: relative;}
p.headertitle {
color: #aaffff;
background-color: transparent;
border-style: none;
text-shadow: #000000 2px 2px 0;
z-index: 6;
margin: 1px;
width: calc(98% - 150px);
flex-flow: row wrap;
height: auto;
text-align: center;
position: relative;
left: 1%;
/*
font: normal bold 180% Garamond,Times,"Times New Roman",serif;
changed 2025-02-16
*/
font: normal bold 180% "Times New Roman", Times, serif;}
/*------ end of titles ------*/
/* ------ ------ ------ ------ */
p.dontprint {
text-align: left;
background-color: transparent;
color: #bbbbbb;
height: auto;
position: static;
float: none;
visibility: hidden;
width: 98%;
font-weight: bold;}
form.joinform {
background: #FFFFcc;
margin-right: 2px;
border: 5px #FFFFcc;
height: auto;
top: 0;
position: relative;
font-family: normal medium Garamond,Times,"Times New Roman",serif;}
select, textarea, submit {
position: relative;
margin: 0;
width: 85%;
color: #000000;
background-color: #FFFFFF;}
/* for the Google search */
input {
margin: 0;
color: #000000;
background-color: #FFFFFF;
width: 95%;
border: 1px solid #a9a9a9;
font-size: small;}
/* for the form input fields (and button holes) */
input.radiobutton {
margin: 0;
color: #000000;
background-color: transparent;
width: 4%;
font-size: medium;}
/* for the form radiobuttons to keep background coloured*/
.font2 {
background-color: #FFFFcc;
width: 99%;
height: auto;
left: 0px;
display: block;
font-family: bold medium Garamond,Times,"Times New Roman",serif;}
/* only in the enquiry form in Contacts
& links.html */
a:link {
background-color: #ffffff;
color: #333366;
text-decoration: underline;
border: 0px solid #ffffcc;
border-radius: 5px;
width: auto;
font-family: normal medium Garamond,Times,"Times New Roman",serif;}
/* blue unvisited links */
a:visited {
background-color: #FFFFff;
color: #662525;
border: 0px solid #ffffff;
border-radius: 5px;
width: auto;
font-family: Garamond,Times,"Times New Roman",serif;
text-decoration: underline;}
/* red visited links */
a:hover {
color: #ffff00;
background-color: #333366;
width: auto;
font-family: Garamond,Times,"Times New Roman",serif;
text-decoration: underline;}
/* hovering over links, yellow text on dark blue background */
a:active {
background-color: #cc0000;
font-family: Garamond,Times,"Times New Roman",serif;
color: #ffffff;
width: auto;
text-decoration: underline;}
/* active links */
a.backtotop-fixed {
color: #333366;
background-color: transparent;
width: auto;
position: fixed;
bottom: 3px;
right: 160px;
text-align: center;
z-index: 950;
visibility: hidden;
display: none;
font-family: smaller Helvetica, sans-serif;}
/*a.backtotop-fixed stays at bottome right of screen, however scrolled*/
a.backtotop-fixed:hover {
color: #333366;
background-color: #FFAA55;
border: 1px solid #555555;
border-radius: 5px;
width: auto;
position: fixed;
bottom: 3px;
right: 160px;
text-align: center;
z-index: 950;
visibility: hidden;
display: none;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed:active {
color: #333366;
background-color: #FFAA55;
width: auto;
position: fixed;
bottom: 3px;
right: 160px;
text-align: center;
z-index: 950;
visibility: hidden;
display: none;
font-family: smaller Helvetica, sans-serif;}
a.backtotop {
color: #333366;
background-color: #FFAA55;
width: auto;
bottom: 0px;
right: 0px;
visibility: visible;
display: inline;
position: relative;
top: 0;}
a.backtotop:hover {
color: #333366;
background-color: #FFAA55;
width: auto;
visibility: visible;}
a.backtotop:active {
color: #333366;
background-color: #FFAA55;
width: auto;
visibility: visible;}
/* don't code for a.backtotop:visited */
/* ------ ------ ------ ------ */
/* ------ START OF MAIN CONTENT ------ */
div.contentmain {
color: #000000;
flex-flow: row wrap;
z-index: 100;
width: calc(98% - 148px);
height: auto;
clear: both;
top: 0px;
left: 1%;
font-family: normal medium Garamond,Times,"Times New Roman",serif;}
/* when/if I change to horizontal tab menu:
width: 100%;
margin: auto;*/
/* USE NEWSPAPER FOR 2 COLUMNS, NEWSPAPER3 FOR 3 COLUMNS */
div.newspaper {
background-color: #ffffff;
color: #cccccc;
border-style: hidden;
/*Chrome, Safari, Opera */
-moz-column-count: 2;/* Firefox */
column-count: 2;
-webkit-column-width: 250px;
/* Chrome, Safari, Opera */
-moz-column-width: 250px;
/*Firefox */
column-width: 250px;
column-gap: 20px;
width: 99%;
visibility: visible;
border-bottom-width: 50px;
top: 0px;
font-family: normal medium Garamond,Times,"Times New Roman",serif;}
div.newspaper3 {
background-color: #ffffff;
font-family: normal medium Garamond,Times,"Times New Roman",serif;
color: #cccccc;
border-style: hidden;
/*Chrome, Safari, Opera */
-moz-column-count: 3;
/*Firefox */
column-count: 3;
-webkit-column-width: 250px;
/* Chrome, Safari, Opera */
-moz-column-width: 250px;
/* Firefox */
column-width: 250px;
column-gap: 20px;
width: 99%;
visibility: visible;
border-bottom-width: 1px;
position: relative;
top: 0px;}
/* ------ ------ ------ ------ */
/* -------- start of footer ---------*/
div.footer {
width: 98%;
height: auto;
background-color: transparent;
color: #000000;
text-align: center;
/*font-family: normal x-small Helvetica, sans-serif;*/
font-family: normal Helvetica, sans-serif;
font-size: 70%;
z-index: 900;
/*width: calc(98% - 146px);*/
width: 98%;
position: relative;
display: inline-block;}
p.grey-bg-small {
position: relative;
text-align: center;
width: calc(98% - 146px);
/*width: 98%;*/
color: #000000;
background-color: #dedede;
z-index: 900;
font: normal x-small Helvetica, sans-serif;}
/*for fine print box, full width*/
a.greyback:link {
font-family: normal small Helvetica, sans-serif;
color: #333366;
background-color: #dedede;
text-decoration: underline;}
/* tjhis one sets the size and colur of footer text blue unvisited links, grey background*/
a.greyback:visited {
font-family: normal x-small Helvetica, sans-serif;
background-color: #dedede;
color: #662525;
text-decoration: underline;}
/*red visited links*/
a.greyback:hover {
font-family: normal x-small Helvetica, sans-serif;
color: #ffff00;
background-color: #333366;
text-decoration: underline;}
.footerform {
font-family: normal x-small Helvetica, sans-serif; background-color: #ffffee;
width: 99%;
margin: 0;
padding: 0;}
/* ------ -END OF FOOTER ------ */
/* ------ START OF MENUS ------ */
nav.menuholder {
border-style: none;
background-color: white;
position: absolute;
width: 150px;
right: 2px;
z-index: 5000;
height: auto;
font-family: normal small Helvetica, sans-serif;
visibility: hidden;}
nav.menuholder {
font-family: normal small Helvetica, sans-serif;
position: fixed;
width: 150px;
top: 0;
z-index: 5000;
visibility: hidden;}
/*TRY THIS TO RELOCATE MENU TO FIXED ON SCREEN - WON'T SCROLL AWAY FROM VIEW*/
/*NAV1 IS FOR LARGE WINDOWS*/
nav.nav1 {
color: #cccccc;
font-family: normal medium Helvetica, sans-serif;
width: 150px;
background-color: #FFFF66;
right: 1%;
top: 8px;
height: auto;
visibility: visible;
border-style: none;
z-index: 5000;
display: inline;
text-decoration: none;}
/*this is how the menu looks with a big screen*/
nav.menuholder {
border-style: none;
background-color: transparent;
position: fixed;
width: 150px;
top: 1px;
z-index: 5000;
height: 100%;
right: 0;
visibility: hidden;
display: block;}
nav.nav1 {
position: relative;
top: 0px;
right: 1%;
font-size: small;
visibility: hidden;
width: 150px;}
.nav1 a {
color: #333366;
background-color: #ffffff;
padding: 0;
font-family: small Helvetica, sans-serif;
display: block;
width: 150px;
border: 1px solid #cccccc;
border-radius: 5px;
text-align: center;
top: 0;
position: relative;
z-index: 5000;
margin: 1px;
visibility: visible;
text-decoration: none;}
.nav1 a:visited {
background-color: #fFFFFF;
font-size: medium;
color: #662525;
border-radius: 5px;
text-align: center;}
.nav1 a:hover {
background-color: #333366;
color: #ffff00;
border-radius: 5px;
text-align: center;}
.nav1 a:active {
background-color: #cc0000;
color: #ffffff;
border-radius: 5px;
text-align: center}
nav.nav-drop {
background-color: #FFFFFF;
color: #cccccc;
width: 138px;
position: fixed;
right: 2px;
top: 0;
height: auto;
visibility: collapse;
border-style: none;
z-index: 5000;}
/* NAV-DROP IS FOR A SMALL SCREEN */
.nav-drop a {
color: #333366;
background-color: #ffffff;
padding: 0;
font-family: normal medium Helvetica, sans-serif;
display: block;
width: 99%;
border-radius: 5px;
text-align: center;
top: 0px;
position: relative;
z-index: 5000;
margin: 3px;
visibility: collapse;}
/*DRPBTN WILL SHOW/HIDE MENU IN SMALL SCREENS*/
.dropbtn {
color: #333366;
padding: 0px;
background-color: #FFAA55;
border: none;
right: 0;
z-index: 5000;
width: 143px;
font-size: medium;
text-align: center;
visibility: hidden;
height: auto;
top: 26px;
position: absolute;}
button.dropbtn:hover, .dropbtn:focus {
background-color: #FFAA55;
color: #333366;
z-index: 5000;
text-align: center;
visibility: collapse;
padding: 0;
font-size: small;}
/*.dropdown-content {
display: none;
position: relative;
background-color: #FFFF66; overflow: auto;
border: 1px solid #dedede;
z-index: 5000;
right: 0;
text-align: center;
font-size: small;
visibility: collapse;
height: auto;}*/
.dropdown-content {
display: none;
position: relative;
background-color: #f6f6f6;
overflow: auto;
z-index: 5000;
right: 1px;
height: auto;
text-align: center;
font-family: normal medium Helvetica, sans-serif;
visibility: visible;
padding: 0;
width: auto;
opacity: .9;
list-style-position: inside;
text-decoration: none;}
/*dropdown-content visibility: visible as 80% light grey
to see a box around mebu*/
.dropdown-content a {
color: #333366;
background-color: #ffffff;
padding: 1px;
font-size: small;
display: inline-block;
width: 138px;
right: 0;
text-align: center;
visibility: collapse;
top: 0;
font-weight: normal;
font-style: normal;}
.dropdown-content a:visited {
background-color: #FFFFFF;
font-size: small;
color: #662525;
text-align: center;
visibility: collapse;
text-decoration: none;}
.dropdown-content a:hover {
background-color: #333366;
font-size: small;
color: #ffff00;
text-align: center;
visibility: collapse;
text-decoration: none;}
.dropdown-content a:active {
background-color: #cc0000;
font-size: small;
color: #ffffff;
border-radius: 5px;
text-align: center;
visibility: collapse;
text-decoration: none;}
.show {
display: block;}
/*+++++++++++ END OF MENUS ++++++*/
/* ------ START OF IMAGES ------ */
img.pix-full {
/*width: auto;*/
max-width: 100%;
height: auto;
float: none;
display: inline;
padding: 2px;
top: 3px;}
/*w new pix size */
img.pix100 {
width: auto;
max-width: 240px;
height: auto;
max-height: 240px;
float: none;
display: inline;
padding: 2px;
top: 3px;}
/*was max width 100%, no max height*/
img.pix20 {
width: auto;
max-width: 60%;
height: auto;
display: inline;
padding: 2px;
z-index: 100;
float: left;}
img.pix50 {
width: auto;
max-width: 250px;
height: auto;
float: none;
display: inline;
padding: 2px;}
figure {
color: #000000;
text-align: center;
background-color: #eeeeee;
max-width: 250px;
display: inline-block;
border: 2px solid #cccccc;
font-family: bold medium Helvetica, sans-serif;}
figcaption {
font-family: small Helvetica, sans-serif;
text-align: center;
background-color: transparent;
max-width: 250px;
display: inline-block;}
p.figure {
font-family: small Helvetica, sans-serif;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid-column;}
/*+++++++++ END OF IMAGES +++++*/
/*+++++++++++++++++++++++++*/
/*+++++++ FOR VERY SHORT SCREENS ++++++++*/
/*++++ EG SMALL IPHONES IN LANDSCAPE ++++++*/
@media screen and (max-height: 319px) and (min-width: 429px) {
/*p { font-size: x-small;}*/
/*???????????*/
nav.nav1 {
background-color: transparent;
color: #cccccc;
width: 138px;
position: fixed;
right: 0;
top: 0px;
height: 0;
visibility: collapse;
border-style: none;
z-index: 5000;}
nav1 a {
color: #333366;
background-color: #Ffffff;
padding: 0;
font-size: medium;
display: block;
width: 99%;
border-radius: 5px;
text-align: center;
top: -20px;
position: relative;
z-index: 5000;
margin: 3px;
visibility: collapse;
height: 0;}
/*.nav1 a:visited {
background-color: #FFFFff;
font-size: medium;
color: #662525;
border-radius: 5px;
text-align: center;
visibility: collapse;}*/
.nav1 a:visited {
color: #662525;}
.nav1 a:hover {
background-color: #333366;
font-size: medium;
color: #ffff00;
border-radius: 5px;
text-align: center;
visibility: collapse;}
.nav1 a:active {
background-color: #cc0000;
font-size: medium;
color: #ffffff;
border-radius: 5px;
text-align: center;
visibility: collapse;}
/*nav.nav1 {
background-color: transparent;
color: #cccccc;
font-size: small;
width: 150px;
background-color: #FFFF66;
right: 1%;
top: 8px;
height: auto;
visibility: visible;
border-style: none;
z-index: 5000;
display: inline;}*/
/*this is how the menu looks with a big screen*/
/*.nav1 a {
color: #333366;
background-color: #Ffffff;
padding: 0;
font-size: small;
display: block;
width: 150px;
border-radius: 5px;
text-align: center;
top: 0;
position: relative;
z-index: 5000;
margin: 1px;
right: 3%;
visibility: visible;}*/
nav.nav-drop {
background-color: transparent;
width: 148px;
position: static;
right: 0;
top: 48px;
height: auto;
padding: 1px;
display: inline-block;
visibility: hidden;}
p.grey-bg-small {
position: relative;
text-align: center;
width: 99%;
color: #000000;
background-color: #dedede;
z-index: 900;
font-size: x-small;}
p.grey-bg-small {
position: relative;
font-family: x-small Helvetica, sans-serif;
text-align: center;
width: calc(98% - 146px);}
a.backtotop {
color: #333366;
background-color: transparent;
width: auto;
position: fixed;
bottom: 0px;
display: none;
visibility: collapse;
right: 0px;
text-align: center;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed {
color: #333366;
background-color: #FFAA55;
width: auto;
position: fixed;
bottom: 30px;
right: 3px;
display: block;
visibility: visible;
z-index: 2000;
text-align: center;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed:hover {
color: #333366;
background-color: #FFAA55; width: auto;
position: fixed;
bottom: 30px;
right: 3px;
display: block;
visibility: visible;
text-align: center;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed:active {
color: #333366;
background-color: #FFAA55;
width: auto;
position: fixed;
bottom: 30px;
right: 3px;
display: block;
visibility: visible;
text-align: center;
font-family: smaller Helvetica, sans-serif;}
}
/*+++++++++++++++++++++++++*/
/*+++++++ FOR SHORT SCREENS and MANY PHONES IN LANDSCAPE ++++++*/
@media screen and (max-height: 429px) {
a.backtotop {
color: #333366;
background-color: transparent;
width: auto;
position: fixed;
bottom: 0px;
display: none;
visibility: collapse;
right: 0px;}
a.backtotop-fixed {
color: #333366;
background-color: #FFAA55;
width: auto;
position: fixed;
display: block;
visibility: visible;
bottom: 30px;
right: 3px;
z-index: 2000;
font-family: smaller Helvetica, sans-serif;
text-align: center;}
a.backtotop-fixed:hover {
color: #333366;
background-color: #FFAA55; width: auto;
bottom: 30px;
right: 3px;
visibility: visible;
display: block;
font-family: smaller Helvetica, sans-serif;
text-align: center;}
a.backtotop-fixed:active {
color: #333366;
background-color: #FFAA55;
width: auto;
bottom: 30px;
right: 3px;
visibility: visible;
display: block;
font-family: smaller Helvetica, sans-serif;}
}
/*+++++++++++++++++++++++++*/
/*+++++++ END OF LANDSCAPE PHONES +++++*/
/*+++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++*/
/*+++++++ FOR TALL & NARROW SCREENS ++++++++*/
/*++++ EG SMALL IPHONES IN PORTRAIT ++++++*/
@media screen and (min-height: 399px) and (min-width: 260px) and (max-width: 428px) {
p.macc {
font-size: 120%;
max-width: 76%;}
p.headertitle {
font-size: 130%;
width: 80%;}
div.contentmain {
display: block;
color: #000000;
flex-flow: row wrap;
position: relative;
z-index: 960;
width: 99%;
top: 3px;
left: 1%;}
nav.nav1 {
background-color: transparent;
color: #cccccc;
width: 138px;
position: fixed;
right: 0;
top: 48px;
height: 0;
visibility: collapse;
border-style: none;
z-index: 5000;}
.nav1 a {
color: #333366;
background-color: #Ffffff;
padding: 0;
font-size: medium;
display: block;
width: 99%;
border-radius: 5px;
text-align: center;
top: -20px;
position: relative;
z-index: 5000;
margin: 3px;
visibility: collapse;
height: 0;}
.nav1 a:visited {
background-color: #FFFFff;
font-size: medium;
color: #662525;
border-radius: 5px;
text-align: center;
visibility: collapse;}
.nav1 a:hover {
background-color: #333366;
font-size: small;
color: #ffff00;
border-radius: 5px;
text-align: center;
visibility: collapse;}
.nav1 a:active {
background-color: #cc0000;
font-size: medium;
color: #ffffff;
border-radius: 5px;
text-align: center;
visibility: collapse;}
/*************************************/
nav.menuholder {
border-style: none;
background-color: red;
position: fixed;
width: 150px;
top: 0;
z-index: 5000;
height: auto;
visibility: hidden;}
nav.nav-drop {
text-align: center;
background-color: transparent;
font-size: small;
color: #cccccc;
width: 146px;
padding: 0;
position: fixed;
overflow: visible;
z-index: 5000;
top: 40px;
height: auto;
visibility: visible;
border-style: none;
right: 2px;}
.nav-drop a {
color: #333366;
background-color: transparent;
padding: 0;
font-size: small;
display: block;
width: 138px;
text-align: center;
visibility: visible;
top: 40px;
position: relative;
left: 5px;
z-index: 5000;
height: 22px;}
button.dropbtn {
color: #4444ff;
padding: 0px;
background-color: #FFAA55;
border-radius: 5px;
right: 0;
z-index: 5000;
width: 143px;
font-size: small;
text-align: center;
visibility: visible;
height: auto;
top: -26px;}
button.dropbtn:hover, .dropbtn:focus {
background-color: #FFAA55;
font-size: small;
color: #333366;
z-index: 5000;
text-align: center;
visibility: visible;
padding: 0;}
/*.dropdown-content {
display: none;
position: relative;
background-color: #f6f6f6;
overflow: auto;
z-index: 5000;
right: 1px;
height: auto;
text-align: center;
font-size: medium;
visibility: hidden;
padding: 0;
width: auto;}*/
.dropdown-content {
display: none;
position: relative;
background-color: #f6f6f6;
overflow: auto;
z-index: 5000;
right: 1px;
height: auto;
text-align: center;
font-size: medium;
visibility: visible;
padding: 0;
width: auto;
opacity: .9;
list-style-position: inside;
text-decoration: none;}
/*dropdown-content visibility: visible as 80% light grey
to see a box around mebu*/
.dropdown-content a {
background-color: #Ffffff;
padding: 0px;
font-size: small;
display: inline-block;
width: auto;
text-align: center;
visibility: visible;
/*right: 8px;*/
top: 0;
margin: 0;
height: auto;
text-decoration: none;}
.dropdown-content a:visited {
background-color: #Ffffff;
color: #662525;
text-align: center;
visibility: visible;
padding: 0;
text-decoration: none;}
.dropdown-content a:hover {
background-color: #333366;
color: #ffff00;
text-align: center;
visibility: visible;
padding: 0;
text-decoration: none;}
.dropdown-content a:active {
background-color: #cc0000;
color: #ffffff;
border-radius: 5px;
text-align: center;
visibility: visible;
padding: 0;
text-decoration: none;}
.show {
display: block;}
/*+++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++*/
p.grey-bg-small {
position: relative;
font-family: x-small Helvetica, sans-serif;
text-align: center;
width: 97%;
color: #000000;
background-color: #dedede;
z-index: 900;
overflow: auto;}
.footerform {
font-family: normal x-small Helvetica, sans-serif;
background: #ffffcc;
width: 98%;
margin: 0;
padding: 0;}
a.backtotop {
color: #333366;
background-color: transparent;
width: auto;
position: fixed;
bottom: 0px;
display: block;
visibility: collapse;
right: 0px;}
a.backtotop-fixed {
color: #333366;
background-color: #FFAA55;
position: fixed;
display: block;
visibility: visible;
bottom: 30px;
right: 3px;
z-index: 970;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed:hover {
color: #333366;
background-color: #FFAA55; width: 100px;
position: fixed;
display: block;
visibility: visible;
bottom: 30px;
right: 3px;
z-index: 970;
font-family: smaller Helvetica, sans-serif;}
a.backtotop-fixed:active {
color: #333366;
background-color: #FFAA55;
width: 100px;
position: fixed;
display: block;
visibility: visible;
bottom: 30px;
right: 3px;
z-index: 970;
font-family: smaller Helvetica, sans-serif;}
}
/*++++ end of narrow screen items ++++++*/
/*+++++++++++++++++++++++++*/
/*++++++++++++++++++++++++*/
/*#### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-width: 260px), (max-width: 428px) and (max-height: 399px) {
p.macc {
font-family: Garamond,Times,"Times New Roman",serif;
color: #ffdd00;
font-weight: bold;
font-size: 160%;
text-shadow: #000000 2px 2px 0px;
background-color: transparent;
margin: 1px;
z-index: 5;
flex-flow: row wrap;
width: 78%;
top: 0;
height: auto;
left: 21%;
text-align: left;
position: absolute;}
p.headertitle {
color: #aaffff;
text-align: left;
background-color: transparent;
width: 78%;
font-family: "Times New Roman",serif;
font-size: 150%;
text-shadow: #000000 2px 2px 0;
flex-flow: row wrap;
position: absolute;
top: 70px;
left: 20%;}
div.contentmain {
display: block;
color: #000000;
flex-flow: row wrap;
position: relative;
top: 5px;
z-index: 960;
width: 99%;
left: 1%;}
nav.nav1 {
background-color: transparent;
color: #cccccc;
width: 138px;
position: fixed;
right: 0;
top: 48px;
height: auto;
visibility: collapse;
border-style: none;
z-index: 5000;}
.nav1 a {
color: #333366;
background-color: #Ffffff;
padding: 0;
font-size: medium;
display: block;
width: 100%;
border-radius: 5px;
text-align: center;
top: 20px;
position: relative;
z-index: 5000;
margin: 3px;
visibility: collapse;}
.nav1 a:visited {
background-color: #Ffffff;
font-size: medium;
color: #662525;
border-radius: 5px;
text-align: center;
visibility: collapse;}
.nav1 a:hover {
background-color: #333366;
font-size: small;
color: #ffff00;
border-radius: 5px;
text-align: center;
visibility: collapse;}
.nav1 a:active {
background-color: #cc0000;
font-size: medium;
color: #ffffff;
border-radius: 5px;
text-align: center;
visibility: collapse;}
/************************************/
/*************************************/
nav.menuholder {
border-style: none;
background-color: transparent;
width: 100%;
top: 0;
z-index: 5000;
height: 200px;
visibility: hidden;
position: absolute;}
nav.nav-drop {
text-align: center;
background-color: transparent;
font-size: x-small;
color: #cccccc;
width: 100%;
padding: 1px;
position: fixed;
overflow: visible;
z-index: 5000;
top: 25px;
height: auto;
visibility: visible;
border-radius: 5px;
left: 0;}
.dropbtn {
color: #333366;
padding: 3px;
background-color: #FFFF66;
border-radius: 5px;
z-index: 5100;
width: 140px;
text-align: center;
visibility: visible;
height: auto;
top: 0;
right: 5px;
font-size: x-small;
font-weight: bold;}
button.dropbtn:hover, .dropbtn:focus {
color: #333366;
padding: 3px;
background-color: #FFFF66;
border-radius: 5px; z-index: 5100;
font-size: x-small;
text-align: center;
visibility: visible;
height: auto;
top: 0;
right: 0;
font-weight: bold;}
.dropdown-content {
display: none;
position: relative;
background-color: transparent;
width: 100%;
opacity: 1.0;
overflow: auto;
z-index: 5000;
text-align: center;
visibility: hidden;
border-style: none;
height: auto;
top: 15px;
font-size: xx-small;}
.dropdown-content a {
float: right;
min-width: 90px;
max-width: 160px;
color: #333366;
background-color: #Ffffff;
padding: 0px;
font-size: xx-small;
text-align: center;
visibility: visible;
clear: none;
border: 1px solid white;
position: relative;
top: 0px;
z-index: 5000;
height: auto;
display: inline-block;
right: 3px;
text-decoration: none;}
/* WAS min-width: 90px;
max-width: 105px;*/
.dropdown-content a:visited {
background-color: #Ffffff;
font-size: xx-small;
color: #662525;
text-align: center;
visibility: visible;
height: auto;
z-index: 5000;
text-decoration: none;}
.dropdown-content a:hover {
background-color: #333366;
font-size: xx-small;
color: #ffff00;
text-align: center;
visibility: visible;
z-index: 5000;
text-decoration: none;}
.dropdown-content a:active {
background-color: #cc0000;
font-size: xx-small;
color: #ffffff;
text-align: center;
visibility: visible;
z-index: 5000;
text-decoration: none;}
.show {
display: block;}
/*************************************/
/*************************************/
div.footer {
width: 98%;
height: auto;
background-color: #222222;
color: #000000;
text-align: center;
font-family: normal x-small Helvetica, sans-serif;
/*font-size: 100%;*/
z-index: 900;
width: calc(98% - 146px);
/*width: 98%;*/
z-index: 900;
position: relative;
display: inline;
/*display: inline-block;*/}
.footerform {
font-size: x-small;
background-color: #ffff00;
width: 98%;
margin: 0;
padding: 0;}
p.grey-bg-small {
position: relative;
font-size: x-small;
text-align: center;
width: 98%;
color: #000000;
background-color: #dedede;
z-index: 900;}
/*************************************/
a.backtotop {
color: #333366;
background-color: transparent;
width: auto;
position: fixed;
bottom: 0px;
display: none;
visibility: collapse;
right: 0px;}
a.backtotop-fixed {
color: #333366;
background-color: #FFFF66;
width: 90px;
position: fixed;
display: block;
visibility: visible;
z-index: 970;
left: 20px;
bottom: 30px;
right: 3px;
font-family: x-small Helvetica, sans-serif;}
a.backtotop-fixed:visited {
background-color: #FFFF66;
color: #333366;
width: 90px;
position: fixed;
display: block;
visibility: visible;
z-index: 970;
left: 20px;
bottom: 30px;
bottom: 30px;
right: 3px;
font-family: x-small Helvetica, sans-serif;}
a.backtotop-fixed:hover {
color: #333366;
background-color: #FFFF66; width: 90px;
position: fixed;
display: block;
visibility: visible;
z-index: 970;
left: 20px;
bottom: 30px;
bottom: 30px;
right: 3px;
font-family: x-small Helvetica, sans-serif;}
a.backtotop-fixed:active {
color: #333366;
background-color: #FFFF66;
width: 90px;
position: fixed;
display: block;
visibility: visible;
z-index: 970;
left: 20px;
bottom: 30px;
bottom: 30px;
right: 3px;
font-family: x-small Helvetica, sans-serif;}
}
/*++++++ END OF VERY SMALL SCREENS +++++*/
/*+++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++*/
@media print {
p {
page-break-inside: avoid;}
div.contentmain {
color: #000000;
text-decoration: none;
font-family: "Helvetica", sans-serif;
font-size: 12px;
width: 100%;}
p, .headerpix-1st, .headerpix-rotate, .footer, .grey-bg-small, .greyback {
color: #000000;
text-decoration: none;
background-color: #ffffff;
border-style: none;
text-align: left;
font-family: "Times New Roman", Times, serif;
font-size: 180%;}
/* was
font-family: "Helvetica", sans-serif;
font-size: 12px;
*/
div.footer {
width: 98%;
height: auto;
background-color: #ffffff;
color: #000000;
text-align: center;
font-size: 12px;
z-index: 900;
position: relative;
display: inline;
bottom: 0;
top: 1px;}
p.grey-bg-small {
width: 98%;
text-align: left;
position: relative;
display: inline;
font-size: 12px;
bottom: 0;
top: 0;}
a:link, a:hover, a:visited, a:active,
a.greyback:link, a.greyback:hover, a.greyback:visited, a.greyback:active,
div.newspaper, div.newspaper3 {
color: #000000;
text-decoration: none;
font-family: "Helvetica", sans-serif;
font-size: 12px;
background-color: #ffffff;
border-radius: 0;
border-style: none;
border-width: 0;}
p.macc, p.headertitle {
color: #000000;
text-shadow: none;
text-align: center;}
img.headerpix-1st, img.headerpix-rotate, nav, .hidden, .dontprint, a.backtotop, a.backtotop-fixed {
background-color: #ffffff;
display: none;
visibility: collapse;
overflow: hidden;}
img.pix20, img.pix20, img.pix100 {
background-color: #ffffff;
display: inline;
visibility: visible;}
img.facebook {
visibility: collapse;
display: none;}
/* First page, only */
/*@page :first
p.macc, p.headertitle {
color: #000000;
text-shadow: none;}*/
}