@import url(zm_html_base.css);

body {
    text-align: center;
}

#container {
    margin-left: auto;
    margin-right: auto;
}

#menuBar {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
}

#menuBar #monitorName {
    position: absolute;
    left: 4px;
}

#menuBar #closeWindow {
    position: absolute;
    right: 4px;
}

#menuBar #menuControls > span {
    padding-left: 3px;
    padding-right: 3px;
}

#imageFeed{
    text-align: center;
}

#monitorStatus {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 2px;
    text-align: center;
}

#monitorStatus #enableAlarms {
    position: absolute;
    left: 4px;
}

#monitorStatus #forceAlarm {
    position: absolute;
    right: 4px;
}

#monitorStatus #monitorState {
}

#dvrControls {
    margin-top: 3px;
    margin-bottom: 2px;
    text-align: center;
}

#dvrControls input {
    height: 20px;
    width: 28px;
    padding-bottom: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

#dvrControls input[disabled] {
    color: #aaaaaa;
}

#dvrControls input.active {
    border: 1px solid blue;
}

#dvrControls input.inactive {
    border: 1px solid green;
}

#dvrControls input.unavail {
    border: 1px solid red;
}

#replayStatus {
    width: 100%;
    margin-top: 3px;
    margin-bottom: 2px;
    text-align: center;
}

#events {
    width: 100%;
}

#eventList {
    width: 100%;
}

#eventList thead td {
    font-weight: bold;
}

#eventList td {
    text-align: center;
}

li {
    display: inline;
    list-style-type: none;
}

span.alarm {
    color: #DC143C;
    font-weight: bold;
}

span.alert {
    color: #FF8C00;
    font-weight: bold;
}

#eventList tr.highlight {
    background-color: #B0E0E6;
}

#ptzControls {
    vertical-align: top;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    width: 340px;
    border: 1px dashed #006699;
}

#ptzControls input.textbutton {
    width: 40px;
}

#ptzControls #controlsPanel {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 184px;
}

#ptzControls input[type=image] {
    border: 0px;
}

#ptzControls #controlsPanel .longArrowBtn {
    background-repeat: no-repeat;
    width: 32px;
    height: 48px;
    position: relative;
    text-align: center;
}

/*
 * This is a bit of a hack as these lines should be in the above
 * section but that messes up layout on IE6
 */
#ptzControls #controlsPanel > div > div.longArrowBtn {
    left: 50%;
    margin-left: -16px;
}

#ptzControls #controlsPanel .upBtn {
    background-image: url("graphics/arrow-l-u.gif");
}

#ptzControls #controlsPanel .downBtn {
    background-image: url("graphics/arrow-l-d.gif");
}

#ptzControls #controlsPanel #focusControls {
    position: absolute;
    left: 0px;
}

#ptzControls #controlsPanel #focusControls > div {
    text-align: center;
    padding: 1px;
}

#ptzControls #controlsPanel #zoomControls {
    position: absolute;
    left: 54px;
}

#ptzControls #controlsPanel #zoomControls > div {
    text-align: center;
    padding: 1px;
}

#ptzControls #controlsPanel #pantiltPanel {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 120px;
    margin-left: -60px;
}

#ptzControls #controlsPanel #pantiltPanel > div {
    text-align: center;
    padding: 1px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #pantiltButtons {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #006699;
    text-align: center;
    padding: 1px;
    width: 96px;
    height: 96px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls .arrowBtn {
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    position: absolute;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #upLeftBtn {
    background-image: url("graphics/arrow-ul.gif");
    top: 0px;
    left: 0px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #upBtn {
    background-image: url("graphics/arrow-u.gif");
    top: 0px;
    left: 32px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #upRightBtn {
    background-image: url("graphics/arrow-ur.gif");
    top: 0px;
    left: 64px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #leftBtn {
    background-image: url("graphics/arrow-l.gif");
    top: 32px;
    left: 0px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #centerBtn {
    background-image: url("graphics/center.gif");
    top: 32px;
    left: 32px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #rightBtn {
    background-image: url("graphics/arrow-r.gif");
    top: 32px;
    left: 64px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #downLeftBtn {
    background-image: url("graphics/arrow-dl.gif");
    top: 64px;
    left: 0px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #downBtn {
    background-image: url("graphics/arrow-d.gif");
    top: 64px;
    left: 32px;
}

#ptzControls #controlsPanel #pantiltPanel #pantiltControls #downRightBtn {
    background-image: url("graphics/arrow-dr.gif");
    top: 64px;
    left: 64px;
}

#ptzControls #controlsPanel #pantiltPanel #powerControls {
    margin-left: auto;
    margin-right: auto;
}

#ptzControls #controlsPanel #pantiltPanel #powerControls div {
    text-align: center;
    padding: 1px;
}

#ptzControls #controlsPanel #irisControls {
    position: absolute;
    right: 54px;
}

#ptzControls #controlsPanel #irisControls > div {
    text-align: center;
    padding: 1px;
}

#ptzControls #controlsPanel #whiteControls {
    position: absolute;
    right: 0;
}

#ptzControls #controlsPanel #whiteControls > div {
    text-align: center;
    padding: 1px;
}

#ptzControls #presetControls {
    position: relative;
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
}

#ptzControls #presetControls input {
    margin: 1px 1px 1px 1px;
}

#ptzControls #presetControls > div {
    margin-top: 5px;
    margin-bottom: 5px;
}

#ptzControls #presetControls > div > span {
    margin-left: 20px;
    margin-right: 20px;
}