@keyframes logo-float-shown {
	0% {opacity: 1; color: white;}
	100% {opacity: 1; color: rgb(80,168,117);}
}
/*   1. FONTS  cwTeXMing cwTeXKai cwTeXHei cwTeXYen 
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(cwTeXHei-zhonly.eot);
  src: url(cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
	   url(cwTeXHei-zhonly.woff2) format('woff2'),
	   url(cwTeXHei-zhonly.woff) format('woff'),
	   url(cwTeXHei-zhonly.ttf) format('truetype');
}
@font-face {
  font-family: 'cwTeXFangSong';
  font-style: normal;
  font-weight: 500;
  src: url(cwTeXFangSong-zhonly.eot);
  src: url(cwTeXFangSong-zhonly.eot?#iefix) format('embedded-opentype'),
	   url(cwTeXFangSong-zhonly.woff2) format('woff2'),
	   url(cwTeXFangSong-zhonly.woff) format('woff'),
	   url(cwTeXFangSong-zhonly.ttf) format('truetype');
}*/
@charset "UTF-8";
@font-face{
	font-family: "entypo";
	font-style: normal;
	font-weight: normal;
	src: url("entypo.eot");
	src: url("entypo.eot?#iefix") format("eot"), 
	url("entypo.woff") format("woff"), 
	url("entypo.ttf") format("truetype"), 
	url("entypo.svg#entypo") format("svg");
}
.entypo-note:before{content:"\266a"}.entypo-note-beamed:before{content:"\266b"}.entypo-music:before{content:"\1f3b5"}.entypo-search:before{content:"\1f50d"}.entypo-flashlight:before{content:"\1f526"}.entypo-mail:before{content:"\2709"}.entypo-heart:before{content:"\2665"}.entypo-heart-empty:before{content:"\2661"}.entypo-star:before{content:"\2605"}.entypo-star-empty:before{content:"\2606"}.entypo-user:before{content:"\1f464"}.entypo-users:before{content:"\1f465"}.entypo-user-add:before{content:"\e700"}.entypo-video:before{content:"\1f3ac"}.entypo-picture:before{content:"\1f304"}.entypo-layout:before{content:"\268f"}.entypo-menu:before{content:"\2630"}.entypo-check:before{content:"\2713"}.entypo-cancel:before{content:"\2715"}.entypo-cancel-circled:before{content:"\2716"}.entypo-cancel-squared:before{content:"\274e"}.entypo-plus:before{content:"\2b"}.entypo-plus-circled:before{content:"\2795"}.entypo-plus-squared:before{content:"\229e"}.entypo-minus:before{content:"\2d"}.entypo-minus-circled:before{content:"\2796"}.entypo-minus-squared:before{content:"\229f"}.entypo-help:before{content:"\2753"}.entypo-help-circled:before{content:"\e704"}.entypo-info:before{content:"\2139"}.entypo-info-circled:before{content:"\e705"}.entypo-back:before{content:"\1f519"}.entypo-home:before{content:"\2302"}.entypo-link:before{content:"\1f517"}.entypo-attach:before{content:"\1f4ce"}.entypo-eye:before{content:"\e70a"}.entypo-tag:before{content:"\e70c"}.entypo-bookmark:before{content:"\1f516"}.entypo-bookmarks:before{content:"\1f4d1"}.entypo-flag:before{content:"\2691"}.entypo-pencil:before{content:"\270e"}.entypo-feather:before{content:"\2712"}.entypo-retweet:before{content:"\e717"}.entypo-keyboard:before{content:"\2328"}.entypo-comment:before{content:"\e718"}.entypo-chat:before{content:"\e720"}.entypo-bell:before{content:"\1f514"}.entypo-attention:before{content:"\26a0"}.entypo-alert:before{content:"\1f4a5'"}.entypo-vcard:before{content:"\e722"}.entypo-location:before{content:"\e724"}.entypo-direction:before{content:"\27a2"}.entypo-compass:before{content:"\e728"}.entypo-cup:before{content:"\2615"}.entypo-trash:before{content:"\e729"}.entypo-doc:before{content:"\e730"}.entypo-docs:before{content:"\e736"}.entypo-doc-landscape:before{content:"\e737"}.entypo-doc-text:before{content:"\1f4c4"}.entypo-doc-text-inv:before{content:"\e731"}.entypo-newspaper:before{content:"\1f4f0"}.entypo-book-open:before{content:"\1f4d6"}.entypo-book:before{content:"\1f4d5"}.entypo-folder:before{content:"\1f4c1"}.entypo-archive:before{content:"\e738"}.entypo-box:before{content:"\1f4e6"}.entypo-rss:before{content:"\e73a"}.entypo-phone:before{content:"\1f4dE"}.entypo-cog:before{content:"\2699"}.entypo-tools:before{content:"\2692"}.entypo-share:before{content:"\e73c"}.entypo-shareable:before{content:"\e73e"}.entypo-basket:before{content:"\e73d"}.entypo-bag:before{content:"\1f45c'"}.entypo-calendar:before{content:"\1f4c5"}.entypo-login:before{content:"\e740"}.entypo-logout:before{content:"\e741"}.entypo-mic:before{content:"\1f3a4"}.entypo-mute:before{content:"\1f507"}.entypo-sound:before{content:"\1f50a"}.entypo-volume:before{content:"\e742"}.entypo-clock:before{content:"\1f554"}.entypo-hourglass:before{content:"\23f3"}.entypo-lamp:before{content:"\1f4a1"}.entypo-light-down:before{content:"\1f505"}.entypo-light-up:before{content:"\1f506"}.entypo-adjust:before{content:"\25d1"}.entypo-block:before{content:"\1f6ab"}.entypo-resize-full:before{content:"\e744"}.entypo-resize-small:before{content:"\e746"}.entypo-popup:before{content:"\e74c"}.entypo-publish:before{content:"\e74d"}.entypo-window:before{content:"\e74e"}.entypo-arrow-combo:before{content:"\e74f"}.entypo-down-circled:before{content:"\e758"}.entypo-left-circled:before{content:"\e759"}.entypo-right-circled:before{content:"\e75a"}.entypo-up-circled:before{content:"\e75b"}.entypo-down-open:before{content:"\e75c"}.entypo-left-open:before{content:"\e75d"}.entypo-right-open:before{content:"\e75e"}.entypo-up-open:before{content:"\e75f"}.entypo-down-open-mini:before{content:"\e760"}.entypo-left-open-mini:before{content:"\e761"}.entypo-right-open-mini:before{content:"\e762"}.entypo-up-open-mini:before{content:"\e763"}.entypo-down-open-big:before{content:"\e764"}.entypo-left-open-big:before{content:"\e765"}.entypo-right-open-big:before{content:"\e766"}.entypo-up-open-big:before{content:"\e767"}.entypo-down:before{content:"\2b07"}.entypo-left:before{content:"\2b05"}.entypo-right:before{content:"\27a1"}.entypo-up:before{content:"\2b06"}.entypo-down-dir:before{content:"\25be"}.entypo-left-dir:before{content:"\25c2"}.entypo-right-dir:before{content:"\25b8"}.entypo-up-dir:before{content:"\25b4"}.entypo-down-bold:before{content:"\e4b0"}.entypo-left-bold:before{content:"\e4ad"}.entypo-right-bold:before{content:"\e4ae"}.entypo-up-bold:before{content:"\e4af"}.entypo-down-thin:before{content:"\2193"}.entypo-left-thin:before{content:"\2190"}.entypo-right-thin:before{content:"\2192"}.entypo-up-thin:before{content:"\2191"}.entypo-ccw:before{content:"\27f2"}.entypo-cw:before{content:"\27f3"}.entypo-arrows-ccw:before{content:"\1f504"}.entypo-level-down:before{content:"\21b3"}.entypo-level-up:before{content:"\21b0"}.entypo-shuffle:before{content:"\1f500"}.entypo-loop:before{content:"\1f501"}.entypo-switch:before{content:"\21c6"}.entypo-play:before{content:"\25b6"}.entypo-stop:before{content:"\25a0"}.entypo-pause:before{content:"\2389"}.entypo-record:before{content:"\26ab"}.entypo-circle:before{content:"\26ab"}.entypo-to-end:before{content:"\23ed"}.entypo-to-start:before{content:"\23ee"}.entypo-fast-forward:before{content:"\23e9"}.entypo-fast-backward:before{content:"\23ea"}.entypo-progress-0:before{content:"\e768"}.entypo-progress-1:before{content:"\e769"}.entypo-progress-2:before{content:"\e76a"}.entypo-progress-3:before{content:"\e76b"}.entypo-target:before{content:"\1f3af"}.entypo-palette:before{content:"\1f3a8"}.entypo-list:before{content:"\e005"}.entypo-list-add:before{content:"\e003"}.entypo-signal:before{content:"\1f4f6"}.entypo-trophy:before{content:"\1f3c6"}.entypo-battery:before{content:"\1f50b"}.entypo-back-in-time:before{content:"\e771"}.entypo-monitor:before{content:"\1f4bb"}.entypo-mobile:before{content:"\1f4f1"}.entypo-network:before{content:"\e776"}.entypo-cd:before{content:"\1f4bf"}.entypo-inbox:before{content:"\e777"}.entypo-install:before{content:"\e778"}.entypo-globe:before{content:"\1f30e"}.entypo-cloud:before{content:"\2601"}.entypo-cloud-thunder:before{content:"\26c8"}.entypo-flash:before{content:"\26a1"}.entypo-moon:before{content:"\263d"}.entypo-flight:before{content:"\2708"}.entypo-paper-plane:before{content:"\e79b"}.entypo-leaf:before{content:"\1f342"}.entypo-lifebuoy:before{content:"\e788"}.entypo-mouse:before{content:"\e789"}.entypo-briefcase:before{content:"\1f4bc"}.entypo-suitcase:before{content:"\e78e"}.entypo-dot:before{content:"\e78b"}.entypo-dot-2:before{content:"\e78c"}.entypo-dot-3:before{content:"\e78d"}.entypo-brush:before{content:"\e79a"}.entypo-magnet:before{content:"\e7a1"}.entypo-infinity:before{content:"\221e"}.entypo-erase:before{content:"\232b"}.entypo-chart-pie:before{content:"\e751"}.entypo-chart-line:before{content:"\1f4c8"}.entypo-chart-bar:before{content:"\1f4ca"}.entypo-chart-area:before{content:"\1f53e"}.entypo-tape:before{content:"\2707"}.entypo-graduation-cap:before{content:"\1f393"}.entypo-language:before{content:"\e752"}.entypo-ticket:before{content:"\1f3ab"}.entypo-water:before{content:"\1f4a6"}.entypo-droplet:before{content:"\1f4a7"}.entypo-air:before{content:"\e753"}.entypo-credit-card:before{content:"\1f4b3"}.entypo-floppy:before{content:"\1f4be"}.entypo-clipboard:before{content:"\1f4cb"}.entypo-megaphone:before{content:"\1f4e3"}.entypo-database:before{content:"\e754"}.entypo-drive:before{content:"\e755"}.entypo-bucket:before{content:"\e756"}.entypo-thermometer:before{content:"\e757"}.entypo-key:before{content:"\1f511"}.entypo-flow-cascade:before{content:"\e790"}.entypo-flow-branch:before{content:"\e791"}.entypo-flow-tree:before{content:"\e792"}.entypo-flow-line:before{content:"\e793"}.entypo-flow-parallel:before{content:"\e794"}.entypo-rocket:before{content:"\1f680"}.entypo-gauge:before{content:"\e7a2"}.entypo-traffic-cone:before{content:"\e7a3"}.entypo-cc:before{content:"\e7a5"}.entypo-cc-by:before{content:"\e7a6"}.entypo-cc-nc:before{content:"\e7a7"}.entypo-cc-nc-eu:before{content:"\e7a8"}.entypo-cc-nc-jp:before{content:"\e7a9"}.entypo-cc-sa:before{content:"\e7aa"}.entypo-cc-nd:before{content:"\e7ab"}.entypo-cc-pd:before{content:"\e7ac"}.entypo-cc-zero:before{content:"\e7ad"}.entypo-cc-share:before{content:"\e7ae"}.entypo-cc-remix:before{content:"\e7af"}.entypo-github:before{content:"\f300"}.entypo-github-circled:before{content:"\f301"}.entypo-flickr:before{content:"\f303"}.entypo-flickr-circled:before{content:"\f304"}.entypo-sweden:before{content:"\f601"}.entypo-db-shape:before{content:"\f600"}.entypo-logo-db:before{content:"\f603"}
.entypo-after-cancel::after{content:"\2715";}.entypo-after-down-dir::after{content:"\25be";}
[class*="entypo-"]::before
{
  font-family: "entypo", sans-serif;
}
[class*="entypo-after-"]::after
{
	font-family: "entypo", sans-serif;
	padding-left: 0.5em;
	color: rgb(163,209,182);
}
/*   2. ITEM RESET  
#top * {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: 300;
	font-style: normal;
	font-size: 100%;
	font-family: "Lato", Arial, Helvetica, sans-serif;
	vertical-align: baseline;
	line-height: normal;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
*/
html {
	overflow-y: auto;
}
body.preloader-site {
	overflow: hidden;
}
.preloader-wrapper {
	height: 100%;
	width: 100%;
	background: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
}
.preloader-wrapper .preloader {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 120px;
}
.hidden {
	visibility: hidden;
}
.display-none {
	display: none;
}
.display-block {
	display: block;
}
.flash {
  -moz-animation: flash 800ms ease-out;
  -moz-animation-iteration-count: 5;
  -webkit-animation: flash 800ms ease-out;
  -webkit-animation-iteration-count: 5;
  -ms-animation: flash 800ms ease-out;
  -ms-animation-iteration-count: 5;
}
@keyframes flash {
    0% { background-color: transparent; opacity: 1; }
    50% { background-color: #fbf8b2; opacity: 0.4; }
    100% { background-color: transparent; opacity: 1; }
}
@-webkit-keyframes flash {
    0% { background-color: transparent; opacity: 1; }
    50% { background-color: #fbf8b2; opacity: 0.4; }
    100% { background-color: transparent; opacity: 1; }
}
@-moz-keyframes flash {
    0% { background-color: transparent; opacity: 1; }
    50% { background-color: #fbf8b2; opacity: 0.4; }
    100% { background-color: transparent; opacity: 1; }
}
@-ms-keyframes flash {
    0% { background-color: transparent; opacity: 1; }
    50% { background-color: #fbf8b2; opacity: 0.4; }
    100% { background-color: transparent; opacity: 1; }
}
.flip--page,
#top label:not(.empty) {
	cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
	position: absolute;
	left: -1000px;
}
#top a {
	text-decoration: none;
	color: inherit;
}
/*  3. MAIN STYLES  */
body {
	width:100%;
	margin:0;
	padding:0;
}
#top {
	background: #fff;
	width:100%;
	height: 800px;
	position: relative;
}
#top ul, 
#top ol {
	position: relative;
	margin: 20px 0px 20px 0px;
}
#top li {
	position: relative;
	margin-bottom: 0.5em;
	line-height: 1.2em;
}
#top li:last-of-type {
	margin-bottom: 1.5em;
}
#top ul {
	list-style-type: square;
}
#top ul.none {
	list-style-type: none;
	text-indent: -1em;
}
#top .center-listing {
	margin-left: 30vw;
}
#top .logo-left::before {
	position: relative;
	cursor: pointer;
	margin: 10px 10px 0px 20px;
	padding: 0px;
	content: "";
	width: 280px;
	height: 100px;
	float: left;
	background: url("eduhk.png") #fff no-repeat top left;
	z-index: 1101;
}
#top .logo-right::before {
	position: relative;
	cursor: pointer;
	margin: 10px 10px 0px 0px;
	padding: 0px;
	content: "";
	width: 280px;
	height: 100px;
	float: right;
	background: url("cle.png") #fff no-repeat top right;
	z-index: 1101;
}
#top .copyright {
	position: absolute;
	z-index: 1101;
	bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 16px; 
	font-weight: 200; 
	letter-spacing: .1em;
	color: #95989A;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;	
}
#top label.next {
	position: relative;
	display: block;
	cursor: pointer;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 60vw;
	padding: 0.3em 0.2em 0.1em 0.2em;
	border-radius: 5px;
	border: 2px solid #aaa;
	box-shadow: 3px 3px 2px 1px rgba(0, 0, 0, 0.4);
	text-shadow: 0px;
	color: rgb(0,101,54);
	font-weight: 700;
	font-family: cwTeXFangSong;
	font-size: 0.8em;
	background-color: #fff;
}
#top label.next:hover {
	background-color: #f2f2f2;
	border: 2px solid #999;
}
#top label.next::before {
	content: attr(data-label);
}
#top .sliding-page,
#top .blocking-page {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 130%;
	background: #ffffff;
	opacity: 1;
	padding: 0;
	margin: 0 0 0px 40px;
}
#top .blocking-page {
	z-index: -1;
}
input.side-menu-container-trigger.checked~#top .blocking-page {
	opacity: 0.4;
	z-index: 1102;
}
#top input.subpage-label-trigger:checked + .subpage--label> .sliding-page {
	z-index: 1100;
}
#top .content-container {
	position: relative;
	width: 84%;
	min-height: 90%;
	margin: 80px 30px 0px 40px;
	padding: 60px 50px;
	display: inline-block;
	background: #fff;
	border-width: 1px;
	border-style: solid;
	border-radius: 5px 5px 20px 0px;
	box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
}
#top .next--page--label,
#top .previous--page--label {
	position: absolute;
	z-index: 2100;
	top: 200px;
	height: 600px;
	width: 40px;
	display: inline;
	line-height: 600px;
	font-size: 30px;
	font-weight: 500;
	vertical-align: middle;
	color: rgb(80,168,117);
	opacity: 0;
	animation-name: logo-float-shown;
	animation-iteration-count: 5;
	animation-delay: 4s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
#top h1,
#top h2,
#top .header,
#top .content {
	position: relative;
	display: block;
	margin: auto;
	color: #43A047;/*rgb(80,168,117);*/
	font-family: "cwTeXFangSong";
	font-weight: 500;
	text-align: center;
}
#top .chapter1 {
	color: #43A047;
}
#top .chapter2 {
	color: #F57F17;
	color: #43A047;
}
#top .chapter3 {
	color: #311B92;
	color: #43A047;
}
#top .chapter1 .tab,
#top .chapter1 h1,
#top .chapter1 h2,
#top .chapter1 .header,
#top .chapter1 .content {
	color: #43A047;
}
#top .chapter2 .tab,
#top .chapter2 h1,
#top .chapter2 h2,
#top .chapter2 .header,
#top .chapter2 .content {
	color: #F57F17;
	color: #43A047;
}
#top .chapter3 .tab,
#top .chapter3 h1,
#top .chapter3 h2,
#top .chapter3 .header,
#top .chapter3 .content {
	color: #311B92;
	color: #43A047;
}
#top h1 {
	font-size: 64px;
	margin: 1.5em 0.1em 2.5em 2em;
	letter-spacing: .12em;
	vertical-align: middle;
	text-shadow: 4px 4px 4px rgba(0,0,0, 0.3);
}
#top .header,
#top h2 {
	font-size: 32px;
	letter-spacing: .12em;
}
#top h2 span.back-lined1 {
	background: #ffffff;
	padding: 0em 0.5em;
}
#top h2 + .back-lined1 {
	border-top: solid 1px #43A047;
	padding-top: 1.3em;
	margin-top: -1.3em;
}
#top h2 span.back-lined2 {
	background: #ffffff;
	padding: 0em 0.5em;
	color: #1B5E20;
}
#top h2 + .back-lined2 {
	border-top: solid 1px  #1B5E20;
	padding-top: 0.8em;
	margin-top: -0.8em;
}
.center-30 {
	margin-left: 30%;
	margin-right: 30%;
}
.center-10 {
	margin-left: 10%;
	margin-right: 10%;
}
#top img.right {
	max-width: 25vw;
	height: auto;
	max-height: 25vw;
	padding: 0.2em 0em 1em 1em;
	float: right;
}
#top img.left {
	max-width: 25vw;
	height: auto;
	max-height: 25vw;
	padding: 0.2em 1em 1em 0em;
	float: left;
}
#top img.center {
	display: block;
	max-width: 30vw;
	height: auto;
	max-height: 25vw;
	margin: 10px auto 10px auto;
}
#top img.big {
	max-width: 40vw;
	max-height: 35vw;
}
#top img.bordered {
	background:#fff;
	border:1px solid #000;
	padding: 10px;
}
#top input.sub--subchapter--trigger + .sub--subchapter> .exploding-effect {
	transform: scale(0.2) rotate(-60deg);
	color: #fff;
}
#top input.sub--subchapter--trigger:checked + .sub--subchapter> .exploding-effect {
	transition: transform 2s 1s,color 2s 1s;
	color: rgb(0,101,54);
	transform: scale(1) rotate(0deg);
}
#top input.sub--subchapter--trigger + .sub--subchapter>div>img:first-of-type.landing-effect {
	opacity: 0;
}
#top input.sub--subchapter--trigger:checked + .sub--subchapter>div>img:first-of-type.landing-effect {
	transition: opacity 1s;
	opacity: 1;
}
#top .content {
	margin: 0.5em 1em;
	width: 84vw;
	height: 100vw;
	font-size: 32px;
	text-align: left;
	display: block;
	line-height: 1.5em;
}
#top .content-main,
#top .content2-main {
	display: inline-block;
	position: relative;
	min-width: 90%;
	padding: 1.250em;
	margin: 0.1em 0em 0.5em 0em;
	border-radius: 0.313em;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
	background: #FAFAFA;
	color: #292929;
}
#top .content2-main {
	min-width: 85%;
	width: 85%;
}
#top .mouse-over-content {
	display: inline-block;
	vertical-align: top;
}
#top .mouse-over-content::before { /* explanation dialogue*/
	display: inline-block;
	z-index: 1500;
	position: absolute;
	padding: 0.5em;
	font-family: 'cwTeXFangSong';
	font-size: 1em;
	line-height: 1.2em;
	background-color: #fcfbbc;
	opacity: 0;
	margin: -.0.2;
	overflow: hidden;
	text-align: left;
	vertical-align: middle;
	transition: height 1ms,opacity 10ms;
}
#top .mouse-over-content:hover::before {
	content: attr(data-mouse-over);
	z-index: 1501;
	opacity: 1;
	transition: opacity 200ms;
}
#top .mouse-over-content-center::before {
	left: -20%;
	top: 2em;
	width: 140%;
	border: 1px solid #333; 
	box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
	font-size: 0.9em;
}
#top .mouse-over-content--normal::before,
#top .mouse-over-content-near::before {
	border-radius: 10px;
	box-shadow: 0px 0px 3px 12px rgba(0, 0, 0, 0.2);
	font-size: 0.9em;
	min-width: 6em;
}
#top .mouse-over-content-near::before {
	left: 0.7em;
	top: 1.5em;
	width: 90%;
}
#top .mouse-over-content--normal::before {
	top: 0em;
	left: 4em;
	width: 10em;
}
#top .mouse-over-content--normal::after,
#top .mouse-over-content-near::after {
	position: relative;
	z-index: 1500;
	font-size: 0.5em;
	vertical-align: bottom;
	font-weight: 500;
	color: orange;
	font-family: "entypo";
	content: "\1f50d";
	padding: 0 0 0 0.3em;
}
#top .mouse-over-content--normal:hover::after,
#top .mouse-over-content-near:hover::after {
	color: blue;
}
#top .mouse-over-content-long::before {
	height: 10em;
	width: 18em;
}
#top .mouse-over-content-corner::before {
	border: 1px solid #333; 
	top: -13%;
	right: -3%;
}
#top .mouse-over-content-header::before {
	border: 1px solid #333; 
	top: 7%;
	right: 42%;
	font-size: 21px;
}
#top .compare-source::after {
	content: attr(data-mouse-over);
	position: relative;
	margin: 0 0.5em 0 0.5em ;
}
#top .compare-target{
	position: relative;
}
#top .compare-target::before {
	content: attr(data-before-content);
	position: absolute;
	left: -1.1em;
	top: 0em;
}
#top .quiz--container {
	position: relative;
/*
	margin: 10px 30px 0px 30px;
	height: 800px;
*/
	counter-reset: question correct--answer incorrect--answer;
}
#top .quiz--container input[type="radio"],
#top .quiz--container input[type="checkbox"] {

	position: absolute;
	left: -1000px;

}
#top .quiz--container .question--container:before {
	counter-reset: choice;
	content: counter(question) ". ";
	counter-increment: question;
	padding-right: 0.1em;
}
#top .quiz--container .hint,
#top .quiz--container .choice {
	position: relative;
	z-index: 1010;
	cursor: pointer;
	width: 30vw;
	padding: 0.2em;
	margin: 0 0 1vh 0;
	border-radius: 5px;
	border: 2px solid #bbb;
	color: rgb(0,101,54);
	font-family: cwTeXFangSong;
	font-size: 0.8em;
	background-color: #fff;
	display: block;
}
#top .quiz--container .hint {
	text-align: center;
	letter-spacing: 0.2em;
	font-size: 1.1em;
}
#top .quiz--container .long-text {
	width: 80vw;/* for longtext choices */
}
#top .quiz--container .choice::before {
	font-family: Verdana;
	font-size: 0.9em;
	content: counter(choice,upper-alpha) ". ";
	counter-increment: choice;
}
#top .quiz--container .choice:hover
{
	background-color: #f2f2f2;
	border: 2px solid #999;
}
#top .quiz--container .question--container input:checked + label {
	background-color: #ddd;
	border: 2px solid #999;
}
#top .quiz--container .question--container input.true:checked + label {
	background-color: #fcfbbc;
	color: #333;
}
/* Show Explanation on clicking a choice */
#top .quiz--container .question--container input+label::after {
	pointer-events: none;
	z-index: 1000;
	display: inline-block;
	overflow: hidden;
	position: relative;
	top: 85%;
	left: 2%;
	width: 0;
	height: auto;
	text-align: left;
	letter-spacing: 0px;
	background-color: #ddd;
	border-radius: 5px;
	border: 0px;
	font-family: 'cwTeXFangSong';
	font-size: 1em;
	color: rgb(0,101,54);
	opacity:0;
	transition: height 100ms,opacity 100ms;
}
#top .quiz--container .question--container input:checked+label::after {
	opacity: 1;
	border: 2px solid #999;
	padding: 5px;
	height: auto;
	width: 65vw;
	content: attr(data-mouse-over);
	transition: height 170ms,opacity 2000ms;
}
#top .quiz--container .question--container input.true:checked+label::after {
	background: #fcfbbc;
	z-index: 1100;
	transition: height 170ms;
}
/* #Display "Next" on clicking the right choice. 
Solution 1: have to rename the "<div " to "<span "  
#top .quiz--container .question--container .true:checked + .choice + span:first-of-type ~ .true:checked + .choice + span:last-of-type ~ .hidden,
#top .quiz--container .question--container .true:checked + .choice ~ span:only-of-type ~ .hidden 
Solution 2, as adopted below: 
*/
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~.true:checked~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~ .false:not(:checked) ~.true:checked~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~.true:checked~ .false:not(:checked) ~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~ .false:not(:checked) ~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~ .false:not(:checked) ~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~.true:checked~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~.true:checked~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~.true:checked~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .false:not(:checked) ~.true:checked~.true:checked~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~ .false:not(:checked) ~.true:checked~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~ .false:not(:checked) ~.true:checked~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~.true:checked~ .false:not(:checked) ~.true:checked~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~.true:checked~.true:checked~ .false:not(:checked) ~ .hidden,
#top .quiz--container .question--container .true:checked~.true:checked~.true:checked~.true:checked~.true:checked~ .hidden
/* ".false:not(:checked)"" is preferred over ".false" to avoid users who has clicked .false but reload page and choose .true, which will wrongly affect counter-increment */
{
	visibility: visible;
	counter-increment: correct--answer;
}
#top .quiz--container .question--container .false:checked ~ .hidden
{
	visibility: visible;
	counter-increment: incorrect--answer;
}
#top .quiz--container .question--container input+label>.status {
	/*display data-mouse-over that follows "unchecked .true" when any .false is checked */
	/* initially these style settings are put under ::after, but in this way they are pseudo-elements and thus cannot be modified by JQUERY */
	visibility: hidden;
	position: absolute;
	left: 60%;
	top: 0px;
	display: inline;
	z-index: 1101;
	padding: 5px 10px 0px 20px;
	width: 30%;
	height: 1em;
	border-radius: 1em;
	line-height: 1em;
	text-align: center;
	vertical-align: middle;
	color: red;
	font-family: 'cwTeXFangSong';
	font-size: 0.9em;
	font-weight: 700;
	transition: height 2000ms;
}
#top .quiz--container .question--container input.true+label>.status::before { /*display a TICK if .true checked */
	visibility: hidden;
	opacity: 0;
	display: inline-block;
	overflow: hidden;
	position: absolute;
	top: 30%;
	left: 90%;
	font-family: 'entypo';
	font-size: 1em;
	font-weight: 700;
	content: "\2713";
	color: green;
}
#top .quiz--container .question--container input.true:checked+label>.status::before { /*display a TICK if .true checked */
	visibility: visible;
	opacity: 1;
	width: 30px;
	transition: width 500ms, opacity 500ms;
}
#top .quiz--container .question--container input:checked+label ~ .result::before {
	z-index: 1500;
	display: inline-block;
	overflow: hidden;
	position: absolute;
	top: -80px;
	left: 780px;
	width: 80px;
	height: 80px;
	padding: 0px;
	margin: 0px;
	background: #ddd;
	border-radius: 50px;
	box-shadow: 0 0 4px 2px #ddd;
	line-height: 80px;
	text-align: center;
	font-family: 'entypo';
	font-size: 60px;
	font-weight: 900;
	opacity: 0.8;
	transform: rotate(13deg);
	color: green;
	content: "\2713";
}
#top .quiz--container .question--container input.false:checked ~ .result::before {
	color: red;
	content: "\2715";
}
/* Show Explanation on clicking a choice */
#top .correct--answer::after {
	content: counter(correct--answer) attr(data-mouse-over);
}
#top .incorrect--answer::after {
	content: counter(incorrect--answer) attr(data-mouse-over);
}
/***** Wrapper *****/
#top .wrapper {
	position: relative;
	z-index: 1001;
	background: #fff;
	width: 100%;
	min-height: 800px;
}
#top .wrapper>div {
	position: absolute;
	top: 0;
	left: -7%;
	height: 100%;
	width: 110%;
	background: #fff;
	z-index: -1;
	opacity: 0;
	visibility: hidden;
	padding: 10px 20px 10px 20px;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
}

/* Side Menu */
.side-menu-container-trigger {
	position: absolute;
	left: 0px;
	z-index: 2100;
	top: 120px;
	width: 35px;
	height: 40px;
	margin: 0px;
	padding: 5px 0px 0px 0px;
	border-radius: 0px 10px 10px 0px;
	border-top: 1px outset;
	border-right: 1px outset;
	border-bottom: 1px outset;
	border-left: 0px;
	box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.3);
	color: #9e87ce;
	font-size: 30px;
	font-weight: 900;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.side-menu-container {
	position: absolute;
	top: 150px;
	z-index: 2000;
	height: auto;
	width: 25%;
	padding: 20px 20px 20px 20px;
	margin: 20px 0px 0px 0px;
	background-color: #f1edf9;
	border-radius: 0px 0px 10px 0px;
	overflow-y: auto;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.3);
}
.side-menu-container-off {
	transform: translateX(-100%);
	opacity: 0.4;
	transition: transform 1000ms;
}
.side-menu-container-on {
	transform: translateX(0%);
	opacity: 1;
	transition: all 1000ms;
}
.side-menu-container .menu-cell {
	text-align: center;
	margin: 1px;
	padding: 1px;
}
.side-menu-container .large-icon:hover,
.side-menu-container .large-icon:focus,
.side-menu-container .large-icon:hover:before,
.side-menu-container .large-icon:focus:before {
	color: #fff;
	background-color: #9e87ce;
	cursor: pointer;
}
.side-menu-container .title {
	color: #111;
	line-height: 45px;
	background-color: #fff;
	font-family: "cwTeXHei";
	font-weight: 700;
	margin-top: -6px;
	padding: 5px 10px 10px 0px;
	width: 100%;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.side-menu-container .large-icon {
	cursor: pointer;
	letter-spacing: .1em;
	transition: 2s;
	color: #111;
	font-family: "cwTeXHei";
	font-size: 22px;
	font-weight: 900;
	padding: 20px 0px 20px 0px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.3);
	transition: background-color 0.1s;
}
.side-menu-container .large-icon:before {
	color: #9e87ce;
	font-size: 60px;
	font-weight: 700;
	margin-bottom: -5px;
	padding-right: 6px;
	display: block;
	transition: background-color 0.1s;
}
.side-menu-container .icon:before {
	padding-right: 12px;
	color: rgb(163,209,182);
}
.side-menu-container .close-menu {
	color: rgb(163,209,182);
	position: absolute;
	top: -8px;
	right: 25px;
	font-size: 36px;
	text-align: right;
}
#top input#chapter1-0:checked ~ .wrapper .chapter1-0,
#top input#chapter1-1:checked ~ .wrapper .chapter1-1,
#top input#chapter1-2:checked ~ .wrapper .chapter1-2,
#top input#chapter1-3:checked ~ .wrapper .chapter1-3,
#top input#chapter2-1:checked ~ .wrapper .chapter2-1,
#top input#chapter2-2:checked ~ .wrapper .chapter2-2,
#top input#chapter2-3:checked ~ .wrapper .chapter2-3,
#top input#chapter3-1:checked ~ .wrapper .chapter3-1,
#top input#chapter3-2:checked ~ .wrapper .chapter3-2,
#top input#chapter3-3:checked ~ .wrapper .chapter3-3,
#top input#chapter3-4:checked ~ .wrapper .chapter3-4,
#top input#chapter3-5:checked ~ .wrapper .chapter3-5,
#top input#chapter3-6:checked ~ .wrapper .chapter3-6,
#top input#chapter3-7:checked ~ .wrapper .chapter3-7{
	z-index: 100;
	opacity: 1;
	visibility: visible;
	color: #696969;
	border: 1px solid;
	box-shadow: 4px 0px 0 0 rgba(0, 0, 0, 0.3);
}
#top .tab {
	z-index: 1000;
	position: relative;
	display: inline-block;
	color: #333;
	background: rgb(163,209,182);
	font-size: 24px;
	font-family: "cwTeXFangSong";
	text-align: center;
	padding: 0.2em 0.6em 0.5em 1.2em;
	margin: 0 0.3em 0 0; 
	border-top: 1px #696969 solid;
	border-left: 1px #696969 solid;
	border-right: 1px #696969 solid;
	border-bottom: 1px #696969 solid;
	border-radius: 5px 5px 0px 0px;
	box-shadow: 3px 0px 0 0 rgba(0, 0, 0, 0.3);
}
#top .chapter {
	z-index: 1101;
	top: 80px;
	left: 3%;
	border-radius: 0 0 30px 30px;
	margin: 0 5px 0 0;
	min-width: 180px;
	padding: 3px 10px 5px 10px;
}
#top .subchapter {
	top: 7px;
	left: -7%;
	position: relative;
}
#top .submenu-anchor
{
	top: 1.2em;
	left: -14em;
	position: relative;
	display: inline-block;
}
#top input[name="subchapter-label-visible"] + div,
#top input[name="display-page-label-visible"] + div
{
	display: none;
}
#top input[name="subchapter-label-visible"]:checked + div,
#top input[name="display-page-label-visible"]:checked + div
{
	display: inline-block;
}
#top .chapter-checked
{
	color: rgb(80,168,117);
	background: #fff;
	border-top: 1px solid #fff;
}
#top .subchapter-checked
{
	color: rgb(80,168,117);
	background: #fff;
	z-index: 1002;
	border-bottom: 1px solid #fff;
	transform: translateY(-5px);
}
#top :not(.subchapter-checked).tab:hover {
	background: rgb(133,209,142);
	transform: translateY(-5px);
}
#top input.miniquiz1-visible:not(:checked) ~ .miniquiz1-container {
	opacity: 0;
	height: 0px;
	transition: opacity 1000ms, height 1000ms;
}
#top input.miniquiz1-visible:checked + input.miniquiz1-answer-visible + .miniquiz1-container {
	opacity: 1;
	height: auto;
	transition: opacity 500ms, height 500ms;;
	margin: 0.2em 0 0.2em 0;
}
#top .hide--and--next:not(:last-of-type) { /* display ONLY the last label. NOTE: the displaying order of ".hide--and--next" is from "bottom to up"(i.e. reversed) because an extra parent to group the ".hide--and--next" are not preferred.*/
	display: none;
}
#top div.miniquiz1-group1,
#top div.miniquiz1-group2,
#top div.miniquiz1-group3,
#top div.miniquiz1-group4,
#top div.miniquiz1-group5 {
	border: 1px solid #fff;
}
#top .colorful>:nth-of-type(1),
#top input.miniquiz1-answer-visible:checked + .miniquiz1-container > div.miniquiz1-group1 {
	color: blue;
	border: blue 1px solid;
	border-radius: 2px;
}
#top .colorful>:nth-of-type(2),
#top input.miniquiz1-answer-visible:checked + .miniquiz1-container > div.miniquiz1-group2 {
	color: purple;
	border: purple 1px solid;
	border-radius: 8px;
	box-shadow: 0px 0px #aaa;
}
#top .colorful>:nth-of-type(3),
#top input.miniquiz1-answer-visible:checked + .miniquiz1-container > div.miniquiz1-group3 {
	color: red;
	border: red 1px solid;
	border-radius: 2px;
	box-shadow: 2px 2px 2px 1px #aaa;
}
#top .colorful>:nth-of-type(4),
#top input.miniquiz1-answer-visible:checked + .miniquiz1-container > div.miniquiz1-group4 {
	color: #795548;
	border: #795548 1px solid;
	border-radius: 8px;
	box-shadow: 2px 2px 2px 1px #aaa;
}
#top .colorful>:nth-of-type(5),
#top input.miniquiz1-answer-visible:checked + .miniquiz1-container > div.miniquiz1-group5 {
	color: #558B2F;
	border: #558B2F 1px solid;
	border-radius: 8px;
	box-shadow: 2px 2px 2px 1px #aaa;
}

/*  4. LAYOUT  */
#top .ribbon5 {
	background-color: #E0F7FA;
	background-image: linear-gradient(to right, #E0F7FA,#B2DFDB);
}
#top .ribbon1 {
	background-color: #E0F2F1;
	background-image: linear-gradient(to right, #E0F7FA,#B2EBF2);
}
#top .ribbon2 {
	background-color: #E8F5E9;
	background-image: linear-gradient(to right,#E0F7FA,#B3E5FC);
}
#top .ribbon3 {
	background-color: #F1F8E9;
	background-image: linear-gradient(to right, #E0F7FA,#BBDEFB);
}
#top .ribbon4 {
	background-color: #E3F2FD;
	background-image: linear-gradient(to right, #E0F7FA,#C8E6C9);
}
#top .ribbon {
	width: 110%;
	position:relative;
	margin: 0 0 0.5em -1.38em;
	padding: 0px;
	line-height: 1.8em;
	background-color: #E1F5FE;
	font-size: 1.2em;
	color: #1B5E20;
	border-radius: 0 0.156em 0.156em 0;
	box-shadow: -1px 2px 3px rgba(0,0,0,0.5);
}
/*	background-image: linear-gradient(to right, #E0F7FA, #B2DFDB); */
#top .ribbon:before, 
#top .ribbon:after {
	position: absolute;
	content: '';
 	display: block;
}
#top .ribbon:before {
	width: 0.469em;
	height: 100%;
	padding: 0 0 0.438em;
	top:0;
	left: -0.469em;
	background-color: #CFF7FA;
	border-radius: 0.313em 0 0 0.313em;
}
#top .ribbon:after {
	width: 0.313em;
	height: 0.313em;
	background: rgba(0,0,0,0.35);
	bottom: -0.313em;
	left: -0.313em;
	border-radius: 0.313em 0 0 0.313em;
	box-shadow: inset -1px 2px 2px rgba(0,0,0,0.3);
}
#top input.sub--subchapter--trigger + .sub--subchapter > .blocking-ribbon::before,
#top input.sub--subchapter--trigger + .sub--subchapter > .blocking-main::before {
	position: absolute;
	left: -0.469em;
	top: 0;
	display: inline-block;
	background-color: #fff;
	content: "";
	width: 107%;
	height: 80px;
}
#top input.first--page-hint-visible ~ span::before {
	opacity: 0;
	content: "";
}
#top input.first--page-hint-visible:checked ~ span::before {
	content: attr(data-mouse-over);
	z-index: 1501;
	opacity: 1;
	transition: opacity 200ms;
}
#top input.sub--subchapter--trigger:checked + .sub--subchapter > .blocking-ribbon::before {
	transition: width 2s,left 2s;
	width: 0%;
	left: 107%;
}
#top input.sub--subchapter--trigger:checked + .sub--subchapter > .blocking-main::before {
	transition: width 4s linear 3s,left 4s linear 3s;
	width: 0%;
}
.row {
	display: block;
	float: left;
	width: 100%;
	clear: both;
}
.row:first-of-type {
	padding-top: 1em;
}
.cell {
	display: inline-block;
	float: left;
	position: relative;
}
.cell:last-child {
	margin-right: 0;
}
.cell-left {
	text-align: left;
	padding-left: 1%;
	position: relative;
}
.cell-right {
	text-align: right;
	padding-right: 1%;
	position: relative;
}
.cell-center {
	display: inline-block;
	text-align: center;
	position: relative;
}
.w-100 {
	width: 100%;
 }
.w-90 {
	width: 90%;
}
.w-83 {
	width: 83%;
}
.w-75 {
	width: 75%;
}
.w-67 {
	width: 67%;
}
.w-60 {
	width: 60%;
}
.w-55 {
	width: 55%;
}
.w-40 {
	display: inline-block;
	margin: 0.1em;
	width: 40%;
}
.w-38 {
	width: 38%;
}
.w-32 {
	display: inline-block;
	margin: 0.1em;
	width: 32%;
}
.w-15 {
	width: 15%;
}
.w-8 {
	width: 8%;
}
/***** Helper margins *****/
.mt-10 {
	margin-top: 10px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-30 {
	margin-top: 30px;
}
.mt-60 {
	margin-top: 60px;
}
.clrfx {
	display: block;
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	content: "";
}
/*  5. CONTENT  */
/***** Titles *****/
/*  6. VISUAL CANDIES */
#top video {
	margin: 1em 0 1em 0;
	width: 95%; /* This value ensures that the video is 100% width of the content area */
	height: 600px; /* This is video height, which can be adjusted according to the content */
}
#top .submenu-container {
	z-index: 1100;
	counter-reset: label-question-counter;
	position: absolute;
	text-align: right;
}
#top .submenu {
	display: block;
	position: relative;
	width: 10em;
	padding: 0.2em;
	color: rgb(80,168,117);
	background-color: rgb(163,209,182);
	text-align: left;
	vertical-align: middle;
	font-family: "cwTeXFangSong";
	font-size: 24px;
	border-top: 1px #555 solid;
	border-left: 1px #555 solid;
	border-right: 1px #555 solid;
	cursor: pointer;
}
#top .submenu::before {
	padding: 0 0.4em 0 0.6em;
}
#top .submenu:last-of-type {
	border-bottom: 1px #555 solid;
}
#top .submenu--browsed,
#top .submenu:focus,
#top .submenu:hover {
	background-color: rgb(133,209,142);
	color: #fff;
}
#top input.sub--subchapter--trigger + .sub--subchapter {
	position: absolute;
 	opacity: 0;
	visibility: hidden;
	transition: opacity 1000ms;
}
#top input.sub--subchapter--trigger:checked + .sub--subchapter {
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms;
}
#top .submenu-label-counter:before {
	font-family: "cwTeXFangSong";
	content: "第" counter(label-question-counter) "題";
	counter-increment: label-question-counter;
}
/*  7. MEDIA QUERIES  */
/***** Max width 1024px *****/
.small--screen--only {
	display: none;
}
@media only screen and (max-width:1024px) {
	.mobile-image {
		display:inline-block;
	}
	.desktop-image,
	.big--screen--only
	{
		display:none;
	}
	.small--screen--only
	{
		display:block;
	}
	img.left,
	img.right
	{
		max-width: 300px;
	}
	#top input[name="chapter-label-visible"] + input + label {
		display: none;
	}
	.side-menu-container .large-icon {
		font-size: 15px;
	}
	#top .submenu-anchor
	{
		left: -7em;
	}
	#top .logo-left::before {
		width: 150px;
		height: 60px;
		background: url("eduhks.jpg") #fff no-repeat top left;
	}
	#top .logo-right::before {
		width: 140px;
		height: 50px;
		float: right;
		background: url("cles.jpg") #fff no-repeat top right;
	}
	#top .content-container {
		min-height: 90%;
		margin: 80px 10px 0px 10px;
		padding: 12px 10px;
		display: inline-block;
		background: #fff;
		border-width: 1px;
		border-style: solid;
		border-radius: 0px;
		box-shadow: 0px;
	}
	.cell-right {
		text-align: left;
		padding-top: 10px;
	}
	#top h2 + .back-lined1 {
		border-top: 0px;
	}
	#top h2 + .back-lined2 {
		border-top: 0px;
	}
	.w-90,
	.w-83,
	.w-75,
	.w-67,
	.w-60,
	.w-55,
	.w-40,
	.w-32,
	.w-15,
	.w-8 {
		width: 100%;
	}
	#top h1 {
		font-size: 32px;
	}
	#top .header,
	#top h2 {
		font-size: 16px;
	}
	#top .content {
		width: 80vw;
		font-size: 16px;
	}
	#top .tab {
		font-size: 12px;
	}
	#top .submenu {
		font-size: 12px;
	}
	#top video {
		margin: 2em 0 1em 0;
		width: 95%;
		max-height: 300px;
	}
	#top .ribbon {
		margin: 0 0 0.5em -2.28em;
	}
	#top ul,
	#top ol {
		display: block;
	}
	#top .copyright {
		font-size: 9px;
		bottom: -50px;
	}
}

@media only screen and (min-width: 601px) {
	.mobile-image {
		display:none;
	}
	.desktop-image {
		display:inline-block;
	}
}
@media only screen and (max-width:600px) {
	#top .mouse-over-content::before { /* explanation dialogue*/
		padding: 0.2em;
	}
	#top .sliding-page,
	#top .blocking-page {
		height: 100%;
	}
	.mobile-image {
		display:inline-block;
	}
	.desktop-image,
	.big--screen--only
	{
		display:none;
	}
	.w-60,
	.w-32,
	.w-8 {
		max-width: 50%;
	}
	div {
		word-wrap: break-word;
	}
	img.left,
	img.right
	{
		width:100%;
		max-width: 150px;
	}
	#top input[name="chapter-label-visible"] + input + label {
		display: none;
	}
	#top .submenu-anchor
	{
		left: -7em;
	}
	#top .logo-left::before {
		width: 75px;
		height: 30px;
		background: url("eduhkss.jpg") #fff no-repeat top left;
	}
	#top .logo-right::before {
		width: 70px;
		height: 25px;
		float: right;
		background: url("cless.jpg") #fff no-repeat top right;
	}

	#top video {
		padding-top: 50px;
		width: 85%;
		max-height: 200px;
	}
}