html, body, div
{
    margin: 0;
    padding: 0;
    border: 0;
 }

html,.splitview {
  height: 100%;
}

body {
    height: 99.99%;
}

.splitview {
    display: flex;
    flex-direction: row;
  
    background-color: #235e63;
    background-image: linear-gradient( to bottom, rgba(255,255,255, 0.3) 30%, rgba(0,0,0,0.4)  ),url(../img/white-oak-horiz.jpg),url(../img/royal_table.jpg);
    background-repeat: no-repeat, no-repeat,repeat;
    background-size: 100% 10px, 100% 10px, auto;
    background-position: bottom 5px left,bottom 5px left,0;
}

.folderview {
  width: 15%;
  padding-bottom: 15px;
  min-width: 50px;
}

.folderview .ui-resizable-handle {
    width: 19.2px;
    height: 15px;
    right: 0;
    bottom:2px;
    cursor: ew-resize;
    
    border-left: 1px solid darkkhaki;
    border-right: 1px solid khaki;
    border-top: 1px solid khaki;
    border-bottom: 1px solid darkkhaki;
    border-radius: 3px;
    
    background-repeat: repeat-x;
    background-position: 0 -10px;
    background-image: url("../img/hbrass2.jpg");
}

.folderview.fullpage .ui-resizable-handle {
    display: none;
}

.pageview {
    flex-grow: 1;
    min-width: 50px;
    padding-bottom: 15px;
}

.highlight {
    opacity: 0.6;
    outline: 6px solid #0FFF0F;
}

.pagenum {
    text-align: right;
    vertical-align: middle;
    font-size: 17px;
    font-family: Cambria, serif;
    color: white;
}

.pagenum span {
    background-color: black;
}

#folderslider {
    height: calc(100% - 45px);
    width: 10px;
    border: none;
    background-size: 10px 100%;
    background-image: linear-gradient( to left, rgba(255,255,255, 0.3)  30%, rgba(0,0,0,0.4) ),url(../img/white-oak.jpg);
    background-repeat: no-repeat;
    margin: 14px 0 22px 0;
}

.ui-slider, .ui-slider-range  {
    color: transparent;
    background-color: transparent;
    border: 1px solid maroon;
}

#folderslider > .ui-slider-handle {
    overflow-y: hidden;
    left: -3px;
    width: 15px;
    background-position-x: 2.5px;
    border-left: 1px solid darkkhaki;
    border-right: 1px solid khaki;
    border-top: 1px solid khaki;
    border-bottom: 1px solid darkkhaki;    background-image: url("../img/brass.jpg");
}

#folderslider > .ui-slider-handle:focus {
    outline: none;
}

.loading {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-30%, -50%);
    color: gold;
    font-size: 20pt;
    z-index: 1000;
    text-align: center;
}