.cols {
-webkit-column-width: 21em; /* Chrome, Safari, Opera */
-moz-column-fill: balance;
-webkit-column-gap: 2em; 
-webkit-column-rule: 2px solid #ccc; 

-moz-column-width: 21em; /* Firefox */
-moz-column-fill: balance;
-moz-column-gap: 2em; 
-moz-column-rule: 2px solid #ccc; 

column-width: 21em; 
column-fill: balance; 
column-gap: 2em; 
column-rule: 2px solid #ccc;

columns: 21em;

}


.menu ul {font-family: Arial, Verdana, "Sans Serif"; font-size: 1.1em; font-weight: 600; list-style-type: none; margin-top: 0px; margin-right: 10px; padding: 0px;}
.menu li {padding: 0px; margin-bottom: 5px;};
.menu a {text-decoration: none; color: #666666;}
.menu a:link, a:visited {display: block; font-weight: 600; color: #333333; background-color: #E0E0E0; width: 100%; text-align: left; padding: 7px; text-decoration: none;}
.menu a:hover, a:active {background-color: #0066cc; color: #ffffff;}

.m-menu ul {font-family: Arial, Verdana, "Sans Serif"; font-size: 1.1em; font-weight: 600; list-style-type: none; margin-top: 0px; margin-right: 10px; padding: 0px;}
.m-menu li {padding: 0px; margin-bottom: 5px;};
.m-menu a {text-decoration: none; color: #666666;}
.m-menu a:link, a:visited {display: block; font-weight: 600; color: #333333; background-color: #E0E0E0; width: 100%; text-align: left; padding: 7px; text-decoration: none;}
.m-menu a:hover, a:active {background-color: #0066cc; color: #ffffff;}

.section {
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */
  column-break-inside:avoid;
  page-break-inside: avoid; /* For Firefox. */
}

.section-title { 
  font-family: Arial, Verdana, sans-serif; font-size:0.9em; color:#666666; font-weight: 600; text-align: left; line-height: 1.3em;
  margin-top: 0px; margin-bottom: 3px;
}

.menu-icon {float: left; margin-left: 5px; margin-top: 5px; margin-bottom: 0px; background-color: #999999;}
.cc-icon {float: left; margin-left: 5px; margin-top: 20px; margin-right: 5px; background-color: #cccccc;}

.headline {font-family: "Arail Narrow", Arial, Verdana, sans-serif; font-size: 1.3em; color:#c66; text-align: left;font-weight: 600; font-stretch: condensed;padding-bottom: 3px;}
.fig-title {margin-top: 5px; margin-bottom: 5px; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-size: 1.0em; color:#666; font-weight: 600;  font-stretch: condensed;}
.description2 {font-family: Georgia, serif; font-size: 0.93em; line-height: 1.4em;color:#333; text-align: left; text-decoration: none; margin-top: 15p; }

.pub-img {float: left; margin-top: 5px; }
.pub-text {margin-bottom: 15px;padding-top: 14px; padding-left: 40px; font-family: Arial, Verdana, sans-serif; font-size:0.7em; font-weight: 600;}
.pub-text a {color:#555; text-decoration: none;}
.pub-text a:hover {color:#c66;text-decoration: none;}

.pub-source {margin-top: 5px; margin-bottom: 65px; font-family: Arial, Verdana, sans-serif; font-size:0.7em; color:#444;}
.img-source {margin-top: 5px; margin-bottom: 15px; font-family: Arial, Verdana, sans-serif; font-size:0.7em; color:#777;}

.img1 {margin-top: 5px; border: 2px solid #ddd;}	
.img1:hover {border: 2px solid red;}

	/* ----------- Inline Images ----------- */
	.inline-img {
		break-inside: avoid;
	}
	.inline-img img{
		width: 100%;
		outline: 1px #ddd solid;
	}
	.inline-img p{
		margin-top: -12px;
		font-family: Arial;
		font-size: 0.65em;
		color: #888;
	}


/* ================= FOR TABLET (LOW RESOLUTION) ================= */

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


.update {text-align: right; font-family: Arial, Verdana, sans-serif; font-size:0.8em; color:#666666; line-height: 1.0em; margin-top: -15px; margin-bottom: 15px; margin-right: 0px; background-color: #ffffff;}

.chapter-title {text-align: center; margin: auto; background-color: #fff; font-family: Arial, Verdana, sans-serif; font-size: 1.3em; font-weight: 600; color: #666666; margin-bottom: 25px; padding: 10px;border-bottom: 2px #ccc solid;}

.img {margin: 0px; border: 0px solid white;}	
.img img {margin: 0px, 0px, 0px, 0px; border: 0px solid #ffffff;}
.img a:hover img {border: 0px solid red;}


.story {color: #333333; text-align: left; margin-bottom: 15px; font-size: 1.2em; line-height: 150%;}
.header {background-color: #ffffff; color: #cccccc; margin: auto; width: 100%; margin-top: 15px; margin-bottom: 15px;}
.footer {margin-top: 15px; background-color: #E0E0E0; font-family: Arial, Verdana, sans-serif; font-size: 0.8em; color: #666666; margin-bottom: 25px; padding: 10px;}


.menu {display: none;}
.menu-icon {margin-bottom: 15px;}

.figure-title {margin-top: 0px; margin-bottom: 3px; font-family: "Arial Narrow", Arial,Verdana , sans-serif; font-size: 1.2em; font-weight: 600; color:#666666;}
.source {margin-top: 5px; margin-bottom: 15px; font-family: Arial, Verdana, sans-serif; font-size:0.8em; color:#666666;}
.description {font-family: Georgia, serif; font-size: 0.95em; line-height: 1.5em;  color:#666666; text-align: left; text-decoration: none; margin-top: 10px; padding-bottom: 55px;}

.more {font-family: Georgia, serif; font-size:1em; color:#0059b3; text-align: left; font-size: 1.0em; line-height: 1.5em; font-weight: 600; text-decoration: none; margin-top: -55px; padding-bottom: 55px;}
.more a {text-decoration: none; color:#666666;}
.more a:hover {text-decoration: none; color:#CC0000;}
.more a:active {background-color: #ffffff; color: #ff0000;}

.lit-link {font-family: Georgia, serif; font-size: 0.9em; color:#0059b3; text-align: left; font-size: 1.0em; line-height: 1.5em; font-weight: 600; text-decoration: none; margin-top: -55px; padding-bottom: 55px;}
.lit-link a {text-decoration: none; color:#666666;}
.lit-link a:hover {text-decoration: none; color:#CC0000;}
.lit-link a:active {background-color: #ffffff; color: #ff0000;}

.footnote {font-family: Georgia, serif; color:#666666; text-align: left; font-size: 0.9em; line-height: 1.2em; text-decoration: none; margin-top: -45px; padding-top: 5px; border-top-width: 1px; border-top-style: solid; border-top-color: #999999;}
.footnote1 {font-family: Georgia, serif; color:#666666; text-align: left; font-size: 0.9em; line-height: 1.2em; text-decoration: none; margin-top: -45px; margin-bottom: 45px; padding-top: 5px; border-top-width: 1px; border-top-style: solid; border-top-color: #999999;}
.literature-title {margin-top: 15px; margin-bottom: 0px; font-family: Arial, Verdana, sans-serif; font-size: 1.3em; font-weight: 600; color:#666666;}
.literature {font-family: Georgia, serif; color:#666666; text-align: left; font-size: 0.9em; line-height: 1.2em; text-decoration: none; margin-top: 5px; padding-bottom: 60px;}

.link1 a {margin-top: 10px; margin-bottom: 5px; font-family: Arial, Verdana, sans-serif; font-size: 1.2em; font-weight: 600; text-decoration: none; color:#0059b3;}
.link1 a:hover {text-decoration: none; color:#CC0000;}
.link1 a:active {background-color: #ffffff; color: #ff0000;}

.figure-title1 {margin-top: 5px; margin-bottom: 3px; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-size: 1.0em; font-weight: 600; color:#666; font-stretch: condensed;}
.description1 {font-family: Georgia, serif; font-size: 1.0em; line-height: 1.5em; color:#666666; text-align: left; text-decoration: none; margin-top: 10px; padding-bottom: 0px;}

.figure-title2 {margin-top: 35px; margin-bottom: 3px; font-family: Arial, Verdana, sans-serif; font-size: 1.1em; font-weight: 600; color:#666666;}


	/* ----------- Inline Images ----------- */
	.inline-img {
		break-inside: avoid;
	}
	.inline-img img{
		width: 100%;
		outline: 1px #ddd solid;
	}
	.inline-img p{
		margin-top: -12px;
		font-family: Arial;
		font-size: 0.65em;
		color: #888;
	}

}


/* ================= FOR PC (LARGE SCREEN) ================= */

@media only screen and (min-width: 1000px) {

.page {margin: auto; width: 100%; border:0px solid #8AC007; padding: 0px;}

.menu {display: inline;}
.menu {float: left; margin-right: 15px;}
.menu-icon {display: none;}


.row {content: ""; clear: both; display: block;}
.col-3 {width: 220px;}

.header {background-color: #ffffff; color: #E0E0E0; margin: auto; width: 50%; border:0px solid #333333; margin-top: 5px; margin-bottom: 5px;}
.update {text-align: right; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-size:0.8em; font-stretch: condensed; color:#666666; line-height: 1.0em; margin-top: -10px; margin-bottom: 10px; margin-right: 0px; background-color: #ffffff;}
.chapter-title {text-align: center; margin: auto; background-color: #fff; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-size: 2.3em; font-stretch: condensed; font-weight: 600; color: #666; margin-bottom: 15px; padding: 3px; border-bottom: 2px #ccc solid;}
.footer {margin-top: 15px; background-color: #E0E0E0; font-family: Arial, Verdana, sans-serif; font-size: 1.0em; color: #666666; margin-bottom: 25px; padding: 10px;}

.figure-title {margin-top: 0px; margin-bottom: 7px; font-family: "Arial Narrow", Arial,Verdana, sans-serif; font-stretch: condensed; font-size: 1.3em; font-weight: 600; color:#666;}
.source {margin-top: 5px; margin-bottom: 15px; font-family: Arial, Verdana, sans-serif; font-size:0.6em; color:#333;}
.description {font-family: Georgia, serif; font-size: 1.0em; line-height: 1.4em; color:#333; text-align: left; text-decoration: none; margin-top: 10px; padding-bottom: 60px;}

.more {font-family: Georgia, serif; color:#0059b3; text-align: left; font-size: 1.1em; line-height: 1.4em; font-weight: 600; text-decoration: none; margin-top: -55px; padding-bottom: 55px;}
.more a {text-decoration: none; color:#666;}
.more a:hover {text-decoration: none; color:#CC0000;}
.more a:active {background-color: #ffffff; color: #ff0000;}

.lit-link {font-family: Georgia, serif; font-size: 1.1em; color:#0059b3; text-align: left; font-size: 1.0em; line-height: 1.5em; font-weight: 600; text-decoration: none; margin-top: -55px; padding-bottom: 55px;}
.lit-link a {text-decoration: none; color:#666666;}
.lit-link a:hover {text-decoration: none; color:#CC0000;}
.lit-link a:active {background-color: #ffffff; color: #ff0000;}

.footnote {font-family: Georgia, serif; color:#333; text-align: left; font-size: 1.0em; line-height: 1.3em; text-decoration: none; margin-top: -45px; padding-top: 5px; border-top-width: 1px; border-top-style: solid; border-top-color: #999;}
.footnote1 {font-family: Georgia, serif; color:#333; text-align: left; font-size: 1.0em; line-height: 1.3em; text-decoration: none; margin-top: -45px; margin-bottom: 45px; padding-top: 5px; border-top-width: 1px; border-top-style: solid; border-top-color: #999;}
.literature-title {margin-top: 15px; margin-bottom: 0px; font-family: Arial, Verdana, sans-serif; font-size: 1.0em; font-weight: 600;color:#333;}
.literature {font-family: Georgia, serif; color:#333; text-align: left; font-size: 0.9em; line-height: 1.2em; text-decoration: none; margin-top: 5px; padding-bottom: 60px;}

.link1 a {margin-top: 10px; margin-bottom: 5px; font-family: Arial, Verdana, sans-serif; font-size: 1.1em; font-weight: 600; text-decoration: none; color:#0059b3;}
.link1 a:hover {text-decoration: none; color:#CC0000;}
.link1 a:active {background-color: #ffffff; color: #ff0000;}

.figure-title1 {margin-top: 5px; margin-bottom: 5px; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-stretch: condensed;font-size: 1.1em; font-weight: 600; color:#666;}
.description1 {font-family: Georgia, serif; font-size: 1.1em; color:#333; text-align: left; line-height: 1.4em; text-decoration: none; margin-top: 10p font-stretch: condensed;}

.figure-title2 {margin-top: 45px; margin-bottom: 5px; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-stretch: condensed;font-size: 1.1em; font-weight: 600; color:#666; padding-bottom: 5px;border-bottom:2px #ddd solid}
.figure-title3 {margin-top: 5px; margin-bottom: 5px; font-family: "Arial Narrow", Arial, Verdana, sans-serif; font-stretch: condensed;font-size: 0.9em; font-weight: 600; color:#666;}

	/* ----------- Inline Images ----------- */
	.inline-img {
		break-inside: avoid;
	}
	.inline-img img{
		width: 100%;
		outline: 1px #ddd solid;
	}
	.inline-img p{
		margin-top: -12px;
		font-family: Arial;
		font-size: 0.65em;
		color: #888;
	}


}