/*
 * Book page
 */

#reader #book {
	position: absolute;
	left: 0; right: 0; top: 100%;
	overflow:hidden;
	background-color: #FFF;
	-webkit-transition-delay: .5s, .5s;
	-moz-transition-delay: .5s, .5s;
	-ms-transition-delay: .5s, .5s;
	transition-delay: .5s, .5s;
	-webkit-transition-property: top, bottom;
	-moz-transition-property: top, bottom;
	-ms-transition-property: top, bottom;
	transition-property: top, bottom;;
	-webkit-transition: .5s, .5s;
	-moz-transition: .5s, .5s;
	-ms-transition: .5s, .5s;
	transition: .5s, .5s;
}
#reader #book.visible {
	-webkit-transition-delay: initial;
	-moz-transition-delay: initial;
	-ms-transition-delay: initial;
	transition-delay: initial;
	top: 0; bottom: 0;
}

#reader #book\.oddBookPageBg { display: none; }
#reader #book, #reader #book textarea, #reader #book input {font-family:Verdana,"新微軟正黑體";}
#reader #book .top-bar {position:absolute; background-color:#18222E; left:0px; top:0px; right:0px; height:44px;}

#reader #book .top-bar .ilesson-button2 {height:28px; line-height:28px; padding:0px 10px; margin:5px; cursor:pointer;}
#reader #book .top-bar .button-bookshelf { float: left; }
#reader #book .top-bar > div > .icon { position: relative; margin: 6px 10px; }
#reader #book .top-bar .bookname {
	color:#CEE7EF;
	float:left;
	line-height:44px;
	font-family:Verdana;
	font-size:16px;
	width: 70%;
	width: calc(100% - 70px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#reader #book .top-bar .bookname > * {display: inline}
/* From authoring tool /// */

.bookpage input[type="checkbox"] {
	color:#000000;
	background-color:#000000;
	height:25px; width:25px;
	/* Double-sized Checkboxes */
	x-ms-transform: scale(2); /* IE */
	x-moz-transform: scale(2); /* FF */
	x-webkit-transform: scale(2); /* Safari and Chrome */
	x-o-transform: scale(2); /* Opera */
	x-padding: 10px;
	x-margin: 10px;
}

.bookpage input[type="radio"] {
	position: relative;
	display: inline-block;
	background-color: #eeeeee;
	height: 24px; width: 24px;
	border-radius: 14px;
	box-shadow: #000000 0px 0px 1px;
	cursor: pointer;
	x-margin-right: 12px;
	-webkit-appearance: none;
}
.bookpage input[type="radio"]:after {
	position: relative;
	display: block;
	background-color: #eeeeee;
	left: 5px; top: 5px;
	height: 14px; width: 14px;
	border-radius: 25px;
	content: '';
}
.bookpage input[type="radio"]:checked:after {
	background-color: #000000;
}

.bookpage input[type="button"] {
	x-webkit-appearance:none;
	-webkit-border-radius:0;
}

.bookpage .custom-object, #book .user-object {position:absolute;}
.bookpage .custom-object textarea {resize:none;}
.bookpage .user-object[data-type="picture"] div {
	margin-left: 14px;
	margin-top: 17px;
	width: 42px;
	height: 42px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
/*
.bookpage .user-object[data-type="picture"] {
	width: 72px;
	height: 72px;
	outline: 1px #FFF dotted;
	box-shadow: #777 2pt 2pt 5pt 1pt;
	background-position:  top left;
	background-size: cover;
	background-size: contain;
}
@-moz-document url-prefix() {
	.bookpage .user-object[data-type="picture"] {
		outline: none;
		border: 1px #FFF dotted;
	}
}
.bookpage .user-object[data-type="picture"]:before {
	content: '\25CF';
	position: absolute;
	display: inline-block;
	left: -.33em;
	top: -.66em;
	font-size: 2em;
	color: #009900;
}
.bookpage .user-object[data-type="picture"][data-teacherRes]:before {
	color: #D90000;
}
*/
.bookpage .tick-cross {position:absolute; display:none; height:25px; width:25px; background-repeat:no-repeat;}
.bookpage .tick-cross.correct {background-image:url(../images/correct.png);}
.bookpage .tick-cross.wrong {background-image:url(../images/wrong.png);}

.bookpage .ans_result {display:none; height:25px; width:25px; background-repeat:no-repeat;}
.bookpage .ans_result.correct {background-image:url(../images/correct.png);}
.bookpage .ans_result.wrong {background-image:url(../images/wrong.png);}

.bookpage .obj-checkArea {cursor:pointer;}
.bookpage .obj-checkArea {background-image:url(../images/check_default.png); background-repeat: no-repeat; background-position: center;}
.bookpage .obj-checkArea.checked {background-image:url(../images/check_checked.png);}
.bookpage .obj-checkArea input {display:none;}

.bookpage .qtype-pull-inline {background-color: #D4EEFD;}
.bookpage .qtype-pull-option {border:transparent solid 2px; border-radius: 25px; cursor:pointer;}
.bookpage .qtype-pull-option.selected {border-color:#ff0000;}

/* For Special Text - dot above character */
.circle-wrapper { position: absolute; bottom: 0px; width: 100%; text-align: center; padding: 0px; line-height: 3em; }
.circle {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	display: inline-block
}
.keyword-wrapper { position: relative; }
.green { background: green; }
.orange { background: orange; }

x.bookpage .qtype-pull-inline {
	position: relative;
	display: inline-block;
}
x.bookpage .qtype-pull-option {
	position: relative;
	x-display: inline-block;
	background-color: aquamarine;
}
x.bookpage .qtype-pull-option:after {
	position: absolute;
    display: inline-block;
	left: -2px;
	top: 0px;
	right: -2px;
	bottom: 0px;
	border: #ff0000 solid 2px;
	border-radius: 25px;
	content: "@";
	x-background-color: #00ff00;
}

.bookpage .custom-object.layer-overlay {margin:0px;}

/* /// From authoring tool */

/* Classroom control *** */
#reader #book .classroom-control-panel {
	position:relative;
	display:inline-block;
	background-color:#34495e;
	color:#ffffff;
	height:32px;
	border-radius:18px;
	margin:6px;
}
#reader[data-usertype="T"] #book .classroom-control-panel {width:150px;}
#reader[data-usertype="S"] #book .classroom-control-panel {width:63px;}
#reader #book .classroom-control-panel .classroom-control-notify-disconnected,
#reader .button-profile .button-profile-notify-reqsync {
	position: absolute;
	display: none;
	left: 60%;
	top: 20%;
	width: 0; 
	height: 0; 
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 18px solid red;
	color: #FFF;
	font-size: 9px;
	text-indent: -.33em;
	line-height: 2.5em;
	font-family: verdana
}
#reader #bookshelf .button-profile .button-profile-notify-reqsync {
    left: -10px;
    top: 10px;
	text-indent: -.25em;
}
#reader #book .button-profile .button-profile-notify-reqsync {
	/*left: 90%;*/
	/*left: calc(100% - 30px);*/
    left: 78%;
    left: calc(100% - 65px); 
    top: 16px;
	text-indent: -.25em;
}
#reader .button-profile .custom-animated-loading {
	display: none;
    width: 35px;
    height: 35px;
    top: 22px;
}
#reader .button-profile .custom-animated-loading > div {
    width: 9px;
    height: 9px;
}
#reader[data-onsync] .button-profile .custom-animated-loading {
	display: inline-block;
}
#reader[data-usertype="T"] #book .classroom-control-panel[data-disconnected] .classroom-control-notify-disconnected
/*,#reader[data-reqsync] .button-profile .button-profile-notify-reqsync*/ {
	display: inline-block;
}
#reader[data-usertype="T"] #book .classroom-control-panel[data-disconnected="0"] .classroom-control-notify-disconnected
/*,#reader[data-reqsync="0"] .button-profile .button-profile-notify-reqsync*/ {
	display: none;
}
#reader #book .classroom-control-panel .control-status {
	position:absolute;
	display:inline-block;
	left:10px;
	top:0px;
}
#reader #book .top-bar .classroom-control-panel .current-class-selection {
	position:absolute;
	right:30px; top:5px;
	height:21px;
	line-height:21px;
	width:50px;
	text-align:center;
	cursor:pointer;
	background-color:#ffffff;
	font-family:Verdana;
	font-size:12px;
	color:#000000;
}
/* *** Classroom control */

/*.book .top-bar .current-class {}*/
#reader #book .bottom-bar {
	position:absolute;
	background-color:#18222E;
	left:0px; bottom:0px; right:0px;
	height:44px;
	z-index: 1;
}
#reader #book .bookpage-area {
	position:absolute;
	background-color:#34495E;
	left:0px; top:44px; right:0px; bottom:44px;
	overflow:hidden;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#reader #book.visible .bookpage-area {
	-webkit-transition-delay: opacity .5s;
	-moz-transition-delay: opacity .5s;
	-ms-transition-delay: opacity .5s;
	transition-delay: opacity .5s;
	opacity: 1;
}
/*#reader #book .bookpage-area.visible { overflow:auto; }*/

#reader #book .page-nav-bar {
	position:absolute;
	x-background-color:yellow;
	height:32px;
	width:180px;
	top: 5px;
	right:10px;
}

#reader #book .top-bar > * {
	display: inline-block;
	position:absolute;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
}
#reader #book.visible .top-bar > * {
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}
#reader #book .top-bar .top-bar-book-info { margin-left: -100%; width: 70%; width: calc(100% - 300px); }
#reader #book .top-bar .top-bar-user-control { right: -300px; width: 300px; }
#reader #book.visible .top-bar .top-bar-book-info { margin-left: 0; }
#reader #book.visible .top-bar .top-bar-user-control { right: 0; }

#reader #book .bottom-bar .bottom-bar-normal {
	width: 100%;
}
#reader #book .bottom-bar .bottom-bar-normal > * {
	display: inline-block;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	-ms-transition: .5s;
	transition: .5s;
}
#reader #book.visible .bottom-bar .bottom-bar-normal > * {
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

#reader #book .bottom-bar .bottom-bar-normal .tool-bar { margin-left: -100%; }
#reader #book .bottom-bar .bottom-bar-normal .page-nav-bar { right: -200px }
#reader #book.visible .bottom-bar .bottom-bar-normal .tool-bar { margin-left: 0; }
#reader #book.visible .bottom-bar .bottom-bar-normal .page-nav-bar { right: 50px; }

#reader #book .bottom-bar .bottom-bar-normal .tool-bar > * { margin: 6px; }
#reader[data-isGuest="true"] #book .bottom-bar .bottom-bar-normal .tool-bar .button-bookmark { display: none; margin: 0;}
#reader #book .bottom-bar .bottom-bar-normal .tool-bar .button-pagemode {
	/*display: none;*/
}
#reader[data-isApp="true"]/*[data-orientation="landscape"]*/ #book .bottom-bar .bottom-bar-normal .tool-bar .button-pagemode {
	/*display: inline-block;*/
}
#reader #book .bottom-bar .bottom-bar-normal .page-nav-bar .button-navigate {
	width: 32px;
	height: 36px;
}
#reader #book .bottom-bar .bottom-bar-normal .page-nav-bar .button-navigate.next-page {
	-webkit-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	transform: scale(-1, 1);
}
#reader #book .bottom-bar .bottom-bar-normal .page-nav-bar input[type="text"].current-page {
	border:#34495e solid 1px;
	height:31px;
	width:150px;
	padding:0;
	margin-top: -3px;
	text-align:center;
}

#reader #book .bookpage-area .draggable {
	position: absolute;
	display: inline-block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
html[data-user-agent*="Firefox"]
#reader #book .bookpage-area .draggable {
	top: 334px;
}
#reader #book .bookpage-area .zoomable {
	position: absolute;
	display: inline-block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-ms-transform-origin: center center;
	-o-transform-origin: center center;
	transform-origin: center center;
}
#reader #book .bookpage-container {
	position:absolute;
	display:inline-block;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	/*width: 100%;*/
	/*height: 100%;*/
	/*x-background-color:#DDDDDD;*/
	/*top:0px; left:0px; right:0px; margin-left:auto; margin-right:auto;*/
}

#reader #book .bookpage-container .user-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}
#reader #book .bookpage-container .user-panel .ebkcanvas_container,
#reader #book .bookpage-container .user-panel .ebkcanvas_output {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
}
#reader #book[data-mode='drawing'] .bookpage-container .user-panel {
	z-index: 10;
}
#reader #book[data-mode='drawing'] .bookpage-container .user-panel .ebkcanvas_container,
#reader #book[data-mode=''] .bookpage-container .user-panel .ebkcanvas_output {
	display: inline-block;
}
#reader #book[data-mode=''] .bookpage-container .user-panel .ebkcanvas_container,
#reader #book[data-mode='drawing'] .bookpage-container .user-panel .ebkcanvas_output {
	display: none;
}

#reader #book .bookpage-container .user-panel canvas {
	position: absolute;
}

#reader #book .bookpage-container .user-panel canvas#tmp_canvas_of_ebkcanvas {
	touch-action:none;
	/*	//Kelvin Kwong 19/5/2020 for pointer event*/
}

#reader #book .bookpage {
	position:absolute;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
	opacity: 0;
}
#reader #book .bookpage.odd-page {background-color:#000000; left:0px;}
#reader #book .bookpage.even-page {background-color:#999999;}
/*.book .bookpage-area.visible .bookpage { opacity: 1; }*/
#reader #book .visible .bookpage { opacity: 1; }

/*.book[data-pagemode="single"] .bookpage-container {width:1024px;}*/
#reader #book[data-pagemode="single"] .bookpage.even-page {display: none; width: 0px}

/*.book[data-pagemode="dual"] .bookpage-container {width:2048px;}*/
/*.book[data-pagemode="dual"] .bookpage.even-page {left:1024px;}*/

/*#reader #book .bookpage > .bg {position:absolute; display:none; left:0px; top:0px;}*/

#reader #book .screen-capture { position:absolute; display: none; top: 44px; bottom: 44px; width: 100%; background-color: #34495E; overflow: auto; }
#reader #book.l2r .screen-capture, #reader #book.r2l .screen-capture {
	display: inline-block;
	left: 0;
	right: 0;
	/*-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-ms-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: .5s, .5s;
	-moz-transition-duration: .5s, .5s;
	-ms-transition-duration: .5s, .5s;
	transition-duration: .5s, .5s;*/
}
/*#book.r2l.slideIn .screen-capture { left: 100%; right: -100%; }*/
/*#book.l2r.slideIn .screen-capture { left: -100%; right: 100%; }*/

#reader #book.l2r .bookpage-area, #reader #book.r2l .bookpage-area {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
	display: none;
	/*-webkit-transition-property: left, right;
	-moz-transition-property: left, right;
	-ms-transition-property: left, right;
	transition-property: left, right;
	-webkit-transition-duration: .5s, .5s;
	-moz-transition-duration: .5s, .5s;
	-ms-transition-duration: .5s, .5s;
	transition-duration: .5s, .5s;*/
}
/*#book.r2l .bookpage-area { left: -100%; right: 100%; }*/
/*#book.l2r .bookpage-area { left: 100%; right: -100%; }*/
/*#book.slideIn .bookpage-area { left: 0; right: 0; }*/


#reader #book span[data-elementtype="navigate"] {cursor:pointer;}
#reader #book [data-elementtype="exercise"] { display: none }
#reader #book [data-elementtype="exercise"][enabled="enabled"] { display: block }

span.custom-object input[type="button"] {background-color:#dddddd; border:#000000 solid 1px; width:120px; height:35px;}


/*
 * Work in Progress popups
 */

x.wip {position:absolute; display:none; background-color:rgba(0,0,0,.8); left:0px; top:0px; right:0px; bottom:0px; z-index:9; cursor: default;}
x.wip .white-glow {text-shadow:-2px -2px 10px #999999,-2px 2px 10px #999999,2px -2px 10px #999999,2px 2px 10px #999999;}
x.wip .message {color:#ffffff; font-family:Verdana; font-size:32px; cursor: default;}
.wip {position:absolute; display:none; background-color:rgba(255,255,255,.4); left:0px; top:0px; right:0px; bottom:0px; z-index:9; cursor: default;}
.wip > * { display: none; }
.wip > .visible { display: block; }
.wip .white-glow {text-shadow:-2px -2px 10px #ffffff,-2px 2px 10px #ffffff,2px -2px 10px #ffffff,2px 2px 10px #ffffff;}
.wip .message, .wip .controls {
	color:#000000; font-family:Verdana; font-size:32px; cursor: default;
	position: absolute;
	bottom: 0; left: 0; right: 0;
	text-align: center;
	margin: auto;
}
.wip .message {
	top: 0;
	height: 1em;
}
.wip .controls {
	top: 50%;
	height: 3em;
}
.wip .controls > .custom-button {
	margin: 0 3em;
}
.wip .button-close { position: absolute; top: 50px; right: 20px; }

#reader[data-usertype="T"] #book .bookpage-container .bookpage [data-role="2"],
#reader[data-usertype="S"] #book .bookpage-container .bookpage [data-role="1"] {
	display: none;
}