body {
  margin:0;
}
ol.bookPane {
  margin:0;
	position:relative;
  width:670px;
  height:355px;
  left:0;
  right:0;
	padding:10px;
	background-color:darkgreen;
	//box-shadow:5px 5px 10px rgba(0,0,0,0.5);
  counter-reset: pagenumber;
	border-radius: 7px;
	border: 5px solid darkgreen;
	perspective:150;
	-moz-transform-style: preserve-3d;
	-moz-transform: perspective(1500px);
}


ol.bookPane>li {
	position:absolute;
	top:0;
	width:calc(50% - 72px);
	height:calc(100% - 82px);
  z-index:-1;
	border: 1px solid gray;
	background-color:white;
	padding:20px;
  padding-top:60px;
	/* display:none; */
  clear:both;
	text-align: justify;
  counter-increment:pagenumber;
	hyphens: auto;
  overflow:hidden;
  user-select:none;
  -moz-user-select: none;
  -webkit-user-select: none;
/*   transform: matrix(0.001,0,0,1,0,0);
  transition:transform 1s; */
}
ol.bookPane>li:nth-child(2n) {
  padding-left:20px;
	padding-right:50px;
  right:0;
  border-left: 1px solid black;
/*  //border-radius: 30px 5px 20px 0;*/
	border-radius: 10px 0 0 10px;
	box-shadow: inset 15px 0 13px -13px gray;
}
ol.bookPane>li:nth-child(2n+1) {
  padding-right:20px;
 	padding-left:50px;
  left:0;
  border-right: 1px solid black;
/*  border-radius: 5px 30px 0 20px;*/
	border-radius: 0 10px 10px 0;
	box-shadow: inset -15px 0 13px -13px gray
}

ol.bookPane>li.selected,ol.bookPane>li.selected+li {
  z-index:0!important;
}

ol.bookPane>li:nth-child(2n+1):before {
  content: counter(pagenumber);
  font-weight:bold;
  position:absolute;
  top:20px;
  left:30px;
} 
ol.bookPane>li:nth-child(2n):before {
  content: counter(pagenumber);
  font-weight:bold;
  position:absolute;
  top:20px;
  right:30px;
}



ol.bookPane>li>.turnpage {
  content:'';
	cursor:pointer;
  position:absolute;
  bottom:0;
  width:0;
  height:0;
  font-size:0;
  width:20px;
  height:20px;
	border:1px solid;
  border-bottom:none;
  border-top-color:lightgray;
  border-bottom-color:transparent;
  //border-radius:10px;
}

ol.bookPane>li:nth-child(2n)>.turnpage {
  right:0;
  background: -moz-linear-gradient(top left, white,lightgray 49%,black 50%,gray 51%,white);
  background: -webkit-linear-gradient(top left, white,lightgray 49%,black 50%,gray 51%,white);
  border-right:none;
}
ol.bookPane>li:nth-child(2n+1)>.turnpage {
  left:0;
  background: -moz-linear-gradient(top right, white,lightgray 49%,black 50%,gray 51%,white);
  background: -webkit-linear-gradient(top right, white,lightgray 49%,black 50%,gray 51%,white);
  border-left:none;
}

/* bottom
ol.bookPane>li:after {
	content:'';
	bottom:0;
	width:100%;
	height:11px;
	position:absolute;
	border:1px solid black;
	border-bottom:3px solid black;
	background-color:gray;
}
ol.bookPane>li:nth-child(2n):after {
	right:0;
  border-radius: 20px 0 20px 0;
}
ol.bookPane>li:nth-child(2n+1):after {
	left:0;
  border-radius: 0 20px 0 20px;
}
 */