/* MOBILE STYLES */
/* This sets the display and responsive navigation for narrow screen and mobiles */

@media only screen and (max-width: 799px)  {

body {
	background-color: #ffffff;
	font-family: Open Sans, Arial, sans-serif, Helvetica, Verdana;
	margin: 0px;
	padding: 0px;
	}
	

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


a.white:link {
	color: #ffffff;
	text-decoration: none;
}
a.white:visited {
	color: #ffffff;
	text-decoration: none;
}
a.white:active {
	color: #ffffff;
	text-decoration: none;
}
a.white:hover {
	color: #ffffff;
	text-decoration: none;
}

a.top:link {
	color: #000066;
	text-decoration: none;	
}
a.top:visited {
	color: #000066;
	text-decoration: none;	
}
a.top:active {
	color: #000066;
	text-decoration: none;	
}
a.top:hover {
	color: #000000;
	text-decoration: none;	
}

a.lb:link {
	color: #b0c4de;
	text-decoration: none;
}
a.lb:visited {
	color: #b0c4de;
	text-decoration: none;
}
a.lb:active {
	color: #b0c4de;
	text-decoration: none;
}
a.lb:hover {
	color: #b0c4de;
	text-decoration: underline;
}

	  
.topBar {
height: 100px;
width: 100%;
position: relative;
}






.logo {
	position: absolute;
	left: 1%;
	top: 1%;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	z-index: 6;
	
}


.topRight {
visibility: hidden;
}


.topRight2 {
visibility: hidden;
}




.topnav {
	position: absolute;
    background-color: #ffffff;
	opacity: 0.8;
    overflow: hidden;
	z-index: 5;
	right: 1%;
	top: 3px;
	font-family: Calibri, Arial, Verdana, Arial, Helvetica, sans-serif;
	
}



/* Style the links inside the navigation bar */
.topnav li {
    float: left;
    display: block;
    
    text-align: center;
    
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
	
    text-decoration: none;
    font-size: 28pt;
	

}

/* Change the color of links on hover */





.icon:hover {
    border-bottom: 0px solid #b0c4de;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
	font-size: 42pt;
	padding: 0px;
	
} 



 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

  .topnav li:not(:first-child) {display: none;}
  .topnav li.icon {
    float: left;
    display: block;
  }


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

  .topnav.responsive {position: absolute;}
  .topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
	
  }
  .topnav.responsive li {
    position: relative;
	float: none;
    display: block;
    text-align: left;
	right: 15px;
	top: 15px;
	background-color; #b0c4de;
  }
  
  .menuListItem:hover {
    border-bottom: 0px solid #b0c4de;
}

.menuListItemCurrent {
    background-color; #4682b4;
	color: #ffffff;
	border-bottom: 0px solid #b0c4de;
}


/*  END OF STYLES FOR NAVIGATION AND TOP OF PAGE MENU  */
/**/
/**/
/**/

/* MAIN PAGE SECTIONS AND LAYOUT STYLES: */

/* Main top image for home page */
.mainImg {
	width: 100%; 
	overflow-x: hidden;
	margin-top: 0px; 	   
}
	 
/* This fixes the image size for the screen width of phones and small devices */	
.mainImg_picture {
width: 800px;
}


.miPlaceHolder {


}	

/* Main top image for site pages */	
.mainImg2 {
	position: relative;
	width: 100%; 
	padding: 0;
	margin-bottom: 20px;
	left: 0; 
}


/* Caption title text on the main home page image */	 
.homeTitle {
z-index: 2;
width: 340px;
font-family: Open Sans, Arial;
font-size: 26px;
position: absolute;
left: 20px;
top: 250px;
color: #ffffff;
font-weight: bold;
}	 


.htLink {
	visibility: hidden;
}

.homeSearch {
	border: 2px solid #ffffff;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 28px;
	padding-right: 28px;
	margin: 10px;
	position: absolute;
	left: 15px;
	top: 120px;
	font-family: Arial, Open Sans;
}

/* This posiitons the h1 title over the base of the main image on monitors and tablet screen sizes */
.imgTitleBar{ 


}

h1 {
		
margin: 0px;
	 position: relative; 
	 bottom: 4px;
	width: 97%;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 3%;
	padding-right: 0;
	text-align: left;
	z-index: 3;
	font-family: Calibri, Arial, Verdana, Arial, Helvetica, sans-serif;
	 font-size: 12pt; 
	font-style: italic;
	font-weight: bold;
	color: #ffffff;
	background-image: url(graphics/ts_blue.png);	
}
	 

/* Plain container Div for full-width content blocks  */
 .maincontent{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	color: #000000;
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 20px;
	margin-right: 10px;	
}	 
	
.maincontent2{
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;	
	padding-top: 0px;
	padding-bottom: 0px;
	margin-left: 20px;
	margin-right: 10px;
	text-align: justify;
}
	
/* Applies a shaded background to the main content div */
.wrapShade{
	background-color: #f0f8ff;	
}


/* Splits the maincontent section into two blocks which are arranged horizontally on monitors and tablets / vertically on mobile and small screens  */
.Column2_1{
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	width: 98%;
	position: relative;
	float: left;
	padding: 0px;
}

.Column2_2{
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	width: 98%;
	position: relative;
	float: left;
	padding: 0px;
}

	 
/* Large underlined title for pages and sections  */
.homeHeader{
	font-family: Open Sans, Arial;
	background-color: #ffffff;
	text-align: left;
	font-size: 36pt;
	color: #4682b4;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-bottom: 2px solid #b0c4de;
}


/* Medium underlined title for pages and sections  */	 
.subHeader{
	font-family: Open Sans, Arial;
	background-color: #ffffff;
	text-align: left;
	font-size: 24pt;
	color: #4682b4;
	padding-top: 0px;
	padding-bottom: 5px;
	margin-left: 0%;
	margin-right: 2%;
	margin-bottom: 10px;
	border-bottom: 2px solid #b0c4de;	
}

.subHeader_NR{
	font-family: Open Sans, Arial;
	text-align: left;
	font-size: 24pt;
	font-weight: bold;
	color: #4682b4;
	padding-top: 0px;
	padding-bottom: 5px;
	margin-left: 0%;
	margin-right: 0%;
	margin-bottom: 20px;	
}


/* Medium underlined title for pages and sections full page width (even padding either side)  */
.subHeader_wide{
	font-family: Open Sans, Arial;
	text-align: left;
	font-size: 24pt;
	color: #4682b4;
	padding-top: 0px;
	padding-bottom: 5px;
	margin-left: 0%;
	margin-right: 0%;
	margin-bottom: 10px;
	border-bottom: 2px solid #b0c4de;	
}


h2{
	font-family: Open Sans, Arial;
	text-align: left;
	font-size: 18pt;
	color: #4682b4;
	padding-top: 0px;
	margin-top: 30px;	
}


h3{
	font-family: Open Sans, Arial;
	text-align: left;
	font-size: 14pt;
	color: #000000;
	padding-top: 10px;	
	margin-left: 40px;	
}


/* Plain text box no border or background */
.homeBox0{
	font-family: Open Sans, Arial;
	font-size: 12pt;
	color: #000000;
	padding: 0px;
	margin-bottom: 25px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: justify;
}

.homeBox0_lg{
	font-family: Open Sans, Arial;
	font-size: 13pt;
	color: #000000;
	padding: 0px;
	margin-bottom: 25px;
	margin-left: 20px;
	margin-right: 20px;
	text-align: justify;
}


/* Steel blue background highlighted feature text block */
.homeBox1{
	font-family: Open Sans, Arial;
	background-color: #4682b4;
	color: #ffffff;
	padding: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 20px;
}


/* Mouse over ligher shade for highlighted feature text block - disabled in mobile and small touch screens */
/* 
.homeBox1:hover {
	font-family: Open Sans, Arial;
	background-color: #b0c4de;
	color: #ffffff;
	padding: 0px;
	margin-left: 10px;
	margin-right: 10px;
}
*/


/* Light blue background highlighted paragraph text block */
.homeBox1_light{
	font-family: Open Sans, Arial;
	background-color: #f0f8ff;
	color: #000000;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: 0px;
	margin-left: 0px;
}


/* Image box to align against text box */
.homebox1Image{
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px;
	padding: 0px;
	font-size: 0px; /* removes gap below image to align against coloured text box below */
}


/* Sets the content image proportional to full width of container div */ 
.img1{
	width: 100%;
}


/* large / title text for highlighted text blocks */
.homeBox1_Text{
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 30px;
	padding-left: 30px;
	font-size: 24pt;
}


/* Paragraph text for highlighted text blocks */
.homeBox1_Text_small{
	padding-top: 10px;
	padding-bottom: 20px;
	padding-right: 30px;
	padding-left: 30px;
	font-size: 14pt;
	text-align: justify;
}


/* Title text for light highlighted text blocks  */
.homeBox1_light_Title {
	color: #000000;
	font-size: 18pt;
	padding-top: 20px;
	padding-bottom: 10px;
	padding-right: 40px;
	padding-left: 40px;
}


/* Title text for light highlighted text blocks (without spacing above)  */ 
.homeBox1_light_Title_2 {
	color: #000000;
	font-size: 18pt;
	padding-top: 0px;
	padding-bottom: 10px;
	padding-right: 40px;
	padding-left: 40px;
}


/* Paragraph text for light highlighted blocks */
.homeBox1_light_Text {
	color: #000000;
	font-size: 12pt;
	padding-top: 0px;
	padding-bottom: 20px;
	padding-right: 40px;
	padding-left: 40px;
}


/* Link arrow for bottom of highlight text boxes */
.arrow {
	text-align: right;
	padding-bottom: 20px;
	padding-right: 40px;
}


/* Arrow icon for the in-page menu block links */
.menuArrow {
	width: 30px;
	height: 30px;
	position: relative;
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 5px;
}


/* Container box for the in-page menu block links */
.titleBox {
	position: relative;
	float: left;	
	width: 90%;	
	margin-left: 20px;	
	margin-top: 10px;
	margin-bottom:10px;
	padding-top: 10px;
	padding-bottom: 15px;	
	border: 1px solid #b0c4de;
	background-color: #f0f8ff;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;	
}

.titleBox2 {
	position: relative;
	float: left;	
	margin-left: 0%;
	margin-right: 0px;
	margin-top: 10px;	
	padding: 10px;
	border: 1px solid #4682b4;	
		
}


/* Text for the in-page menu block links */
.titleBoxText {
	padding: 0px;
	margin-top: 10px;
	font-size: 18pt;
	position: relative;
	float: left;
}

.titleBox2Text {
	font-size: 15pt;
}


/* Highlighted text box for emphasised points/statements */
.boxSquare_Group {
	position: relative;
	float: left;
	width: 230px;
	height: 260px;
	margin-left: 0px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
	background-color: #ffffff;
	color: #000000;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 1px solid;
	border-bottom: 20px solid #b0c4de;
	border-top: 1px solid #b0c4de;
	border-left: 1px solid #b0c4de;
	border-right: 1px solid #b0c4de;	
}


/* Large highlighted text box for emphasised points/statements and blocks of text content */
.boxSquare_Group_Large {
	position: relative;
	float: left;
	width: 90%;
	/* height: 520px; */
	margin-left: 5%;
	margin-right: 0%;
	margin-bottom: 15px;
	margin-top: 5px;
	background-color: #ffffff;
	color: #000000;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 1px solid;
	border-bottom: 20px solid #b0c4de;	
	border-top: 1px solid #b0c4de;
	border-left: 1px solid #b0c4de;
	border-right: 1px solid #b0c4de;	
	font-size: 0;	
}


/* Large highlighted text box for emphasised points/statements and blocks of text content - with image at top (extra height) */
.boxSquare_Group_Large_Image {
	position: relative;
	float: left;
	width: 360px;
	height: 700px;
	margin-left: 0px;
	margin-right: 20px;
	margin-bottom: 15px;
	margin-top: 5px;
	background-color: #ffffff;
	color: #000000;
	padding-top: 0px;
	padding-bottom: 0px;
	border: 1px solid;
	border-bottom: 30px solid #b0c4de;	
	border-top: 1px solid #b0c4de;
	border-left: 1px solid #b0c4de;
	border-right: 1px solid #b0c4de;
	transition: 0.3s;		
}


/* Heading text for highlighted text box for emphasised points/statements and blocks of text content */
.boxTitle{
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 18pt;
	color: #4682b4;
	font-family: Open Sans, Arial, Sans Serif;
}


/* Sub heading text for highlighted text box for emphasised points/statements and blocks of text content */
.boxSubTitle{
	padding-top: 5px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 13pt;
	color: #4682b4;
	font-family: Open Sans, Arial, Sans Serif;
}


/* Paragraph text for highlighted text box for emphasised points/statements and blocks of text content */
.boxText1{
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12pt;
	font-family: Arial, Open Sans, Sans Serif;
}


/* Content or divider image at full width of content div */
.img3 {
	margin-top: 10px;
	margin-bottom: 0px;
	width: 100%;
}



/* Social media icons added to page content (on contact page) */
.SocialIcons_Inline{
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: left;
	width: 100%;
	background-color: #ffffff;
	margin-bottom: 0px;
	margin-top: 0px;
}

/* Spacing of social media icons */
.sIcon {
	padding-left: 10px;
	padding-right: 10px;
}


/* Styles for content box image with superimposed text  */
.imageBox_Square{
	padding: 0px;
	margin-right: 20px;
	margin-bottom: 20px;
	height: 360px;
	width: 360px;
	background-color: #4682b4;
	font-size: 0px;
	position: relative;
	float: left;
	overflow: hidden;
	border-bottom-right-radius: 40px;
	
}

/*
.imageBox_Image{	
	height: 100%;
	z-index: 0;
	transition: 1s;
}
*/

#iBox1{}

#ibImage1{
	height: 100%;
	z-index: 0;
	opacity: 1;
	transition: 0.5s;
	height: 100%;
	margin-left: -150px;
	
}

/*
 #iBox1:hover #ibImage1{
	height: 100%;
	z-index: 0;
	opacity: 0.2;
	transition: 0.5s;
	height: 105%;
	margin-left: -150px;
}
*/



/* .imageBox_Image:hover{	
	height: 100%;
	z-index: 0;
	opacity: 0.2;
	transition: 0.3s;
	height: 100%;
	transition: 1s;
	margin-left: -150px;
}

*/

.imageBox_Text_Icon{
	padding: 0px;
	margin: 0px;
	color: #ffffff;
	font-weight: bold;
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
}


.imageBox_Text_Large_Base{
	padding: 0px;
	color: #ffffff;
	font-size: 28px;
	font-weight: bold;
	font-family: Open Sans, Arial;
	position: absolute;
	bottom: 65px;
	margin-left: 20px;
	margin-right: 30px;
	z-index: 1;
}


.imageBox_Text_Small_Base{
	padding: 0px;
	color: #ffffff;
	font-size: 16px;
	font-weight: normal;
	position: absolute;
	bottom: 20px;
	margin-left: 20px;
	margin-right: 30px;
	z-index: 1;
}


/*  Styles for content in the common page footer: --------------------------------------------------------------------  */
/**/
/**/


/* Social media icons at bottom of all pages above the bottom of page site menu */
.SocialIcons{
	position: relative;
	padding-top: 0px;
	text-align: center;
	width: 100%;
	margin-bottom: 50px;
	margin-top: 50px;
}


/* Style of full site menu block at the bottom of all pages */
.baseMenu{		
	position: relative;
	margin-top: 40px;
	padding: 0px;
	width: 98%; 
	padding: 1%;
	font-size: 24pt;
	font-family: Calibri, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #eff2f3;	
}


.mc3Text_first{
	position: relative;
	float: left;
	text-decoration: none;
	margin-left: 2%;
	margin-right: 2%;
	width: 85%;
}


.mc3Text_first li {
	list-style: none;
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: 1px solid;
	border-color: #b0c4de;
	margin: 0px;
}


.mc3Text{
	position: relative;
	float: left;
	text-decoration: none;
	margin-left: 2%;
	margin-right: 2%;
	width: 85%;
}


.mc3Text li {
	list-style: none;
	padding-bottom: 20px;
	padding-top: 20px;
	border-bottom: 1px solid;
	border-color: #b0c4de;
	margin: 0px;
}


.base{
	font-family: Calibri, Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #ffffff;
	position: relative;
	margin-top: 0px;
	margin-bottom: 50px;
	width: 100%;
	width: 95%; 
	padding-left: 2.5%;		
}


.bText {
	padding: 10px;	
}


/* Icons for sharing the page on social media */
 .SocialShare {
	width: 80%;
	padding: 5px;
	margin: 0px;
	bottom: 0px;
	left: 10%;
	background-image: url(graphics/translucent_grey.png);
	z-index: 1;
	position: fixed;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}



/**/
/**/
/*  End of styles for content in the common page footer  */

.mobileMenu {

visibility: visible;

}	 


/* Hides the spam filter email field in the contact form */
.cEmail {
	display: none;
}
	 
}	 
/* / MOBILE STYLES */