/*----------*/
/* General  */
/*----------*/
body {
  margin: 8px;
  font-size:15.5px; /* this fontsize/line height is same as Telegraph & SCMP */
  line-height:1.50em;
  font-family:Verdana,sans-serif;
}
.main {
}
.font-smaller {
	font-size:0.7em;
/*	line-height:1.2em; */
	line-height:0.6em; 
}

.super {
	vertical-align:top;
	font-size:smaller;
/*	font-size:0.7em;*/
	line-height:1.2em;	
	font-weight:normal;
}

.ref-title {
	font-style:italic;
}

.section-divider {
	font-size:small ;
    border-top:none ;
	border-bottom:#F3971A dashed 0.1em;
/*	padding-top:0.5em;		*/
/*	padding-bottom:0.5em;	*/
}

.top-of-page {
	background-color:white; 
	display:inline; 
	font-size:2.8em;
	position:absolute; 
	right:0.0em;
	top:-0.3em;
}
/*
.large-screen-only {
	display:block;
}
.small-screen-only {

}
*/
table {
  border-collapse:collapse;
  width:100%;
}

td {
  border-bottom: 1px solid #F3971A;
}

/*-------------*/
/*   Photos    */
/*-------------*/
.photo-600 {
	margin-left:0px; 
	max-width:600px ;	
}
.photo-600-caption {
	max-width:600px; 
	text-align:left; 
	border-bottom:thin #F3971A dashed ;
	border-right:thin #F3971A dashed ;
	border-left:thin #F3971A dashed ;
	margin-top:0px ;
	padding-top:0px;
	padding-left:10px;
	padding-right:10px;
}

.photo-400 {
	margin-left:0px; 
	max-width:400px ;	
}
.photo-400-caption {
	max-width:400px; 
	text-align:left; 
	border-bottom:thin #F3971A dashed ;
	border-right:thin #F3971A dashed ;
	border-left:thin #F3971A dashed ;
	margin-top:0px ;
	padding-top:0px;
	padding-left:10px;
	padding-right:10px;
}

.photo-500 {
	margin-left:0px; 
	max-width:500px ;	
}
.photo-500-caption {
	max-width:500px; 
	text-align:left; 
	border-bottom:thin #F3971A dashed ;
	border-right:thin #F3971A dashed ;
	border-left:thin #F3971A dashed ;
	margin-top:0px ;
	padding-top:0px;
	padding-left:10px;
	padding-right:10px;
}

/*-------------*/
/* Quoted Text */
/*-------------*/
.quoted-text {
	background-color:#F0F0F0;
	padding-left:0.9em;
	padding-right:0.9em;
	padding-bottom:0.1em;
	padding-top:0.1em;
	text-indent:4.0em ;
}

/*-------------*/
/*  Flexboxes  */
/*-------------*/
/* Maximum content width is 1025px with blank margins*/
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

/*------------*/
/*  Headings  */
/*------------*/
.heading1 {
	font-size:1.5em;
	font-weight:normal;
	border-bottom: #F3971A solid 0.15em;   
	padding-bottom: 0.2em;
	margin-bottom: 0.5em;
	display:table;				/* stops heading width=100% */
}
.heading2 {
	font-size:1.1em;
	font-weight:normal;
	border-bottom: #F3971A solid 0.125em;   
	padding-bottom: 0.2em;
	margin-bottom: 0.1em;
	display:table;				/* stops heading width=100% */
}
.heading2-1 {
	font-size:1.1em;
	font-weight:normal;
	border-bottom: #F3971A solid 0.125em;   
	padding-bottom: 0.2em;
	margin-bottom: 0.1em;
/*	display:table;				stops heading width=100% */ 
}
.heading3 {
	font:inherit;
	margin-top:0.3em;
	margin-bottom:0.3em;
	border-bottom: #F3971A solid 0.15em;   
	display:table;			/* stops heading width=100% */
}
/*----------*/
/*  Banner  */
/*----------*/
.banner {display:flex; max-width:700px;}
.banner-logo {display:inline-block; width:21.5%; max-width:150px;}
.banner-img {width:100%; height:auto;}
.banner-text {display:inline-block; width:77.5%; vertical-align:top;}
.banner-text-1 {display:inline-block; vertical-align:top; width:100%; max-width:550px;}
.banner-text-1-img {width:100%; height:auto; margin-top:1.4em; margin-left:1.0em;}
.banner-text-2 {width:100%; max-width:550px;}
.banner-text-2-img {width:100%; height:auto; margin-top:0.7em; margin-left:1.1em;}

/*----------------------*/
/* Navigation and Links */
/*----------------------*/
.PageBackButton {
	background-color:#E5E7E9; 
	cursor:pointer;
	padding:5px 10px; 
/*	padding:10px 20px; 	*/
	font-size:0.9em; 
	font-weight:normal; 
	color:black;
	border-radius: 10px; 
/*	border-width:thin; */
	border-width:thin;
	border-color:black;
	border-style:solid; 
	margin-right:5px;
}

.pad5R {
	padding-right:0.0em;
}
.pagelink{
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:thin;
}
/* Navbar links */
/* default when width is over 1000px */
/* displayed on the left */
.navbar a {
  display: block;
  color: navy;
  padding-top:0.35em;
  padding-bottom:0.35em;
  text-decoration:none;
}

a { text-decoration:none; }

a { white-space: nowrap; }	/* prevent wrapping (break) within a link */

/* Links on mouse-over */
a:hover:not(.active) .navlink {
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:medium;
}

a:hover:not(.active) .pagelink {
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:medium;
}

/* Current Active */
.current {
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:medium;
  cursor:default;
}

.navlink{
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:thin;
}

/* Hide the menu icon link that open and close the navbar on small screens */
.navbar .menuicon {
  display: none;
}

/*                                                    */
/* - - - - - - - -Responsive Design - - - - - - - - - */
/*                                                    */
/* - - Navigation and  Main Section - - */
/* Breakpoints at 600px + 1025px 				                              */
/* State 1 : small screen  < 600px 			hide navbar and dsiplay menu icon */
/*       2 : medium screen > 600px <1025px	navbar at top                     */
/*		 3 : large screen  > 1025px			navbar at side                    */
@media screen and (min-width: 1025px) { /* - - Large Screen - - */
.container {
	width:1000px ;
	margin:auto ;
}
.navdiv {width: 20%; }
.main {width: 80%;}
.large-screen-only {
	display:block;
}
}
@media screen and (max-width: 1025px) { /* - - Medium Screen - - */
.navdiv {width: 100%; border-bottom:#F3971A solid 0.15em; 
		 border-top: #F3971A  solid 0.15em; }
.main {width: 100%; }
.navbar a {display:inline-block; } /* use inline-block to fix link wrapping problem */
.pad5R {
	margin:0.0em;
	padding-right:0.4em;
	padding-left:0.2em;
	padding-top:0.2em;
	padding-bottom:0.2em;
	border-right-color:#F3971A ;
	border-right-style:solid;
	border-right-width:0.15em ;
}
.navlink {
	border-bottom:none;}
.large-screen-only {
	display:none;
}
}
@media screen and (max-width: 600px) { /* - - Small Screen - - */
.navdiv {width: 100%; }
.main {width: 100%; }
.navbar a:not(:first-child) {display: none;}
.navbar a.menuicon {float: right; display: block;}
.pagelink{
  border-bottom-color:navy;
  border-bottom-style:solid;
  border-bottom-width:thin;
}
.pad5R {
	margin:0.0em;
	padding-top:0.4em;
	padding-bottom:0.0em;
	padding-right:0.0em;
	border-right:none;
}
.large-screen-only {
	display:none;
}
.small-screen-only {
	line-height:2.4em; 
}
}
@media screen and (max-width: 600px) {  /* - - Small Screen - - */
  .navbar.smallscreen {position: relative;}
  .navbar.smallscreen .menuicon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.smallscreen a {
    float: none;
    display: block;
    text-align: left;
/*    padding-top:0.10em;			 test */
/*    padding-bottom:0.10em;		 test */
  }
}

@media screen and (max-width: 700px) {  /* - - Small Screen - - */
.banner-text-1-img {margin-left:0.6em;}
.banner-text-2-img {margin-left:0.7em; margin-top:0.5em;}
}

/*---------------*/
/*  Modal Images */
/*---------------*/
/* The Close Button */
.close-modal {
  position: absolute;
  top: 0.5em;
  right: 0.4em;
  color:black;
  font-size: 2.5em;
  font-weight:bolder;
}
.close-modal:hover,
.close-modal:focus {
  cursor: pointer;
}
/* popup starts */
.popup-background				/* popup to overlay screen with black background */
{ 	position:fixed; 
	top:0; left:0; 
	background:rgba(255,255,255,1.0); 
	z-index:5; 
	width:100%; 
	height:100%; 
	display:none; /* initially do not display */
} 
.popup-full-image {
	/* popup to display the enlarged image */
	height: 100%;
	width: 100%;
	margin: 0 ;
	position: fixed;
	top: 0px ;
	left: 0px ;	
	z-index: 10;
	display: none; /* initially do not display */
	text-align:right ;
}
/* When link is clicked display the popup's */ 
/* see also embedded style sheet on page    */
#Image-01:target, #Image-01:target + #popup-bg-Image-01{ 
	display:block; opacity:2; } 
#image2:target, #image2:target + #popup-bg-2{ 
	display:block; opacity:2; } 
#image3:target, #image3:target + #popup-bg-3{ 
	display:block; opacity:2; } 
/*			         */
/* Modal Images Ends */
/*		             */