.monitor, #settingsPanel, .buttons, #zonePoints  {
  float: left;
  margin: 2px;
}
#settingsPanel,
#zonePoints {
	max-width: 600px;
  width: 50%;
}

#zoneSettings {
  border-collapse: collapse;
  width: 100%;
}

#zoneSettings th,
#zoneSettings td {
  border: 1px solid #7f7fb2;
  padding: 3px;
  text-align: left;
}

#zoneSettings th[scope=row] {
    padding: 4px 3px 3px;
    vertical-align: top;
    white-space: nowrap;
}

#definitionPanel {
    margin: 2px;
    text-align: center;
}
#definitionPanel:after {
  content: ".";
  display: block;
  height: 0;
    font-size: 0;
  clear: both;
  visibility: hidden;
}

#definitionPanel input[type=submit],
#definitionPanel input[type=submit] {
  margin: 0 4px;
}

#imagePanel {
  float: left;
    position: relative;
    width: 50%;
    min-width: 647px; /* extra 6 px for padding */
}

/* NB: The size of the imageFrame determines the area within which the markers
 * may be moved.  When adjusting the padding and margins of the imageFrame and
 * the DIVs within it, test that the markers behave sensibly when dragged to
 * the extreme edges of the imageFrame. */
.imageFrame {
    position: relative;
    padding: 3px 4px 4px 3px;
}
.imageFrame svg {
  box-sizing: border-box;
 position:absolute;
 top: 3px;
 left: 3px; 
 right: 3px;
 background: none;
 }
.imageFrame img {
  width: 100%;
  display: block;
}
.imageFrame img.alarm ,
.imageFrame img.alert {
  padding: 1px;
}

.imageFrame div {
    position: absolute;
    width: 7px;
    height: 7px;
    margin-left: -3px;
    margin-top: -3px;
    z-index: 5;
}

.imageFrame div {
    background-image: url(../skins/classic/graphics/point-g.png);
}

.imageFrame div.highlight {
    background-image: url(../skins/classic/graphics/point-o.png);
}

.imageFrame div.active {
    background-image: url(../skins/classic/graphics/point-r.png);
}

#zonePoints {
	float: left;
}

#zonePoints td {
    vertical-align: top;
}

#zonePoints table {
  border-collapse: collapse;
	width: 100%;
}
#zonePoints table table {
}

#zonePoints table table tr.highlight {
    background-color: #f0e68c;
}

#zonePoints table table tr.active {
    background-color: #ffa07a;
}

#zonePoints table table th,
#zonePoints table table td {
    border: 1px solid #7f7fb2;
    padding: 3px;
    text-align: center;
}

#zonePoints table a {
    margin: 0 2px;
}
.zones polygon {
	fill-opacity: 0.25;
  stroke-width: 0;
}
.zones polygon.Editing {
  stroke-width: 2px;
}
.Active {
	stroke: #ff0000;
	fill: #ff0000;
}
.Inclusive {
	stroke: #FFA500;
	fill: #FFA500;
}
.Exclusive {
	stroke: #800080;
	fill: #800080;
}
.Preclusive {
	stroke: #0000FF;
	fill: #0000FF;
}

input[name="newZone[Name]"] {
width: 100%;
}
input[name="newAlarmRgbR"],
input[name="newAlarmRgbG"],
input[name="newAlarmRgbB"] {
width: 25%;
}
input[name="newZone[MinPixelThreshold]"],
input[name="newZone[MaxPixelThreshold]"],
input[name="newZone[FilterX]"],
input[name="newZone[FilterY]"],
input[name="newZone[MinFilterPixels]"],
input[name="newZone[MaxFilterPixels]"],
input[name="newZone[MinBlobPixels]"],
input[name="newZone[MaxBlobPixels]"],
input[name="newZone[MinBlobs]"],
input[name="newZone[MaxBlobs]"],
input[name="newZone[MinAlarmPixels]"],
input[name="newZone[MaxAlarmPixels]"] {
  width: 90px;
}
input.ZonePoint {
    width: 75px;
}
svg {
  overflow: visible;
}
svg circle {
  fill: green;
    overflow: visible;
}
#monitorState {
  display: inline;
  float: left;
}
#StreamControlButtons {
  display: inline;
  float: right;
}