.book-basic-bg	{background:url('../img/common/background.png') center center repeat-x; background-size:auto 100%;}

iframe			{	}

.cover_loader	{position:absolute; width:100%; height:100%; background-color:#a7bfd0; opacity:.5; top: 0px; left: 0px;}

.page_loader 	{position: absolute; width:100%; height:100%; background-color:#FFFFFF; opacity:1; top: 0px; left: 0px; display:none;}

.loader			{
				position:absolute; 
				margin:auto;
				top:0; 
				right:0; 
				bottom:0; 
				left:0; 
				width:120px; 
				height:120px; 
				border:16px solid #f3f3f3; /* Light grey */
				border-top:16px solid #3498db; /* Blue */
				border-radius:50%; 
				animation:spin 2s linear infinite;
				}

@keyframes spin { 
				0% { transform:rotate(0deg); } 
				100% { transform:rotate(360deg); } 
}

.jsgrid tr		{ 
				word-break:break-all; word-wrap:break-word; /* IE 5.5+ and CSS3 */
				word-wrap:break-word; /* IE 5.5+ and CSS3 */
				white-space:pre-wrap; /* CSS3 */
				white-space:-pre-wrap; /* Opera 4-6 */
				white-space:-o-pre-wrap; /* Opera 7 */	
				}

.jsgrid-cell	{
				border :0px;
				}

.canvas-container	{position:absolute; top :0px; left :0px;}

.menu_logo			{width:75px; vertical-align:middle; float:left; background-color:#FFFFFF; margin-right:12px; margin-top:-10px; padding:5px;}


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

/* book container */

#contents_section		{user-select:none;}

.cover_view_bg			{position:absolute; top:0px; left:0px; background:url('../img/common/book_outline_bg.png') 0px 0px no-repeat; background-size:100% 100%; }
/*
.cover_view_bg:before	{position:absolute; display:inline-block; width:18px; height:100%; left:0px; top:0px; background:url('../img/common/book_outline_bg.png') left 0px  no-repeat; background-size:auto 100%; content:''}
.cover_view_bg:after	{position:absolute; display:inline-block; width:18px; height:100%; right:0px; top:0px; background:url('../img/common/book_outline_bg.png') right 0px  no-repeat; background-size:auto 100%; content:''}
*/

#cover_leftpage			{position:relative; float:left;}
.cover_left_page		{margin:0px; border:0px; width:0px; height:0px;}
/* .cover_left_page:before	{position:absolute; display:inline-block; width:100%; height:7px; left:0px; top:-7px; background:url('../img/common/book_outline_top.png') left top no-repeat; background-size:auto auto; content:'';} */
/* .cover_left_page:after	{position:absolute; display:inline-block; width:100%; height:25px; left:0px; bottom:-25px; background:url('../img/common/book_outline_top.png') left bottom no-repeat; background-size:auto auto; content:'';} */
.page_frame_left		{position:absolute; border:0px; width:0px; height:0px;}

#cover_rightpage		{position:relative; float:left;}
.cover_right_page		{margin:0px; border:0px; width:0px; height:0px;}
/* .cover_right_page:before{position:absolute; display:inline-block; width:100%; height:7px; left:0px; top:-7px; background:url('../img/common/book_outline_top.png') right top  no-repeat; background-size:auto auto; content:'';} */
/* .cover_right_page:after	{position:absolute; display:inline-block; width:100%; height:25px; left:0px; bottom:-25px; background:url('../img/common/book_outline_top.png') right bottom no-repeat; background-size:auto auto; content:'';} */
.page_frame_right		{position:absolute; border:0px; width:0px; height:0px;}

#cover_rightpage:after	{position:absolute; display:inline-block; left:-10px; top:0px; width:20px; height:100%; background:url('../img/common/book_outline_center.png') repeat-y; background-size:100% 100%;  z-index:10000; content:''}

#cover_onepage						{position:absolute; top:0px; left:0px; display:none; background-color:#dadada; overflow:hidden;}
#cover_onepage .canvas-container	{position:absolute; top:0px; left:0px; pointer-events:none;}

.frame_cover						{position:relative; top:0px; left:0px; overflow:hidden;}
#frame_onepage						{position:absolute; border:none; top:0px; left:0px; width:100%; height:100%; }

/* book container */

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

/* page move */

#btn_page_prev		{	}
#btn_page_next		{	}
.btn_page_move		{position:absolute; top:50%; width:82px; height:83px; z-index:1000; display:none; border:0px; outline:0px;}

.page_btn				{cursor:pointer; background-size:100% 100%;}
.page_btn .prev			{background:url('../img/navi/pagemove_prev.png') no-repeat; left:10px;}
.page_btn .next			{background:url('../img/navi/pagemove_next.png') no-repeat; right:10px;}
.page_btn .prev:hover	{background:url('../img/navi/pagemove_prev_over.png') no-repeat;}
.page_btn .next:hover	{background:url('../img/navi/pagemove_next_over.png') no-repeat;}

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


#drawingCanvasOnepage				{position:absolute; top:0px; left:0px; }
#cover_bookmark						{pointer-events:none;}

/*----------------------------------------------------------------------------------------------------------------------------------------*/
.scroll-wrapper-tourch {	-webkit-overflow-scrolling:touch; overflow-y:scroll;} 

#touchscroll {
	position:absolute; top:0px; left:0px; pointer-events:none; 
	cursor:move; /* fallback if grab cursor is unsupported */
	cursor:grab; 
	cursor:-moz-grab; 
	cursor:-webkit-grab; /*background-color:#FFFFCC; */
}

#touchscroll:active {
	cursor:grabbing; 
	cursor:-moz-grabbing; 
	cursor:-webkit-grabbing;
}

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

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

#naviViewport {position:absolute; /*bottom:160px; right:50px; */ display:none; cursor:move;}

#naviViewport #naviHandleArea {position:relative; margin-top:65px; margin-left:4px; width:214px; height:140px;  cursor:default;}

#naviViewport img {width:107px; height:140px; margin:0px; padding:0px; display:block; float:left;}

#naviSliderArea {height:31px;}

#zoomSlider {position:absolute; width:90px; top:131px; left:5px;}

#naviHandle {position:absolute; top:0px; left:0px; width:55px; height:36px; background-color:#caa4b7; border-style:solid; border:2px solid #a04b6d; opacity:.6; cursor:move;}

#canvas_highlight	{position:absolute; top:0px; left:0px; pointer-events:none; background-color:transparent; /*background-color:blue; opacity:.5; */}

#cover_bookmark		{position:absolute; top:0px; left:0px; pointer-events:none;}

#menu_contents		{}

.bookmark {position:absolute; width:60px; height:81px; display:none;}

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

.leftpage {top:0px; left:20px;}
.rightpage {top:0px; right:20px;}
.top {top:0px; left:0px;}
.bottom {bottom:0px; left:0px;}



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

.menu_detector {position:absolute; width:100%; height:10px;}

/*
.menu_handle img {width:60px; height:10px; cursor:pointer;}
.menu_handle_top {position:absolute; left:calc(50% - 30px); top:54px;}
*/

.menu_handle_bottom {position:absolute; left:calc(50% - 30px); top:-15px;}

#bottom_menu {/*position:absolute; */width:100%; left:0px; bottom:0px; /*	padding-top:12px; padding-left:15px; 	background-color:#5b738d; opacity:.9; */vertical-align:middle;}
#bottom_menu .search {display:none}

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

/* pageNavigation */

#pageNavigation			{position:absolute; display:none;}

.page_selector			{display:none;}
.page_selector_title	{}
.page_selector_img		{}
.page_selector img		{}

/* pageNavigation */

/*----------------------------------------------------------------------------------------------------------------------------------------*/
/* zoom move */
#btn_move_left {
	position:absolute; width:70px; height:70px; top:calc(50% - 35px); left:50px; border:0px; background:url(../../resources/img/common/arrow_in_circle_left.png) no-repeat; display:none; 
	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_right {
	position:absolute; width:70px; height:70px; top:calc(50% - 35px); right:50px; border:0px; background:url(../../resources/img/common/arrow_in_circle_right.png) no-repeat; display:none; 
	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_up {
	position:absolute; width:70px; height:70px; top:70px; left:calc(50% - 35px); border:0px; background:url(../../resources/img/common/arrow_in_circle_up.png) no-repeat; display:none; 
	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

#btn_move_down {
	position:absolute; width:70px; height:70px; bottom:70px; left:calc(50% - 35px); border:0px; background:url(../../resources/img/common/arrow_in_circle_down.png) no-repeat; display:none; 
	-webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;
}

/*
#page_thumbnails {position:absolute; width:100%; height:150px; left:0; bottom:0; background-color:#9ba6ad; display:none;}
*/

.btnPopupClose		{position:absolute; width:36px; height:36px; background:url('../img/popup/popup_close.png') no-repeat; cursor:pointer; border:0; outline:0;}
.btnClose			{width:36px; height:36px; background:url('../img/popup/popup_close.png') no-repeat; cursor:pointer; border:0; outline:0;}
.btnPopupClose:hover{background:url('../img/popup/popup_close_over.png') no-repeat;}
.btnClose:hover		{background:url('../img/popup/popup_close_over.png') no-repeat;}

#btn_close_thumbnails {position:absolute; width:36px; height:36px; background:url('../img/popup/popup_close.png') no-repeat; cursor:pointer; border:0; outline:0;}


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

.jsgrid-table img {background-color:#FFFFFF; vertical-align:middle;}

.page_thumbnail {background-color:#FFFFFF; width:80px; height:120px; margin:15px;}

.iw-contextMenu { z-index:10110;}

.btn-file {
	position:relative; 
	overflow:hidden;
}

.btn-file input[type=file] {
	position:absolute; 
	top:0; 
	right:0; 
	min-width:100%; 
	min-height:100%; 
	font-size:100px; 
	text-align:right; 
	filter:alpha(opacity=0); 
	opacity:0; 
	outline:none; 
	background:white; 
	cursor:inherit; 
	display:block;
}

.floating_button {bottom:70px; right:30px; position:fixed;}

#btn_zoom {}

/*
#contents_thumbnails {width:100%; height:216px; padding-top:15px; background:#A3CBE0; border:2px solid #000; overflow-x:auto; overflow-y:hidden; box-shadow:0 0 10px #000;}
#contents_thumbnails ul {position:relative; float:left; display:inline; margin-right:-999em; white-space:nowrap; list-style:none;}
#contents_thumbnails li {width:140px; margin:0px; text-align:center; float:left; display:inline;}
#contents_thumbnails img {border:0; display:block; border:1px solid #A3CBE0;}
#contents_thumbnails a:active img, #scroll a:focus img, #scroll a:hover img {border:1px solid #000;}
#contents_thumbnails a {text-decoration:none; font-weight:bold; color:#000;}
#contents_thumbnails a:active, #scroll a:focus, #scroll a:hover {color:#FFF;}
#contents_thumbnails span {padding:5px 0 0; display:block;}
*/

.scrollgeneric {line-height:1px; font-size:1px; position:absolute; top:0; left:0;}
.hscrollerbase {height:17px; background:#A3CBE0;}
.hscrollerbar {height:12px; background:#000; cursor:e-resize; padding:3px; border:1px solid #A3CBE0;}
.hscrollerbar:hover {background:#222; border:1px solid #222;}

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

.flipbook-viewport				{position:absolute; overflow:hidden; width:100%; height:100%; pointer-events:none;}
.flipbook-viewport .container	{position:absolute; top:0px; left:-15px; margin:auto;}
.flipbook-viewport .flipbook	{width:2372px; height:1556px; left:0px; top:0px;}
.flipbook-viewport .page		{background-color:white; background-repeat:no-repeat; background-size:100% 100%;}
.flipbook .page					{-webkit-box-shadow:0 0 0px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0px rgba(0,0,0,0.2); -ms-box-shadow:0 0 0px rgba(0,0,0,0.2); -o-box-shadow:0 0 0px rgba(0,0,0,0.2); box-shadow:0 0 0px rgba(0,0,0,0.2);}
.flipbook-viewport .page img	{-webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; margin:0;}
.flipbook-viewport .shadow		{-webkit-transition:-webkit-box-shadow 0.5s; -moz-transition:-moz-box-shadow 0.5s; -o-transition:-webkit-box-shadow 0.5s; -ms-transition:-ms-box-shadow 0.5s; 
								-webkit-box-shadow:0 0 0px #ccc; -moz-box-shadow:0 0 0px #ccc; -o-box-shadow:0 0 0px #ccc; -ms-box-shadow:0 0 0px #ccc; box-shadow:0 0 0px #ccc;}

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

/* Large desktops and laptops */
@media (min-width:1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width:992px) and (max-width:1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width:768px) and (max-width:991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width:767px) {

}

/* Portrait phones and smaller */
@media (max-width:480px) {
	.menu_logo {
		width:60px; 
		vertical-align:middle; 
		float:left; 
		background-color:#FFFFFF; 
		margin-right:12px; 
		margin-top:-3px; 
	}

	#search_key { 	
		width:100px; 
	}

	.input {
		font-size:10px; 	
	}

	#btn_move_left {
		width:30px;
		height:30px;
		top:calc(50% - 15px); 
	}

	#btn_move_right {
		width:30px;
		height:30px;
		top:calc(50% - 15px);
	}

	#btn_move_up {	
		width:30px;
		height:30px;
		left:calc(50% - 15px); 
	}

	#btn_move_down {
		width:30px;
		height:30px;
		left:calc(50% - 15px); 
	}		
	
	.floating_button {
		right:15px; 
	}

	#img_btn_zoom {
		width:45px;
		height:45px;
	}

	.label {
		font-size:14px;
		padding:.4em .6em .3em; 
	}

	#pageNum {
		margin-left:0px; 
	}
}
/*----------------------------------------------------------------------------------------------------------------------------------------*/

#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    top: calc(50% - 30px); /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.6s;
    animation: fadein 0.5s, fadeout 0.5s 1.6s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from { opacity: 0;} 
    to { opacity: 1;}
}

@keyframes fadein {
    from { opacity: 0;}
    to { opacity: 1;}
}

@-webkit-keyframes fadeout {
    from { opacity: 1;} 
    to { opacity: 0;}
}

@keyframes fadeout {
    from { opacity: 1;}
    to { opacity: 0;}
}