#book {
	top: 0px;
	bottom: 50px;
	background-color: #ddd;
}
#contents_close {
	top: 15px;
	left: 290px;
	width: 32px;
	height: 32px;
	padding: 0px 0px 0px 0px;
	background: #ddd center no-repeat url(close.png);
	/* CSS3 */
	-webkit-border-radius: 0px 4px 4px 0px;
	-moz-border-radius: 0px 4px 4px 0px;
	border-radius: 0px 4px 4px 0px;
}
html.retina #contents_close {
	background-image: url(close_high.png);
	background-size: 30px 30px;
}
#contents {
	direction: rtl;
	background: #ddd;
	top: 0px;
	left: 0px;
	bottom: 50px;
	padding: 50px 30px 30px 30px;
	width: 300px;
	text-align: left;
	/* CSS3 */
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
	        box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
}
	#contents ul,
	#contents li {
		direction: ltr;
		display: block;
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
		#contents_head {
			font-family: Arial, Helvetica, sans-serif;
			line-height: 16px;
			font-size: 16px;
			color: #222;
			padding: 0px 0px 10px 0px;
			border-bottom: 1px solid rgba(0,0,0,0.05);
		}
		#contents a {
			position: relative;
			z-index: 10;
			display: block;
			border-bottom: 1px solid rgba(0,0,0,0.05);
			font-family: Arial, Helvetica, sans-serif;
			line-height: 20px;
			font-size: 13px;
			color: #222;
			padding: 7px 0px 7px 12px;
			text-decoration: none;
			background: 0px 13px no-repeat url(arrow.png);
			background-size: 5px 8px;
			margin: -1px 0px 0px 0px;
		}
		html.no-touch #contents a:hover {
			z-index: 20;
			background-color: #fff;
			border-color: #fff;
			padding: 7px 30px 7px 42px;
			margin: -1px -30px 0px -30px;
			background-position: 30px 13px;
		}
		#contents a[data-page]:before {
			content: attr(data-page);
			display: inline-block;
			vertical-align: top;
			float: right;
			margin: 0px 0px 0px 6px;
			font-size: 11px;
			color: #999;
		}
#index_close {
	right: 15px;
	bottom: 190px;
	width: 32px;
	height: 32px;
	padding: 0px 0px 0px 0px;
	background: #ddd center no-repeat url(close.png);
	/* CSS3 */
	-webkit-border-radius: 4px 4px 0px 0px;
	   -moz-border-radius: 4px 4px 0px 0px;
	        border-radius: 4px 4px 0px 0px;
}
html.retina #index_close {
	background-image: url(close_high.png);
	background-size: 30px 30px;
}
#index_search {
	left: 15px;
	bottom: 198px;
	right: 65px;
	height: 43px;
	padding: 12px 12px 0px 12px;
	background: #ddd;
	max-width: 320px;
	/* CSS3 */
	-webkit-border-radius: 4px 4px 0px 0px;
	   -moz-border-radius: 4px 4px 0px 0px;
	        border-radius: 4px 4px 0px 0px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
	#index_search input {
		display: block;
		border: 1px solid #ddd;
		position: relative;
		z-index: 100;
		outline: none;
		width: 100%;
		height: 29px;
		line-height: 20px;
		padding: 4px 8px 4px 26px;
		background: #fff url(input_search.png) 8px 8px no-repeat;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	html.retina #index_search input {
		background-image: url(input_search_high.png);
		background-size: 12px 12px;
	}
	#index_search input:focus {
		border-color: #333;
	}
#index {
	background: #ddd;
	left: 0px;
	right: 0px;
	bottom: 50px;
	white-space: nowrap;
	text-align: center;
	padding: 25px 10px 0px 25px;
	height: 125px;
	/* CSS3 */
	-webkit-box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
	   -moz-box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
	        box-shadow: 0 -20px 200px 0 rgba(0,0,0,0.15);
}
	.index_page {
		margin: 0px 15px 0px 0px;
		border: 1px solid #ddd;
		color: #bbb;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 20px;
		font-size: 11px;
		/* CSS3 */
		-webkit-box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.08);
		box-shadow: 1px 1px 10px 0px rgba(0,0,0,0.08);
	}
	.index_page.left {
		
	}
	.index_page.left:not(.hide) + .index_page.right {
		margin-left: -16px;
	}
	html.no-touch .index_page:hover,
	.index_page.current {
		font-weight: bold;
		color: #222;
	}
		.index_page img {
			max-height: 80px;
		}
		.index_page:after {
			display: block;
			text-align: center;
			position: absolute;
			content: attr(data-page);
			z-index: 100;
			bottom: -20px;
			left: 0px;
			right: 0px;
		}
		.index_page.current:before {
			color: #222;
		}
#footer {
	display: block;
	bottom: 0px;
	left: 0px;
	height: 50px;
	width: 100%;
	background-color: #fff;
	border-top: 1px solid #ddd;
	padding-left: 15px;
	/* CSS3 */
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
	#btn_contents {
		float: left;
		width: 30px;
		height: 30px;
		background-image: url(contents.png);
		margin: 10px 0px 0px 0px;
	}
	html.retina #btn_contents {
		background-image: url(contents_high.png);
		background-size: 30px 30px;
	}
	#btn_index {
		display: block;
		float: left;
		width: 30px;
		height: 30px;
		background-image: url(index.png);
		margin: 10px 0px 0px 0px;
	}
	html.retina #btn_index {
		background-image: url(index_high.png);
		background-size: 30px 30px;
	}
	#btn_search {
		display: none;
		float: left;
		width: 30px;
		height: 30px;
		background-image: url(search.png);
		margin: 10px 0px 0px 0px;
		z-index: 100;
		position: relative;
	}
	html.retina #btn_search {
		background-image: url(search_high.png);
		background-size: 30px 30px;
	}
	#btn_back {
		display: block;
		float: left;
		width: 30px;
		height: 30px;
		background-image: url(prev.png);
		margin: 10px 0px 0px 15px;
	}
	html.retina #btn_back {
		background-image: url(prev_high.png);
		background-size: 30px 30px;
	}
	#btn_forward {
		display: block;
		float: left;
		width: 30px;
		height: 30px;
		background-image: url(next.png);
		margin: 10px 0px 0px 0px;
	}
	html.retina #btn_forward {
		background-image: url(next_high.png);
		background-size: 30px 30px;
	}
	#btn_zoom {
		display: block;
		float: right;
		width: 30px;
		height: 30px;
		background-image: url(zoomin.png);
		margin: 10px 0px 0px 0px;
	}
	html.pagezoomed #btn_zoom {
		background-image: url(zoomout.png);
	}
	html.retina #btn_zoom {
		background-image: url(zoomin_high.png);
		background-size: 30px 30px;
	}
	html.retina.pagezoomed #btn_zoom {
		background-image: url(zoomout_high.png);
		background-size: 30px 30px;
	}
	html.mobile #btn_zoom {
		margin: 10px 15px 0px 0px;
	}
	#btn_print {
		display: block;
		display: none;
		float: right;
		width: 30px;
		height: 30px;
		background-image: url(print.png);
		margin: 10px 0px 0px 0px;
	}
	html.retina #btn_print {
		background-image: url(print_high.png);
		background-size: 30px 30px;
	}
	html.mobile #btn_print {
		display: none;
	}
	#btn_download {
		display: block;
		float: right;
		width: 30px;
		height: 30px;
		background-image: url(download.png);
		margin: 10px 15px 0px 0px;
	}
	html.retina #btn_download {
		background-image: url(download_high.png);
		background-size: 30px 30px;
	}
	html.no-touch #btn_contents:hover,
	html.no-touch #btn_index:hover,
	html.no-touch #btn_search:hover,
	html.no-touch #btn_back:hover,
	html.no-touch #btn_forward:hover,
	html.no-touch #btn_zoom:hover,
	html.no-touch #btn_print:hover,
	html.no-touch #btn_download:hover,
	#btn_contents.hover,
	#btn_index.hover,
	#btn_search.hover,
	#btn_back.hover,
	#btn_forward.hover,
	#btn_zoom.hover,
	#btn_print.hover,
	#btn_download.hover {
		background-color: #ddd;
		/* CSS3 */
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	html.pageloaded.csstransitions [id^="btn_"] {
		-webkit-transition: background-color 0.3s;
		transition: background-color 0.3s;
	}
	#pages_pagination {
		display: block;
		float: left;
		margin: 10px 0px 0px 10px;
	}
		#pages_minor {
			font-family: Arial, Helvetica, sans-serif;
			line-height: 30px;
			font-size: 11px;
			color: #222;
		}
		html.mobile #pages_minor {
			display: none;
		}
		#pages_current {
			font-family: Arial, Helvetica, sans-serif;
			line-height: 30px;
			font-size: 11px;
			color: #222;
		}
			#pages_current span {
				display: inline-block;
				vertical-align: top;
				margin: 0 1px;
			}
		#pages_total {
			font-family: Arial, Helvetica, sans-serif;
			line-height: 30px;
			font-size: 11px;
			color: #222;
		}


/* CLICKABLE AREAS */
.clickable_area {
	margin: -1px;
	background: rgba(0,0,0,0);
	border: 1px solid rgba(0,0,0,0);
	/* CSS3 */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
html.pageloaded.csstransitions .clickable_area {
	-webkit-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
}
.clickable_area.highlight,
.clickable_area.hover {
	background-color: rgba(0,0,0,0.05);
	border-color: rgba(0,0,0,0.15);
}