/* TODO: viewer specific prefix (e.g. mtkview_wrapper) */

body {
	-webkit-user-select:none;
    -webkit-text-size-adjust:none;
/*	-webkit-box-sizing:border-box;*/
/*	padding-bottom:45px;	/*	This prevents the scroller to lock if the user swipes down outside of the screen.
							 	NOT needed if in home screen mode. */
}

html, body, div, span, object,
form, input, h1, h2, button, label, a, img 
{
    -webkit-touch-callout: none; 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    -o-user-select: none;
    user-select: none;
}

/*.unselectable img
{
    -webkit-touch-callout: none; 
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    
    -o-user-select: none;
    user-select: none;
}
img::-moz-selection {
    background-color: yellow;
    color: yellow;
}

img::selection {
    background-color: yellow;
    color: yellow;
}*/

#wrapper {
	position:absolute;
	z-index:1;
	top:2px;
	bottom:0;
	left:19px;
	width:100%;
	overflow:auto;
    margin-top:22px;
    margin-bottom:5px;
    background-color: #ddd;
    -webkit-overflow-scrolling: touch;
    text-align:center;
}



#loader {
	position:absolute;
	top:50%;
	left:50%;
	width:200px;
	margin-left:-100px;
}

#loader div {
	width:50px;
	height:15px;
	float:left;
	border:solid 1px #f33;
}
#loader span {
	display:block;
	height:100%;
	width:0%;
	background:orange;
}


#scroller {
	width:100%;
	height:100%;
	float:left;
	padding:0;
}

#scroller ul {
	list-style:none;
	display:block;
	float:left;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	text-align:left;
}

.reader {
    background-color: #ddd;
}

.reader #loadingDiv
{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10000;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #ccc;
    border-radius: 5px;
    display:none;
    background: #ddd url(/content/images/loader.gif) no-repeat center center;
}


#scroller li {
	display:block;
	vertical-align:middle;
	float:left;
	padding:0 5px;
	width:980px;
	height:100%;
	position:relative;
	text-align:center;
    /*background: #ddd url(/content/images/loader.gif) no-repeat center center;*/
}

#scroller img.page0 {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#issue .mark {
	color:#fff;
	background:#ccc;
	position:absolute;
	left:50%;
	top:10px;
	width:30px;
	height:30px;
	display:block;
	z-index:10;
}

#imgContainer {
	position:relative;
}

#imgContainer .shade {
	background-color: #F46D01;
    opacity: 0.5;
	position:absolute;
}

/*.auto #issue .shade {
	height:98%;
}*/

#issue .mark.on, #issue.mark:hover {
	background:orange;
}

#issue img 
{
    /*width:1000px;*/
	background:#fff url(/content/images/loader.gif) no-repeat center center;
    /*max-width:700px !important;*/
    /*width:100%;*/
	/*height:1413px;*/
    
}
.auto #issue img
{
	/*width:auto;*/
	height:49%;/* split! (100%) *//*682px;*/
    display: inline;
}

#issue .anon img {
	filter: alpha(opacity=10);
	opacity: .1;
	height:98%;
}

#sidebar {
	position:absolute;
	top:0;
	right:-190px;
	width:190px;
	height:100%;
	background:#eee;
	z-index:1000;
}
#sidebar.on {
	right:0;
}
#sidebar .tabs {
	position:absolute;
	top:5px;
	left:-40px;
	width:32px;
}
#sidebar .tabs a {
	display:block;
}
#sidebar .inner {
	padding:10px;
}

#tabThumbs div {
	overflow:auto;
	position:absolute;
	top:10px;
	right:10px;
	bottom:10px;
	left:10px;
}
#tabThumbs img {
	border:solid 1px #ddd;
}
#tabThumbs a.on img {
	border:solid 1px #e55;
}

#tabSearch .searchbox {
	border:solid 1px #ddd;
	width:140px;
	height:20px;
}
#tabSearch .searchbox input {
	width:110px;
	border:none;
	padding:2px 5px;
}
#tabSearch .searchbox img {
	cursor:pointer;
	width:20px;
	height:22px;
	background:red;
	vertical-align:bottom;
}
#tabSearch .searchresults {
	overflow:auto;
	position:absolute;
	top:40px;
	right:10px;
	bottom:10px;
	left:10px;
}
#tabSearch .searchresults div {
	margin-top:10px;
}
#tabSearch .searchresults span {
	display:block;
}

#tabFavs a {
	position:relative;
}
#tabFavs img {
	border:solid 1px #ddd;
}
#tabFavs a.on img {
	border:solid 1px #e55;
}
#tabFavs a span {
	position:absolute;
	color:#fff;
	padding:1px 3px;
	bottom:0;
	right:0;
}
#tabFavs a.mark span {
	background:green;
}
#tabFavs a.crop span {
	background:orange;
}

/* navigation arrows 
-----------------------*/
#nav {
	position:absolute;
	top:50%;
	width:100%;
	/*z-index:500;*/ /*FIX FOR INTERACTIVE AREAS BEING UNDER THE NAV AREA*/
}
/*#nav a {
	padding:0 10px;
}*/
#nav a img 
{
    width:22px;
    height:40px;
    vertical-align:middle;
}
#nav .next {
	float:right;
}
#nav a span
{
    display:none;
}
#nav a:hover span
{
    display:inline;
}
#nav .prev img 
{
    background:url(/img/viewer/img-arrow-prev2.png) no-repeat;
}
#nav .next img 
{
    background:url(/img/viewer/img-arrow-next2.png) no-repeat;
}



.firstpage img {
	background:url(/img/viewer/img-arrow-prev2.png) no-repeat;
}
.lastpage img
{
    background:url(/img/viewer/img-arrow-next2.png) no-repeat;
}

#wrapper.zoom #nav {
	display:none; /* hide arrows when zooming */
}

.btop {
	border-top: 1px solid #ccc;
}
.bbottom 
{
    border-bottom: 1px solid #ccc;
}
.bleft
{
    border-left: 1px solid #ccc;
}
.bright 
{
    border-right: 1px solid #ccc;
}


#hPager
{
    position: relative;
    padding-top: 2px;
    width: 100%;
    /*margin-left:60px;*/
    margin-left:40px;
}

#hPager .pager {
    list-style: none;
    margin: auto;
    width : auto;
}

#hPager .pager li {
    float: left;
    height: 100%;
    cursor: pointer;
    position: relative;
}

#hPager .pager li {
    float: left;
    height: 100%;
    cursor: pointer;
    position: relative;
    border-right: 1px solid #ddd;
    width:25px;
    height:15px;
    padding:2px;
    text-align:center;
    line-height: 16px;
}

#hPager .pager li>a {
    border: 0;
    color:white;
    font-size: 9px;
}

#hPager .pager a {
    background: #e8ae59;
    display: block;
    margin: 0;
    text-align: center;
    height: 10px;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    height: 15px;
}

#hPager .pager li>a#nextPager,#hPager .pager li>a#prevPager
{
    background: none;
    font-size:12px;
    color: #ff6666;
    width:15px;
}

#hPager .pager li>a#nextPager:hover,#hPager .pager li>a#prevPager:hover
{
    color: #ff6666;
}

#hPager .pager li>a#nextPager i,#hPager .pager li>a#prevPager i
{
    padding: 0 !important;
} 

#hPager .pager a.on,#hPager .pager a:hover,#hPager .pager a.off:hover {
    background: #F46D01;
}


#hPager .pager a.off {
    background: #999;
}

#hPager .leftRadius
{
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;
}

#hPager .rightRadius
{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}


/* Footer Pager - currently not used
#fPager
{
    position: absolute;
    bottom: -10px;
    width: 100%;
    left: 5px;
    width: 95%;
    z-index:2;
}

#fPager .pager {
    width: 100%;
    list-style: none;
    position: absolute;
    top: -23px;
    margin: 0;
    margin-left: 15px;
}

#fPager .pager li {
    float: left;
    height: 100%;
    cursor: pointer;
    position: relative;
}

#fPager .pager li>a {
    border: 0;
}

#fPager .pager a {
    background: #e8ae59;
    display: block;
    margin: 0;
    text-align: center;
    height: 10px;
    overflow: visible;
    border-radius: 0;
    padding: 0;
}

#fPager .pager a.on,#fPager .pager a:hover,#fPager .pager a.off:hover {
    background: #F46D01;
}


#fPager .pager a.off {
    background: #999;
}

#fPager .leftRadius
{
    border-bottom-left-radius: 4px !important;
    border-top-left-radius: 4px !important;
}

#fPager .rightRadius
{
    border-bottom-right-radius: 4px !important;
    border-top-right-radius: 4px !important;
}*/

#toc a
{
    color:black;
}

#toc a:hover
{
    text-decoration:none;
}

/**
 *
 * Vertical Scrollbar
 *
 */
.myScrollbarV {
	position:absolute;
	z-index:100;
	width:8px;bottom:7px;top:2px;right:22px
}

.myScrollbarV > div {
	position:absolute;
	z-index:100;
	width:100%;
    background-color: rgba(0, 0, 0, 0.498039);
    border: 1px solid rgba(255, 255, 255, 0.901961);
    -webkit-background-clip: padding-box;
    box-sizing: border-box;
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    pointer-events: none;

    -webkit-transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1);
    transition: -webkit-transform 0ms cubic-bezier(0.33, 0.66, 0.66, 1);
    -webkit-transform: translate(0px, 0px) translateZ(0px);
}

.nextArrow
{
    right: 6px;
    border-left: 10px solid #e8ae59;
}

.nextArrow:hover
{
    border-left: 10px solid #F46D01;
    cursor:pointer;
}

.prevArrow
{
    border-right: 10px solid #e8ae59;
}

.prevArrow:hover
{
    border-right: 10px solid #F46D01;
    cursor:pointer;
}



.side-content ul
{
    list-style-type: none;
}

.result-list-item i
{
    padding:0;
}

.reader-attachment
{
    position: absolute;
    display:none;
    z-index:1000;
    right: 105px;
}

.reader-attachment .attachment-btn {
    z-index: 100;
    position: absolute;
    top: 0px;
    padding: 16px 8px 8px 8px;
    margin-left: 0px;
    background-color: #b0bbba;
    color: white;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 0px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15);
}

.reader-attachment .attachment-btn:hover, .reader-attachment .attachment-btn:focus {
    background-color: #ee9a20;
    color: #484e4d;
    -moz-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.15);
}

.reader-bookmark {
    position: absolute;
    top:0;
    z-index:9;
    right: 45px;
}

.vmtk-full:hover{
    text-decoration:none;
}

.tooltip.goldTip .tooltip-inner
{
    background-color: gold;
    color: #333;
    font-weight: bold;
}

.tooltip.goldTip .tooltip-arrow
{
    border-right-color: gold;
}

.side-container
{
    left: -40px;
}

.side-container.open
{
    width: 218px;
}


/*Push reader to the header + New Vertical Reader*/

#top-bar
{
    min-height:100px;
}

.navbar-pleo .brand img
{
    z-index: inherit !important;
}


.side-container #zoom1 a
{
    color: #000;
}

.side-container #zoom1 a.selected
{
    color: #fff;
    font-weight:bold;
}

#scroller.zoomVal15
{
    /*-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);*/
    zoom:150%;
}

#scroller.zoomVal2
{
    /*-webkit-transform: scale(2.0);
    -moz-transform: scale(2.0);
    -o-transform: scale(2.0);*/
    zoom:200%;
}

#scroller.zoomVal4
{
    /*-webkit-transform: scale(4.0);
    -moz-transform: scale(4.0);
    -o-transform: scale(4.0);*/
    zoom:400%;
}

#wrapper.zoomVal15,#wrapper.zoomVal2
{
    overflow-x: auto;
}

#wrapper.zoomVal15 #imgContainer
{
    -ms-transform: scale(1,5); /* IE 9 */
    -webkit-transform: scale(1,5); /* Chrome, Safari, Opera */
    transform: scale(1,5);
}

#wrapper.zoomVal2 #imgContainer
{
    -ms-transform: scale(1,5); /* IE 9 */
    -webkit-transform: scale(1,5); /* Chrome, Safari, Opera */
    transform: scale(1,5);
}

.vmtk-full
{
     /*display: none !important;
     position: absolute;
     right: -87px;
     bottom: 0px;
}*/


@media (min-width: 1200px) { 
    .offset2
    {
        margin-left: 190px;
    }

    /*.navbar .brand
    {
        margin-left: -85px;
    }*/
}

@media (max-width: 979px) { 
body
{
    overflow:hidden;
}

}

@media (max-width: 768px) { 
#wrapper
{
    top:46px;
}

.side-container
{
    z-index:1000;
}

}

@media (max-width: 1350px) { 
    .vmtk-full
    {
        display:none;
    }
}

/*@media (max-width: 1376px) { 
    .vmtk-full span
    {
        display:none;
        
    }

    .vmtk-full
    {
        right:-40px;
    }
}*/