﻿
.ui-icon { width: 16px; height: 16px; background-image: url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 10px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 10px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 16px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

.ui-resizable-s:hover { background:#cecece; }
.ui-resizable-e:hover { background:#cecece; }
.ui-resizable-se:hover { background:#cecece; }

.grid-slider{
    margin-bottom: 3px; 
    margin-top:3px;  
    margin-left:10px; 
    margin-right:10px;
    background: #B1DEFA; 
}


.navigator-ranger {
    /*position:absolute;*/
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 10px;
    margin-right: 10px;
    /*background: #B1DEFA;*/
    background-color: red;
    /*top:17px;*/
    height: 0px;
    /*bottom:1px;*/
}

    .navigator-ranger .ui-state-default {
        background: none;
    }

    .navigator-ranger.ui-slider .ui-slider-handle {
        /*position:absolute;*/
        width: 8px;
        height: 45px;
        margin-left: -4px;
        top: -45px;
        border: solid;
        border-width: 1px;
        border-color: darkgray;
        background-color: lavender;
        cursor: w-resize;
        text-align: center;
        vertical-align: baseline;
        display: inline-block;
        font-size: 10px;
        font-weight: normal;
    }

        .navigator-ranger.ui-slider .ui-slider-handle::after {
            content: "";
        }

    .navigator-ranger.ui-slider .ui-slider-ranger {
        /*position: absolute;*/
        z-index: 1;
        font-size: .7em;
        display: block;
        border: solid;
        border-width: 1px;
        background-position: 0 0;
        height: 1px;
        touch-action: none;
    }

    .navigator-ranger.ui-slider-horizontal {
        height: 1px;
    }

/************************************************************/
.navigator-slider {
    /*margin-bottom: 0px;
    margin-top: 0px;*/
    margin-left: 10px;
    margin-right: 10px;
    /*background: #B1DEFA;*/
    height: 25px;
}

.navigator-scroll-button {
    position: absolute;
    background-color: gainsboro;
    height: 15px;
    width: 15px;
    border: solid;
    border-width: 1px;
    border-color: darkgray;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    bottom: 0px;
    cursor: pointer;
}
/*.navigator-slider .ui-state-default {
        background: none;
    }*/

.navigator-slider.ui-slider .ui-slider-handle {
    position: absolute;
    width: 50px;
    height: 15px;
    margin-left: -25px;
    top: 0px;
    border: solid;
    border-width: 1px;
    border-color: darkgray;
    background-color: gainsboro;
    cursor: w-resize;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    font-size: 10px;
    font-weight: normal;
}

    .navigator-slider.ui-slider .ui-slider-handle::after {
        content: "|||";
    }
/*.navigator-slider.ui-slider .ui-slider-range {
        position: absolute;
        z-index: 1;
        font-size: .7em;
        display: block;
        border: solid;
        border-width: 1px;
        background-position: 0 0;
        height: 1px;
        touch-action: none;
    }*/
.navigator-slider.ui-slider-horizontal {
    height: 15px;
}



.NavGraphContainer {
    /*position:absolute;*/
    height: 45px;
    border: solid;
    border-width: 1px;
    border-color: gainsboro;
    /*bottom:15px;*/
    width: 100%;
}

.range-frame {
    height: 45px;
    border: solid;
    border-width: 1px;
    border-color: gainsboro;
    background-color: powderblue;
}

.NavContainer {
    height: 65px;
    border: solid;
    border-width: 1px;
    border-color: gainsboro;
}

.navigator-marker-container {
    /*display:none;*/
    height: 80px;
    border: solid;
    border-width: 0px;
    border-color: gainsboro;
    overflow: hidden;
}

.navigator-marker {
    /*display:none;*/
    position: relative;
    height: 140px;
    top: -63px;
    border: solid;
    border-width: 0px;
    border-color: gainsboro;
