/* The following are by Jeff Robison, mainly for removing Calibri font */

/* body: describes page background color and all non-table text not governed by any other style */
.templatebody {
	font-family: Arial, Helvetica, sans-serif;
}

/* header: heading text */
.header {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
text-shadow: rgba(2, 0, 0, 0.49) 3px 2px 3px;
}

/* font overrides */
.normal {
    font-family: Arial, Helvetica, sans-serif;
}

.smfieldname {
    font-family: Arial, Helvetica, sans-serif;
}

.whiteheader {
	font-family: Arial, Helvetica, sans-serif;
}

.subhead {
	font-family: Arial, Helvetica, sans-serif;
}

.pboxname {
	font-family: Arial, Helvetica, sans-serif;
}

.pboxdates {
	font-family: Arial, Helvetica, sans-serif;
}

.pboxpopup {
	font-family: Arial, Helvetica, sans-serif;
}

.whitesubhead {
	font-family: Arial, Helvetica, sans-serif;
}

.smaller {
	font-family: Arial, Helvetica, sans-serif;
}

#loadingdiv {
	font-family: Arial, Helvetica, sans-serif;
}

#sscontrols {
	font-family: Arial, Helvetica, sans-serif;
}

.smallest {
	font-family: Arial, Helvetica, sans-serif;
}

.subheadbold {
	font-family: Arial, Helvetica, sans-serif;
}

.largeheader {
	font-family: Arial, Helvetica, sans-serif;
}

/* link definitions */
/* link: normal links, active: links in use */
a.lightlink:link, a.lightlink:visited {
	font-family: Arial, Helvetica, sans-serif;
}

a.lightlink:hover, a.lightlink:active {
	font-family: Arial, Helvetica, sans-serif;
}

a.lightlink2:link, a.lightlink2:visited {
	font-family: Arial, Helvetica, sans-serif;
}

/* fieldname: regular text within column or row title sections */
.fieldname {
	font-family: Arial, Helvetica, sans-serif;
}

#mnav a {
	font-family: Arial, Helvetica, sans-serif;
}

/* My Button CSS Start */

.mybutton {
	width: 240px; /* determines size of button */
	font-size: 18px; /* determines size of button */
	padding: 4px; /* padding around text */ 
    background-color: #4F3E35;
	text-align: center;
	margin: auto; /* centres button */
	margin-top: 10px; /* adds vertical space between buttons */
	margin-bottom: 10px; /* adds vertical space between buttons */
	-moz-border-radius: 5px 5px 5px 5px; /* button rounded corners for Firefox*/
	-webkit-border-radius: 5px 5px 5px 5px; /*button rounded corners for Safari*/
	border-radius: 5px 5px 5px 5px;/*button rounded corners - standard syntax */
	box-shadow: 4px 4px 2px #aaaaaa; /* button shadow effect */
}

.mybutton:active {
    transform: translateY(1px) /* button click effect */
}

.mybutton a{
	text-decoration:none;
    color: #ffffff; /* text colour */
	display: block; /* makes entire button clickable */
}

.mybutton a:hover {
    color: #FFCC33; /* text colour on hover*/
	font-weight: normal; /* text weight on hover */
}

.bluebgcolor {
    background-color: #063E53;
}
.maroonbgcolor {
    background-color: maroon;
}
.greybgcolor {
    background-color: dimgrey;
}
.greenbgcolor {
    background-color: #39692A;
}
.purplebgcolor {
    background-color: #9F5392;
}
.turquoisebgcolor {
    background-color: #4E7076;
}

/* My Page Button CSS End */

/* Small Button CSS Start */
.smallbutton {
	width: 115px;
	display: inline-block;
}

/* Small Button CSS End */

/* border colour for randomimage */
  .bordrandimg{
      padding: 15px;
    border: 1px solid #a0a0a0;
    box-shadow: inset 0px 0px 4px rgba(0,0,0,0.9);
    background-color: #e0e0e0;
}

/* back to top CSS */

.back-to-top {
    position: fixed;
    bottom: 6em;
    right: 50px;
    text-decoration: none;
    font-weight: bold;
    color: #000;
    background-color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    padding: 1em;
    border: 1px solid #A1A0A1;
    
}

.back-to-top:hover {    
    background-color: rgba(255,255,255, 0.80);
}


/* Branch Nav Bar CSS */

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #CAC8CA;
	border-bottom: 0px solid #808080; 
	border-left: 0px solid #808080; 
	border-right: 0px solid #808080; 
	border-top: 0px solid #808080; }
#nav li {
	float: left; }
#nav li a {
	display: block;
	padding: 5px 5px;
	text-decoration: none;
	font-weight: bold;
	color: #000000;
     border-left: 1px solid #A1A0A1;
	border-right: 1px solid #A1A0A1;
     border-bottom: 1px solid #A1A0A1;
     border-top: 1px solid #A1A0A1;  }
#nav li a:hover {
	color: #0000FF;
	background-color: #fff; }
	
a[name] {padding-top: 40px}

/* iframe for ticker CSS */

.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto; 
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
border: solid black 1px;
} 

 /* Full Screen Menu CSS */

.opentext {
	font-size: 14px;
	color: #f0f0f0;
font-weight: normal;
}

a.opentext {
	font-size: 14px;
	color: #b99852;
vertical-align: center
}

.opentext:hover {
	font-size: 14px;
	color: #FFCC33;
cursor: pointer;
font-weight: normal;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index:51;
    top: 0;
    left: 0px;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
color: #ffffff;

}

.overlay-content1 {
    position: absolute;
font-size: 28px;
    top:100px;
    width: 22%;
    margin-top: 30px;
left: 5%;
}

.overlay-content2 {
position: absolute;
font-size: 25px;
    top:12px;
    width: 18%;   
    margin-top: 10px;
left: 27%;
}

.overlay-content3 {
position: absolute;
font-size: 25px;
    top:12px;
    width: 18%;   
    margin-top: 10px;
left: 45%;
}

.overlay-content4 {
position: absolute;
font-size: 25px;
    top:12px;
    width: 18%;   
    margin-top: 10px;
left: 63%;
}

.overlay-content5 {
position: absolute;
font-size: 25px;
    top:12px;
    width: 18%;   
    margin-top: 10px;
left: 81%;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    color: #e9cfa2;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 6%;
    left: 15px;
    font-size: 40px;
}

@media screen and (max-width: 1020px) , screen and (max-height: 580px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 18px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
.headertext {
	font-size: 25px;
  }
}