.ptz-control
{
    width: 120px;
    height: 144px;
    position:relative;
    top: 0px;
    left: 0px;
    border: 3px double white;
    background-color: #111;
    opacity: 0.5;
    filter: alpha(Opacity=50);
    color: white;
    font-size: 12px;
    cursor: default;
    z-index: 11;
}

.ptz-up, .ptz-down, .ptz-left, .ptz-right,
.zoom-inc, .zoom-dec, .focus-inc, .focus-dec, #ptz-preset, #ptz-preset-settings
{
    cursor: pointer;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

.ptz-up:hover, .ptz-down:hover
{
    background-position: 0px -32px;
}

.ptz-left:hover, .ptz-right:hover
{
    background-position: 0px -72px;
}

.zoom-inc:hover, .zoom-dec:hover, .focus-inc:hover, .focus-dec:hover
{
    background-position: 0px -52px;
}

.ptz-up:active, .ptz-down:active
{
    background-position: 0px -16px;
}

.ptz-left:active, .ptz-right:active
{
    background-position: 0px -36px;
}

.zoom-inc:active, .zoom-dec:active, .focus-inc:active, .focus-dec:active
{
    background-position: 0px -26px;
}

.ptz-up
{
    width: 36px;
    height: 16px;
    top: 40px;
    left: 39px;
    background-image: url(?obj=ptz_up.png);
}

.ptz-right
{
    width: 16px;
    height: 36px;
    top: 56px;
    right: 23px;
    background-image: url(?obj=ptz_right.png);
}

.ptz-down
{
    width: 36px;
    height: 16px;
    top: 92px;
    left: 39px;
    background: url(?obj=ptz_down.png);
}

.ptz-left
{
    width: 16px;
    height: 36px;
    top: 56px;
    left: 23px;
    background-image: url(?obj=ptz_left.png);
}

.zoom-inc
{
    width: 26px;
    height: 26px;
    bottom: 2px;
    right: 2px;
    background-image: url(?obj=ptz_zoom_plus.png);
}

.focus-inc
{
    width: 26px;
    height: 26px;
    bottom: 2px;
    right: 30px;
    background-image: url(?obj=focus_plus.png);
}

.zoom-dec
{
    width: 26px;
    height: 26px;
    bottom: 2px;
    left: 2px;
    background-image: url(?obj=ptz_zoom_minus.png);
}

.focus-dec
{
    width: 26px;
    height: 26px;
    bottom: 2px;
    left: 30px;
    background-image: url(?obj=focus_minus.png);
}

#ptz-preset
{
    width: 26px;
    height: 26px;
    top: 20px;
    left: 2px;
    background-image: url(?obj=ptz_preset_go_to.png);
}

#ptz-preset-dropdown
{
    position: absolute;
    top: 0px;
    left: 0px;
}

#ptz-preset-settings
{
    width: 26px;
    height: 26px;
    top: 20px;
    right: 2px;
    background-image: url(?obj=tour_menu.png);
}

#ptz-preset:hover, #ptz-preset-settings:hover
{
    background-position: 0px -52px;
}

#ptz-preset:active, #ptz-preset-settings:active
{
    background-position: 0px -26px;
}

#ptz-preset-list
{
    width: 100px;
    left: -165px;
    top: 0px;
}

.ptz-slider
{
    width: 87%;
    display:inline-block;
    float:left;
}

.ptz-slider-value
{
    margin-top: -5px;
}

.ptz-slider-caption
{
    margin-bottom: 4px;
    clear: left;
}

.vcenter
{
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.ecb
{
    width: 100%;
}

.glyphicon-refresh-animate
{
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2
{
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin
{
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

.noselect
{
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}

#presets-list
{
    width: 85%;
    overflow-y: scroll;
    height: 150px;
    margin: 0;
    border: 1px solid gray;
}

#presets-list a
{
    padding: 1px;
    border: none;
    margin: 0;
}