#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;
}