/**
 * PDF Flipper UI
 *
 * Note: some properties are marked with either ~ or !
 * ~ denotes a property, whose value may be safely altered
 * ! denotes a property, whose value should not be changed
 *
 * Of course, if you know what you're doing, you can change whatever you want ;)
 */

/**
 * Icons font
 */
@font-face {
    font-family: 'bc_pageflip';
    src: url('../Fonts/bc_pageflip.eot');
    src: url('../Fonts/bc_pageflip.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/bc_pageflip.woff') format('woff'),
        url('../Fonts/bc_pageflip.ttf') format('truetype'),
        url('../Fonts/bc_pageflip.svg#pfp') format('svg');
    font-weight: normal;
    font-style: normal;
}

html.pfp, html.pfp body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}


html.pfp .tx-bc-pageflip, html.pfp .bc_pageflip {
    height: 100%;
}


/**
 * Application viewport.
 */
#pfp-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    background: #666666;
    font-family: Arial, sans-serif;
    text-align: center;
}


/**
 * Buttons - apply some global reset rules (!) here:
 */
#pfp-viewport button {
    display: block; /* ! */
    background: transparent; /* ! */
    border: none; /* ! */
    padding: 0; /* ! */
    color: white;
    cursor: pointer;
}
/** Button with icon */
#pfp-viewport button.with-icon {
    font-family: 'bc_pageflip';
}
/** Button that is disabled */
#pfp-viewport button:disabled {
    color: gray; /* ~ */
    cursor: not-allowed;
}
/** Menu button that is switched on */
#pfp-viewport button.pushable.is-switched {
    background: white; /* ~ */
    color: #202020; /* ~ */
}

/**
 * Do not show outline, if user used mouse to activate button (.mousedown class
 * is dynamically assigned/removed via JS).
 */
#pfp-viewport.mousedown button {
    outline: none;
}


/**
 * Button icons
 */

/** Mouse menu buttons */
#autoplay-btn:before	{ content: '\e600'; }
#download-btn:before	{ content: '\e603'; }
#fullscreen-btn:before	{ content: '\e605'; }
#search-btn:before		{ content: '\e60d'; }
#thumbnails-btn:before	{ content: '\e610'; }

/** Menu bar switcher button */
#menu-bar-switcher-btn:before				{ content: '\e607'; /* open > */ }
#menu-bar-switcher-btn.is-switched:before	{ content: '\e608'; /* < close */ }

/** Touch menu buttons */
#backwards-btn:before	{ content: '\e60c'; }
#forwards-btn:before	{ content: '\e60a'; }
/* Autoplay and thumbnail menu items are the same for mouse and touch mode,
   except for the switched state of thumbnails in touch mode: */
#pfp-menu-bar.touch #thumbnails-btn.is-switched:before	{ content: '\e60f'; }

/** Side navigation buttons */
#prev-page-btn:before	{ content: '\e608'; }
#next-page-btn:before	{ content: '\e607'; }
#first-page-btn:before	{ content: '\e604'; }
#last-page-btn:before	{ content: '\e606'; }

/** Search bar buttons */
#search-case-sensitive-btn:before	{ content: '\e601'; }
#search-prev-match-btn:before		{ content: '\e608'; }
#search-next-match-btn:before		{ content: '\e607'; }
#search-exit-btn:before				{ content: '\e602'; }

/** Switch between double and single page - not implemented in the moment */
#switch-mode-btn:before	{ content: '\e60e'; }


/**
 * Preloader frame covers the whole viewport and fades out as soon as
 * initialization is finished.
 */
#pfp-preloader {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #666666;
    z-index: 10000;
}

#pfp-preloader p {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    height: 96px;
    margin-top: -48px;
    line-height: 48px;
    color: white;
    font-size: 32px;
}


/**
 * Empty (not yet loaded) page content
 */
#pfp-viewport div.loading {
    background: white url('../Images/loader.gif') no-repeat center center; /* ~ a nice loading icon gif */
    width: 100%; height: 100%;
}

.loading-img {
    background: white url('../Images/loader.gif') no-repeat center center;
}

/**
 * Side navigation ( < and > )
 */
#pfp-viewport.mouse .side-navi {
    position: absolute;	/* ! */
    top: 50%; /* ! */
    /* negative top margin is computed dynamically */
    min-width: 80px; /* ~ minimum width for side navigation */
    /* z-index: -5; /* ! let the flipping pages overlay the side navi */
    font-size: 16px; /* ~ base font size */
}

#pfp-viewport.mouse .side-navi-backward {
    left: 0; /* ! */
}

#pfp-viewport.mouse .side-navi-forward {
    right: 0; /* ! */
}

#pfp-viewport.mouse .side-navi button {
    color: #CCC; /* ~ */
}
#pfp-viewport.mouse .side-navi button:hover {
    color: white; /* ~ */
}
#pfp-viewport.mouse .side-navi button:disabled {
    visibility: hidden;
}

#prev-page-btn,
#next-page-btn {
    width: 100%;
    /* height is computed dynamically */
    font-size: 1.5em;
}
#prev-page-btn:hover,
#next-page-btn:hover {
    font-size: 2em;
}
#first-page-btn,
#last-page-btn {
    width: 100%;
    height: 36px; /* ~ height of the bottom side navigation, should equal size of the menubar */
    font-size: 1.25em;
}
#first-page-btn:hover,
#last-page-btn:hover {
    font-size: 1.5em;
}

/**
 * Hide side navigation (prev/next first/last page) in touch mode.
 */
#pfp-viewport.touch .side-navi {
    display: none; /* ! */
    min-width: 0; /* ~ minimum width for side navigation */
}


/**
 * Wrapper is positioned absolutely.
 */
#pfp-wrapper {
    position: absolute; /* ! */
    left: 50%; /* ! */
    top: 50%; /* ! */
    /* negative top and left margins are computed on the fly */
}

/**
 * Flipbook styles
 *
 * Indicate possible actions with mouse cursor:
 * [1] By default, flipbook can be zoomed in when clicked.
 * [2] When zoomed-in, it can be grabbed and dragged to bring desired area into
 * the viewport.
 * [3] When dragged, use the grabbing hand icon (alternative would be move icon)
 */
#pfp-book .page {
    /* [1] */
    cursor: pointer; /* IE fallback */
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    /* overflow: visible !important; /* Override Turn.js element style */
}
#pfp-book.is-zoomed-in .page {
    /* [2] */
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}
#pfp-book.is-zoomed-in:active .page {
    /* [3] */
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/**
 * Improve keyboard navigation experience of in-page anchors:
 * [1] Explicitly hide all anchors in pages that are not in the current view (ie.
 * not visible), so they cannot receive focus (with TAB key).
 * [2] Outline focused anchors, but [3] only if not using mouse for navigation.
 */
#pfp-book div.is-not-visible a.l { /* [1] */
    display: none;
}
#pfp-book a.l:focus > div { /* [2] */
    outline: inherit; /* ! */
}
#pfp-viewport.mousedown #pfp-book a.l:focus > div { /* [3] */
    outline: none;
}

/**
 *  Turn.js
 *	In a single page display mode, Turn.js creates temporary pages on the back
 *	side of the actual pages.
 */
#pfp-book .p-temporal {
    background: white; /* ~ */
}


/**
 * pdf2htmlEX
 * Fix of pdf2htmlEX base styles.
 */
#pfp-book .bi, #pfp-thumbnails .bi {
    top: auto;
}
/**
 * When pdf2htmlEX is unable to process some font, it sets its visibility to
 * hidden, but it makes more sense to me to display the text with default font
 * as fallback. Note: font class names are in form ff#, where # is an index,
 * so the rule expression simply matches all class names that starts with "ff".
 * @link https://github.com/coolwanglu/pdf2htmlEX/blob/master/src/HTMLRenderer/font.cc#L1059
 */
#pfp-book *[class^="ff"], #pfp-book *[class*=" ff"] {
    visibility: visible; /* ! */
}


/**
 * In-between pages shadow is only applied to pages in double view (notice
 * the .double class).
 *
 * Works in all modern browsers including IE10+.
 *
 * Note: gradient layer is absolutely positioned to overlay any <img> elements
 * in the page content that "touch" page border. However, if it happens to
 * overlay an (internal) link element, it will prevent it from working...
 * Therefore, use a reasonably small width to ensure that gradient layer only
 * overlays blank margin of documents that contain internal links.
 */
#pfp-book .gradient {
    position: absolute;
    width: 5%; /* should be relatively small to (always) fit into page margin */
    height: 100%;
    z-index: 100;
}
#pfp-book .double.odd .gradient {
    top: 0; left: 0; bottom: 0; /* stick to left page border */
    background: -moz-linear-gradient(left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.15)), color-stop(100%, rgba(0,0,0,0.0)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 100%);
}
#pfp-book .double.even .gradient {
    top: 0; right: 0; bottom: 0; /* stick to right page border */
    background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.15) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.0)), color-stop(100%, rgba(0,0,0,0.15)));
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.15) 100%);
    background: -o-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.15) 100%);
    background: -ms-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.15) 100%);
    background: linear-gradient(to right, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.15) 100%);
}

/**
 * Search results highlighting
 * Highlight is applied only when active class is also present. This allows to
 * keep track of .highlighted elements without them being distinguishable.
 */
#pfp-book span.highlighted.active {
    background: orange;
    color: white;
}
/* Currently marked highlighted item */
#pfp-book span.highlighted.active.marked {
    background: red;
}

/**
 * Search bar
 */
#pfp-search-bar {
    position: absolute;
    bottom: 36px; /* ! the same as main menu bar height */
    left: 0; right: 0;
    height: 28px;
    padding: 7px 0;
    z-index: 10000; /* ! larger than any possible number of pages in flipbook */

    background: #ffffff;
    color: #202020;
    font-size: 16px; /* ! */
    line-height: 1;

    -webkit-box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.25);
}

#pfp-search-bar span.space {
    width: 0.5em;
}

#pfp-search-bar input {
    font-size: 14px; /* ! */
    line-height: 1;
    height: 14px;
    padding: 7px;
    width: 160px;
    background: #d8d8d8;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    top: 1px;
}
#pfp-search-bar input::-moz-placeholder {
    color: #666666;
}
#pfp-search-bar input::-webkit-input-placeholder {
    color: #666666;
}
#pfp-search-bar input:-ms-input-placeholder {
    color: #666666;
}

#pfp-search-bar button {
    display: inline-block;
    font-size: 1em;
    line-height: 1;
    padding: 6px 10px;
    vertical-align: middle;
}
#pfp-search-bar button.with-icon {
    background: white;
    color: gray;
}
#pfp-search-bar button.with-icon:disabled {
    color: #d8d8d8;
}
#pfp-search-bar button.with-icon.is-switched {
    color: #202020;
}

#pfp-search-bar #search-case-sensitive-btn {
    font-size: 20px;
    padding: 3px;
    border: 1px solid;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

#pfp-search-bar #search-status {
    vertical-align: middle;
    padding: 0 0.5em;
}

/** Defaults */
#pfp-viewport #pfp-search-bar .search-form-box {
    float: left;
    padding-left: 5%;
}
#pfp-viewport #pfp-search-bar .search-navi-box {
    float: left;
    padding-left: 5%;
}
#pfp-viewport #pfp-search-bar .search-exit-box {
    float: right;
    padding-right: 5%;
}

/** Touch mode specials */
#pfp-viewport.touch #pfp-search-bar .search-form-box {
    padding-left: 10px;
}
#pfp-viewport.touch #pfp-search-bar .search-navi-box {
    padding-left: 10px;
}
#pfp-viewport.touch #pfp-search-bar .search-exit-box {
    float: right;
    padding-right: 4px;
}

/** Small screen specials */
@media only screen
and (max-device-width: 360px) {
    /* Hide close button */
    #pfp-viewport.touch #pfp-search-bar .search-exit-box {
        display: none;
    }
    /* Float navi box to right */
    #pfp-viewport.touch #pfp-search-bar .search-navi-box {
        float: right;
        padding-right: 4px;
    }
    /* Narrow down other elements */
    #pfp-viewport.touch #pfp-search-bar input {
        width: 80px;
    }
    #pfp-viewport.touch #pfp-search-bar #search-status {
        padding: 0;
    }
}

/**
 * Thumbnails bar
 */
#pfp-thumbnails-bar {}

#pfp-thumbnails .thumbnail {
    display: block;
    position: static;
    float: left;
    cursor: pointer;
    background: white; /* ! png thumbnails may be partially transparent */
}

#pfp-thumbnails .thumbnail img.loading {
    width: 100%; /* ! */
    height: 100%; /* ! */
    background: white url('../Images/loader.gif') no-repeat center center; /* ~ a nice loading icon gif */
}

#pfp-thumbnails .thumbnail .pc {
    position: relative; /* ! */
}

#pfp-thumbnails .thumbnail img {
    width: 100%;
    height: 100%;
}

/**
 * Thumbnails bar in MOUSE mode
 */
#pfp-viewport.mouse #pfp-thumbnails-bar {
    position: absolute;
    bottom: 36px; /* ~ should be the same as height of the menubar (see below) */
    width: 100%;
}

#pfp-viewport.mouse #pfp-thumbnails .thumbnail-cell {
    display: inline-block;
}

#pfp-viewport.mouse #pfp-thumbnails .thumbnail-view {
    position: relative;
    box-shadow: 1px 1px 5px 3px #666666, -1px -1px 5px 3px #666666; /* ~ */
    margin: 5px; /* ~ should account for shadow spread */
}

#pfp-viewport.mouse #pfp-thumbnails .thumbnail-view.current {
    box-shadow: 1px 1px 5px 3px #202020, -1px -1px 5px 3px #202020;
}

#pfp-viewport.mouse #pfp-thumbnails .thumbnail-view:hover {
    position: relative;
    -ms-transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    -o-transform: scale(1.5, 1.5);
    -moz-transform: scale(1.5, 1.5);
    transform: scale(1.5, 1.5);
    z-index: 10000;
}

#pfp-viewport.mouse #pfp-thumbnails .thumbnail-view:hover div.pagenum-tooltip {
    -ms-transform: scale(0.7, 0.7);
    -webkit-transform: scale(0.7, 0.7);
    -o-transform: scale(0.7, 0.7);
    -moz-transform: scale(0.7, 0.7);
    transform: scale(0.7, 0.7);
}

/**
 * Thumbnails bar in TOUCH mode
 */
#pfp-viewport.touch #pfp-thumbnails-bar {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

#pfp-viewport.touch #pfp-thumbnails,
#pfp-viewport.touch .grid {
    width: 100%;
    height: 100%;
}

#pfp-viewport.touch .thumbnail-row {
    width: 100%;
}
#pfp-viewport.touch .layout-rows-1 .thumbnail-row {
    height: 100%;
}
#pfp-viewport.touch .layout-rows-2 .thumbnail-row {
    height: 50%;
}
#pfp-viewport.touch .layout-rows-3 .thumbnail-row {
    height: 33.333%;
}
#pfp-viewport.touch .layout-rows-4 .thumbnail-row {
    height: 25%;
}
#pfp-viewport.touch .layout-rows-5 .thumbnail-row {
    height: 20%;
}

#pfp-viewport.touch .thumbnail-cell {
    position: relative;
    float: left;
    height: 100%;
}
#pfp-viewport.touch .layout-cols-1 .thumbnail-cell {
    width: 100%;
}
#pfp-viewport.touch .layout-cols-2 .thumbnail-cell {
    width: 50%;
}
#pfp-viewport.touch .layout-cols-3 .thumbnail-cell {
    width: 33.333%;
}
#pfp-viewport.touch .layout-cols-4 .thumbnail-cell {
    width: 25%;
}
#pfp-viewport.touch .layout-cols-5 .thumbnail-cell {
    width: 20%;
}

#pfp-viewport.touch #pfp-thumbnails .thumbnail-view {
    position: absolute;
    top: 50%; left: 50%;
    /* margin-top and margin-left are dynamically computed */
    border: 5px solid #202020;
    margin: 5px;
}

#pfp-viewport.touch #pfp-thumbnails .thumbnail-view.current {
    border-color: #EEEEEE; /* ~ */
}

/**
 * Slider bar for thumbnails navigation
 */
#pfp-thumbnails-slider-bar {
    margin-bottom: 6px; /* ~ */
}

#pfp-thumbnails-slider button {
    display: inline-block;
    overflow: visible; /* ! otherwise tooltips are not visible in IE */
    background: #202020;
    width: 25px;
    height: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    margin: 2px; /* ~ */
    position: relative;
}

#pfp-thumbnails-slider button.active,
#pfp-thumbnails-slider button:hover {
    background: #fff;
}


/**
 * Tooltips displayed on hover
 */
#pfp-viewport div.pagenum-tooltip {
    display: none;
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
}
#pfp-viewport div.pagenum-tooltip > div {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
}
#pfp-thumbnails div.pagenum-tooltip > div {
    width: 100%; /* ! set only for thumbnail tooltips */
}
#pfp-viewport div.pagenum-tooltip span {
    display: inline-block;
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 16px;
    white-space: nowrap;
    padding: 5px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
#pfp-viewport :hover > div.pagenum-tooltip {
    display: block;
}


/**
 * Menu bar placement depends on the UI mode (mouse | touch),
 * but height and minimum width is the same in both cases.
 */
#pfp-menu-bar {
    position: absolute;
    bottom: 0; /* ! */
    height: 36px; /* ~ should be the same as bottom offset of thumbnails in mouse mode (see above) */
    width: 100%;
    min-width: 300px; /* ~ determines the minimum width of the flipbook */
}


/**
 * Generic menu bar styles
 */
#pfp-menu-bar button,
#pfp-menu-bar span.cell {
    display: table-cell; /* ! override default inline-block */
    font-size: 16px;
    line-height: 1;
    padding: 10px;
}

#pfp-menu-bar .box {
    background: #202020;
    color: white;
}

#pfp-menu-bar .location-info-box {
    cursor: default;
}
#pfp-menu-bar .location-info-box span#location {
    cursor: text;
}

#pfp-menu-bar .location-info-box span#location[contentEditable="true"] {
    outline: none;
    border: none;
}

/**
 * Menu bar styles for mouse mode
 */
#pfp-menu-bar.mouse {

}

#pfp-menu-bar.mouse .location-info-box,
#pfp-menu-bar.mouse .button-box {
    display: table;
}

#pfp-menu-bar.mouse .location-info-box {
    padding-left: 5%;
    text-align: left;
    float: left;
}

#pfp-menu-bar.mouse .button-box {
    padding-right: 5%;
    text-align: right;
    float: right;
}

#pfp-menu-bar.mouse .location-info-box span.cell {
    padding-left: 0.2em; /* ~ */
    padding-right: 0.2em; /* ~ */
}

/* Swap colors on mouse hover or activation to indicate editable field */
#pfp-menu-bar.mouse .location-info-box span.cell.location {
    -webkit-transition:	background-color 0.5s, color 0.5s;
    transition:	background-color 0.5s, color 0.5s;
}
#pfp-menu-bar.mouse .location-info-box:hover span.cell.location,
#pfp-menu-bar.mouse .location-info-box span.cell.location.is-active {
    background: white;
    color: #202020;
}

/* Clear after the floating children of .box container */
#pfp-menu-bar.mouse .box:after {
    content: "";
    display: table;
    clear: both;
}

/**
 * Menu bar styles for touch mode
 */
#pfp-menu-bar.touch {
    position: absolute;
    z-index: 5000;
    bottom: 0;
    width: 100%;
    overflow: hidden; /* ! hide the overflow when sliding the menu to/from left */
}

#pfp-menu-bar.touch .switcher-box {
    float: left;
    width: 36px;
    margin-right: 2px;
}

#pfp-menu-bar.touch .menu-box {
    margin-left: 38px;
    padding-right: 4px;
    text-align: right;
}

#pfp-menu-bar.touch .location-info-box {
    float: left;
    width: 110px; /* ! do not raise, icons need some space */
    padding: 10px 8px;
    text-align: left;
}


/* Adjustments for iPad portrait mode */
@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px) and (orientation: portrait) {
    /* Enlarge search bar and menu bar in portrait mode */
    #pfp-viewport.mouse #pfp-thumbnails-bar,
    #pfp-search-bar {
        bottom: 46px; /* ~ should be the same as height of the menubar (see below) */
    }
    #pfp-search-bar {
        height: 38px;
    }
    #pfp-menu-bar {
        height: 46px; /* ~ should be the same as bottom offset of thumbnails in mouse mode (see above) */
    }
    #pfp-menu-bar.touch .switcher-box {
        width: 46px;
        margin-right: 4px;
    }
    #pfp-menu-bar.touch .menu-box {
        margin-left: 50px;
        padding-right: 5px;
    }
    #pfp-menu-bar.touch .location-info-box {
        width: 150px;
        padding: 10px 12px;
    }
    #pfp-menu-bar button,
    #pfp-menu-bar .location-info-box span,
    #pfp-search-bar {
        font-size: 24px;
    }

    #pfp-search-bar input {
        font-size: 20px; /* ! */
        height: 20px;
    }
    #pfp-search-bar #search-case-sensitive-btn {
        font-size: 28px;
        padding: 4px;
        border: 1px solid;
    }
}

/* Base CSS START */

/* Page Elements: Modify with caution
 * The followings are base classes, some of which are meant to be override by PDF specific classes
 * So do not increase the specificity (e.g. ".classname" -> "#page-container .classname")
 */
.pd { /* page decoration */
    position:relative;
    border: 0;
    overflow: hidden;
}
.pf { /* page */
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:white;
    overflow: hidden;
    margin:0;
    border:0; /* required by pdf2htmlEX.js for page visibility test */
}
.pc { /* content of a page */
    position:absolute;
    border:0;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    display:block;
    /* set transform-origin for scaling */
    transform-origin:0% 0%;
    -ms-transform-origin:0% 0%;
    -moz-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    -o-transform-origin:0% 0%;
}
.bi {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
@media print {
    .pd {
        margin:0;
        box-shadow:none;
        page-break-after:always;
        page-break-inside:avoid;
    }
    @-moz-document url-prefix() {
        /* fix page truncation for FireFox */
        .pd {
            overflow:visible;
            border:1px solid #FFFFFF;
        }
        .pf {overflow:visible;}
        .pc {overflow:visible;}
    }
}
.c { /* clip box */
    position:absolute;
    border:0;
    padding:0;
    margin:0;
    overflow:hidden;
    display:block;
}
.t { /* text line */
    position:absolute;
    white-space:pre;
    font-size:1px;
    transform-origin:0% 100%;
    -ms-transform-origin:0% 100%;
    -moz-transform-origin:0% 100%;
    -webkit-transform-origin:0% 100%;
    -o-transform-origin:0% 100%;
}
span { /* text blocks within a line */
    position:relative;
    vertical-align: baseline;
    /* _<id> for spaces may need display:inline, which will override this */
    display:inline-block;
}
._ { /* text shift */
    color:transparent;
    z-index:-1;
}
/* selection background should not be opaque, for fallback mode */
::selection{
    background: rgba(127,255,255,0.4);
}
::-moz-selection{
    background: rgba(127,255,255,0.4);
}
.pi { /* info for Javascript */
    display:none;
}
.l { /* annotation links */
}
/* transparent color - WebKit */
.d { /* css drawing */
    position:absolute;
    transform-origin:0% 100%;
    -ms-transform-origin:0% 100%;
    -moz-transform-origin:0% 100%;
    -webkit-transform-origin:0% 100%;
    -o-transform-origin:0% 100%;
}
/* Base CSS END */