html {
    height: 100%;
}
.clear {
    clear: both;
    display: block;
}
/****************/
/* ebook header */

.ebookHeader {
    display: none; /* displayed using js */
    height: 50px;
    margin: 0 auto;
    max-width: 95%;
    min-width: 590px;
    padding: 7px 0 4px 0;
    align-items: flex-end;
    justify-content: space-between;
}
.ebookHeader > * {
    flex: 1;
}
.bookTitle {
    color: #fff;
    flex: 2;
    font-family: "montserrat",arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0 5px;
    max-width: 300px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media all and (-ms-high-contrast:none)
{
    .bookTitle {
        flex: 1;
        padding-left: 5px;
    }
}


/**********/
/* stamps */

.stamp {
    display: inline-block;
}

/****************************/
/* snap to text highlighter */

div[id*="highlight-word"] {
    position: absolute;
}
div[id*="highlight-menu"] {
    background: #ef8009;
    border: solid 1px #d96c0b;
    border-radius: 15px 15px 15px 0;
    box-shadow: 2px 2px 4px #bababa;
    font-size: 14px;
    font-weight: bold;
    margin-top: -5px;
    padding: 6px;
    position: absolute;
    width: 200px;
    z-index: 80;
}

div[id*="highlight-menu"]:before {
    background: #fff;
    bottom: 5px;
    border-radius: 10px;
    content: " ";
    left: 5px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: -1; /* below #highlight-menu and above #highlight-menu:after */
}
div[id*="highlight-menu"]:after {
    background: url(../../../images/ebook_html5/popout-arrow.png) no-repeat 0 -90px;
    bottom: -16px;
    content: "";
    display: block;
    height: 45px;
    left: -16px;
    position: absolute;
    width: 45px;
    z-index: -2; /* below #highlight-menu:before */
}

/* arrow on bottom right */
div[id*="highlight-menu"].bottomRight {
    border-radius: 15px 15px 0 15px;
}
div[id*="highlight-menu"].bottomRight:after {
    background-position: 0 -45px;
    bottom: -16px;
    left: auto;
    right: -16px;
}

/* arrow on top right */
div[id*="highlight-menu"].topRight {
    border-radius: 15px 0 15px 15px;
}
div[id*="highlight-menu"].topRight:after {
    background-position: 0 0;
    bottom: auto;
    left: auto;
    top: -16px;
    right: -16px;
}

/* arrow on top left */
div[id*="highlight-menu"].topLeft {
    border-radius: 0 15px 15px 15px;
}
div[id*="highlight-menu"].topLeft:after {
    background-position: 0 -135px;
    bottom: auto;
    left: -16px;
    top: -16px;
    right: auto;
}

div[id*="highlight-menu"] a {
    color: #075c8c;
    text-decoration: none;
}

.highlight-menu-item {
    padding: 6px 8px;
    background-color: #fff;
}
.highlight-menu-item:hover {
    background-color: #b9e2f4;
}
.highlight-menu-item .icon { /* laz icons */
    color: #0178af;
    font-size: 150%;
    margin-right: 7px;
}
.highlight-menu-item .icon-remove { /* glyphicons need different styling than laz icons */
    font-size: 130%;
}
.disabled .highlight-menu-item,
.disabled .highlight-menu-item:hover {
    background: none;
    cursor: default;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
div[id*="highlight-menu"] a:first-child .highlight-menu-item {
    border-radius: 10px 10px 0 0;
    padding-top: 8px;
}
div[id*="highlight-menu"] a:last-child .highlight-menu-item {
    border-radius: 0 0 10px 10px;
    padding-bottom: 8px;
}
div[id*="highlight-menu"] a:first-child:last-child .highlight-menu-item {
    border-radius: 10px;
}

.dummy-highlight { /* default, on all words */
    opacity: .01; /* For <= ie9 browsers. mouseover/hover events cannot be detected on completely transparent objects */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=01)"; /* IE 8 */
    position: absolute;
    background-color: white;
    cursor:text;
}
.dummy-highlight:hover {
    opacity: .25;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 */
    background-color: #00b1ff;
}
.current-highlight,
.current-highlight:hover {
    background-color: #00b1ff;
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE 8 */
}
.save-highlight {
    opacity: .4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* IE 8 */
    background-color: #fcf301;
    cursor: pointer;
}
.save-highlight:hover {
    background-color: #fcf301;
    cursor: pointer;
    opacity: .55;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE 8 */
}
#highlight-audio-loader {
    /*height & width set in jscript*/
    background: url(../../../images/ajax-loader-big-tp.gif) left top;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 10px;
    padding: 2px;
}
.icon-audioC.hidden:before {
    content: none;
}
/***************/
/* vocab cards */

.vocab-card {
    background: #fff;
    border: solid 1px #fff;
    box-shadow: 0 0 25px #333;
    color: #111;
    font-size: 15px;
    left: 0;
    margin: 0 auto;
    position: relative;
    right: 0;
    top: 150px;
    width: 475px;
    z-index: 500; /* above everything else except .btn-close */
}
#vocab-data-loader {
    background: url(../../../images/ajax-loader-big.gif) left top;
    margin: 20px auto;
    height: 32px;
    width: 32px;
}
#vocab-data-header {
    background-color: #FDE3B4;
    border-top: solid 6px #fdad1c;
    font-size: 22px;
    font-weight: bold;
    padding: 5px 12px 7px 12px;
}
#vocab-data-header em {
    font-size: 17px;
    font-weight: normal;
    margin: 0 8px;
}
#vocab-data-header .btn-close {
    margin: 8px 2px;
}

.vocab-body h2 {
    font-size: 16px;
    margin: 15px 0 5px 0;
}
.vocab-body p {
    line-height: 1.5;
    margin: 5px 0 5px 20px;
}
.vocab-image {
    margin: 0px 0 15px 15px;
}

.vocab-image img {
    display: block;
    height: auto;
    max-width: 100%;
    float:right;
    margin-left:10px;
}
.vocab-image-credit {
    color: #888;
    font-size: 11px;
    margin: 4px 0 0 0;
    float:right;
}
.highlighted-word {
    z-index:-10;
    opacity: .2;
    background-color:#00ff00;
    position:absolute;
}

.highlighted-phrase {
    z-index:-10;
    opacity:.2;
    background-color: #fff600;
    position:absolute;
    font-size: 6px;
}