/*
    Copyright (c) 2009-2012 A&H Software House, Inc. All Rights Reserved.
*/

html
{
    height:100%
}

body
{
    font-family:Arial;
    font-size:12px;
    position:relative;
    height: inherit;
    color:#fff;
    height:interhit;
    min-width:980px;
    background:#262626;
    overflow-x:hidden;
}

.clear { clear:both; }

p { line-height:140%; margin-top:20px; }
a { text-decoration:none; color:#99ccff; }
a:hover { text-decoration:underline; }

h1 { font-size:14px; font-weight:bold; text-transform:uppercase; }
h2 { font-size:14px; font-weight:normal; }
h3 { font-size:18px; }
h4 { font-size:14px; }

.fullscreen .navigation { left:-231px; }
.fullscreen .content { margin-left:69px; }
.fullscreen .content .container { width:100%; overflow:auto; }

.button { background:url(/images/ng/buttons.png) no-repeat; height: 21px; line-height:21px; float:left; font-size:12px; font-weight:bold; cursor:pointer; }
.button span { background:url(/images/ng/buttons.png) 100% -44px no-repeat; height: 21px; line-height:21px; float:left;}
.button span span { margin-left:17px; margin-right:17px; background-position:0px -22px; background-repeat:repeat-x; color:#333333; }
.button:hover { text-decoration:none; background-position: 0px -66px; }
.button:hover span { background-position: 100% -110px; }
.button:hover span span { text-decoration:none; background-position: 0px -88px; }

.button.cancel { background-position:0px -132px; }
.button.cancel span { background-position:100% -176px; }
.button.cancel span span { margin-left:11px; margin-right:11px; background-position:0px -154px; color:#cccccc; }
.button.cancel:hover { background-position: 0px -198px; }
.button.cancel:hover span { background-position: 100% -242px; }
.button.cancel:hover span span { text-decoration:none; background-position: 0px -220px; }

.navigation { background:#111010; width:300px; position:fixed; z-index:10; left:0px; bottom:0px; top:0px; height:100%; }
.navigation h2 { width:180px; }
.navigation h2 a { color:#ffffff; }
.navigation h2 a:hover { text-decoration:none; }

.navigation .ui-about
{
    width:172px;
    position:absolute;
    color:#999;
    left:33px;
    bottom:0px;
    padding-bottom:35px;
    line-height:130%;
    background-image:url(/images/ng/about.png) 0 10px no-repeat;
    background-color:#111010;
    padding-left:25px;
    padding-top:10px;
    cursor:default;
}

.navigation .ui-about h4
{
    font-size:12px;
}

.navigation .layout-control { float:right; width:69px; height:100%; border-left:1px solid #262626; }
.navigation .layout-control li { border-bottom:1px solid #262626; text-align:center; line-height:130%; }
.navigation .layout-control li.first { border-top:1px solid #262626; margin-top:90px; }
.navigation .layout-control li a { color:#999; display:block; padding: 10px 0 }
.navigation .layout-control li .disabled { color:#3a3939; cursor:default; }
.navigation .layout-control li a:hover { background-color:#262626; text-decoration:none; }
.navigation .layout-control li.current a { background-color:#262626; }
.navigation .layout-control li.last { margin-top:80px; border-top:1px solid #262626; }
.navigation .layout-control li.last-pan { margin-top:45px; border-top:1px solid #262626; }
.navigation .layout-control .layout { padding:20px 0; }
.navigation .layout-control .favorite {  padding:0; height:60px; position:relative; }
.navigation .layout-control .favorite span { width:16px; position: absolute; top:50%; margin-top:-8px; left:50%; margin-left:-8px; height:16px; background:url(/images/ng/controls-fav.png) 0 0 no-repeat; }
.navigation .layout-control .favorite span.selected { background-position:0 -16px; }
.navigation .layout-control .favorite span.selected:hover { background-position:0 -48px; }

.navigation .left { margin-top:50px; padding-left:33px; float:left; width:160px; line-height:130%; }
.navigation h2 { margin-bottom:43px; }
.navigation .list { display:none; padding-left:27px; }
.navigation .list li { line-height:130%; margin-top:4px; }
.navigation .list .back { position:relative; margin-bottom:20px; text-transform:uppercase; color:#ccc; font-weight:bold; line-height:150%; }
.navigation .list .back a { position:absolute; width:20px; height:12px; background:#ccc; left:-27px; top:1px; background:url(/images/ng/back.png) 0 50% no-repeat; }
.navigation .list .comment { font-size:12px; text-transform:none; font-weight:normal; }
.navigation .list.cameras .jscrollpane { height:300px; overflow:auto;  }
.navigation .list.cameras { height:0px; overflow:hidden; position:relative;}
.navigation .list.cameras ul li { border-top:1px solid #424141; width:90px; padding-top:15px; padding-bottom:10px; }
.navigation .list.cameras ul li.first { border:none; padding-top:0; }
.navigation .list.cameras ul a { display:block; }
.navigation .list.cameras ul img { margin-bottom:5px; width:89px; height:71px; }
.navigation .list.templates .current a { color:#6a93af; }
.navigation .list.templates li { position:relative; }
.navigation .list.templates .fav { position:absolute; width:16px; height:16px; right:20px; top:-1px; background:url(/images/ng/controls-fav.png) 0 0 no-repeat; }
.navigation .list.templates .fav:hover { background-position:0 -32px; }
.navigation .list.templates .fav.selected { background-position:0 -16px; }
.navigation .list.templates .fav.selected:hover { background-position:0 -48px; }
.navigation .list.templates .del { position:absolute; width:15px; height:15px; right:-5px; top:0px; background:url(/images/ng/controls-del.png) no-repeat; }
.navigation .list.templates .del:hover { background-position:0 -15px; }
.navigation  .menu { }
.navigation  .menu li { margin-top:3px; }
.navigation  .menu li.first { margin-top:0; }
.navigation  .menu li.separate { margin-top:15px; }
.navigation  .menu a { text-transform:uppercase; font-size:12px; font-weight:bold; }
.navigation  .menu a:hover { color:#6a93af; text-decoration:none; }
.navigation .settings { border-top:1px solid #403f3f; margin-top:30px; padding-top:30px; padding-left:27px; border:1px solid transparent; background:url(/images/ng/settings.png) 0 27px no-repeat; }
.navigation .settings h3 { color:#999; font-size:12px; line-height:130%; margin-bottom:2px; cursor:default; }

.navigation .settings .dropdown { float:left; margin-left:20px; margin-top:3px; position: relative; z-index:1; text-transform:uppercase; }
.navigation .settings .dropdown .current { cursor: pointer; height: 21px; line-height: 21px; background: url(/images/ng/dropdown.png); width: 38px; display: block; padding-left:7px; font-size:10px; color:#999999; text-transform:uppercase; }
.navigation .settings .dropdown .current:hover { text-decoration:none; }
.navigation .settings .dropdown .drop {position: absolute; background: url(/images/ng/dropdown.png) bottom no-repeat; padding-bottom: 5px; top: 17px; display: none; width: 45px;}
.navigation .settings .dropdown .drop ul { background: #fff;
padding: 3px 0 0; border-left:1px solid #ccc; border-right:1px solid #ccc;}
.navigation .settings .dropdown .drop a{ padding-top:4px; padding-bottom:4px; display:block; padding-left:7px; color:#999; font-size:10px; }

.content { background:#262626; height:100%; margin-left:300px; padding-left:43px; padding-right:43px;  }
.content .container { width:100%; min-width:627px; }
.content .header { height:90px; border-bottom:1px solid #373737; }
.content .header h1 { margin-top:60px; float:left; cursor:default; }
.content .header .right { margin-top:48px; float:right; width:50%; }
.content .header .search { float:left; }
.content .header .search input { border:1px solid #3c3c3c; height:28px; line-height:28px; border-radius:1px; padding-left:33px; color:#999; background:url(/images/ng/search.png) 5px 8px no-repeat #333333; padding-right:10px; width:250px; }
.content .header .logout { float:right; }
.content .header .logout a { display:block; margin-top:10px; height:16px; width:16px; background:url(/images/ng/logout.png) no-repeat; }

.ui-options-pane { position:absolute; display:none; height:100%; left:230px; width:300px; overflow:hidden; }
.ui-options-pane .container { background:#2e2e2e; height:100%; width:300px; margin-left:-300px; border-bottom:1px solid red; }
.ui-options-pane .container .box { padding:50px 28px;}
.ui-options-pane h2 { text-transform:uppercase; font-size:14px; font-weight:bold; margin-bottom:5px; }
.ui-options-pane .controls { border-top:1px solid #403f3f; padding-top:30px; margin-top:134px; }
.ui-options-pane .controls .cancel { margin-left:11px; }
.ui-options-pane .position { position:absolute; z-index:1; right:-10px; top:-8px; }

.ui-options-pane .dropdown ul { position:absolute; right:-113px; top:0px; width:108px; }
.ui-options-pane .dropdown { margin-top:22px; position:relative; }
.ui-options-pane .dropdown .current { cursor: pointer; height: 30px; line-height: 30px; background: url(/images/ng/dropdown.png); width: 103px; display: block; padding-left:7px; font-size:12px; color:#999999; }
.ui-options-pane .dropdown .current:hover { text-decoration:none; }
.ui-options-pane .dropdown .drop {position: absolute; background: url(/images/ng/dropdown.png) bottom no-repeat; padding-bottom: 5px; top: 24px; display: none; width: 110px;}
.ui-options-pane .dropdown .drop ul { background: #474747; position:static; padding: 3px 0 0; right:auto; border-left:1px solid #676767; border-right:1px solid #676767;}
.ui-options-pane .dropdown .drop a{ padding-top:4px; padding-bottom:4px; display:block; padding-left:7px; color:#999; font-size:12px; }

.content .wrapper { min-width:627px; padding-bottom:30px; }

.grid { cursor:default; }

.back { cursor:default; }

.grid .image
{
    display: inline-block;
    width: inherit;
}

/*.image:empty
{
    visibility:hidden !important;
}*/

.grid .block .image .imholder
{
    height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
}

.grid .block .image .imholder .canvas
{
    margin:0;
    position: relative;
    /*border:1px solid red;*/
    width: inherit;
    height: inherit;
}

/* Narrow canvas */
.grid .block .image .imholder .canvas
{
    width: 100%;
    height: auto;
}

/* Wide canvas */
.grid.wide .block .image .imholder .canvas
{
    width: auto;
    height: 100%;
}

.grid .block .image { text-align:center; margin-top:5px; position:relative; }

.grid .block { float:left; margin-bottom:10px; color:#cccccc; overflow:hidden; }
.grid .image .control { display:none; }
.grid .image:hover .control { display:block; }
.grid .image.error .message { position:absolute; color:#fff; background:url(/images/ng/image-error.png) no-repeat; padding-left:25px; text-align: left; height:30px; top:50%; margin-top:-15px; width:190px; left:50%; margin-left:-90px; }
.grid .image.error .message div { font-weight:bold; font-size:14px; text-transform:uppercase; margin-top:2px; }
.grid .image.error .message p { margin:0; }

.grid .block h3 { font-size:14px; }
.grid .block p { margin:0px; font-size:12px; margin-top:2px; }
.grid .block .box{ width:350px; margin-top:30px; width:704px; }
.grid .block.even .box { }
.grid .image { background:#000; }
.grid-box { float:left; }

.grid.view .image { position:relative; z-index:1;}
.grid.view .controls { background:#2f2f2f; border-top:1px solid #373737; padding:25px 20px; margin-top:20px; position:relative; z-index:3; }
.grid.view .controls .timer { position:absolute; left:50%; font-size:24px; font-weight:bold; color:#fff; margin-top:-5px; width:70px; margin-left:-30px; text-align:center; }
.grid.view .controls.times { padding:25px 60px; }
.grid.view .left { float:left; }
.grid.view .controls.times .left a { margin-right:10px; }
.grid.view .controls.times .right a { margin-left:10px; }
.grid.view .right { float:right; }

.grid.view .image .control span { position:absolute; width:53px; height:52px; background:url(/images/ng/controls.png) no-repeat; z-index: 10; }
.grid.view .image span.zoom-in { right: 50%; top:50%; margin-top:-26px; margin-right:1px; background-position:0 0; }
.grid.view .image span.zoom-out { left: 50%; top:50%; margin-top:-26px; margin-left:1px; background-position:-104px 0; }
.grid.view .image span.up { left: 50%; margin-left:-26px; top:9px; background-position:-52px 0; }
.grid.view .image span.right { top: 50%; margin-top:-26px; right:9px; background-position:-104px -52px; }
.grid.view .image span.down { left:50%; margin-left:-26px; bottom:9px; background-position:-52px -52px; }
.grid.view .image span.left { top: 50%; margin-top:-26px; left:9px; background-position:0 -52px; }
.grid.view .image span.play { top:50%; left:50%; margin-left:-26px; margin-top:-26px; background-position:-156px 0;  }
.grid.view .image span.pause { top:50%; left:50%; margin-left:-26px; margin-top:-26px; background-position:-156px -52px; }
.grid.view .nav { position:relative; z-index:4; padding-left:43px;  }
.grid.view .nav .back { position:absolute; background:url(/images/ng/back.png) no-repeat; width:20px; height:12px; left:0px; top:3px; }
.grid.view .date { float:right; margin-left:40px; position:relative; z-index:10; }
.grid.view .server { float:right; }

.calendar { display:none; position:absolute; z-index:999; right:0px; background:#000; padding:10px; padding-top:37px; top:20px; }
.calendar .heading { width:109px; position:absolute; top:12px; left:50%; margin-left:-54px; text-align:center; font-weight:bold; color:#fff; text-transform:uppercase; margin-bottom:15px;}
.calendar .heading a { position:absolute; width:15px; height:15px; }
.calendar .heading a.prev { left:-15px; background:url(/images/ng/date-prev.png) center no-repeat; }
.calendar .heading a.next { right:-15px; background:url(/images/ng/date-next.png) center no-repeat; }
.calendar table a { display:block; color:#ccc; width:40px; height:32px; line-height:32px; vertical-align:middle; text-align:center; }
.calendar table a:hover { text-decoration:none; background:#222; }
.calendar table th { color:#666; border-top: 1px solid #363636; font-weight:normal; border-bottom:1px solid #363636; height:25px; line-height:25px; vertical-align:middle; }
.calendar table .current a { background: #333333; font-weight:bold; }

.selectable { position:relative; z-index:3; padding-right:140px; float:left; margin-right:40px; }
.selectable .list { cursor:pointer; position:absolute; z-index:3; top:-8px; right:0px; border:1px solid #3c3c3c; width:130px; background:url(/images/ng/selectable.png) 93% 11px no-repeat #333333; }
.selectable .list li { display:none; }
.selectable .list a { color:#999999; display:block; padding:7px 5px; cursor:pointer;  }
.selectable .list a span { display:block; margin-right:20px; overflow:hidden; white-space:nowrap; }
.selectable .list a:hover { text-decoration:none; background:#444; }
.selectable .list .title { display:block; }
.selectable .list .title a:hover { background:none !important; }
.selectable .list .current a { color:white; }

.menu { margin-top:30px; position:relative;  }

.menu .select-grid { padding:12px; display:none; position:absolute; left:50px; top:10px; background:#373737; z-index:2;  }
.menu .select-grid .title { float:left; }
.menu .select-grid .counter { float:right; }
.menu .select-grid .selections { width:80px; height:80px; margin-top:10px; background:url(/images/ng/grid-cell.png); }
.menu .select-grid .selections:active { cursor:default; }
.menu .select-grid .selections .selected { background:url(/images/ng/grid-selected.png); }

#login { height:100%; width:100%; background:#333; }
#login  td { vertical-align:middle; }
#login .login { width:480px; margin:auto; background:#FFFFFF; }
#login .login .header { font-size:18px; color:#333; background:none !important; }
#login .login .text { border:1px solid #bfbebe; width:367px; height:39px; line-height:39px; vertical-align:middle; margin-top:20px; font-size:14px; color:#999999; padding:0 10px 0 10px }
#login .login form { padding:45px; }
#login .login .remember { margin-top:25px; padding-left:25px; position:relative; color:#4c4c4c; float:left; line-height:130%; }
#login .login .remember input { position:absolute; left:0px; top:-2px; }
#login .login .submit { float:right; margin-top: 25px; }
#login .login .submit a { background:url(/images/ng/login-submit.png) no-repeat; font-weight:bold; color:#fff; display:block; width:108px; height:30px; text-align:center; line-height:27px; vertical-align:middle; }
#login .login .submit a:hover { text-decoration:none; }

/*
    Dark Theme (default design)
*/
.dark-theme { background:#262626; }

/*
    White Theme
*/
.white-theme { background:#f8f7f7; }
.white-theme .content { background:#f8f7f7; color:#333; }
.white-theme .content a { color:#0066cc; }
.white-theme .content .header { border-color:#e4e3e3; }
.white-theme .grid .block { color:#333;}
.white-theme .grid .block p { color:#666; }
.white-theme .grid.view .controls { background:#e4e3e3; border-color:#cccccc; }
.white-theme .grid.view .controls .timer { color:#333;}
.white-theme .navigation .layout-control { background-color:#ffffff; border-right:1px solid #f1efef; }
.white-theme .navigation .layout-control li { border-color:#f1efef; }
.white-theme .navigation .layout-control li a.disabled { color:#e0e0e0; cursor:default; }
.white-theme .navigation .layout-control li.current a { background-color:#f1f0f0; }
.white-theme .navigation .layout-control li a:hover { background-color:#f1f0f0; }
.white-theme .content .header .search input { border-color:#e4e3e3; background-color:#ffffff; }
.white-theme .selectable .list { background-color:#ffffff; border-color:#cccccc; background-image:url(/images/ng/selectable-white.png); }
.white-theme .selectable .list a { color:#666666; }
.white-theme .selectable .list a:hover { background-color:#ccc; }
.white-theme .calendar { background:#ffffff; }
.white-theme .calendar table th { border-color:#f1efef; color:#999999; }
.white-theme .calendar .heading { color:#333; }
.white-theme .calendar table a { color: #666; }
.white-theme .calendar table a:hover { background:#f2f2f2; }
.white-theme .calendar table .current a { background:#e4e4e4; }
.white-theme .ui-autocomplete .ui-menu-item .ui-corner-all { padding-left:30px; }
.white-theme .ui-widget-content { background-color:#ffffff; border-color:#ffffff; }

#mycustomscroll { height: 260px; }

/*
    HUD
*/
.ui-hud-box
{
    position:absolute;
    left: 30%; right: auto;
    top:10px;
    width: 40%;
    z-index:101;
    display:none;

    cursor: pointer;
    padding: 4px 72px;
    text-align:center;

    font-size:12px;
    font-family:Verdana;
    color: #000000;
    background: #FFFFFF;
}

.ui-hud-box.info
{
    color: #000000;
    background: #F2EEAB;
}

.ui-hud-box.error
{
    color: #FFCC00;
    background: #CC0033;
}

/*
    Misc tweaks
*/
.ui-region
{
    word-wrap: break-word;
}

.header
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list.templates ul li a.name
{
    width: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-fs-back
{
    display: inline-block;
    position: absolute;
    z-index: 99;
    top: 16px;
    left: 16px;
    font-size: 1.0em;
    text-decoration-line: underline;
    visibility: visible;
}

.ui-fs-back:hover
{
    display: inline-block;
    visibility: visible;
}

.ui-archive-date
{
    width: 64px;
    min-width: 64px;
}

/*
    Debug
*/
img:not([width]):not([height])
{
    /*border: 1px solid red !important;*/
}

div:empty
{
    /*border: 1px solid red !important;*/
}