/* CSS for Blog Articles */
body {
//	font-size:13px; 
	font-family:Arial; 
	} 

p {
 font-family: Arial;
 font-size: 12pt;
 text-align: justify;
}
table {
 font-family: Arial;
 font-size: 12pt;
}
.summary {
 color: #A828CE; /*old #663399*/
 font-family: Cambria;
 font-weight: bold;
 font-style: italic;
 font-size: 14px;
 text-align: center;
}
.title {
 text-align:center; /*added 25.6.21*/
 font-family:Tahoma;
 font-weight: bold;
 font-size: 24px;
 color:#990000; /* New brown, old blue 2F5597; */
 padding: 6 0 6 0; /*Left padding removed-in mobile title goes to 2 lines does not look good*/
}

/* Note: added following for responsive image. Will work for all images. 
 See Mywebsite Notes, Chap "Useful Code Used" == */
img {
 max-width: 100%; /*Never more than its container size*/
 height:auto;   /*maintain aspect ration, never go above original height*/
 text-align: center;
}
.imgcredit {
 font-family:TimesNewRoman;
 text-align:center;
 font-size: 11px;
 font-style:italic;}

.caption {
 text-align: center;
 font-weight: bold;
 }
h1 {
 margin-top:30px;
 font-size: 20px;
 font-family: Arial;
 font-weight: bold;
 color: #872556;
	}
h2 {
	margin-top:25px;
	font-size:16px;
	color:Darkblue;
	font-weight:bold;
	font-family:Cambria;
	}
h3 {
	font-size:16px;
	color:#C45911;
	font-family:Cambria;
	font-style:italic; 
	}
/* ====Quote Box BestThkg - Begin ===	
 Images reqd: quote-start.jpg, quote-end.jpg */
div.quote-lft,div.quote-rt,div.quote-center{
    color:#284fac;
	font:italic bold 15px Cambria;
    padding:0 0 14px 32px;
    background-position:top left;
    background-image:url(images/quote-start.jpg);
    background-repeat:no-repeat;
    text-align:center;
}
div.quote-lft{
    float:left;
    clear:left;
    width:190px;
    margin-right:8px}
div.quote-rt{
    float:right;
    clear:right;
    width:180px;
    margin-left:8px}
div.quote-center{
    clear:both;
    width:360px;
    margin:1em 72px}
	
div.quote-lft > div.quotebody,div.quote-rt > div.quotebody,div.quote-center > div.quotebody{
    margin-bottom:1em;
    background-position:bottom right;
	background-image:url(images/quote-end.jpg);
    background-repeat:no-repeat;
    padding:1em 2.1em 0 0}
/* ====Quote Box BestThkg - End ===*/

/* ==== Quote Box my simple ====*/
.quote {
 font-size: 15px;
 width:180px;
 color:purple;
 font-weight:bold;
 font-style:italic;
 font-family:Times New Roman;
 text-align:center;
 line-height:115%;
 background-color:#E9F1FC;
 padding:5px;
 border-spacing: 10px 5px;
 margin-top: 3px;
 margin-bottom: 3px;
}

/* Right Quote Box Simple-(11.8.25)used only for images*/
.rightqt {
 float: right;
 margin-left: 10px; 
}
/* Left Quote Box Simple-(11.8.25)used only for images*/
.leftqt {
 float: left;
 margin-right: 10px; 
}
/*For small screen quotes width=100% */
@media only screen and (max-width: 300px) {
.quote {
	width:80%;
	float:none;
	margin:auto;
	}
}
/* ==== Quote Box My Simple - End ===*/

/* ==== Two Adjacent Side by side Images ===*/
.imgcontainer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px; /*reduced from 40. Reduces row & Col gap*/
  max-width: 95%; /*reduced from 80*/
  margin: 0 auto;
/* padding: 20px;  commented PK to increase sidebyside width*/
  }

.image-box {

/*2 lines added 4.9.25 as caption text of 2 figs was too long*/
flex: 1 1 45%;   /* take about half the row */
max-width: 48%;  /* prevent overflow */

display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.image-box img {
max-width: 100%;
height: auto;
}

.image-box span {
margin-top: 10px;
font-size: 14px;
}

.main-caption {
width: 100%; /*100% of imgcontainer width. This is imp to ensure this goes to new row*/
text-align: center;
font-weight: bold;
/* margin-top: 20px; commented pk 7.8.25 */
font-size: 16px;
}

@media (max-width: 768px) {
.imgcontainer {
flex-direction: column;
align-items: center;
}

.image-box {
width: 100%;
max-width: 300px;
}
}
/* === Two Adjacent Images Responsive - End ===*/

.container, #container {
    max-width: 720px; /*To restrict width on laptop. On mobile, spans full width by viewport stmt*/
    margin: auto;
/*    width: 100%; /* Added to ensure container takes full width up to max-width */
}