/*
	styles.css for Light Maitreya Way
	Posted: 2019-Jan-06
	Last Updated: 2019-Dec-20
	Connections: index.html
*/

/* Be Aware Whenever Adding New Classes or IDs With Percentage Values For Margins and Padding, Because Doing So Can Break Other CSS Settings, Or The Entire CSS Layout! */



/* BEGIN: Embedded Web Fonts */


@font-face { 
	font-family: 'amble-bold';
	src: url('./amble-bold.woff') format('woff'); 
	src: url('./amble-bold.woff2') format('woff2'); 
	src: url('./amble-bold.ttf') format('truetype');
}

@font-face { 
	font-family: 'amble-bold';
	src: url('./amble-bolditalic.woff') format('woff'); 
	src: url('./amble-bolditalic.woff2') format('woff2'); 
	src: url('./amble-bolditalic.ttf') format('truetype');
	font-style: italic ;
}


@font-face { 
	font-family: 'charis-bold';
	src: url('./charis-bold.woff') format('woff'); 
	src: url('./charis-bold.woff2') format('woff2'); 
	src: url('./charis-bold.ttf') format('truetype');
}

@font-face { 
	font-family: 'charis-bold';
	src: url('./charis-bolditalic.woff') format('woff'); 
	src: url('./charis-bolditalic.woff2') format('woff2'); 
	font-style: italic ;
}


@font-face { 
	font-family: 'literata-bold';
	src: url('./literatabook-bold.woff') format('woff'); 
	src: url('./literatabook-bold.woff2') format('woff2'); 
	src: url('./literatabook-bold.otf') format('opentype'); 
	src: url('./literatabook-bold.ttf') format('truetype');
}


/*
@font-face { 
	font-family: 'manrope-semibold';
	src: url('./manrope-semibold.woff') format('woff'); 
	src: url('./manrope-semibold.woff2') format('woff2'); 
	src: url('./manrope-semibold.otf') format('opentype'); 
	src: url('./manrope-semibold.ttf') format('truetype');
}
*/


@font-face { 
	font-family: 'opensans-semi';
	src: url('./opensans-semibold.woff') format('woff'); 
	src: url('./opensans-semibold.ttf') format('truetype'); 
}

@font-face { 
	font-family: 'opensans-semi';
	src: url('./opensans-semibolditalic.woff') format('woff'); 
	src: url('./opensans-semibolditalic.woff2') format('woff2'); 
	src: url('./opensans-semibolditalic.ttf') format('truetype');
	font-style: italic ;
}


@font-face { 
	font-family: 'opensans-xbold';
	src: url('./opensans-extrabold.woff') format('woff'); 
	src: url('./opensans-extrabold.ttf') format('truetype'); 
}

@font-face { 
	font-family: 'opensans-xbold';
	src: url('./opensans-extrabolditalic.woff') format('woff'); 
	src: url('./opensans-extrabolditalic.woff2') format('woff2'); 
	src: url('./opensans-extrabolditalic.ttf') format('truetype');
	font-style: italic ;
}


@font-face { 
	font-family: 'poppins-xbold';
	src: url('./poppins-xbold.woff') format('woff'); 
	src: url('./poppins-xbold.woff2') format('woff2'); 
	src: url('./poppins-xbold.otf') format('opentype'); 
}

@font-face { 
	font-family: 'poppins-xbold';
	src: url('./poppins-xbolditalic.woff') format('woff'); 
	src: url('./poppins-xbolditalic.woff2') format('woff2'); 
	src: url('./poppins-xbolditalic.otf') format('opentype');
	font-style: italic ;
}



/*
@font-face { 
	font-family: 'sanspro-bold';
	src: url('./sourcesanspro-bold.woff') format('woff'); 
	src: url('./sourcesanspro-bold.woff2') format('woff2'); 
	src: url('./sourcesanspro-bold.otf') format('opentype'); 
	src: url('./sourcesanspro-bold.ttf') format('truetype');
}

@font-face { 
	font-family: 'sanspro-black';
	src: url('./sourcesanspro-black.woff') format('woff'); 
	src: url('./sourcesanspro-black.woff2') format('woff2'); 
	src: url('./sourcesanspro-black.otf') format('opentype'); 
	src: url('./sourcesanspro-black.ttf') format('truetype');
}
*/


@font-face { 
	font-family: 'serifpro-bold';
	src: url('./sourceserifpro-bold.woff') format('woff'); 
	src: url('./sourceserifpro-bold.woff2') format('woff2'); 
	src: url('./sourceserifpro-bold.otf') format('opentype'); 
	src: url('./sourceserifpro-bold.ttf') format('truetype');
}

@font-face { 
	font-family: 'serifpro-bold';
	src: url('./sourceserifpro-bolditalic.woff') format('woff'); 
	src: url('./sourceserifpro-bolditalic.woff2') format('woff2'); 
	src: url('./sourceserifpro-bolditalic.otf') format('opentype'); 
	font-style: italic ;
}


@font-face {
	font-family: 'loc-times';
	src: url('./times-new-roman.woff') format('woff'); 
	src: url('./times-new-roman.ttf') format('truetype'); 
}

/* END: Embedded Web Fonts */


/* ---------------------------------------- */


/* BEGIN: Custom Font Groups. */


.amble {
	font-family: 'amble-bold', sans-serif ;
	font-weight: bold ;
}

.charis {
	font-family: 'charis-bold', serif ;
	font-weight: bold ;
}

.litabold {
	font-family: 'literata-bold', serif ;
	font-style: normal ;
	font-weight: bold ;
}

.opensans {
	font-family: 'opensans-semi', sans-serif ;
	font-style: normal ;
	font-weight: bold ;
}
	
.opensanx {
	font-family: 'opensans-xbold', sans-serif ;
	font-style: normal ;
	font-weight: bold ;
}

.poppin {
	font-family: 'poppins-xbold', Arial, sans-serif ;
	font-style: normal ;
	font-weight: normal ;
}

.poppinx {
	font-family: 'poppins-xbold', Arial, sans-serif ;
	font-style: normal ;
	font-weight: bold ;
}

.timesrom {
	font-family: 'Times New Roman', 'loc-times', Times, serif ;
	font-style: normal ;
	font-weight: normal ;
}

.timesbold {
	font-family: 'Times New Roman', 'loc-times', Times, serif ;
	font-style: normal ;
	font-weight: bold ;
}



/* 	.timesbi {
		font-family: 'Times New Roman', 'loc-times', Times, serif ;
		font-style: italic ;
		font-weight: bold ;
	} 


	.clare {
	font-family: 'clare-bold', Georgia, serif ;
	font-style: normal ;
	font-weight: normal ;
	}

	.clareb {
	font-family: 'clare-bold', Georgia, serif ;
	font-style: normal ;
	font-weight: bold ;
	}

} */


/* END: Custom Font Groups. */

/* ---------------------------------------- */



body {
	font-family: Georgia, 'serifpro-bold', Times, 'loc-times', serif ;
	background-color: #BCDBF6 ;
}


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


button, input, meter, output, progress, select, textarea {
	max-width: 100% ;
}


div#navladder-001 {
	float: right ;
	width: 25% ;
	color: #FFF ;
	background-color: #BCDBF6 ;
}
div#content-001 {
	float: right ;
	width: 75% ;
	color: #2B519C ;	
	background-color: #FFF ;
}


/* Custom classes for text. */

.uline {
	text-decoration: underline ;
}

.toast {
	background-color: #E1C483 ;
}

.toastbar {
	background-color: #E1C483 ;
	border-top: solid ;
	border-color: #5C6A9E ;
	border-top-width: 8px ;
}

.toasthead {
	background-color: #E1C483 ;
	border-style: solid ;
	border-top: solid ;
	border-color: #5C6A9E ;
	border-top-width: 7px ;
	border-right-width: 5px ;
	border-bottom-width: 5px ;
	border-left-width: 5px ;
	border-top-right-radius: 12px 12px;
	border-top-left-radius: 12px 12px;
}

.toastbase {
	background-color: #E1C483 ;
	border-style: solid ;
	border-top: solid ;
	border-color: #5C6A9E ;
	border-top-width: 5px ;
	border-right-width: 5px ;
	border-bottom-width: 7px ;
	border-left-width: 5px ;
	border-bottom-right-radius: 12px 12px;
	border-bottom-left-radius: 12px 12px;
}


.padroot {
	padding: 12px 20px ;
}

.padroot2 {
	padding: 16px 24px 12px 24px ;
}


.seabreeze {
	font-size: 16px ;
	color: #ffffff ;
	background-color: #5C6A9E ;
	padding: 5px ;
}

.bold {
	font-weight: bold ;
}

.ita {
	font-style: italic ;
}

.linelift {
	line-height: 1.35 ;
}

.linelift2 {
	line-height: 1.2 ;
}

.lineliftx {
	line-height: 1.5 ;
}

.boost {
	font-size: 1.2em ;
}

.booss {
	font-size: 1.1em ;
}

.ds {
	font-size: 0.9em ;
}

.ds2 {
	font-size: 0.8em ;
}

.prem {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.92em ;
	font-weight: normal ;
}

.prea {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: normal ;
}

.preab {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold ;
}


.preva {
	font-family: Verdana, 'amble-bold', serif;
	font-weight: normal ;
}

.prevb {
	font-family: Verdana, 'amble-bold', serif;
	font-weight: bold ;
}

.prevbi {
	font-family: Verdana, 'amble-bold', serif;
	font-style: italic ;
	font-weight: bold ;
}

.ambold {
	font-family: 'amble-bold', Verdana, serif;
	font-weight: bold ;
}

/* prebox for preserving the horizontal edges of capital roman numerals, when Verdana is not available. */

.prebox {
	font-family: 'amble-bold', Verdana, serif;
	font-size: 0.92em ;
	font-weight: normal ;
}


.presanxb {
	font-family: 'opensans-xbold', Verdana, serif;
	font-size: 0.92em ;
	font-weight: normal ;
}

/* prevbs for quotes verdana style, but should use 'presanxb' since some browsers do not natively support Verdana. */

.prevbs {
	font-family: Verdana,'opensans-xbold', serif;
	font-size: 0.92em ;
	font-weight: bold ;
}


.pret {
	font-family: Tahoma, 'opensans-xbold', serif;
}

.liquo {
	font-family: 'literata-bold', sans-serif;
	font-style: italic ;
}

.tquo {
	font-family: Tahoma, 'opensans-xbold', sans-serif;
	font-style: italic ;
}

.aquo {
	font-family: Helvetica, Arial, sans-serif ;
	font-size: 1.3em ;
	/* Use 'aquo' when quoting, for styled double quotation marks, for example: <span class="aquo"> &ldquo;</span> */
}

.serquo {
	font-family: 'serifpro-bold', serif ;
	font-size: 1.3em ;
}

.serquos {
	font-family: 'serifpro-bold', serif ;
	font-size: 1.1em ;
}


.indent-a {
	padding-left: 15px ;
	display: inline-block ;
}

.indent-b {
	padding-left: 30px ;
	display: inline-block ;
	word-break: normal ;
}

.indentoc {
	padding-left: 7px ;
	display: inline-block ;
}

.indentbox {
	margin-left: 30px ;
	padding-left: 30px ;
	display: block ;
	/* Use with quik sidenotes. */
}

/* Use this (below) when displaying long words like URLs, or text will go outside its boundaries. */

.indent-wrap {
	padding-left: 16px ;
	padding-right: 6px ;
	display: block ;
	word-break: break-all ;
}

/* Use the (above) to prevent words going out of bounds. */

.downdent {
	padding-bottom: 12px ;
}

.topdent {
	padding-top: 12px ;
}

.topdent-sm {
	padding-top: 8px ;
}

.thin {
	font-weight: normal ;
}


.fiftygreybold {
	color: #666666 ;
}

.fiftygrey {
	color: #666666 ;
	font-weight: normal ;
}

.seventygrey {
	color: #4B4B4B ;
	font-weight: normal ;
}

.seventygreybold {
	color: #4B4B4B ;
	font-weight: bold ;
}

.negquote {
	color: #4B4B4B ;
	font-family: Tahoma, 'opensans-xbold', serif ;
	font-style: italic ;
}

.greiquote {
	color: #4B4B4B ;
	font-style: italic ;
}

.neghead {
	background-color: #CDCDCD ;
	/* color: #FFFFFF ; */
	/* #B4B4B4 = 30% grey ; #CDCDCD = 20% grey ; */
}


.bgtengrey {
	background-color: #E6E6E6 ;
}

.bgwall {
	background-color: #BCDBF6 ;
}

.bgwalli {
	background-color: #BCDBF6 ;
	font-style: italic ;
}

.greynote {
	color: #4B4B4B ;
	font-size: 22px ;
	font-weight: normal ;
	text-align: right ;
}

.psnote {
	color: #305CB6 ;
	/* color: #4B4B4B ; */
	font-size: 22px ;
	font-weight: bold ;
	text-align: right ;
}

.starblock {
	display: inline-block ;
}

.wordweld {
	white-space: nowrap ;
}

.centertext {
	text-align: center ;
}

.hgold {
	background-color: #FFD700 ;
}

.hgoldi {
	background-color: #FFD700 ;
	font-style: italic ;
}


.brshort-a {
	line-height: 0.7em ;
}

.brshort-b {
	line-height: 0.8em ;
}


.float-text {
	float: inline-start;
	display: inline ;
}

/* Customized default text tags. */

h1 {
	font-size: 28px ;
	font-weight: bold ;
	letter-spacing: 0.04em ;
}

h2 {
	font-size: 26px ;
	font-weight: bold ;
	letter-spacing: 0.03em ;
	padding: 8px 0 3px 8px;
}

h3 {
	color: #244D9E ;
	font-size: 24px ;
	font-weight: bold ;
	letter-spacing: 0.01em ;
	word-spacing: 2px ;
	line-height: 1.25 ;
}

p {
	color: #2E3192 ;	
	background-color: #FFFFFF ;
	font-size: 24px ;
	font-weight: bold ;
	letter-spacing: 0.01em ;
	word-spacing: 2px ;
	line-height: 1.22 ;
}

/* alt text color: #3366CC ; #28324B ; #2E3192 ; #305CB6 ; #2B519C */





/* ---------------------------------------- */



/* 2019-12-11: picpim is unused, picpin is reserved for DIV specific img.picpin */

img.picpim {
	display: block ;
    margin-left: auto ;
    margin-right: auto ;
}

img.picpin-a {
	display: block ;
    margin-left: auto ;
    margin-right: auto ;
	border-top: 1px dotted #5C6A9E ;
	border-right: 1px dotted #5C6A9E ;
	border-bottom: 1px dotted #5C6A9E ;
	border-left: 5px solid #2E3192 ;
}


img.picpin-b {
	display: block ;
    margin-left: auto ;
    margin-right: auto ;
	border-top: 7px solid #5C6A9E ;
	border-right: 7px solid #5C6A9E ;
	border-bottom: 7px solid #5C6A9E ;
	border-left: 7px solid #5C6A9E ;
}


/* DIV specific IMG settings */


/* 2019-12-11: the DIV picblock-01 can be used to repeat the same desired frame.  Remember to name the description as picgroup-01,-02,-03, etc.. to not get this confused with the DIV.  */


#picblock-01 img.picpin {
	display: block ;
    margin-left: auto ;
    margin-right: auto ;
	border-top: 7px solid #5C6A9E ;
	border-right: 7px solid #5C6A9E ;
	border-bottom: 7px solid #5C6A9E ;
	border-left: 7px solid #5C6A9E ;
	/* located in: three-divine-aspects-p1.html */
}

#picblock-02 img.picpin {
	display: block ;
    margin-left: auto ;
    margin-right: auto ;
	/* located in: three-divine-aspects-p1.html */
}


/* ---------------------------------------- */


/* Expandable and Collapsible Notes Settings */


.dropnote {
	max-width: 90% ;
	margin-left: auto ;
	margin-right: auto ;
	color: #303030 ;
	/* ALT: color: #4B4B4B ; */
	background-color: #BCDBF6 ;
	padding: 0 20px 0 0 ;
	font-size: 18px ;
	font-weight: bold ;
	word-spacing: 2px ;
	border-left: 7px solid #5C6A9E ;
}

.dropnote ul {
	list-style: none ;
	margin-left: 0 ;
}

.dropbox li {
	background-color: #BCDBF6 ;
	padding: 10px 0 ;
}

.dropbox li > input + * {
	display: none ;
}

.dropbox li > input:checked + * {
	background-color: #BCDBF6 ;
	padding: 0 0 6px 0 ;
	border-bottom: 1px solid #666666;
	display: block ;
}

.dropbox li > input {
	display: none ;
}

.dropbox label {
	cursor: pointer ;
}


/* ---------------------------------------- */


/* Outline Settings. */

#outline {
	text-align: left ;
}

#outline li {
	color: #244D9E ;
	font-size: 24px ;
	font-weight: bold ;
	letter-spacing: 0.02em ;
	line-height: 1.5 ;
	word-spacing: 1px ;
	padding: 8px 0 12px 0 ;
	/* located in: index.html , three-divine-aspects-p1.html */
	
}

.uptolist {
	float: right;
	display: inline ;
	font-size: 20px ;
	font-weight: normal ;
}

/*
#sitemap li {
	color: #244D9E ;
	letter-spacing: 0.03em ;
	line-height: 1.5 ;
	word-spacing: 1px ;
	}

#sitemap ul {
	list-style: none ;
	margin-left: 0 ;
	/* located in: index.html */
}
*/


#sitemap {
	color: #244D9E ;
	letter-spacing: 0.03em ;
	line-height: 1.5 ;
	word-spacing: 1px ;
	list-style: none ;
	margin-left: 0 ;
}


.indentmap {
	padding-left: 16px ;
	display: inline-block ;
}

.padsitemap {
	padding: 5px 12px ;
	border-top-right-radius: 12px 12px;
	border-top-left-radius: 12px 12px;
	font-family: 'charis-bold', serif ;
	font-size: 26px ;
	font-weight: bold 
}


.padlegacy {
	padding: 5px 12px ;
	border-top-right-radius: 12px 12px;
	border-top-left-radius: 12px 12px;
	font-family: 'charis-bold', serif ;
	font-size: 24px ;
	font-weight: bold ;
}

.smaptxt {
	font-family: 'charis-bold', serif ;
	font-size: 24px ;
	font-weight: bold ;
}

.smapnote {
	font-family: 'charis-bold', serif ;
	font-size: 18px ;
	font-weight: bold ;
}

.linkpin {
	border-left: 7px solid #2E3192 ;
	/*
	display: block ;
	border-top: 1px dotted #5C6A9E ;
	border-right: 1px dotted #5C6A9E ;
	border-bottom: 1px dotted #5C6A9E ; */
}


/* ---------------------------------------- */


/* Sidenote Box Settings. */

/*  border-top-right-radius: 6px 6px;
	border-top-left-radius: 6px 6px;  */

	
.sidenotecap {
	max-width: 88% ;
	margin-left: auto ;
	margin-right: auto ;
	color: #FFF ;
	background-color: #649AC1 ;
	border-left: 10px solid #649AC1 ;
	font-size: 20px ;
	font-weight: bold ;
	letter-spacing: 0.02em ;
	padding: 5px 13px 2px 12px;
	border-top-right-radius: 40px 40px;
	display: block ;
}

.sidenotecap-b {
	max-width: 88% ;
	margin-left: auto ;
	margin-right: auto ;
	padding: 0 12px ;
	border-right: 1px solid #649AC1;
	border-left: 10px solid #649AC1 ;
	border-top: 4px solid #649AC1;
	display: block ;
}


/* Use <span> to stack sidenotecap on top of sidenote; example: 
	<span class="sidenotecap">Notes Title</span>
	<span class="sidenote">Note Contents.</span>
	Don't forget to factor border and padding (px) to match length.
*/

.sidenote {
	max-width: 88% ;
	margin-left: auto ;
	margin-right: auto ;
	color: #303030 ;
	background-color: #BCDBF6 ;
	padding: 16px 12px ;
	font-size: 18px ;
	font-weight: bold ;
	word-spacing: 2px ;
	border-top: 1px dotted #649AC1;
	border-right: 1px dotted #649AC1;
	border-bottom: 1px dotted #649AC1;
	border-left: 10px solid #649AC1 ;
	display: block ;
}

.sidenote-b {
	max-width: 88% ;
	margin-left: auto ;
	margin-right: auto ;
	color: #303030 ;
	background-color: #BCDBF6 ;
	padding: 16px 12px ;
	font-size: 18px ;
	font-weight: bold ;
	word-spacing: 2px ;
	border-top: 1px dotted #649AC1;
	border-right: 1px dotted #649AC1;
	border-bottom: 1px dotted #649AC1;
	/* double */
	border-left: 10px double #649AC1 ;
	display: block ;
}


.sidenote-c {
	max-width: 88% ;
	margin-left: auto ;
	margin-right: auto ;
	color: #303030 ;
	background-color: #BCDBF6 ;
	/* less padding */
	padding: 10px 12px ;
	font-size: 18px ;
	font-weight: bold ;
	word-spacing: 2px ;
	border-top: 1px dotted #649AC1;
	border-right: 1px dotted #649AC1;
	border-bottom: 1px dotted #649AC1;
	/* solid */
	border-left: 10px solid #649AC1 ;
	display: inline-block ;
}




/* ---------------------------------------- */



/* Responsive CSS layout settings. */

div#mainbody {
	margin: 1% 12% ;
	color: inherit ;
	background-color: inherit ;
}

/* Root div for adjusting padding for entire content section. */

div#content-002 {
	padding: 8px 46px 8px 36px ;
}


/* Adjust according to width of screens. */


@media only screen and (min-width: 1281px) {
	.aw {
		padding-right: 9% ;
		padding-left: 3% ;
		/* To trim horizontal reading length. */
	}
}

@media only screen and (min-width: 1024px) {
	.indent-wrap {
		word-break: normal ;
	}
}	

@media only screen 
	and (min-width: 1281px) 
	and (max-width: 1920px) {
	.sidenote { 
		font-size: 20px ;
	}
	.sidenote-b { 
		font-size: 20px ;
	}
	.sidenote-c { 
		font-size: 20px ;
	}
	.dropnote { 
		font-size: 20px ;
	}
}	

@media only screen 
	and (min-width: 769px) 
	and (max-width: 1280px) {
		div#mainbody {
			margin: 1% 6% ;
		}
		div#content-002 {
			padding-top: 8px ;
			padding-bottom: 8px ;
			padding-right: 6% ;
			padding-left: 4% ;
			/* padding: 8px 20px ; */
		}
		.padroot {
			padding: 6px 10px ;
		}
		.padroot2 {
			padding: 12px 10px 6px 10px ;
		}
		.indentbox {
			margin-left: 18px ;
			padding-left: 20px ;
		}
}


@media only screen 
	and (min-width: 431px) 
	and (max-width: 768px) {
		div#mainbody {
			margin: 0 0 ;
		}
		div#navladder-001 {
			float: none ;
			width: 100% ;
		}
		div#content-001 {
			float: none ;
			width: 100% ;
		}
		div#content-002 {
			padding: 6px 10px ;
		}
		.padroot {
			padding: 6px 6px ;
		}
		.padroot2 {
			padding: 9px 6px 6px 6px ;
		}
		.toastbar {
			border-top-width: 7px ;
		}
		.boost {
		font-size: 1.2em ;
		}
		h1 {
			font-size: 26px ;
		}
		h2 {
			font-size: 25px ;
		}
		h3 {
			font-size: 22px ;
		}
		p {
			font-size: 22px ;
		}
		.psnote {
			font-size: 20px ;
		}
		.greynote {
			font-size: 20px ;
		}
		.sidenote {
			max-width: 92% ;
		}
		.sidenote-b {
			max-width: 92% ;
		}
		.sidenote-c {
			max-width: 92% ;
		}
		.sidenotecap {
			max-width: 92% ;
		}
		.sidenotecap-b {
			max-width: 92% ;
		}
		.indentbox {
			margin-left: 15px ;
			padding-left: 20px ;
		}
		#outline li {
			font-size: 22px ;
		}
		.padsitemap {
			font-size: 24px ;
		}
		.padlegacy {
			font-size: 22px ;
		}
		.smaptxt {
			font-size: 22px ;
		}
		.smapnote {
			font-size: 16px ;
		}
}


@media only screen and (max-width: 430px) {
	div#mainbody {
		margin: 0 0 ;
	}
	div#navladder-001 {
		float: none ;
		width: 100% ;
	}
	div#content-001 {
		float: none ;
		width: 100% ;
	}
	div#content-002 {
		padding: 6px 6px ;
	}
	.padroot {
		padding: 6px 6px ;
	}
	.padroot2 {
			padding: 7px 6px 6px 6px ;
		}
	.toastbar {
		border-top-width: 7px ;
	}
	.boost {
	font-size: 1.12em ;
	}
	h1 {
		font-size: 24px ;
	}
	h2 {
		font-size: 21px ;
	}
	h3 {
		font-size: 18px ;
	}
	p {
		font-size: 18px ;
	}
	#outline li {
		font-size: 20px ;
	}
	.uptolist {
		font-size: 18px ;
	}
	.sidenote { 
		max-width: 96% ;
		font-size: 16px ;
	}
	.sidenote-b { 
		max-width: 96% ;
		font-size: 16px ;
	}
	.sidenote-c { 
		max-width: 96% ;
		font-size: 16px ;
	}
	.dropnote { 
		font-size: 16px ;
	}
	.psnote {
		font-size: 18px ;
	}
	.greynote {
		font-size: 18px ;
	}
	.sidenotecap {
		max-width: 96% ;
		font-size: 18px 
	}
	.sidenotecap-b {
		max-width: 96% ;
		font-size: 18px 
	}
	.indent-a {
		padding-left: 10px ;
	}
	.indent-b {
		padding-left: 18px ;
	}
	.indentbox {
		margin-left: 6px ;
		padding-left: 12px ;
	}
	.indent-wrap {
		padding-left: 20px ;
	}
	.padsitemap {
		font-size: 22px ;
	}
	.padlegacy {
		font-size: 20px ;
	}
	.smaptxt {
		font-size: 20px ;
	}
	.smapnote {
		font-size: 16px ;
	}
}

/* Scaling text for very high resolution screens. */

@media only screen and (min-width: 1921px) {
	h1 {
		font-size: 34px ;
	}
	h2 {
		font-size: 32px ;
	}
	h3 {
		font-size: 30px ;
	}
	p {
		font-size: 30px ;
	}
	#outline li {
		font-size: 30px ;
	}
	.uptolist {
		font-size: 26px ;
	}
	.sidenote { 
		font-size: 22px ;
	}
	.sidenote-b { 
		font-size: 22px ;
	}
	.sidenote-c { 
		font-size: 22px ;
	}
	.dropnote { 
		font-size: 22px ;
	}
	.psnote {
		font-size: 28px ;
	}
	.greynote {
		font-size: 28px ;
	}
	.sidenotecap {
		font-size: 24px ;
	}
	.sidenotecap-b {
		font-size: 24px ;
	}
	.indent-a {
		padding-left: 20px ;
	}
	.indent-b {
		padding-left: 40px ;
	}
	.indentbox {
		margin-left: 45px ;
		padding-left: 40px ;
	}
	.indent-wrap {
		padding-left: 40px ;
	}
		.padsitemap {
			font-size: 32px ;
		}
		.padlegacy {
			font-size: 30px ;
		}
		.smaptxt {
			font-size: 30px ;
		}
		.smapnote {
			font-size: 24px ;
		}
	.toastbar {
		background-color: #E1C483 ;
		border-top: solid ;
		border-color: #5C6A9E ;
		border-top-width: 12px ;
	}
	.padroot {
		padding: 18px 28px ;
	}
	.padroot2 {
		padding: 22px 28px 20px 28px ;
	}
}



/* Homepage main logo settings. */

div#mainlogo {
	background-color: #BCDBF6 ;
	max-width: 100% ;
	height: auto ;
	display: block ;
}

/* For scaling images to higher resolutions, enable to keep contents div in alignment. */
 
@media only screen and (max-width: 1919px) {
	.hide-hires {
		display: none ;
	}
}
@media only screen and (min-width: 1920px) {
	.hide-lowres {
		display: none ;
	}		
}
/* Due to lack of support in some browsers for CSS: zoom, and img:"srcset" and "sizes", so it is better to use the above media query method. */


.topdots {
	border-top: 1px dotted #649AC1;
	padding-top: 20px ;
}

.bottomdots {
	border-bottom: 2px dotted #649AC1;
	padding-bottom: 12px ;
	display: block ;
}

.bottomdots2x {
	border-bottom: 1px dotted #649AC1;
	padding-bottom: 50px ;
	display: block ;
}

.boxtopdash {
	border-top: 2px dashed #649AC1;
	padding-top: 20px ;
	display: block ;
}

.boxtopdashshort {
	border-top: 2px dashed #649AC1;
	padding-top: 12px ;
	display: inline-block ;
}

.boxbottomdash {
	border-bottom: 2px dashed #649AC1;
	padding-bottom: 20px ;
	display: block ;
}

.boxbottomdash2x {
	border-bottom: 2px dashed #649AC1;
	padding-bottom: 40px ;
	display: block ;
}


/* Pagebar Navigation Section */

div#page-navbar {
	color: #2B519C ;	
	background-color: #FFF ;
	border-top: 1px dotted #649AC1;
	padding-top: 5px ;
}

p.next-page {
	float: right;
	margin-right: 2px ;
}

p.previous-page {
	float: left;
	margin-left: 2px ;
}

p.center-gotop {
	text-align: center ;
	margin: 3px ;
	padding: 8px 2px 18px 2px ;
}

.clearfloat {
	clear: both;
	height: 0 ;
}


@media only screen and (max-width: 768px) {
	div#page-navbar {
	float: none ;
	width: 100% ;
	}
}	

/* Footer Section */


div#footer-01 {
	background-color: #5C6A9E ;						
	padding: 8px 0 8px 20px ;
	display: block ;
}

div#footer-02 {
	background-color: #5C6A9E ;
	display: none ;
}

@media only screen and (max-width: 768px) {
	div#footer-01 {
		float: none ;
		width: 100% ;
		display: none ;
	}
	div#footer-02 {
		float: none ;
		background-color: #5C6A9E ;
		padding: 27px 0 12px 20px ;
		display: block ;
	}
}


/* Update Current Copyright Year */

.footyear::after {
  content: "( 2019 )";
  font-size: 1.1.em;
}