From 6974c847e59af2ee33e7bc8bfa83f6de563e4e2b Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Sat, 9 Dec 2017 11:14:10 -0500
Subject: [PATCH 1/2] Fix controlcss

Missing viewCssFileExtra
---
 web/skins/classic/css/classic/control.css     | 148 -----------------
 .../classic/css/classic/views/control.css     | 149 +++++++++++++++++-
 web/skins/classic/css/classic/views/watch.css |   2 -
 web/skins/classic/css/dark/control.css        | 148 -----------------
 web/skins/classic/css/dark/views/control.css  | 149 +++++++++++++++++-
 web/skins/classic/css/dark/views/watch.css    |   2 -
 web/skins/classic/css/flat/control.css        | 149 ------------------
 web/skins/classic/css/flat/views/control.css  | 149 +++++++++++++++++-
 web/skins/classic/css/flat/views/watch.css    |   2 -
 web/skins/classic/includes/functions.php      |  14 +-
 10 files changed, 457 insertions(+), 455 deletions(-)
 delete mode 100644 web/skins/classic/css/classic/control.css
 delete mode 100644 web/skins/classic/css/dark/control.css
 delete mode 100644 web/skins/classic/css/flat/control.css

diff --git a/web/skins/classic/css/classic/control.css b/web/skins/classic/css/classic/control.css
deleted file mode 100644
index 320d391e4..000000000
--- a/web/skins/classic/css/classic/control.css
+++ /dev/null
@@ -1,148 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.ptzControls .controlsPanel {
-    margin: 0 auto;
-}
-
-.ptzControls input[type=image] {
-    border: 0px;
-}
-
-.ptzControls .controlsPanel .arrowControl {
-    width: 40px;
-    height: 180px;
-    margin: 0 4px;
-}
-
-.ptzControls .controlsPanel .arrowControl input {
-    display: block;
-}
-
-.ptzControls .controlsPanel .longArrowBtn {
-    width: 32px;
-    height: 48px;
-    margin: 0 auto;
-    cursor: pointer;
-}
-
-/*
- * 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: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .focusControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .zoomControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .irisControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .whiteControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .pantiltPanel {
-    margin: 0 auto;
-    height: 180px;
-    float: left;
-    width: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 100px;
-    height: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}
diff --git a/web/skins/classic/css/classic/views/control.css b/web/skins/classic/css/classic/views/control.css
index 5e10dcfd9..e6f1575e4 100644
--- a/web/skins/classic/css/classic/views/control.css
+++ b/web/skins/classic/css/classic/views/control.css
@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.ptzControls .controlsPanel {
+    margin: 0 auto;
+}
+
+.ptzControls input[type=image] {
+    border: 0px;
+}
+
+.ptzControls .controlsPanel .arrowControl {
+    width: 40px;
+    height: 180px;
+    margin: 0 4px;
+}
+
+.ptzControls .controlsPanel .arrowControl input {
+    display: block;
+}
+
+.ptzControls .controlsPanel .longArrowBtn {
+    width: 32px;
+    height: 48px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+/*
+ * 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: url("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .focusControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .zoomControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .irisControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .whiteControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .pantiltPanel {
+    margin: 0 auto;
+    height: 180px;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 100px;
+    height: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}
diff --git a/web/skins/classic/css/classic/views/watch.css b/web/skins/classic/css/classic/views/watch.css
index 28bda54ef..4ebb30dda 100644
--- a/web/skins/classic/css/classic/views/watch.css
+++ b/web/skins/classic/css/classic/views/watch.css
@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;
diff --git a/web/skins/classic/css/dark/control.css b/web/skins/classic/css/dark/control.css
deleted file mode 100644
index 56fc0e41c..000000000
--- a/web/skins/classic/css/dark/control.css
+++ /dev/null
@@ -1,148 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.ptzControls .controlsPanel {
-    margin: 0 auto;
-}
-
-.ptzControls input[type=image] {
-    border: 0px;
-}
-
-.ptzControls .controlsPanel .arrowControl {
-    width: 40px;
-    height: 180px;
-    margin: 0 4px;
-}
-
-.ptzControls .controlsPanel .arrowControl input {
-    display: block;
-}
-
-.ptzControls .controlsPanel .longArrowBtn {
-    width: 32px;
-    height: 48px;
-    margin: 0 auto;
-    cursor: pointer;
-}
-
-/*
- * 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: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .focusControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .zoomControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .irisControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .whiteControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .pantiltPanel {
-    margin: 0 auto;
-    height: 180px;
-    float: left;
-    width: 100px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 102px;
-    height: 102px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}
diff --git a/web/skins/classic/css/dark/views/control.css b/web/skins/classic/css/dark/views/control.css
index 5e10dcfd9..8c9981c71 100644
--- a/web/skins/classic/css/dark/views/control.css
+++ b/web/skins/classic/css/dark/views/control.css
@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.ptzControls .controlsPanel {
+    margin: 0 auto;
+}
+
+.ptzControls input[type=image] {
+    border: 0px;
+}
+
+.ptzControls .controlsPanel .arrowControl {
+    width: 40px;
+    height: 180px;
+    margin: 0 4px;
+}
+
+.ptzControls .controlsPanel .arrowControl input {
+    display: block;
+}
+
+.ptzControls .controlsPanel .longArrowBtn {
+    width: 32px;
+    height: 48px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+/*
+ * 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: url("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .focusControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .zoomControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .irisControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .whiteControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .pantiltPanel {
+    margin: 0 auto;
+    height: 180px;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 102px;
+    height: 102px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}
diff --git a/web/skins/classic/css/dark/views/watch.css b/web/skins/classic/css/dark/views/watch.css
index 28bda54ef..4ebb30dda 100644
--- a/web/skins/classic/css/dark/views/watch.css
+++ b/web/skins/classic/css/dark/views/watch.css
@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;
diff --git a/web/skins/classic/css/flat/control.css b/web/skins/classic/css/flat/control.css
deleted file mode 100644
index 4a0f66761..000000000
--- a/web/skins/classic/css/flat/control.css
+++ /dev/null
@@ -1,149 +0,0 @@
-.ptzControls {
-    vertical-align: top;
-    margin: 10px auto 0;
-    width: 500px;
-    min-height: 20px;
-}
-
-.ptzControls input.ptzTextBtn {
-    margin-top: 2px;
-}
-
-.ptzControls .controlsPanel {
-    margin: 0 auto;
-}
-
-.ptzControls input[type=image] {
-    border: 0px;
-}
-
-.ptzControls .controlsPanel .arrowControl {
-    width: 40px;
-    height: 180px;
-    margin: 0 4px;
-}
-
-.ptzControls .controlsPanel .arrowControl input {
-    display: block;
-}
-
-.ptzControls .controlsPanel .longArrowBtn {
-    width: 32px;
-    height: 48px;
-    margin: 0 auto;
-    cursor: pointer;
-}
-
-/*
- * 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: url("../../graphics/arrow-l-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .downBtn {
-    background: url("../../graphics/arrow-l-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .focusControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .zoomControls {
-    float: left;
-}
-
-.ptzControls .controlsPanel .irisControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .whiteControls {
-    float: right;
-}
-
-.ptzControls .controlsPanel .pantiltPanel {
-    margin: 0 auto;
-    height: 180px;
-    float: left;
-    width: 100px;
-}
-
-.pantiltButtons {
-    margin: 5px auto;
-    border: 1px solid #006699;
-    text-align: center;
-    padding: 1px;
-    width: 102px;
-    height: 102px;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    float: left;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
-    background: url("../../graphics/arrow-ul.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
-    background: url("../../graphics/arrow-u.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
-    background: url("../../graphics/arrow-ur.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
-    background: url("../../graphics/arrow-l.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
-    background: url("../../graphics/center.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
-    background: url("../../graphics/arrow-r.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
-    background: url("../../graphics/arrow-dl.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
-    background: url("../../graphics/arrow-d.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
-    background: url("../../graphics/arrow-dr.png") no-repeat 0 0;
-}
-
-.ptzControls .controlsPanel .powerControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls {
-    margin: 5px auto;
-}
-
-.ptzControls .presetControls input {
-    margin: 1px;
-}
-
-.ptzControls .presetControls input.ptzNumBtn {
-    padding: 1px 2px;
-    width: 24px;
-    color: #ffffff;
-    text-align: center;
-    background-color: #016A9D;
-}
diff --git a/web/skins/classic/css/flat/views/control.css b/web/skins/classic/css/flat/views/control.css
index 5e10dcfd9..de57653f0 100644
--- a/web/skins/classic/css/flat/views/control.css
+++ b/web/skins/classic/css/flat/views/control.css
@@ -1 +1,148 @@
-@import url(../control.css);
+.ptzControls {
+    vertical-align: top;
+    margin: 10px auto 0;
+    width: 500px;
+}
+
+.ptzControls input.ptzTextBtn {
+    margin-top: 2px;
+}
+
+.ptzControls .controlsPanel {
+    margin: 0 auto;
+}
+
+.ptzControls input[type=image] {
+    border: 0px;
+}
+
+.ptzControls .controlsPanel .arrowControl {
+    width: 40px;
+    height: 180px;
+    margin: 0 4px;
+}
+
+.ptzControls .controlsPanel .arrowControl input {
+    display: block;
+}
+
+.ptzControls .controlsPanel .longArrowBtn {
+    width: 32px;
+    height: 48px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+/*
+ * 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: url("../skins/classic/graphics/arrow-l-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .downBtn {
+    background: url("../skins/classic/graphics/arrow-l-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .focusControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .zoomControls {
+    float: left;
+}
+
+.ptzControls .controlsPanel .irisControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .whiteControls {
+    float: right;
+}
+
+.ptzControls .controlsPanel .pantiltPanel {
+    margin: 0 auto;
+    height: 180px;
+    float: left;
+    width: 100px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .pantiltButtons {
+    margin: 5px auto;
+    border: 1px solid #006699;
+    text-align: center;
+    padding: 1px;
+    width: 102px;
+    height: 102px;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .arrowBtn {
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    float: left;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upLeftBtn {
+    background: url("../skins/classic/graphics/arrow-ul.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upBtn {
+    background: url("../skins/classic/graphics/arrow-u.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .upRightBtn {
+    background: url("../skins/classic/graphics/arrow-ur.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .leftBtn {
+    background: url("../skins/classic/graphics/arrow-l.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .centerBtn {
+    background: url("../skins/classic/graphics/center.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .rightBtn {
+    background: url("../skins/classic/graphics/arrow-r.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downLeftBtn {
+    background: url("../skins/classic/graphics/arrow-dl.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downBtn {
+    background: url("../skins/classic/graphics/arrow-d.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .pantiltPanel .pantiltControls .downRightBtn {
+    background: url("../skins/classic/graphics/arrow-dr.png") no-repeat 0 0;
+}
+
+.ptzControls .controlsPanel .powerControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls {
+    margin: 5px auto;
+}
+
+.ptzControls .presetControls input {
+    margin: 1px;
+}
+
+.ptzControls .presetControls input.ptzNumBtn {
+    padding: 1px 2px;
+    width: 24px;
+    color: #ffffff;
+    text-align: center;
+    background-color: #016A9D;
+}
diff --git a/web/skins/classic/css/flat/views/watch.css b/web/skins/classic/css/flat/views/watch.css
index ef7937db2..17bf1593d 100644
--- a/web/skins/classic/css/flat/views/watch.css
+++ b/web/skins/classic/css/flat/views/watch.css
@@ -1,5 +1,3 @@
-@import url(../control.css);
-
 #header {
     display: flex;
     justify-content: space-between;
diff --git a/web/skins/classic/includes/functions.php b/web/skins/classic/includes/functions.php
index e73336c09..2338bbeab 100644
--- a/web/skins/classic/includes/functions.php
+++ b/web/skins/classic/includes/functions.php
@@ -34,6 +34,9 @@ function xhtmlHeaders( $file, $title ) {
 
   $basename = basename( $file, '.php' );
   $viewCssFile = getSkinFile( '/css/'.$css.'/views/'.$basename.'.css' );
+  if ($basename == 'watch') {
+    $viewCssFileExtra = getSkinFile( '/css/'.$css.'/views/control.css' );
+  }
   $viewCssPhpFile = getSkinFile( '/css/'.$css.'/views/'.$basename.'.css.php' );
   $viewJsFile = getSkinFile( 'views/js/'.$basename.'.js' );
   $viewJsPhpFile = getSkinFile( 'views/js/'.$basename.'.js.php' );
@@ -67,6 +70,12 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
   if ( $viewCssFile ) {
 ?>
   <link rel="stylesheet" href="<?php echo cache_bust($viewCssFile) ?>" type="text/css" media="screen"/>
+
+<?php
+  }
+  if ( isset($viewCssFileExtra) ) {
+?>
+  <link rel="stylesheet" href="<?php echo cache_bust($viewCssFileExtra) ?>" type="text/css" media="screen"/>
 <?php
   }
   if ( $viewCssPhpFile ) {
@@ -109,9 +118,12 @@ if ( file_exists( "skins/$skin/css/$css/graphics/favicon.ico" ) ) {
   <script src="skins/<?php echo $skin ?>/js/video.js"></script>
   <script src="./js/videojs.zoomrotate.js"></script>
   <script src="skins/<?php echo $skin ?>/js/moment.min.js"></script>
+<?php
+  } else if ( $title == 'Watch' ) {
+?>
+  <link href="<?php echo cache_bust($viewCssFileExtra) ?>" rel="stylesheet">
 <?php
   }
-
   if ( $skinJsPhpFile ) {
 ?>
   <script type="text/javascript">

From 1e412af902134b48b2f43bb0574427d5f01b8894 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Sat, 9 Dec 2017 15:20:27 -0500
Subject: [PATCH 2/2] Fix float overlap

Avoid explicitly setting some heights, add clear float
---
 web/skins/classic/css/classic/views/control.css | 9 ++++++++-
 web/skins/classic/css/dark/views/control.css    | 9 ++++++++-
 web/skins/classic/css/flat/views/control.css    | 9 ++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/web/skins/classic/css/classic/views/control.css b/web/skins/classic/css/classic/views/control.css
index e6f1575e4..381c9687c 100644
--- a/web/skins/classic/css/classic/views/control.css
+++ b/web/skins/classic/css/classic/views/control.css
@@ -4,6 +4,14 @@
     width: 500px;
 }
 
+.ptzControls::after {
+  visibility: hidden;
+  display: block;
+  content: "";
+  clear: both;
+  height: 0;
+}
+
 .ptzControls input.ptzTextBtn {
     margin-top: 2px;
 }
@@ -18,7 +26,6 @@
 
 .ptzControls .controlsPanel .arrowControl {
     width: 40px;
-    height: 180px;
     margin: 0 4px;
 }
 
diff --git a/web/skins/classic/css/dark/views/control.css b/web/skins/classic/css/dark/views/control.css
index 8c9981c71..af0eeccf2 100644
--- a/web/skins/classic/css/dark/views/control.css
+++ b/web/skins/classic/css/dark/views/control.css
@@ -4,6 +4,14 @@
     width: 500px;
 }
 
+.ptzControls::after {
+  visibility: hidden;
+  display: block;
+  content: "";
+  clear: both;
+  height: 0;
+}
+
 .ptzControls input.ptzTextBtn {
     margin-top: 2px;
 }
@@ -18,7 +26,6 @@
 
 .ptzControls .controlsPanel .arrowControl {
     width: 40px;
-    height: 180px;
     margin: 0 4px;
 }
 
diff --git a/web/skins/classic/css/flat/views/control.css b/web/skins/classic/css/flat/views/control.css
index de57653f0..a2dbb9429 100644
--- a/web/skins/classic/css/flat/views/control.css
+++ b/web/skins/classic/css/flat/views/control.css
@@ -4,6 +4,14 @@
     width: 500px;
 }
 
+.ptzControls::after {
+  visibility: hidden;
+  display: block;
+  content: "";
+  clear: both;
+  height: 0;
+}
+
 .ptzControls input.ptzTextBtn {
     margin-top: 2px;
 }
@@ -18,7 +26,6 @@
 
 .ptzControls .controlsPanel .arrowControl {
     width: 40px;
-    height: 180px;
     margin: 0 4px;
 }