/*
//============================================================================
// Copyright (c) 2007-2019 Pelco. All rights reserved.
//
// This file contains trade secrets of Pelco.  No part may be reproduced or
// transmitted in any form by any means or for any purpose without the express
// written permission of Pelco.
//============================================================================
*/

/* basic elements */
html { height: 100%; }
img { -ms-interpolation-mode: bicubic; }

body {
    font: 8pt/normal Verdana, sans-serif;
    color: black;
    margin: 0px;
    padding: 0px;
    height: 100%;
    background: white;
}

p {
    font: 8pt/normal Verdana, sans-serif;
    margin-top: 0px;
}

h1 {
    font: 11pt/normal Verdana, sans-serif;
    font-weight: bold;
    color: #4b496b;
}

h2 {
    font: 10pt/normal Verdana, sans-serif;
    font-weight: bold;
    color: #4b496b;
}

h3 {
    font: 10pt/normal Verdana, sans-serif;
    color: #4b496b;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: black;
    font-size: 8pt;
}

.relative {
    position: relative;
}

.nowrap {
    white-space: nowrap;
}

.clear {
    clear: both;
}

.clear-left {
    clear: left;
}

.overflow-auto {
    overflow: auto;
}

.red {
    color: #FF7F7F;
}

/* specific blocks */
div#container {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid #c9cdce;
    border-right: 1px solid #c9cdce;
    height: auto;
}

div#header {
    background: url("/ui/images/header_bg.jpg") repeat-x bottom;
    border-bottom: 1px solid #c9cdce;
    height: 55px;
}

div#branding {
    position: relative;
    top: 2px;
    left: 2px;
    background: url("/ui/images/pelco.png") no-repeat 5px 10px;
    background-size: 120px;
    height: 40px;
}

div#productName {
    color: #b2b3b4;
    font: bold italic 13pt/normal Verdana, sans-serif;
    padding-top: 15px;
    margin-left: 125px;
}

div#navigation {
    position: relative;
    top: 18px;
    right: 5px;
    float: right;
    z-index: 1;
}

div#navigation a {
    padding-left: 5px;
    padding-right: 7px; /* compensates for the border */
    border-right: 1px solid #c0c0c0; /* simulates a pipe between links */
}

div#navigation a.last {
    border: 0;
}

div#navigation a#selected {
    font-weight: bold;
    text-decoration: none;
}

div#navigation ul, div#navigation li { display: inline; }

div#header2 {
    background: #ebeef3;
    height: 20px;
    padding-top: 1px;
    font-weight: bold;
}

div#header2 span {
    margin: 4px;
}

div#header2 img {
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

div#navigation2 {
    height: 23px;
    background: white;
    background: url("/ui/images/tab_inactive.jpg") repeat bottom;
    border-top: 1px solid #d9dde0;
    border-bottom: 1px solid #b5bdc8;
    margin: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

div#navigation2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table-cell;
}

div#navigation2 li {
    float: left;
    position: relative;
    width: 100%;
    padding: 0;
    border-right: 1px solid #d9dde0;
    text-align: center;
    line-height: 13px;
    background: url("/ui/images/tab_accent.jpg") no-repeat top right;
    z-index: 3;
}

div#navigation2 li.selected {
    font-weight: bold;
    border-left: 1px solid #b5bdc8;
    border-right: 1px solid #b5bdc8;
    border-top: 1px solid #b5bdc8;
    background: url("/ui/images/tab_active.jpg") repeat top left;
}

div#navigation2 li ul {
    display: none;
    position: absolute;
    top: 1em;
    width: 100%;
    left: 0;
}

div#navigation2 li:hover ul, div#navigation2 li.over ul {
    display: block;
    background-image: none;
    width: 100%;
    top: 23px;
    left: 50%;
    transform: translate(-50%, 0%);
}

div#navigation2 li:hover ul li, div#navigation2 li.over ul li {
    background-image: none !important;
    background-color: #fff;
    border: 1px solid #b5bdc8;
    border-top: none;
    width: 100%;
    font-weight: normal;
}

div#navigation2 li:hover ul li.first, div#navigation2 li.over ul li.first {
    border-top: 1px solid #b5bdc8;
}

div#navigation2 li:hover ul li:hover, div#navigation2 li.over ul li.over {
    background-color: #eee;
}

div#navigation2 a {
    text-decoration: none;
    width: 100%;
    display: block;
    padding: 5px 0;
}

div#navigation3 {
    float: left;
}

div#navigation3 .heading {
    text-decoration: underline;
    font-weight: bold;
}

div#navigation3 ul {
    list-style-type: decimal;
}

div#navigation3 li.selected a {
    text-decoration: none;
    font-weight: bold;
}

div#content {
    padding: 10px 0px 90px 150px;
}

/* helpful for browsers (*cough*IE*cough*) who have problems with width */
div#contentBody {
    width: 850px;
    float: left;
}

div#welcome {
    float: left;
    z-index: 1;
    font-size: 8pt;
    padding: 4px;
}

div#footer {
    border-top: 1px solid #c9cdce;
    bottom: 5px;
    width: 1000px;
    margin: 0;
    padding: 0;
    clear: left;
}

div#copyright {
    color: #b2b3b4;
    font: 10pt/normal Verdana, sans-serif;
    text-align: center;
}

div#leftContent {
    float: left;
    width: 240px;
    margin-left: 10px;
    border-right: 1px solid #eee;
}

div#rightContent {
    width: 650px;
    margin-left: 250px;
    padding: 10px;
    padding-top: 0;
}

div#rightContent h1 {
    margin-top: 0;
    padding-top: 0;
}

div.screenBlank {
    position: fixed;
    z-index: 1001;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #eee;
}

div.screenBlankFocus {
    position: fixed;
    z-index: 1002;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -50px;
    width: 300px;
    height: 100px;
    border: 1px solid #aaa;
    background: white;
}

div.screenBlankFocus div.header {
    background: url("/ui/images/header_bg.jpg") repeat bottom;
    border-bottom: 1px solid #c9cdce;
    height: 20px;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

div.screenBlankFocus div.header p {
    font-weight: bold;
    margin-top: 5px;
}

div.screenBlankFocus div.content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

div.screenBlankFocus div.content p {
    padding: 4px;
    padding-bottom: 8px;
    margin: 0;
}

div.screenBlankFocus div.error, div.screenBlankFocus div.warning {
    padding: 0;
    top: 50%;
    margin-top: 25px;
}

ul#errorList li {
    list-style: square;
}

/* For full screen mode */
div#container.fullscreen {
    width: 100%;
    border: 0;
}

div#container.fullscreen div#header      { display: none; }
div#container.fullscreen div#header2     { width: 100%; }
div#container.fullscreen div#navigation2 { display: none; }
div#container.fullscreen div#navigation3 { display: none; }
div#container.fullscreen div#content     { width: 100%; padding: 0; background: #fff; }
div#container.fullscreen div#contentBody { width: 100%; }
div#container.fullscreen div#footer      { display: none; }

div#container.fullscreen .fullscreenOnly { display: inline; }
div#container.fullscreen .containerOnly  { display: none; }

.fullscreenOnly { display: none; }
.containerOnly  { display: inline; }

/* classes */
div.message {
    border: 1px solid #090;
    background: #dfd;
    width: 100%;
    padding: 2px;
    margin-bottom: 4px;
}

div.error,
span.error {
    border: 1px solid #c00;
    background: #fcc;
    padding: 2px;
    width: 100%;
    margin-bottom: 4px;
}

.message-info {
    border: 1px solid #009;
    background: #ddf;
    padding: 2px;
    width: 98%;
    margin-bottom: 4px;
}

.warning {
    border: 1px solid #f0c000;
    background: #ffffce;
    padding: 2px;
    width: 98%;
    margin-bottom: 4px;
}

.success {
    border: 1px solid #65AC5B;
    background: #C8F0A6;
    padding: 2px;
    width: 98%;
    margin-bottom: 4px;
}

.statebox {
    padding-left: 10px;
    padding-right: 10px;
}

div.checkbox {
    width: 16px;
    height: 16px;
    background-color: rgb(192, 192, 192);
}

div.greencheckbox {
    background: url('/ui/images/greencheck.png') no-repeat;
    background-size: 16px 16px;
}

div.redcheckbox {
    background: url('/ui/images/redcheck.jpg') no-repeat;
    background-size: 16px 16px;
}

div.bluecheckbox {
    background: url('/ui/images/bluedot.jpg') no-repeat;
    background-size: 16px 16px;
}

div.toggleoff {
    padding-top: 2px;
    min-width: 75px;
    min-height: 16px;
    background: url('/ui/images/toggle_btn_off.png') no-repeat;
    background-size: 32px 15px;
    background-position-x: 50%;
}

div.toggleon {
    padding-top: 2px;
    min-width: 75px;
    min-height: 16px;
    background: url('/ui/images/toggle_btn_on.png') no-repeat;
    background-size: 32px 15px;
    background-position-x: 50%;
}

div.greendot {
    padding-left: 25px;
    padding-top: 1px;
    aheight: 33px;
    background: url('/ui/images/green_dot.png') no-repeat;
    background-size: 16px;
}

div.yellowdot {
    padding-left: 25px;
    padding-top: 1px;
    aheight: 33px;
    background: url('/ui/images/yellow_dot.png') no-repeat;
    background-size: 16px;
}

div.reddot {
    padding-left: 25px;
    padding-top: 1px;
    aheight: 38px;
    background: url('/ui/images/red_dot.png') no-repeat;
    background-size: 16px;
}

div.warning-small {
    margin-top: 4px;
    text-align: center;
}

div.systemMessage {   /* use with system messages (warning, error, message) */
    width: 978px;
    text-align: center;
    font-weight: bold;
    padding: 9px;
    margin: 1px;
}

div.smallMargin {
    margin: 5px;
}

span.inlineNote {
    font-style: italic;
    padding: 3px;
}

/* special classes */
#createUserWindow { 
    position: relative;
    top: 225px;
    margin: 0 auto;
    width: 414px;
    height: 300px;
    background: url(/ui/images/login_window.jpg) no-repeat top left;
    background-size: 414px 230px;
}

#loginWindow {
    position: relative;
    top: 225px;
    margin: 0 auto;
    width: 414px;
    height: 202px;
    background: url("/ui/images/login_window.jpg") no-repeat top left;
}

#loginWindow .branding {
    position: relative;
    width: 100%;
    height: 50px;
    top: 8px;
    left: 8px;
}

#loginPanel {
    position: relative;
    top: 21px;
    margin: 0 auto;
    width: 400px;
    height: 70px;
    font-size: 8pt;
}

#loginPanel form table {
    position: relative;
    margin: 0 auto;
    width: 318px;
}

#loginPanel form table tr th {
    font-weight: normal;
    width: 123px;
}

#loginPanel form table tr td {
    width: 195px;
}

#loginPanel form table tr td input.wide {
    width: 192px;
}


#loginHelp {
    position: relative;
    top: 124px;
    margin-right: 12px;
    text-align: right;
    font-weight: bold;
    font-size: 8pt;
    color: #aaa;
    text-decoration: underline;
}

#loginWindow .messages {
    position: absolute;
    top: 64px;
    left: 57px;
    width: 300px;
    text-align: center;
    font-weight: bold;
}

#loginWindow #banner-contents {
    position: absolute;
    font-size: 10px;
    color: #333;
    width: 600px;
    top: 215px;
    left: -90px;
}

#change_banner_contents {
    width: 800px;
    height: 100px;
    border: 1px solid #0f0f0f;
}

.diacap_button {
    margin-left: 700px;
    color: #03a;
}

#changePasswordWindow {
    position: relative;
    top: 225px;
    margin: 0 auto;
    width: 450px;
    height: 232px;
    background: url("/ui/images/change_password.jpg") no-repeat top left;
}

#changePasswordWindow .branding {
    position: relative;
    width: 100%;
    height: 50px;
    top: 8px;
    left: 8px;
}

#changePasswordPanel {
    position: relative;
    top: 50px;
    margin: 0 auto;
    width: 450px;
    height: 80px;
    font-size: 8pt;
}

#changePasswordPanel form table {
    position: relative;
    margin: 0 auto;
    width: 400px;
    height: 95px;
}

#changePasswordPanel form table tr th {
    font-weight: normal;
    width: 200px;
}

#changePasswordPanel form table tr td {
    width: 225px;
}

#changePasswordPanel form table tr td input.wide {
    width: 200px;
}


#changePasswordWindow .messages {
    position: absolute;
    top: 64px;
    left: 57px;
    width: 340px;
    text-align: center;
    font-weight: bold;
}

#passwordHelp {
    position: relative;
    top: 72px;
    margin-right: 12px;
    text-align: right;
    font-weight: bold;
    font-size: 8pt;
    color: #aaa;
    text-decoration: underline;
}

table#resetPassword {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #c9cdce;
    border-collapse: collapse;
}

table#resetPassword th {
    background-color: #ebeef3;
    padding: 8px;
    text-align: center;
}

table#resetPassword td {
    padding: 8px;
}

table#resetPassword tr#resetPasswordButtons {
    border-top: 1px solid #c9cdce;
}

table#resetPassword .border {
    border: 1px solid #c9cdce;
    padding: 10px;
    margin: 20px;
}

ul#feature_list {
    padding-bottom: 3px;
}

.presetHeader {
    font: 10pt/normal Verdana, sans-serif;
    font-weight: bold;
    color: #4b496b;
}

.groupDescription,
.securityDisabledWarning {
    padding: 5px 5px 5px 15px;
    border: 1px solid #000;
    background-color: #d3d3d3;
}

#livePositioningBlock {
    width: 450px;
    float: right;
}

.pt-info-overlay {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 100px;
    height: 40px;
    color: #fff;
}

.pt-info-overlay div {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

.pt-info-overlay div.pt-info-overlay-bg {
    background-color: #333;
    filter: alpha(opacity=60);
    opacity: 0.6;
}

/* PTZ Control styles */
#ptzControls {
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin-top: 0;
}

#ptzControls img {
    border: 2px solid #fff;
}

#ptzControls img:hover {
    cursor: pointer;
}

#ptzControls .top, #ptzControls .bottom {
    position: relative;
    width: 84px;
    height: 24px;
    margin: 0 auto;
}

#ptzControls .middle {
    position: relative;
    width: 84px;
    height: 34px;
    margin: 0 auto;
}

#ptzControls .middle .left {
    position: absolute;
    top: 6px;
    left: 0;
}

#ptzControls .middle .right {
    position: absolute;
    top: 6px;
    right: 0;
}

/* form styles */
table.form {
    border-collapse: collapse;
}

table.form tr, table.form td {
    padding: 4px;
}

table.form th {             /* left-hand table "headers" */
    text-align: right;
    font-weight: normal;
}

table.form th.top {    /* top-hand table headers */
    text-align: left;
    margin: 0;
    padding: 2px;
    border: 1px solid #c9cdce;
    background-color: #ebeef3;
}

table.data {
    border-collapse: collapse;
}

table.data th {
    background-color: #ebeef3;
    text-align: left;
    font-weight: bold;
    padding: 4px;
}

table.data td { padding: 4px; }

table.storage_export_form th {
    padding-right: 5px;
    text-align: right;
    font-weight: bold;
}

table.storage_export_form input[type="text"] {
    text-align:center;
}

table.storage_export_form input[type="button"] {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
}

table.storage_export_form td {
    padding-left:5px;
    vertical-align: middle;
}

table.storage_form th {
    text-align: right;
    font-weight: bold;
    padding: 5px;
    vertical-align: middle;
}

table.storage_form td {
    vertical-align: middle;
    padding: 5px;
}

table.storage_form input[type="button"] {
    vertical-align: middle;
    padding-left: 20px;
    padding-right: 20px;
}

/* form elements */
legend {
    color: #000;
}

input {
    font-size: 8pt;
}


button.input {
    position:relative;
    top:0;
}

button.input div {
    cursor: pointer;
    position:relative;
    width:100%;
    margin:0 auto;
    font-size: 8pt;
}

input[type=text],input[type=password],input[type=button],input[type=submit],input[type=reset],button.input {
    border: 1px solid #b5bcc4;
    background-color: #fff;
}

input.error {
    border-color: red !important;
}

input[type="submit"],input[type=button],input[type=reset],button.input {
    white-space:normal;
    background: url(/ui/images/button_bg.jpg) bottom repeat-x #fff;
}

input[type="submit"]:active,input[type=button]:active,input[type=reset]:active,button.input:active {
    white-space:normal;
    background: rgb(190, 190, 190)
}

input.allow-wrap[type="submit"],input.allow-wrap[type=button],input.allow-wrap[type=reset],button.allow-wrap {
    white-space:normal;
}

span.nowrap input[type="radio"] {
    margin-right: 5px;
}

/* provide font-size in pixels; without pixels, firefox sometimes
 * cuts off the bottom of drop downs */
select, option { font-size: 11px; }

/* generic classes */
.top, .v-top { vertical-align: top; }
.left { float: left; }
.right { float: right; }
.hidden { display: none; }

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.valign-middle {
    vertical-align: middle;
}

.collapse-separate {
    border-collapse: separate;
}

.width-10p {
    width: 10%;
}

.width-24 {
    width: 24px;
}

.width-45 {
    width: 45px;
}

.width-45p {
    width: 45%;
}

.width-60p {
    width: 60%;
}

.width-80 {
    width: 80px;
}

.width-80p {
    width: 80%;
}

.width-90p {
    width: 90%;
}

.width-100p {
    width: 100%;
}

.width-120 {
    width: 120px;
}

.width-150 {
    width: 150px;
}

.width-175 {
    width: 175px;
}

.width-200 {
    width: 200px;
}

.width-220 {
    width: 220px;
}

.width-270 {
    width: 270px;
}

.width-345 {
    width: 345px;
}

.width-650 {
    width: 650px;
}

.max-45p {
    max-width: 45%;
}

.max-50p {
    max-width: 50%;
}

.height-24 {
    height: 24px;
}

.height-100p {
    height: 100%;
}

.height-200 {
    height: 200px;
}

.height-262 {
    height: 262px;
}

.height-400 {
    height: 400px;
}

.height-442 {
    height: 442px;
}

.square-12 {
    width: 12px;
    height: 12px;
}

.square-24 {
    width: 24px;
    height: 24px;
}

.square-32 {
    width: 32px;
    height: 32px;
}

.margin-0 {
    margin: 0;
}

.margin-top-1em {
    margin-top: 1em;
}

.margin-top-3 {
    margin-top: 3px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-35 {
    margin-top: 35px;
}
.margin-right-5 {
    margin-right: 5px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-right-33 {
    margin-right: 33px;
}

.margin-bottom-3 {
    margin-bottom: 3px;
}

.margin-bottom-6 {
    margin-bottom: 6px;
}

.margin-bottom-8 {
    margin-bottom: 8px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-left-30 {
    margin-left: 30px;
}

.padding-0 {
    padding: 0;
}

.padding-7 {
    padding: 7px;
}

.padding-top-1em {
    padding-top: 1em;
}

.padding-top-4 {
    padding-top: 4px;
}

.padding-top-7 {
    padding-top: 7px;
}

.padding-top-35 {
    padding-top: 35px;
}

.padding-left-10 {
    padding-left: 10px;
}

.padding-left-25 {
    padding-left: 25px;
}

.padding-left-41 {
    padding-left: 41px;
}

.border-1-solid-black {
    border: 1px solid black;
}

.center {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

select.tall-select {
    width: 90%;
    height: 300px;
}

button.custom {
    border: 1px solid #999;
    background-color: #f3f3f2;;
}

.bg-grey {
    background-color: #f5f5f5;
}

.bg-purple {
    background-color: #EBEEF3;
}

.up-down-wrap {
    position: relative;
    display: inline-block;
    top: 2px;
    width: 7px;
    height: 14px;
    margin: 0 2px 0 0;
}

.up-down-wrap a.up-arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 7px;
    height: 7px;
    background: url(/ui/images/slider-images-spinner-up.gif) no-repeat top;
}

.up-down-wrap a.down-arrow {
    position: absolute;
    bottom: 0;
    display: block;
    width: 7px;
    height: 7px;
    background: url(/ui/images/slider-images-spinner-down.gif) no-repeat bottom;
}

#leftContent.no-border,
#rightContent.no-border,
.no-border {
    border: none;
}

div#content.full {
    padding: 10px 30px 20px 30px;
}

.ui-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
  }
.ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    box-shadow: 0 0 7px black;
}
.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 24px;
    top: -16px;
    width: 17px;
    height: 17px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow.top:after {
    bottom: -10px;
    top: auto;
}

.subText { color: #aaa; font-size: 90%; }

/* list type */
ul.itemList {
    padding: 0;
    margin-bottom: 10px;
    border: 1px solid #aaa;
    width: 90%;
    list-style: none;
}

ul.itemListFull {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    list-style: none;
}

ul.itemList li {
    padding: 2px;
    padding-left: 2px;
    border-bottom: 1px solid #f3f3f3;
}

ul.itemList li:hover, ul.itemList li.hover {
    background-color: #ebeef3;
}

ul.itemList li.selected {
    background-color: #ebeef3;
}

ul.itemList li a { text-decoration: none; }

ul.itemList h2 { float: left; margin: 0; padding: 0; }
ul.itemList img.toggle { float: left; border: 0; padding-top: 2px;}

ul.itemList p { clear: left; }

/* section */
/* sectionRight and sectionLeft are intended
 to be used in conjunction with each other */
div.section,
div.sectionLeft,
div.sectionRight {
    padding: 5px;
    border: 1px solid #c0c0c0;
    margin: 10px 0px 20px 0px;
}

div.sectionLeft {
    width: 45%;
}

div.sectionLeftNoBorder {
    padding: 0px;
    margin: 0px 0px 20px 0px;
    width: 48%;
    height: 10px;
}

div.sectionRight {
    width: 45%;
    float: right;
    margin-left: 10px;
}

div.sectionRightNoBorder {
    float: right;
    width: 45%;
    border: 0;
}

table tr td div.sectionRight,
table tr td div.sectionLeft,
table tr td div.sectionLeftNoBorder {
    float: none;
    display: block;
    width: auto;
}

div.section .title,
div.sectionLeft .title,
div.sectionRight .title {
    position: relative;
    padding-left: 30px;
    margin: -15px 0 7px 0;
    width: auto;
}

div.section .title h2,
div.section .title h1,
div.sectionRight .title h2,
div.sectionLeft .title h2 {
    display: inline;
    position: relative;
    width: auto;
    padding: 0 3px;
    background-color: #fff;
}

div.section .content,
div.sectionRight .content,
div.sectionLeft .content {
    position: relative;
    top: -10px;
}

div.section.disabled,
td.disabled {
    opacity: .6;
}

div.interestBox {
    background-color: #fafafa;
    border: 1px solid #eee;
}

#full_curtain {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #FFF;
    z-index:999;
}

#loading_problem {
    margin: auto;
    border: 1px solid #fcc;
    width: 75%;
    padding: 5px;
    text-align: center;
}

.viewer_container       { border: 1px solid #aaa;}
.viewer_controls        { width: 100%; height: 28px; padding: 0px; margin: 0; background-color:#eee;}
.viewer_controls img    { padding-right: 4px; padding-left: 4px; padding-top: 4px; cursor: pointer; }
.viewer_controls input  {  margin-top: 4px; cursor: pointer; }
.viewer_controls .left  { float: left; height:28px; padding-left: 4px;}
.viewer_controls .text  { height: 20px; line-height: 20px; padding-top: 4px; }
.viewer_controls .right { float: right; height:28px;}
.viewer_controls .left img { padding-top: 4px; }
.viewer_controls .left input { margin-left: 4px; }
.viewer_controls .right img { padding-top: 4px; }
.viewer_controls .center { text-align: center; height: 28px; }
.viewer_controls .center img { vertical-align: bottom; }
.viewer-drawing-canvas {margin:auto; position:relative; overflow: hidden}
.ptz-highlighted {background-color:gray;}


.slider-bar {
    margin-top: 10px;
    background: transparent url(/ui/images/slider-images-track.png) repeat-x top left;
    border: 0px;
    clear: both;
}

.slider-bar .ui-slider-range {
    background: url(/ui/images/slider-images-track-left.png) left top no-repeat transparent;
    border: 0px;
}

.slider-bar .ui-slider-handle {
    background: url(/ui/images/slider-images-handle.png) left top no-repeat transparent;
    width: 19px;
    height: 20px;
    float: left;
    cursor: move;
    border: 0px;
}

.slider-bar .ui-slider-handle:hover {
    background: url(/ui/images/slider-images-handle.png) left top no-repeat transparent;
}

.slider-title {
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
    width: 72%;
}

.spinnerless-slider-min-title {
    padding-top: 5px;
    padding-bottom: 5px;
    float: left;
    max-width: 40%;
}

.spinnerless-slider-max-title {
    padding-top: 5px;
    padding-bottom: 5px;
    float: right;
    max-width: 40%;
}

.slider-spinner {
    float:right;
    width: 15%;
}


.slider-disabled .slider-title {
    color: #999;
}

.slider-disabled .slider-bar {
    opacity: 1;
}

.slider-disabled .slider-bar .ui-slider-handle {
    background: url(/ui/images/slider-images-handle-gray.png) left top no-repeat transparent;
}

div.button {
    border: 1px solid black;
    padding: 1px 3px;
    display: inline;
    cursor: pointer;
}

table.largeMargin {
    margin-bottom: 72px;
}

table.smallMargin {
    margin-bottom: 25px;
}
.box_rotate_270 {
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    vertical-align: bottom;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

.halfflow {
    width:48%;
    float:left;
    margin:10px;
    margin-left:10px;
    margin-right:0px;
    background-color: default;
}

.halfflowok {
    width:48%;
    float:left;
    margin:10px;
    margin-left:10px;
    margin-right:0px;
    background-color: default;
    border: 2px solid black;
}

.multicast-changed {
    border: 2px solid blue;
}

.halftitle {
    position: relative;
    padding-left: 30px;
    margin: -1.75ex 0 7px 0;
    width: auto;
}

.halfflowok .halftitle h2 {
    display: inline;
    position: relative;
    padding: 0 3px;
    background-color: #fff;
}

.multicastinput {
    padding-left: 4px;
    padding-right: 4px;
}

.multicast-input-label {
    padding-left: 5px;
    padding-right: 10px;
}

.non-draggable-image {
    -webkit-user-drag: none;
}