﻿HTML,
BODY {
  height: 100%;
}
BODY {
  padding: 0px;
  border: 0px;
  margin: 0px;
  overflow-y: scroll;
  font-family: Arial, sans-serif;
  background-color: #f6f6f6;
}
A {
  text-decoration: none;
  display: inline-block;
  color: inherit;
}
A * {
  border: none;
}
.container {
  position: relative;
  min-height: 100%;
}
div.public {
  text-align: center;
}
div.public A {
  text-decoration: none;
}
LABEL {
  font-family: Arial;
  display: block;
}
input[type=text] {
  font-family: Arial;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.checkbox {
  display: inline;
}
.formRow {
  margin: 10px;
  display: block;
}
.highlight-box {
  color: black;
  background-color: white;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: #888888 0 1px 1px;
  -moz-box-shadow: #888888 0 1px 1px;
  box-shadow: #888888 0 1px 1px;
  padding: 3px;
  display: inline-block;
  text-align: center;
  background-image: -moz-linear-gradient(top, white 0%, white 80%, #f6f6f6 100%);
  background-image: -webkit-linear-gradient(top, white 0%, white 80%, #f6f6f6 100%);
}
.highlight-box.hidden {
  display: none;
}
.button,
input[type="button"],
input[type="submit"] {
  border: 1px solid #e6e6e6;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 8px;
  /*text-shadow: 0.0em -0.1em rgb(97,97,97); /*dark above*/
  -webkit-text-shadow: 0em 0.1em #fafafa;
  text-shadow: 0em 0.1em #fafafa;
  /*light below*/
  font-weight: bold;
  color: #999999;
  font-family: Arial;
  text-align: center;
  font-size: 1.1em;
  background-color: white;
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 80%, #e6e6e6 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
  /* for IE */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
  /* for webkit browsers */
  margin-left: 3px;
  margin-right: 3px;
}
.button.small,
input[type="button"].small,
input[type="submit"].small {
  width: 100px;
}
.button.wide,
input[type="button"].wide,
input[type="submit"].wide {
  width: 200px;
}
.button.sel,
input[type="button"].sel,
input[type="submit"].sel {
  background-color: #0188ce;
  border-color: #0199fb;
  -webkit-text-shadow: 0em 0.1em #0c7ab4;
  text-shadow: 0em 0.1em #0c7ab4;
  color: white;
  background-image: -moz-linear-gradient(top, #0188ce 0%, #0199fb 20%, #17adfc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0188ce', endColorstr='#17adfe');
  /* for IE */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0088cc), to(#11aaff));
  /* for webkit browsers */
}
.container > .header {
  background-image: url("../Images/banner_back.png");
  background-repeat: repeat-x;
  width: 100%;
}
.container > .header.dialog {
  height: 80px;
}
.header > .content,
.body > .content,
.footer > .content {
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.header > .content,
.footer > .content {
  max-width: 1150px;
}
.header {
  color: white;
}
.logo {
  background-image: url("../Images/DigilantLogo.png");
  background-repeat: no-repeat;
  width: 280px;
  height: 170px;
  background-position: center;
}
.logo-specific {
  width: 280px;
  height: 170px;
}
.logo-specific img {
  padding-left: 20px;
  padding-top: 32px;
  width: 80%;
  height: 80%;
}
.login-widget {
  position: absolute;
  top: .3em;
  right: 5px;
  font-weight: bold;
  font-size: .9em;
}
.login-widget img {
  height: 18px;
  width: 18px;
}
.login-widget img.config {
  height: 14px;
  width: 14px;
}
.login-link {
  color: #059deb;
  border-left: solid 2px #535353;
  padding-left: 4px;
  margin-left: 4px;
}
.top-menu {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
.top-menu A {
  font-size: 1.4em;
  font-weight: bold;
  padding: 0px;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 16px;
  text-decoration: inherit;
  color: #059deb;
  -webkit-text-shadow: 0em 0.1em #343434;
  text-shadow: 0em 0.1em #343434;
}
.top-menu A.sel {
  color: white;
  background-image: url("../Images/menu_sel.png");
  background-repeat: no-repeat;
  background-position: center bottom;
}
.search-box {
  display: inline-block;
  margin-left: 29px;
  position: relative;
}
.search-box input[type=search] {
  width: 540px;
  height: 40px;
  margin-top: 5px;
  padding-left: 10px;
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 1em;
  font-family: inherit;
}
.search-box .search-link {
  position: absolute;
  background-image: url("../Images/search_icon.png");
  right: 10px;
  top: 16px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.body {
  background-color: #f6f6f6;
  color: #535353;
  background-image: url("../Images/body_top_grad.png");
  background-repeat: repeat-x;
  background-position: top;
  padding-top: 24px;
  padding-bottom: 99px;
  border-top: 15px solid white;
}
.body .content {
  display: block;
  table-layout: fixed;
}
.split-items {
  display: table;
  margin-left: 30px;
  margin-right: 30px;
  width: 95%;
}
.split-items .left-pane,
.split-items .middle-pane {
  display: table-cell;
}
.split-items .middle-pane {
  vertical-align: top;
  width: 100%;
}
.split-items .middle-pane .top-area {
  height: 70px;
}
.split-items .left-pane {
  width: 255px;
  padding-right: 15px;
}
.split-items .left-pane .button .title-mobile {
  display: none;
}
.split-items .left-pane .search-box {
  margin-left: 0px;
  width: 100%;
}
.split-items .left-pane .search-box input[type=search] {
  width: 90%;
  height: 40px;
  margin-top: 5px;
  padding-left: 10px;
}
.split-items .left-pane.monitor .title-desktop {
  display: inline-block;
}
.split-items .left-pane.monitor .title-moble {
  display: none;
}
.split-items .right-pane {
  display: table-cell;
  vertical-align: top;
}
.sub-nav {
  width: 255px;
  margin-bottom: 12px;
}
.sub-nav .menu-mobile {
  display: none;
}
.sub-nav .button {
  width: 100px;
}
#leftArrowUp {
  background-image: url("../images/left-menu-ref.png");
  width: 41px;
  height: 23px;
  margin-left: 20px;
  width: 215px;
  background-position: left;
  background-repeat: no-repeat;
}
.alert-sel {
  width: 255px;
  height: 100%;
  position: relative;
  text-align: left;
}
.alert-sel .buttons input {
  width: 45%;
}
.top-area {
  position: relative;
}
.top-area .search-box {
  display: block;
  margin-right: 280px;
  margin-left: 29px;
}
.top-area .search-box input[type=search] {
  width: 100%;
  height: 40px;
  margin-top: 5px;
  padding-left: 10px;
}
input[type=search],
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
}
.result-view {
  position: absolute;
  right: 0px;
  top: 0px;
}
.result-view .button {
  height: 32px;
  /*from image height*/
  width: 100px;
  padding-top: 5px;
  padding-bottom: 3px;
}
.result-view .button > img {
  height: 32px;
  width: 32px;
}
.map {
  height: 500px;
}
.camera-listing .camera {
  cursor: pointer;
}
.camera-listing .camera .content {
  margin: 0;
  padding: 8px;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  /* Firefox 4 */
  -webkit-transition: background-color 0.5s;
  /* Safari and Chrome */
  background-color: inherit;
}
.camera-listing .camera .content.highlight {
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  /* Firefox 4 */
  -webkit-transition: background-color 0.5s;
  /* Safari and Chrome */
  background-color: red;
}
div.dataForm {
  text-align: left;
}
div.dataForm div.form-field {
  margin-top: 10px;
  margin-left: 5px;
}
div.dataForm div.form-field label {
  font-weight: normal;
  font-size: larger;
  color: #666;
}
div.dataForm div.form-field .entry {
  width: 100%;
}
div.dataForm div.form-field .entry.select {
  display: inline-block;
  width: auto;
  min-width: 320px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: url('/Images/drop-down-arrow.png') no-repeat right;
  border: 1px solid #999;
  color: #535353;
}
div.dataForm div.form-field .entry.select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  padding: 2px;
  border: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
div.dataForm div.form-field .entry input[type="text"],
div.dataForm div.form-field .entry input[type="textArea"],
div.dataForm div.form-field .entry input[type="select"],
div.dataForm div.form-field .entry input[type="email"],
div.dataForm div.form-field .entry textarea {
  font-size: 1.2em;
  color: #444;
  width: 100%;
}
div.dataForm div.form-field .entry .timerange {
  display: inline-block;
}
div.dataForm div.form-field .entry .timerange select {
  width: 120px;
}
div.dataForm div.form-field .desc {
  color: #BBB;
  font-size: 1em;
  margin-left: 10px;
}
div.dataForm div.form-field .display {
  font-size: larger;
  color: #444;
  margin-left: 10px;
}
div.dataForm div.form-field.Boolean .entry {
  font-weight: bold;
}
div.dataForm div.form-field.Boolean .desc {
  display: inline;
  padding-left: 5px;
}
.actionButton {
  cursor: pointer;
  -webkit-box-shadow: 0 0 2px #004400 inset;
  -moz-box-shadow: 0 0 2px #004400 inset;
  box-shadow: 0 0 2px #004400 inset;
  -webkit-text-shadow: 0 1px 1px #666666;
  text-shadow: 0 1px 1px #666666;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  vertical-align: bottom;
  text-align: center;
  background-image: linear-gradient(bottom, #5ea03d 0%, #89c06e 100%);
  background-image: -o-linear-gradient(bottom, #5ea03d 0%, #89c06e 100%);
  background-image: -moz-linear-gradient(bottom, #5ea03d 0%, #89c06e 100%);
  background-image: -webkit-linear-gradient(bottom, #5ea03d 0%, #89c06e 100%);
  background-image: -ms-linear-gradient(bottom, #5ea03d 0%, #89c06e 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #5ea03d), color-stop(1, #89c06e));
  margin: 1px 3px;
  padding: 5px 1px;
  padding-right: 5px;
}
.actionButton.disabled {
  color: lightgray;
  background-image: linear-gradient(bottom, #666666 0%, #aaaaaa 100%);
  background-image: -o-linear-gradient(bottom, #666666 0%, #aaaaaa 100%);
  background-image: -moz-linear-gradient(bottom, #666666 0%, #aaaaaa 100%);
  background-image: -webkit-linear-gradient(bottom, #666666 0%, #aaaaaa 100%);
  background-image: -ms-linear-gradient(bottom, #666666 0%, #aaaaaa 100%);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #666666), color-stop(1, #aaaaaa));
}
.imageButtons {
  padding: 0;
  margin-top: 5px;
}
.imageButtons img {
  height: 17px;
  padding-right: 5px;
}
.camera {
  width: 255px;
  margin-left: 20px;
  margin-bottom: 20px;
  display: inline-block;
  text-align: left;
  -moz-box-shadow: 1px 2px 2px #888888;
  -webkit-box-shadow: 1px 2px 2px #888888;
  box-shadow: 1px 2px 2px #888888;
  border: 1px solid #D7D3D3;
  padding: 0;
  vertical-align: top;
}
.camera .tabs .tabButton {
  width: 200px;
}
.camera .header {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background: #f5f5f5;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#EAEAEA');
  /* for IE */
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
  color: #535353;
  position: relative;
  -moz-box-shadow: 0 1px 2px #888888;
  -webkit-box-shadow: 0 1px 2px #888888;
  box-shadow: 0 1px 2px #888888;
  padding: 7px;
}
.camera .header .caption {
  padding-right: 55px;
  font-weight: bold;
  font-size: 1.1em;
}
.camera .header .coord,
.camera .header .received {
  font-family: 'Times New Roman';
  display: inline-block;
  color: #767676;
  font-style: italic;
  font-size: .8em;
}
.camera .header .coord.north,
.camera .header .received.north {
  border-right: solid 1px #767676;
  margin-right: 2px;
  padding-right: 10px;
}
.camera .header .battery,
.camera .header .signal {
  position: absolute;
  top: 6px;
  display: block;
  text-align: center;
}
.camera .header .battery p,
.camera .header .signal p {
  margin: 0;
  padding: 0;
  font-size: .7em;
}
.camera .header .signal {
  right: 38px;
}
.camera .header .battery {
  right: 8px;
}
.camera .header.compact .caption {
  padding-right: 55px;
  font-weight: bold;
  font-size: .9em;
}
.camera .content {
  margin: 8px;
  display: block;
}
.camera .imageSection {
  display: table-cell;
}
.camera .stat {
  padding-left: 32px;
  background-position: left center;
  background-repeat: no-repeat;
  border-bottom: solid 1px #f2f2f2;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #535353;
  font-size: .75em;
}
.camera .stat:last-child {
  border-bottom: inherit;
}
.camera .stat.good {
  background-image: url("../Images/tick.png");
}
.camera .stat.bad {
  background-image: url("../Images/cross.png");
}
NAV.tabs {
  display: block;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 10px;
  z-index: 100;
}
.camera-event {
  width: 100%;
  margin-left: 15px;
  margin-bottom: 15px;
  color: black;
  display: block;
  text-align: center;
  background-image: none;
}
.camera-event .tabs .button {
  width: 150px;
}
.camera-event > .content {
  -moz-box-shadow: #CCCCCC 0 0 10px inset;
  -webkit-box-shadow: #CCCCCC 0 0 10px inset;
  box-shadow: #CCCCCC 0 0 10px inset;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-top: 0px;
  padding: 12px;
  color: #535353;
}
.camera-event > .content * {
  vertical-align: top;
}
.camera-event > .content .info {
  display: table-cell;
  padding-left: 15px;
}
.camera-event > .content H4 {
  font-size: 1.1em;
  font-weight: bold;
  padding-bottom: .2em;
  margin-top: inherit;
  margin-bottom: inherit;
}
.camera-event > .content H5 {
  margin-top: .8em;
  margin-bottom: .1em;
}
.camera-event > .content .button.submit {
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.camera-event .header,
.camera-event .content {
  text-align: left;
}
.node-detail {
  margin-left: 0px;
  margin-top: 40px;
  margin-bottom: 15px;
  color: black;
  display: block;
  text-align: center;
  background-image: none;
  width: 650px;
}
.node-detail.edit-user {
  margin-top: 0px;
}
.node-detail.edit-user .permissions {
  text-align: center;
}
.node-detail.edit-user .permissions .role-group {
  display: inline-block;
  vertical-align: top;
  padding-right: 20px;
}
.node-detail.edit-user .permissions .role-group .role {
  text-align: left;
  font-size: larger;
}
.node-detail.edit-user .permissions .role-group .role span {
  width: 20em;
}
.node-detail.edit-user .permissions .role-group .role input {
  width: 2em;
}
.node-detail.all-users {
  margin-top: 0px;
  text-align: left;
}
.node-detail.all-users .user {
  display: block;
  border-bottom: solid 1px;
  padding-top: .5em;
}
.node-detail.all-users .user h3 {
  display: inline-block;
  vertical-align: top;
  margin: 0 1em;
  min-width: 10em;
}
.node-detail.all-users .user .roles {
  display: inline-block;
}
.node-detail.all-users .user .roles * {
  font-weight: lighter;
  font-size: small;
}
.node-detail.all-users .user .actions {
  display: inline-block;
  float: right;
}
.node-detail.all-users .addUser {
  padding-top: 5px;
}
.node-detail .header {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  background: #f5f5f5;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#EAEAEA');
  /* for IE */
  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
  color: #535353;
  position: relative;
  -moz-box-shadow: 0 1px 2px #888888;
  -webkit-box-shadow: 0 1px 2px #888888;
  box-shadow: 0 1px 2px #888888;
  padding: 7px;
  padding-right: 55px;
  font-weight: bold;
  font-size: 1.1em;
  text-align: left;
}
.node-detail .header .caption {
  padding-right: 55px;
  font-weight: bold;
  font-size: 1.1em;
}
.node-detail .tabs .tabButton {
  width: 110px;
}
.node-detail .content section {
  display: none;
  min-height: 400px;
}
.node-detail .content.dataForm {
  width: 620px;
}
.node-detail .action {
  text-align: right;
  width: 100%;
}
#imageList {
  padding-top: 10px;
}
#imageList a span {
  display: block;
  text-align: center;
  color: #535353;
  font-size: .75em;
}
#cameraDetailedCaption {
  font-style: italic;
  font-size: .8em;
  font-family: Georgia serif;
}
#fullScreen > .vital {
  white-space: nowrap;
  display: inline-block;
  padding-right: 20px;
  margin-top: 10px;
  vertical-align: top;
}
#fullScreen > .imageButtons {
  display: inline-block;
}
#fullScreen > .main {
  display: block;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}
#seeAllImages {
  display: block;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}
#ResolutionText {
  font-style: italic;
  line-height: 1.5em;
  font-size: .8em;
  color: inherit;
  font-family: inherit;
  width: 300px;
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 5px;
  -moz-box-shadow: #EEEEEE 0 0 4px inset;
  -webkit-box-shadow: #EEEEEE 0 0 4px inset;
  box-shadow: #EEEEEE 0 0 4px inset;
}
#mainImage {
  width: 400px;
  min-height: 240px;
  display: table-cell;
}
.large-camera-image {
  width: 400px;
  display: block;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
.small-camera-image {
  width: 120px;
  height: auto;
  display: block;
  float: left;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.dialog {
  display: none;
}
.res-image {
  width: 240px;
  height: auto;
  display: block;
  border-image-repeat: round;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
.node-sel,
.node-sel-monitor {
  width: 255px;
  position: relative;
  text-align: left;
}
.node-sel .dir-name,
.node-sel-monitor .dir-name {
  display: none;
}
.node-sel .item,
.node-sel-monitor .item {
  color: black;
  font-weight: bold;
  font-size: .8em;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
.node-sel .item > .icon,
.node-sel-monitor .item > .icon {
  display: inline-block;
  width: 7px;
  height: 11px;
  padding-left: 5px;
  background-repeat: no-repeat;
}
.node-sel .node > .item .icon,
.node-sel-monitor .node > .item .icon {
  background-image: url("../Images/tvw_unsel.png");
}
.node-sel .node.sel > .item .icon,
.node-sel-monitor .node.sel > .item .icon {
  background-image: url("../Images/tvw_sel.png");
}
.node-sel .node.expanded > .item .icon,
.node-sel-monitor .node.expanded > .item .icon {
  background-image: url("../Images/tvw_unsel_exp.png");
}
.node-sel .node.sel.expanded > .item .icon,
.node-sel-monitor .node.sel.expanded > .item .icon {
  background-image: url("../Images/tvw_sel_exp.png");
}
.node-sel .node.Camera > .item,
.node-sel-monitor .node.Camera > .item {
  font-style: italic;
  font-weight: bolder;
}
.node-sel .node.Camera > .item .icon,
.node-sel-monitor .node.Camera > .item .icon {
  font-style: italic;
  background-image: url("../Images/tvw_cam.png");
}
.node-sel .node.Camera.sel > .item .icon,
.node-sel-monitor .node.Camera.sel > .item .icon {
  background-image: url("../Images/tvw_camsel.png");
}
.node-sel .sel > .item,
.node-sel-monitor .sel > .item {
  background-color: #19affe;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19AFFE', endColorstr='#039AE9');
  /* for IE */
  background-image: -moz-linear-gradient(top, #19affe 0%, #039ae9 100%);
  background-image: -webkit-linear-gradient(top, #19affe 0%, #039ae9 100%);
  color: white;
  -webkit-text-shadow: 0em 0.15em #0c7ab4;
  text-shadow: 0em 0.15em #0c7ab4;
}
.node-sel .node > ul,
.node-sel-monitor .node > ul {
  padding-left: 12px;
  /*-webkit-box-shadow: none;
        box-shadow: none;
        background-image: url("../Images/blue-dot.png");
        background-repeat: repeat-y;
        background-position-x: 15px;
        background-position-y: 15px;*/
  display: none;
}
.node-sel .node.expanded > ul,
.node-sel-monitor .node.expanded > ul {
  display: block;
}
.node-sel ul,
.node-sel-monitor ul {
  padding: 3px;
  margin: inherit;
  list-style-type: none;
}
.node-sel li ul,
.node-sel-monitor li ul {
  -moz-box-shadow: #e4e4e4 0 0 10px inset;
  -webkit-box-shadow: #e4e4e4 0 0 10px inset;
  box-shadow: #e4e4e4 0 0 10px inset;
}
.footer {
  background-image: url("../Images/footer_back.png");
  background-repeat: repeat-x;
  height: 99px;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.footer .middle {
  text-align: center;
  color: #858585;
  font-size: .8em;
  font-weight: bold;
  padding-top: 42px;
}
.footer .middle IMG {
  vertical-align: middle;
}
#alertNodesView {
  max-height: 450px;
  overflow: auto;
  min-height: 50px;
}
.alert {
  display: block;
  border: solid 1px #CCCCCC;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 4px;
  margin: 4px;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  /* Firefox 4 */
  -webkit-transition: background-color 0.5s;
  /* Safari and Chrome */
  background-color: inherit;
}
.alert.highlight {
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  /* Firefox 4 */
  -webkit-transition: background-color 0.5s;
  /* Safari and Chrome */
  background-color: red;
}
#alertNodesView .empty-ticker {
  padding-top: 1em;
  color: #888888;
  font-style: italic;
  text-align: center;
}
#alertNodesView IMG {
  display: inline-block;
}
#alertNodesView H6 {
  -ms-text-overflow: clip;
  -o-text-overflow: clip;
  text-overflow: clip;
  font-size: small;
  margin-top: .1em;
  margin-bottom: .3em;
}
#alertNodesView .ticker {
  float: right;
}
.alertCount {
  background-color: #CC0000;
  border: 2px solid white;
  -moz-border-radius: 9px;
  -webkit-border-radius: 9px;
  border-radius: 9px;
  -moz-box-shadow: 0 1px 2px #444444;
  -webkit-box-shadow: 0 1px 2px #444444;
  box-shadow: 0 1px 2px #444444;
  color: white;
  font-size: 0.6em;
  padding-left: 5px;
  padding-right: 5px;
  -webkit-text-shadow: 0.0em 0.1em #444444;
  text-shadow: 0.0em 0.1em #444444;
  vertical-align: 2px;
  margin-left: 5px;
}
.alertCount.no-alert {
  display: none;
}
#cameraEventArrowUp {
  background-image: url("../images/inner-shadow-callout.png");
  height: 14px;
  width: 100%;
  background-position: 255px;
  background-repeat: no-repeat;
}
section.passwordForm {
  display: inline-block;
  text-align: left;
}
section.passwordForm input.email {
  width: 20em;
  margin-right: 1em;
}
section.passwordForm a {
  text-decoration: underline;
  font-size: 0.9em;
}
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
  background-color: #ffffff;
  border: solid 1px #888888;
  font-size: 1.2em;
  font-weight: normal;
  -moz-box-shadow: #CCCCCC 0 0 3px inset;
  -webkit-box-shadow: #CCCCCC 0 0 3px inset;
  box-shadow: #CCCCCC 0 0 3px inset;
  padding-left: 5px;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  -moz-box-shadow: #0c9eca 0 0 4px;
  -webkit-box-shadow: #0c9eca 0 0 4px;
  box-shadow: #0c9eca 0 0 4px;
  outline: none;
  /*prevent browsers like chrome highlighting, as we're already doing it manually.*/
}
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  color: #CCCCCC;
  font-style: italic;
}
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  color: #CCCCCC;
  font-style: italic;
}
input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
textarea:-moz-placeholder,
select:-moz-placeholder {
  color: #CCCCCC;
  font-style: italic;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
textarea[disabled],
select[disabled] {
  background-color: #EEEEEE;
}
input[readonly] {
  background-color: #EEEEEE;
}
.datetime {
  background: url('/Images/blue-dropdown.png') no-repeat 98% white;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  background: url('/Images/blue-dropdown.png') no-repeat 98% white;
}
select.multi {
  background: none;
}
select.multi option {
  background: red;
}
select.multi option[selected] {
  background: blue;
}
div#map {
  width: auto;
}
div#map div.camera {
  margin: 5px;
}
div.event {
  position: relative;
}
div.event input[type=checkbox] {
  position: absolute;
  left: 10px;
  top: 12px;
}
div.event a.alert {
  display: inline-block;
  margin-left: 2px;
  width: 215px;
}
div.event div.serial,
div.event div.name {
  text-align: right;
  font-size: 0.9em;
  margin: 5px 0;
}
div.event div.serial {
  margin-top: 25px;
}
div.event div.ticker {
  margin-left: 5px;
}
#dataGraphs .graph-box {
  background-color: #EDEDED;
  -webkit-box-shadow: #888888 0 0 7px inset;
  -moz-box-shadow: #888888 0 0 7px inset;
  box-shadow: #888888 0 0 7px inset;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 60px;
  position: relative;
}
#dataGraphs .graph-box .loading {
  position: absolute;
  top: 0;
  margin: 20px 0 0 20px;
  display: block;
}
#dataGraphs h3 {
  margin: 0 0 8px 0;
}
#dataGraphs canvas {
  display: inline-block;
  margin: 20px 0 0 20px;
}
#dataGraphs input[type="text"],
#dataGraphs input[type="password"],
#dataGraphs input[type="email"],
#dataGraphs textarea,
#dataGraphs select {
  color: #535353;
  font-size: 0.8em;
  border: 1px solid #CCCCCC;
  -webkit-box-shadow: 0 0 2px #CCCCCC inset;
  -moz-box-shadow: 0 0 2px #CCCCCC inset;
  box-shadow: 0 0 2px #CCCCCC inset;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 5px;
  width: 140px;
  margin-top: 7px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#dataGraphs .flot-text {
  margin-top: 20px;
  margin-left: 20px;
}
#dataGraphs .options {
  display: inline-block;
  padding: 20px 30px;
  width: 20%;
}
#dataGraphs .options h5 {
  margin: 0;
}
#dataGraphs .options .dateSelectors {
  padding-top: 10px;
}
#dataGraphs .options .dateSelectors div {
  display: inline-block;
}
#dataGraphs .options .buttons {
  padding: 0;
  margin-top: 30px;
}
#dataGraphs .options .buttons .actionButton {
  width: 100%;
  margin: 3px 0;
}
#dataGraphs .options .buttons img {
  display: inline-block;
  padding-right: 5px;
}
#dataGraphs .key {
  width: 100%;
  max-width: 1100px;
}
#dataGraphs .key .key-item {
  margin: 20px 30px 20px 70px;
  display: inline-block;
  font-size: 0.8em;
}
#dataGraphs .key .key-item .circle {
  width: 8px;
  height: 8px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px #666666 inset;
  -moz-box-shadow: 0 1px 2px #666666 inset;
  box-shadow: 0 1px 2px #666666 inset;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 5px;
}
#dataGraphs .key .key-item .red {
  background-color: #d0614c;
}
#dataGraphs .key .key-item .green {
  background-color: #7ab55d;
}
#dataGraphs .key .key-item .blue {
  background-color: #13aaf8;
}
#dataGraphs .key .right {
  float: right;
}
.RGraph_tooltip {
  z-index: 100000 !important;
}
#dataDiagnostics {
  margin: 10px 15px;
}
#dataDiagnostics .newCommandContainer {
  padding-bottom: 20px;
}
#dataDiagnostics .newCommandContainer textarea {
  max-width: 800px;
  height: 6em;
  width: 100%;
}
#dataDiagnostics .commandHistory {
  display: table;
  background: #f3f3f3;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 15px;
}
#dataDiagnostics .commandHistory .titles {
  display: table-row;
  font-size: 1.1em;
  font-weight: bold;
}
#dataDiagnostics .commandHistory .titles span {
  display: table-cell;
  padding: 5px 10px;
}
#dataDiagnostics .commandHistory .commandItem {
  display: table-row;
  background: #f9f9f9;
}
#dataDiagnostics .commandHistory .commandItem:nth-child(even) {
  background: white;
}
#dataDiagnostics .commandHistory .commandItem > div {
  display: table-cell;
  padding: 5px 10px;
}
#dataDiagnostics .commandHistory .commandItem > div.commandBody {
  max-width: 550px;
}
#dataDiagnostics .commandHistory .commandItem > div .commsLog {
  display: none;
}
#dataDiagnostics .commandHistory .commandItem > div a {
  cursor: pointer;
  color: #059deb;
}
#dataDiagnostics .commandHistory .commandItem > div a:hover {
  color: #0081d1;
}
#commandCommunicationLogDialog {
  padding-top: 1em;
  white-space: pre-wrap;
}
#imageSearchDialog {
  width: 95%;
  min-height: 1000px;
}
#imageSearchDialog #imageSearchResults {
  max-width: 700px;
}
#imageSearchDialog #imageSearchResults a {
  /*display: grid;*/
}
.button-menu .button {
  display: inline-block;
}
.button-menu .menu-compact {
  display: none;
}
.sendEmail {
  width: 600px;
  margin-right: 40px;
}
.sendEmail #emailForm {
  width: 100%;
  padding-bottom: 10px;
}
.sendEmail .actionButton {
  width: 150px;
}
.select-node {
  width: 400px;
  margin-top: 10px;
  min-height: 300px;
}
.select-node .new-node .node-sel {
  width: 100%;
}
.select-node .new-node .node-sel ul {
  padding: 20px;
}
.validation-summary-errors ul {
  list-style-type: none;
  padding-left: 10px;
}
.validation-summary-errors ul li {
  font-weight: bold;
}
.warn {
  color: red;
  font-weight: bolder;
  padding: 10px;
}
.loading {
  display: none;
  z-index: 1;
  background-image: url("/images/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgba(0, 0, 0, 0);
  -moz-transition: background-color linear 1s;
  -o-transition: background-color linear 1s;
  -webkit-transition: background-color linear 1s;
  transition: background-color linear 1s;
}
.loading.active {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}
.no-select {
  border-radius: 10px;
  border: 3px dashed #CCC;
  color: #CCC;
}
.no-select p {
  color: #AAA;
  font-size: 2em;
  text-align: center;
  padding: 100px 0;
}
/* tablet resizes*/
@media only screen and (max-width: 800px) {
  .logo {
    width: 240px;
    height: 100px;
    background-position: center;
  }
  .body {
    border-top: none;
  }
  #dataGraphs canvas {
    margin: 20px 0 0 5px;
  }
  #dataGraphs .flot-text {
    margin: 20px 0 0 5px;
  }
  #dataGraphs .key .key-item {
    margin: 20px 30px 20px 30px;
  }
}
/* phones resizes*/
@media only screen and (max-width: 600px) {
  .button-menu {
    vertical-align: top;
  }
  .button-menu .button {
    display: none;
  }
  .button-menu .button.menu-compact {
    display: inline-block;
    width: 40px;
  }
  .button-menu.open {
    z-index: 1;
  }
  .button-menu.open .button {
    display: inline-block;
  }
  .button-menu.open .button.menu-compact {
    display: none;
  }
  HTML,
  BODY {
    height: auto;
  }
  .body {
    border-top: none;
    padding: 0px;
  }
  .footer {
    display: none;
  }
  .highlight-box {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  .logo {
    background-image: url("../Images/digilant_logo_small.png");
    width: 110px;
    height: 50px;
    background-position: left;
    margin-left: 45px;
  }
  .top-menu {
    background: url("../Images/menu_light.png");
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 5px;
    top: 10px;
  }
  .top-menu A {
    display: none;
  }
  .top-menu.focus {
    display: block;
    background: none;
    width: auto;
    height: auto;
    left: auto;
    top: auto;
    position: relative;
  }
  .top-menu.focus A {
    display: inline-block;
  }
  .top-area .search-box {
    display: block;
    margin-right: 70px;
    margin-left: 0;
  }
  .top-area .search-box .search-link {
    right: 0;
    top: 10px;
  }
  .top-area .search-box input[type=search] {
    width: 100%;
    height: 38px;
    margin-top: 0;
    padding-left: 10px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .split-items {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  .split-items .left-pane,
  .split-items .middle-pane {
    width: 100%;
    display: inline-block;
  }
  .split-items .middle-pane {
    vertical-align: top;
  }
  .split-items .middle-pane .top-area {
    height: auto;
  }
  .split-items .left-pane {
    padding-right: 0;
  }
  .split-items .left-pane .sub-nav {
    width: 100%;
  }
  .split-items .left-pane .sub-nav .menu-mobile {
    position: absolute;
    display: inline-block;
    left: 5px;
    top: 3px;
  }
  .split-items .left-pane .search-box {
    margin-left: 0;
    width: 100%;
  }
  .split-items .left-pane .search-box input[type=search] {
    width: 90%;
    height: 38px;
    margin-top: 5px;
    padding-left: 10px;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .split-items .left-pane.monitor {
    /*this may not be supported by some browsers*/
  }
  .split-items .left-pane.monitor:not(.focus) #leftArrowUp,
  .split-items .left-pane.monitor:not(.focus) #directoryNodesView,
  .split-items .left-pane.monitor:not(.focus) #alertNodesView {
    display: none;
  }
  .split-items .left-pane.monitor .sub-nav {
    text-align: left;
  }
  .split-items .left-pane.monitor .sub-nav .button .title-desktop {
    display: none;
  }
  .split-items .left-pane.monitor .sub-nav .button .title-mobile {
    display: block;
  }
  .split-items .left-pane.monitor .sub-nav .button.cams {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 1;
  }
  .split-items .left-pane.monitor .sub-nav .button.cams .title-mobile {
    text-align: left;
    padding-left: 40px;
  }
  .split-items .left-pane.monitor .sub-nav .button.alerts {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    z-index: 10;
  }
  .node-sel,
  .node-sel-monitor {
    width: 100%;
  }
  .node-sel .dir-name,
  .node-sel-monitor .dir-name {
    background-color: #0188ce;
    border-color: #0199fb;
    -webkit-text-shadow: 0em 0.1em #0c7ab4;
    text-shadow: 0em 0.1em #0c7ab4;
    color: white;
    background-image: -moz-linear-gradient(top, #0188ce 0%, #0199fb 20%, #17adfc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0188ce', endColorstr='#17adfe');
    /* for IE */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0088cc), to(#11aaff));
    /* for webkit browsers */
    position: relative;
  }
  .node-sel .dir-name img,
  .node-sel-monitor .dir-name img {
    position: absolute;
    left: 0;
  }
  .node-sel .dir-name {
    display: block;
  }
  .node-sel li.node {
    display: none;
  }
  .node-sel.focus li.node {
    display: block;
  }
  .node-sel.focus .dir-name {
    display: none;
  }
  .node-sel .item {
    font-size: 1em;
  }
  .node-sel .item > .icon {
    width: 20px;
    height: 15px;
  }
  .camera-listing .camera {
    width: 100%;
    margin: 0;
    background: #f5f5f5;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#EAEAEA');
    background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
    background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #eaeaea 100%);
    position: relative;
  }
  .camera-listing .camera .header,
  .camera-listing .camera .content {
    display: inline-block;
    vertical-align: top;
    width: 45%;
  }
  .camera-listing .camera .header {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: none;
    position: static;
  }
  .camera-listing .camera .header .battery,
  .camera-listing .camera .header .signal {
    top: auto;
    bottom: 6px;
    right: auto;
  }
  .camera-listing .camera .header .battery {
    left: 46%;
  }
  .camera-listing .camera .header .signal {
    left: 38%;
  }
  .camera-listing .camera .content {
    padding: 0;
    float: right;
  }
  .camera-listing .camera .content a {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
  .camera-listing .camera .content a img {
    width: 100%;
    height: auto;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .camera-event {
    margin-left: 0px;
    margin-bottom: 0px;
    color: black;
    display: block;
    text-align: center;
    background-image: none;
  }
  .camera-event .header {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .camera-event .content {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    z-index: 0;
  }
  .camera-event .content .imageSection {
    display: block;
  }
  .camera-event .content .imageSection #mainImage {
    width: 100%;
    min-height: 240px;
    overflow: hidden;
    display: block;
  }
  .camera-event .content .imageSection #mainImage img {
    min-height: 240px;
    width: 100%;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  .camera-event .content .imageSection .imageButtons {
    padding: 0;
    margin: 0;
    text-align: center;
  }
  .camera-event .content .imageSection .imageButtons .actionButton {
    padding: 5px 1px;
    margin: 3px 0;
  }
  .camera-event .content .imageSection .imageButtons img {
    height: 17px;
    padding-right: 0 2px;
  }
  .camera-event .content .info {
    display: block;
    padding-left: 7px;
  }
  div.event a.alert {
    width: 95%;
  }
  #alertNodesView {
    max-height: 450px;
    overflow: auto;
    width: 100%;
    padding-top: 2px;
  }
  .alert-sel .buttons input {
    width: auto;
  }
  .alertCount {
    margin-left: 0;
  }
  .alertCount.no-alert {
    display: inline-block;
  }
  #cameraEventArrowUp {
    display: none;
  }
  #ResolutionText {
    width: 95%;
  }
  #imageList {
    text-align: center;
  }
  .passwordForm {
    width: 100%;
    max-width: 300px;
  }
  .passwordForm input[type="submit"] {
    width: 90px;
    float: right;
  }
  nav.tabs {
    margin: 0;
    position: relative;
    width: 100%;
    height: 50px;
  }
  nav.tabs.focus .tabButton {
    display: block;
    width: 100%;
  }
  nav.tabs .tabButton {
    display: none;
    width: 100%;
  }
  nav.tabs .tabButton.sel {
    width: 100%;
    display: block;
  }
  .node-detail {
    margin-left: 0px;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
  }
  .node-detail .header {
    display: none;
  }
  .node-detail .tabs .tabButton {
    width: 100%;
  }
  .node-detail .content section {
    display: none;
    min-height: 0;
  }
  .node-detail .content.dataForm {
    width: 100%;
  }
  .node-detail .action {
    text-align: right;
    width: 100%;
  }
  input[type="text"],
  input[type="password"],
  input[type="email"],
  textarea,
  select {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 0;
    width: 100%;
  }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  textarea:focus,
  select:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  input[type="text"]:-ms-input-placeholder,
  input[type="password"]:-ms-input-placeholder,
  input[type="email"]:-ms-input-placeholder,
  textarea:-ms-input-placeholder,
  select:-ms-input-placeholder {
    color: #CCCCCC;
    font-style: italic;
  }
  input[type="text"]::-webkit-input-placeholder,
  input[type="password"]::-webkit-input-placeholder,
  input[type="email"]::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder,
  select::-webkit-input-placeholder {
    color: #CCCCCC;
    font-style: italic;
  }
  input[type="text"]:-moz-placeholder,
  input[type="password"]:-moz-placeholder,
  input[type="email"]:-moz-placeholder,
  textarea:-moz-placeholder,
  select:-moz-placeholder {
    color: #CCCCCC;
    font-style: italic;
  }
  .button,
  input[type="button"],
  input[type="submit"],
  button {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin: 0;
  }
  .actionButton {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
  }
  div.dataForm {
    text-align: left;
  }
  div.dataForm div.form-field {
    margin-left: 0px;
  }
  div.dataForm div.form-field .entry.select {
    min-width: 0;
  }
  div.dataForm div.form-field .entry input[type="text"],
  div.dataForm div.form-field .entry input[type="textArea"],
  div.dataForm div.form-field .entry input[type="select"] {
    width: 100%;
    margin-left: 0;
  }
  div.dataForm div.form-field .entry .timerange input[type="text"] {
    width: 80px;
    margin-right: 10px;
  }
  #dataDiagnostics > h3 {
    padding-top: 15px;
  }
  #dataDiagnostics input[type=button] {
    margin: 10px 0;
  }
  #dataDiagnostics .newCommandContainer {
    padding-bottom: 0;
  }
  #dataDiagnostics .commandHistory {
    font-size: 0.7em;
  }
  #dataDiagnostics .commandHistory .titles {
    font-size: 0.9em;
  }
  #dataDiagnostics .commandHistory .titles span {
    padding: 3px;
  }
  #dataDiagnostics .commandHistory .commandItem > div {
    padding: 3px;
  }
}
/*Ensure IE10 Compliance with viewport CSS instead of meta tag*/
@-ms-viewport {
  width: device-width;
}
/*# sourceMappingURL=Site.css.map */