html {
	-ms-touch-action: none;
	-ms-scroll-chaining: none;
	-ms-content-zooming: none;
	cursor: default;
}

body {
	overflow: hidden;
	-ms-touch-action: none;
	-ms-content-zooming: none;
	/*background-image: url('bg.jpg');*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #FFFFFF;
	overflow-x: hidden;
	font-family: "Segoe UI", "Segoe UI Web Regular", "Segoe UI Symbol",
		"Helvetica Neue", "BBAlpha Sans", "S60 Sans", Arial, "sans-serif";
	font-weight: normal;
	text-overflow: ellipsis;
}

h1 {
	font-weight: 200;
}

#startScreen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgb(33, 33, 33);
}

#startScreen #startProgress {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	margin-top: -20px;
}

div[role=main] {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 140px;
	bottom: 0px;
	/*height: 80vh;*/
	-ms-scroll-chaining: none;
	-ms-content-zooming: none;
}

#TopView {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;

	/*-ms-scroll-snap-type: mandatory;
    -ms-scroll-snap-points-x: snapInterval(0%, 100%);*/
	/*background-color: rgb(0, 0, 127);
        */
}

.win-flyout button, .dlm-flyout button {
    background-color:orange;
    color: white;
    border:0px;
}

.win-flyout input, .dlm-flyout input {
    border-width:1px;
    border-style:solid;
    /*padding-left:4px;
	padding-right: 4px;*/
}

/*
-----------------------------------------------------------------------------
 Page View rules
-----------------------------------------------------------------------------
*/
.viewStyle {
	background-color: rgb(84, 84, 84);
}

.controlStyle {
	background-color: rgba(84, 84, 84, 0.85);
	color: #FFFFFF;
    outline-width:0;
}

.controlStyle[disable] {
	color: rgba(127, 127, 127, 0.85);
}

.controlStyle:hover {
	background-color: rgba(100, 100, 100, 0.85);
}

.controlStyle:hover[disable] {
	background-color: rgb(84, 84, 84, 0.85);
}

/*
-----------------------------------------------------------------------------
 Page View rules
-----------------------------------------------------------------------------
*/
#pageViewListTemplate {
	overflow-y: hidden;
	/*overflow-x: hidden;*/
}

/* pseudo class */ 
.PageViewListLayout {
	padding-top:20px;
	padding-left:120px;
	padding-bottom:80px;
	padding-right:60px;
}

/* pseudo class */
.ThumbnailViewLayout {
	padding-top:20px;
	padding-left:120px;
	padding-bottom:80px;
	padding-right:40px;
}

#PageTemplate {
	overflow: hidden;
}

div[dir=ltr].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.leftPage,
div[dir=rtl].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.rightPage,
div[dir=ltr].PageChooserView .leftPage,
div[dir=rtl].PageChooserView .rightPage {
	position: absolute;
	left: 0%;
	right: 50%;
	top: 0px;
	bottom: 0px;
}

div[dir=ltr].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.rightPage,
div[dir=rtl].DLM_UI_ScrollView div.DoublePageView div#PageTemplate.leftPage,
div[dir=ltr].PageChooserView .rightPage,
div[dir=rtl].PageChooserView .leftPage {
	position: absolute;
	left: 50%;
	right: 0%;
	top: 0px;
	bottom: 0px;
}

.pageView {
	background-color: rgba(127,127,127,0.75);
}

.pageView .imageView {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

.pageView .pageNumber {
	position: absolute;
	margin-left: -2em;
	bottom: 0px;
	left: 50%;
	width: 4em;
	height: 1.75em;
	color: #FFFFFF;
	background-color: rgb(100, 100, 100);
	font-size: 0.5em;
	padding-top: 0.5em;
	text-align: center;
}

/*
-----------------------------------------------------------------------------
 Thumbnail View rules
-----------------------------------------------------------------------------
*/
#ThumbnailViewTemplate {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	/*overflow-y:hidden;
	overflow-x:hidden;*/
}

.thumbnailView {
	
}

/*
-----------------------------------------------------------------------------
 Book View rules
-----------------------------------------------------------------------------
*/
#BookViewTemplate {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}

#BookViewTemplate .pageView .pageNumber {
	opacity:0;
	font-size: 1em;
	pointer-events:none;
	z-index:20;
}

#BookViewTemplate .progressWheel
{
	z-index:20;	
}

.Pointer #BookViewTemplate .pageView .pageNumber {
	display: block;
	opacity:1;
}

.rootPageComponent .bookPageLinkComponent {
opacity:0;
z-index:20;
}
 
.MouseHalf .rootPageComponent .pageView .bookPageLinkComponent:not(.mouseoveronly), 
.rootPageComponent .bookPageLinkComponent:hover, 
.Pointer .rootPageComponent .pageView .bookPageLinkComponent:not(.mouseoveronly),
.Touch .rootPageComponent .pageView .bookPageLinkComponent,
.rootPageComponent .PageSetAsCurrent .bookPageLinkComponent:not(.mouseoveronly) {
display: block;
opacity:1;
}


#BookViewScroll {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
}

#BookPageViewTemplate {
	/*	--ms-overflow-style: -ms-autohiding-scrollbar;
	-ms-overflow-x: auto;
	--ms-overflow-y: auto;
	-ms-content-zooming: zoom;
	-ms-content-zoom-limit-min: 100%;
	-ms-content-zoom-limit-max: 200%;
	-ms-scroll-chaining: chained;
	--ms-touch-action: manipulation;*/
	
}

#BookPageViewTemplate[dir=ltr] .leftContent {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	/*background-color: red;
	overflow: hidden;*/
}

#BookPageViewTemplate[dir=rtl] .leftContent {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
}

#BookPageViewTemplate[dir=ltr] .rightContent {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	/*background-color: yellow;
	overflow: hidden;*/
}

#BookPageViewTemplate[dir=rtl] .rightContent {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
}

#PageTemplate.centerPage {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

#BookPageViewTemplate .DoublePageView {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.BookViewArrow {
	height: 4em;
	width: 3em;
	color: #FFFFFF;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
/* 	display: none; */
	opacity:0;
	pointer-events:none;
}

.Mouse .BookViewArrow, .BookViewArrow:hover, .Pointer .BookViewArrow {
/* 	display: block; */
	pointer-events:auto;
	opacity:1;
}

.BookViewArrow[role=left] {
	position: absolute;
	top: 50%;
	left: 0px;
	
	background-image: url('../DLM/image/goPrev.png');
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center center;	
}

.BookViewArrow[role=right] {
	position: absolute;
	top: 50%;
	right: 0px;
	
	background-image: url('../DLM/image/goNext.png');
	background-size: 22px 22px;
	background-repeat: no-repeat;
	background-position: center center;
}

.BookViewRead
{
	position: absolute;
	top: 66%;
	right: 0px;
	
	height: 100px;
	width: 3em;
	color: #FFFFFF;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
/* 	display: none; */
	opacity:0;
	pointer-events:none;	
}

.Mouse .BookViewRead, .BookViewRead:hover, .Pointer .BookViewRead {
/* 	display: block; */
	pointer-events:auto;
	opacity:1;
}

.BookViewReadPrevious
{
	display:inline-box;
	height: 50px;
	width: 3em;
	background-image: url('../DVL/images/prevRead.png');
	background-size: 24px 30px;
	background-repeat: no-repeat;
	background-position: center center;
}
.BookViewReadNext
{
	display:inline-box;
	height: 50px;
	width: 3em;
	background-image: url('../DVL/images/nextRead.png');
	background-size: 24px 30px;
	background-repeat: no-repeat;
	background-position: center center;
}

#ZoomMouseView {
	position: absolute;
	right: 4.5em;
	bottom: 40px;
	width: 4em;
	height: 2em;
    line-height: 1.5em;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	opacity:0;
	pointer-events:none;	
}

.Mouse #ZoomMouseView, #ZoomMouseView:hover, .Pointer #ZoomMouseView {
	opacity:1;
	pointer-events:auto;
}

.ZoomMouseControl {
	position: absolute;
	width: 2em;
	height: 1.8em;
	margin-top: 0.75em;
	text-align: center;
}

/* .ZoomMouseControl[disable]
{
	opacity:0.5;	
} */
#ZoomMouseControlMinus {
	left: 0px;
	top: 0px;
}

#ZoomMouseControlPlus {
	left: 2.2em;
	top: 0px;
}


/*body:not(.Mouse) .BookViewArrow*/
#BookReadAppBarTrigger {
	/*display: none;*/
	opacity:0;
	position: absolute;
	bottom: 24px;
	left: 20px;
	width: 40px;
	height: 40px;
	background-image: url('../DVL/images/appBarTrigger.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.Mouse #BookReadAppBarTrigger, .Pointer #BookReadAppBarTrigger, #BookReadAppBarTrigger:hover {
	/*display: block;*/
	opacity:1;
}

#BookReaderView {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#BookReaderView #PageViewListTemplate {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow-y: hidden;
	/*overflow-x:hidden;*/
}

#BookReaderView #BookViewTemplate {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.bookReaderViewLayer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#PageAndThumbnailListView {
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
    -webkit-flex-direction: column;
    align-items:stretch;
    -webkit-align-items:stretch;
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
}

#PageAndThumbnailListLayers {
    position:relative;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    flex-grow:1;
    -webkit-flex-grow:1;
    order:1;
    -webkit-order:1;
}

#BookHeader {
    order: 0;
    -webkit-order:0;
}

@media screen and (orientation:landscape) {
    body.SmallDevice #BookReaderView.layer-pagelist #BookHeader,
    body.SmallDevice #BookReaderView.layer-thumbnaillist #BookHeader,
    body.SmallDevice #BookReaderView.layer-transition #BookHeader {
        display: none;
    }
}

body.SmallDevice #BookReaderView.layer-pagelist .controlStyle,
body.SmallDevice #BookReaderView.layer-thumbnaillist .controlStyle,
body.SmallDevice #BookReaderView.layer-transition .controlStyle {
    display: none;
}

.PageListElementView {
	border-size:0px;
	border-style: solid;
	border-color: transparent;
	background-clip:padding-box;
	
	-webkit-user-select:none;
}

.PageListElementView[selected] {
	border-size:0px;
	border-style: solid;
	background-clip:padding-box;
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 10px 2px rgb(0,122,204);
}

.ThumbnailListElementView {
	border-size:0px;
	border-style: solid;
	border-color: transparent;
	background-clip:padding-box;
	
	-webkit-user-select:none; 
}

.ThumbnailListElementView[selected] {
	border-size:0px;
	border-style: solid;
	background-clip:padding-box;
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 10px 2px rgb(0,122,204);
	transform:scale(1.15,1.15);
	z-index:10;
	
	-webkit-transform:scale(1.15,1.15);
	-ms-transform: scale(1.15,1.15);
	-moz-transform: scale(1.15,1.15);
	-o-transform: scale(1.15,1.15);
	transform: scale(1.15,1.15);
	
	
}

#pageChooser {
	border-color: transparent;
	background-color: black;
	background-clip: padding-box;
	margin-bottom: 20px;
	overflow: hidden;
}

#pageChooser .pageView .pageNumber {
	font-size: 0.75em;
}

body.SmallDevice #GotoPageMenu {
    overflow:hidden;
}

    body.SmallDevice #GotoPageMenu .content {
        position:absolute;
        bottom:0px;
        left:0px;
        right:0px;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
    }

.PageChooserView {
	position: relative;
    left:0px;
    top:0px;
	/*display: inline-block;*/
	/* disabled to see PageChooser color
	background-color: inherit;*/
    display:flex;
    display:-webkit-flex;
    flex-direction:column;
    -webkit-flex-direction:column;
    align-items:center;
    -webkit-align-items:center;
}

body.SmallDevice .PageChooserView {
    margin-top:8px;
    margin-bottom:8px;
}

body.SmallDevice .PageChooserView .pageNumber {
    line-height:normal;
}

.PageChooserView #singlePage {
    position:relative;
    left:0px;
    top:0px;
    overflow:hidden;
}

.PageChooserView #doublePage {
    position:relative;
    left:0px;
    top:0px;
    overflow:hidden;
}

.PageChooserView #slider {
	width: 100%;
}

#BookTitleLabel {
	/*white-space: nowrap;*/
}

#PageNumberLabel {
	white-space: nowrap;
	font-size: 50%;
	font-weight: lighter;
}

.TOCEntry {
	padding-top: 10px;
	padding-bottom: 10px;

    display:flex;
    display:-webkit-flex;

    flex-direction:column;
    -webkit-flex-direction:column;
}

.TOCEntry:hover {
	background-color: rgb(220, 220, 220);
}

    .TOCEntry .entry {
        display: flex;
        display: -webkit-flex;
        -ms-flex-align: stretch;
        -webkit-flex-align: stretch;
    }

div[navSelection].TOCEntry {
	background-color: rgb(220, 220, 220);
}


.TOCEntryHeader {
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgb(100, 100, 100);
	color: white;
	padding-left: 10px;
	padding-right: 10px;
}

.TOCPageNumber {
	width: 2.5em;
    min-width:2.5em;
	ddisplay: inline-block;
	text-align: right;
}

.TOCEntryTitle {
	text-overflow: ellipsis;
	overflow: hidden;
	mmax-width: 100em;
	white-space: nowrap;
	padding-right: 20px;
	padding-left: 1em;
    flex-shrink:1;
    -webkit-flex-shrink:1;
    flex-grow:1;
    -webkit-flex-grow:1;
}

    .TOCEntry .subentry {
        padding-right:18px;
    }



.TOCEntryDetail {
	color: rgb(100, 100, 100);
	padding-left: 3.6em;
	max-width: 100em;
	padding-right: 20px;
}

.TOCBackContainer {
	/*background-color:black;*/
	height:52px;
	background-color: rgb(100, 100, 100);
	color:white;
	white-space: nowrap;
    display:flex;
    display:-webkit-flex;
}

    .TOCBackContainer > div {
        flex-shrink:1;
        -webkit-flex-shrink:1;
        overflow:hidden;
        text-overflow:ellipsis;
    }

.TOCBackContainer button {
	/*background-color:black;*/
	float:left; 
	padding:4px;
	padding-top:6px;
	padding-left:8px;
	padding-bottom:0px;
	background-color: rgb(100, 100, 100);
	border : 0px;
}

.TOCBackContainer button:hover {
	background-color: rgb(100, 100, 100);
}

.TOCBackContainer button:hover:active {
	background-color: rgb(100, 100, 100);
}

.TOCBackContainer > div
{
	display:inline-block;
	padding-top:16px;
	padding-left:2px;
}

#ShowBookMarkFlyout {
    padding:0px;
    background-color:gray;
    color:white;
    border-color:black;
}


#ShowBookmarkContentView td {
    padding-top:0px;
    padding-bottom:0px;
}

#ShowBookMarkViewHeader {
    display:flex;
    justify-content:space-between;
    align-items:center;

    display:-webkit-flex;
    -webkit-justify-content:space-between;
    -webkit-align-items:center;

    background-color:#484848;
    color:white;
    padding-left:6px;
    /*text-align:center;*/
    white-space:nowrap;
}

#ShoowBookMarkTitle {
    padding-bottom:0.2em;
}

#ShowBookmarkEditModeButton {
     align-self: stretch;
     -webkit-align-self: stretch;
}

.SmallDevice #ShowBookMarkViewHeader {
    background-color: transparent;
}

.BookmarkEntryImage {
    min-width: 100px;
    min-height: 100px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 4px;
}

.BookmarkEntryTitle {
    max-height: 100px;
    overflow-y: scroll;
    text-overflow: ellipsis;
    margin: 4px;
}

.BookmarkEntryPageNumber {
    margin: 4px;
    margin-right:32px;
    white-space:nowrap;
}

.BookmarkEntryImageCell {
}

.SmallDevice .BookmarkEntryImageCell {
    background-color:transparent;
}

.BookmarkEntryPageNumberCell {
    /*border-left-width:1px;
    border-left-style:dotted;
    border-color:black;*/
}

#ShowBookmarkEditModeButton {
    margin-top:0px;
    margin-right:0px;
}

button.deleteBookmarkButton {
    background-color:transparent;
}

/*#ShowBookmarkContentView[editMode="false"] button.deleteBookmarkButton {
    display:none;
}*/
#ShowBookmarkContentView[editMode="false"] td.BookmarkEntryDeleteCell {
    display:none;
}

.pageOverlayComponent {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 10;

	/*background-color: rgba(255,255,0,0.0);*/
}

.textOverlay {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

.textElement {
	position:absolute;
	background-color:rgba(255,255,0,0.5);
}

.rootPageComponent {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	/*background-color: rgba(0,255,0,0.10);*/
}

.bookPageLinkComponent {
	background-color: rgba(0, 255, 0, 0.25);
	border-color: rgb(127, 127, 127);
	border-style: solid;
	border-width: 0px;
	cursor:pointer;
}

.bookPageComponentHilight {
	border-size:0px;
	background-clip:padding-box;
	border-color:	rgb(0,122,204);
	box-shadow: 0px 0px 10px 2px rgb(0,122,204) inset;
}

.Pointer .interactiveHTML, .Mouse .interactiveHTML, .PageSetAsCurrent .interactiveHTML {
	background-repeat: no-repeat; 
	background-position: 20px 90%;
	background-image: url('../DVL/images/interactiveIcon.png');
	background-size: 48px 48px;	
}

.slideOverlay {
	position: absolute;
	width: 64px;
	height: 64px;
	bottom: 0px;
	right: 0px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-position: bottom right;
	background-image: url('../DVL/images/photo.png');
	background-size: 64px 64px;
}

.imageOverlay {
	background-repeat: no-repeat;
	background-position: bottom right;
	background-image: url('../DVL/images/photo.png');
	background-size: 64px 64px
}

.htmlLeaveInteractiveButton {
	position: absolute;
	width:64px; 
	height:64px; 
	top:0px; 
	right:0px;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-image: url('../DVL/images/leaveinteractiveIcon.png');
	background-size: 64px 64px
}

.videoPlayButton {
	position: absolute;
	width: 64px;
	height: 64px;
	left: 50%;
	top: 50%;
	margin-left: -32px;
	margin-top: -32px;
	background-size: 100% 100%;
	/*background-position: center center;*/
	background-repeat: no-repeat;
	background-image: url('../DVL/images/videoPlayIcon.png');
	cursor:pointer;
}

.videoPlayButton.paused {
	background-image: url('../DVL/images/videoPauseIcon.png');
}

.videoPreview {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.audioPlayButton {
	position: absolute;
	width: 48px;
	height: 48px;
	left: 50%;
	top: 50%;
	margin-left: -24px;
	margin-top: -24px;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	cursor:pointer;
}

.audioPlayButton:not(.playing) {
	background-image: url('../DVL/images/speakerIconMute.png');
}

.audioPlayButton.playing {
	background-image: url('../DVL/images/speakerIcon.png');
}

.audioPlayButton.paused {
	background-image: url('../DVL/images/speakerIconPause.png');
}

.audioPreview {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.bookPageComponentButton
{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	cursor:pointer;
}

#DVLComponentBrowser {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    display: -webkit-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    outline:0;
}

    #DVLComponentBrowser .browserFrame {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.bookPageHtmlComponent.noInteraction {
	pointer-events:none;
}

#InputPageNumberView
{
	white-space: nowrap;
}

#InputPageNumber
{
	-webkit-appearance: none;
	text-align:right;
}

#InputPageNumberOk
{
	border:0px;
	color:white;
	min-width:60px;
}

body.SmallDevice #InputPageNumberView {
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
}

body.SmallDevice #InputPageNumberView h1 {
	margin-bottom: 0.33em;
    -webkit-margin-after:0.33em;
}

.inputArea {
    display: flex;
    display:-webkit-flex;
    align-items:stretch;
    -webkit-align-items:stretch;
}

    .inputArea .label {
        align-self: center;
        -webkit-align-self: center;
        padding-bottom:4px;
    }

body.SmallDevice #InputPageNumber, body.SmallDevice #NumberOfPageInBook, body.SmallDevice #InputPageNumberOk {
    margin-left:8px;
}

.bookPageMouseOverOpacity {
	opacity: 1;
}

#BookHeader {
		pointer-events:none;
}

@media screen and (orientation:landscape) {

    /* Portrait styles */
    #BookHeader h1 {
    	left:120px;
    }
}

@media screen and (orientation:portrait) {

    /* Portrait styles */
    #BookHeader h1 {
    	left:20px;
    }
}

/* text search css */

#TextSearchResultFlyout .content
{
    display: flex;
    display:-webkit-flex;
    flex-direction: column;
    -webkit-flex-direction:column;
    align-items: stretch;
    -weblit-align-items:stretch;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
}

#TextSearchResultFlyout #TextSearchResultView
{
    overflow: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}

#textSearchTopBar {
    padding:8px;
    -webkit-flex-shrink:0;
}

#textSearchTopBarContent {
    display: flex;
    display:-webkit-flex;
}

    #textSearchTopBarContent #searchTextEditor {
        display:flex;
        flex-grow:2;
        align-self:center;

        display:-webkit-flex;
        -webkit-flex-grow:2;
        -webkit-align-self:center;

        margin-left:0px;
    }

    #textSearchTopBarContent #InputTextSearch {
        flex-grow:1;
        -webkit-flex-grow:1;
    }

    #textSearchTopBarContent #searchTextStatus {
    	display:flex;
        align-self:center;

    	display:-webkit-flex;
        -webkit-align-self:center;

        vertical-align: baseline;
	    min-height:0px;
    }

     #textSearchTopBarContent #searchTextMessage {
        align-self:center;
        -webkit-align-self:center;
    }

    #textSearchTopBarContent #searchTextProgress {
        position: relative;
        display:flex;
        display:-webkit-flex;
        align-items:center;
        -webkit-align-items:center;
    }

/*#textSearchTopBar #searchTextEditor, #textSearchTopBar #searchTextMessage {
    margin-top:12px;
}*/

#InputTextSearch, #InputTextSearch:focus {
	width: 10em;
	border-width: 0px;
	padding:0px 8px 0px 8px;
	margin:0px;
	outline-width:0px;
}

#cmdSearch {
	padding: 0px;
	margin: 0px;
	vertical-align: top;
	border-width: 0px;
	display: inline-block;
	min-width: 32px;
	/*min-height: 32px;*/
	background-color: orange;
	background-image: url('../DVL/images/searchText.png');
	background-repeat: no-repeat;
	background-position: center center;
}

#searchTextEditor {
	vertical-align: top;
	/*top: 6px;*/
	margin-left: 8px;
	display: flex;
	-webkit-display:flex;
	position: relative;
	background-color: white;
	white-space: nowrap;
	/*max-height: 32px*/
}

#textSeachAppBar #searchTextEditor {
    top:6px;
}

#TextSearchResultView {
	min-width: 200px;
	min-height: 100px;
}

body:not(.SmallDevice) #TextSearchResultView {
	max-width:450px;
}

#TextSearchResultFlyout {
	padding: 0px;
}

#searchTextStatus {
	position:relative;
	vertical-align: top;
	min-height:32px;
}

#searchTextMessage
{
	padding-left:8px;
	padding-right:8px;
	vertical-align: middle;
}

#textSeachAppBar #searchTextMessage {
    padding-top:12px;
}

#searchTextProgress
{
	/*padding-top:6px;*/
	margin-left:6px;
	min-width:32px;
	min-height:32px;
}

#textSearchTopBarContent {
}


body.SmallDevice div#searchTextProgress div.progressWheel {
	min-width:24px;
	min-height:24px;
}

div#searchTextProgress div.progressWheel
{
	display:inline-block;
	position:relative;
	min-width:40px;
	min-height:40px;
}

.TextSearchPageResult {
	padding-top:4px;
	padding-bottom:8px;
}

.TextSearchPageIndex {
	float: left;
	width: 2.5em;
	text-align: right;
	padding-right:4px;
	font-weight:bold;
}

.TextSearchPageContent {
	border-width:0px;
	border-left-width:1px;
	border-left-style:dotted;
	border-color:black;
	padding-left:4px;
	padding-right:20px;
}

.TextSearchResultEntry:hover {
	background-color: rgb(220, 220, 220);
}

.TextSearchResultEntry[navSelection], .TextSearchResultEntry[navSelection][selected]  {
	background-color: rgb(220, 220, 220);
}

.TextSearchResultEntry[selected] {
	background-color: rgba(91,46,197,0.5);
}

.TextSearchResultEntry {
	padding-bottom:10px;
}

.TextSearchResultEntry b {
	color:orange;
}


/*-----------------------------------------------------------------------------
 rule for text selection animation
-----------------------------------------------------------------------------
*/

 @-ms-keyframes textSelectionAnimationRight {

	0%  { -ms-transform:translate(0,0); }
	50% { -ms-transform:translate(-20px,0); }
	100% { -ms-transform:translate(0,0); }
}
    
@-moz-keyframes textSelectionAnimationRight {

	0%  { -moz-transform: translate(0,0); }
	50% { -moz-transform:translate(-20px,0); }
	100% { -moz-transform:translate(0,0); }
}
    
@keyframes textSelectionAnimationRight {

	0%  { transform:translate(0,0); }
	50% { transform:translate(-20px,0); }
	100% { transform:translate(0,0); }
}

@-webkit-keyframes textSelectionAnimationRight /* Safari and Chrome */
{
 0%   {-webkit-transform: translate(0,0); }
 50%  {-webkit-transform:translate(-20px,0); }
 100% {-webkit-transform:translate(0,0); }
}
 
@-ms-keyframes textSelectionAnimationLeft {

	0%  { -ms-transform:translate(0,0); }
	50% { -ms-transform:translate(-20px,0); }
	100% { -ms-transform:translate(0,0); }
}
    
@-moz-keyframes textSelectionAnimationLeft {

	0%  { -moz-transform: translate(0,0); }
	50% { -moz-transform:translate(-20px,0); }
	100% { -moz-transform:translate(0,0); }
}
    
@keyframes textSelectionAnimationLeft {

	0%  { transform:translate(0,0); }
	50% { transform:translate(20px,0); }
	100% { transform:translate(0,0); }
}

@-webkit-keyframes textSelectionAnimationLeft /* Safari and Chrome */
{
 0%   {-webkit-transform: translate(0,0); }
 50%  {-webkit-transform:translate(20px,0); }
 100% {-webkit-transform:translate(0,0); }
}
 
.textSelectedPointerRight {
    position:absolute;
    /*background-color:red;*/
    background-image:url('../DVL/images/fingerRight.png');
    background-size: 71px 40px;
    width:71px;
    height:40px;
    z-index:21;

    -webkit-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;
	-webkit-animation-fill-mode:forwards;
	-ms-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;	
	-ms-animation-fill-mode:forwards;
	-moz-animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;		
	-moz-animation-moz-animation:forwards;
	animation: textSelectionAnimationRight 1.0s ease-out 0.2s 5;	
	animation-fill-mode:forwards;
}

.textSelectedPointerLeft {
    position:absolute;
    /*background-color:red;*/
    background-image:url('../DVL/images/fingerLeft.png');
    background-size: 71px 40px;
    width:71px;
    height:40px;
    z-index:21;

    -webkit-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;
	-webkit-animation-fill-mode:forwards;
	-ms-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;	
	-ms-animation-fill-mode:forwards;
	-moz-animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;		
	-moz-animation-moz-animation:forwards;
	animation: textSelectionAnimationLeft 1.0s ease-out 0.2s 5;	
	animation-fill-mode:forwards;
}

.textElement[selected] {
    background-color: rgba(91,46,197,0.5);
}

#AddBookmarkView {
    display:flex;
    align-items:center;

    display:-webkit-flex;
    -webkit-align-items:center;
}

    #AddBookmarkView button {
        white-space:nowrap;
        flex-shrink:0;
        -webkit-flex-shrink:0;
    }

#AddBookmarkTitle {
    margin-bottom: 0.4em;
}

#BookmarkInput {
    flex-grow:1;
    -webkit-flex-grow:1;
    margin-left:4px;
    margin-right:4px;
}

#BookHeader {
    height: auto;
    line-height: normal;
    padding:8px;
}

#BookHeader h2,  #BookHeader h1 {
    display: flex;
    display: -webkit-flex;
    background-color: inherit;
    position:relative;
}

#BookTitleLabel {
    flex-shrink: 100;
    -webkit-flex-shrink: 100;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right:0.25em;
}

#PageNumberLabel {
    align-self:flex-end;
    -webkit-align-self:flex-end;
    padding-bottom: 0.2em;
}

.FullScreenView .videoContent {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: relative;
}

    .FullScreenView .videoContent video {
        position: absolute;
        height: 100%;
        width: 100%;
    }

.FullScreenView button.win-command .win-label,  .FullScreenView button.dlm-command .dlm-label {
    display: none;
}

body:not(.SmallDevice) #BookReadAppBar {
    display:flex;
    display:-webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap:wrap;
    justify-content: center;
    -webkit-justify-content: center;
}

    body:not(.SmallDevice) #BookReadAppBar #centerArea {
        flex-grow: 1;
        -webkit-flex-grow:1;
        min-width:100px;
        padding-left:12px;
        padding-right:12px;
    }

    body:not(.SmallDevice) #BookReadAppBar .dlm-slider {
        display:block;
        width:auto;
        min-width:100px;
        max-width:640px;
        margin-left:auto;
        margin-right:auto;
    }

body.SmallDevice #pageSlider {
    margin-bottom:8px;
}

@media only screen and (max-width: 640px) {
    body:not(.SmallDevice) #BookReadAppBar #leftArea {
        order:1;
        -webkit-order:1;
    }
    body:not(.SmallDevice) #BookReadAppBar #centerArea {
        order:0;
        -webkit-order:0;
        padding-left:24px;
        padding-right:24px;
        flex-basis: 90%;
        -webkit-flex-basis:90%;
    }
    body:not(.SmallDevice) #BookReadAppBar #rightArea {
        order:2;
        -webkit-order:2;
    }
}

#BookReadAppBar.disabled, body:not(.SmallDevice) #BookReadAppBar.disabled {
    display: none;
}