Separating theme from layout for CSS files.

Change-Id: I4c3cec28b30de8026df4298f65ebf6ad92faf68f

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Dialog Service (theme) -- CSS file
+ */
+
+.light .dialog h2 {
+    color: black;
+}
+.dark .dialog h2 {
+    color: #ddd;
+}
+
+.dialog .dialog-button {
+    /* color works for both light and dark themes */
+    background-color: #c55;
+    color: white;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Dialog Service -- CSS file
+ ONOS GUI -- Dialog Service (layout) -- CSS file
  */
  */
 
 
 .dialog h2 {
 .dialog h2 {
@@ -26,12 +26,6 @@
     width: 210px;
     width: 210px;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.light .dialog h2 {
-    color: black;
-}
-.dark .dialog h2 {
-    color: #ddd;
-}
 
 
 .dialog .dialog-button {
 .dialog .dialog-button {
     border-radius: 3px;
     border-radius: 3px;
@@ -41,8 +35,4 @@
     padding: 6px 8px 2px 8px;
     padding: 6px 8px 2px 8px;
     margin: 4px;
     margin: 4px;
     float: right;
     float: right;
-    /* color works for both light and dark themes */
-    background-color: #c55;
-    color: white;
 }
 }
-

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Flash Service (theme) -- CSS file
+ */
+
+.light #flash svg g.flashItem rect {
+    fill: #ccc;
+}
+.dark #flash svg g.flashItem rect {
+    fill: #555;
+}
+
+.light #flash svg g.flashItem text {
+    fill: #333;
+}
+.dark #flash svg g.flashItem text {
+    fill: #999;
+}
+
+.light .centered {
+    box-shadow: 2px 2px 24px 5px #888;
+    background-color: #eee;
+}
+/* TODO: confirm / fix dark*/
+.dark .centered {
+    box-shadow: 2px 2px 24px 5px #888;
+    background-color: #eee;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Flash Service -- CSS file
+ ONOS GUI -- Flash Service (layout) -- CSS file
  */
  */
 
 
 #flash {
 #flash {
@@ -28,22 +28,20 @@
     opacity: 0.8;
     opacity: 0.8;
 }
 }
 
 
-.light #flash svg g.flashItem rect {
-    fill: #ccc;
-}
-.dark #flash svg g.flashItem rect {
-    fill: #555;
-}
-
 #flash svg g.flashItem text {
 #flash svg g.flashItem text {
     stroke: none;
     stroke: none;
     text-anchor: middle;
     text-anchor: middle;
     alignment-baseline: middle;
     alignment-baseline: middle;
     font-size: 16pt;
     font-size: 16pt;
 }
 }
-.light #flash svg g.flashItem text {
-    fill: #333;
-}
-.dark #flash svg g.flashItem text {
-    fill: #999;
+
+/* Used for temp div */
+.centered {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    margin: 0;
+    padding: 10px;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Panel Service (theme) -- CSS file
+ */
+
+.light .floatpanel {
+    background-color: rgba(255,255,255,0.8);
+    color: black;
+    box-shadow: 0 2px 12px #777;
+}
+.dark .floatpanel {
+    background-color: rgba(50,50,50,0.8);
+    color: #ccc;
+    box-shadow: 0 2px 12px #000;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Panel Service -- CSS file
+ ONOS GUI -- Panel Service (layout) -- CSS file
  */
  */
 
 
 .floatpanel {
 .floatpanel {
@@ -41,14 +41,3 @@
 html[data-platform='iPad'] .floatpanel {
 html[data-platform='iPad'] .floatpanel {
     top: 80px;
     top: 80px;
 }
 }
-
-.light .floatpanel {
-    background-color: rgba(255,255,255,0.8);
-    color: black;
-    box-shadow: 0 2px 12px #777;
-}
-.dark .floatpanel {
-    background-color: rgba(50,50,50,0.8);
-    color: #ccc;
-    box-shadow: 0 2px 12px #000;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Quick Help Service (theme) -- CSS file
+ */
+
+#quickhelp svg g.help rect {
+    fill: black;
+    opacity: 0.7;
+}
+
+#quickhelp svg text.title {
+    fill: #999;
+}
+
+#quickhelp svg g.keyItem {
+    fill: white;
+}
+
+#quickhelp svg g line.qhrowsep {
+    stroke: #888;
+    stroke-dasharray: 2 2;
+}
+
+#quickhelp svg text.key {
+    fill: #add;
+}
+
+#quickhelp svg text.desc {
+    fill: #ddd;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Quick Help Service -- CSS file
+ ONOS GUI -- Quick Help Service (layout) -- CSS file
  */
  */
 
 
 #quickhelp {
 #quickhelp {
@@ -28,37 +28,13 @@
     opacity: 1;
     opacity: 1;
 }
 }
 
 
-#quickhelp svg g.help rect {
-    fill: black;
-    opacity: 0.7;
-}
-
 #quickhelp svg text.title {
 #quickhelp svg text.title {
     font-size: 10pt;
     font-size: 10pt;
     font-style: italic;
     font-style: italic;
     text-anchor: middle;
     text-anchor: middle;
-    fill: #999;
-}
-
-#quickhelp svg g.keyItem {
-    fill: white;
-}
-
-#quickhelp svg g line.qhrowsep {
-    stroke: #888;
-    stroke-dasharray: 2 2;
 }
 }
 
 
 #quickhelp svg text {
 #quickhelp svg text {
     font-size: 7pt;
     font-size: 7pt;
     alignment-baseline: middle;
     alignment-baseline: middle;
 }
 }
-
-#quickhelp svg text.key {
-    fill: #add;
-}
-
-#quickhelp svg text.desc {
-    fill: #ddd;
-}
-

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Veil Service (theme) -- CSS file
+ */
+
+.light #veil {
+    background-color: rgba(0,0,0,0.75);
+}
+.dark #veil {
+    background-color: rgba(64,64,64,0.75);
+}
+
+#veil .msg p {
+    color: #ddd;
+}
+
+#veil svg .glyph {
+    fill: #222;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Veil Service -- CSS file
+ ONOS GUI -- Veil Service (layout) -- CSS file
  */
  */
 
 
 #veil {
 #veil {
@@ -26,13 +26,6 @@
     left: 0;
     left: 0;
 }
 }
 
 
-.light #veil {
-    background-color: rgba(0,0,0,0.75);
-}
-.dark #veil {
-    background-color: rgba(64,64,64,0.75);
-}
-
 #veil .msg {
 #veil .msg {
     position: absolute;
     position: absolute;
     padding: 60px;
     padding: 60px;
@@ -42,9 +35,4 @@
     display: block;
     display: block;
     font-size: 14pt;
     font-size: 14pt;
     font-style: italic;
     font-style: italic;
-    color: #ddd;
-}
-
-#veil svg .glyph {
-    fill: #222;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Masthead (theme) -- CSS file
+ */
+
+.light #mast {
+    background-color: #bbb;
+    box-shadow: 0 2px 8px #777;
+}
+.dark #mast {
+    background-color: #444;
+    box-shadow: 0 2px 8px #222;
+}
+
+
+.light #mast .nav-menu-button:hover {
+    background-color: #ddd;
+}
+.dark #mast .nav-menu-button:hover {
+    background-color: #777;
+}
+
+#mast img.logo:hover {
+    /* need something better */
+    /*background-color: #888;*/
+}
+
+.light #mast .title {
+    color: #369;
+}
+.dark #mast .title {
+    color: #eee;
+}
+
+.light #mast-right a {
+    color: #369;
+}
+
+.dark #mast-right a {
+    color: #eee;
+}
+
+.light #mast nav  {
+    color: #369;
+}
+
+.dark #mast nav  {
+    color: #eee;
+}
+
+
+/* Theme styles for drop down menu */
+
+.light #mast .dropdown {
+    background-color: #bbb;
+    box-shadow: 0 2px 8px #777;
+}
+
+.dark #mast .dropdown {
+    background-color: #444;
+    box-shadow: 0 2px 8px #111;
+}
+
+.light #mast .dropdown a {
+    color: #369;
+    border-bottom: solid #ccc 1px;
+}
+
+.dark #mast .dropdown a {
+    color: #eee;
+    border-bottom: solid #333 1px;
+}
+
+.light #mast .dropdown a:hover {
+    background-color: #ddd;
+}
+
+.dark #mast .dropdown a:hover {
+    background-color: #777;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Masthead -- CSS file
+ ONOS GUI -- Masthead (layout) -- CSS file
  */
  */
 
 
 #mast {
 #mast {
@@ -28,15 +28,6 @@ html[data-platform='iPad'] #mast {
     padding-top: 16px;
     padding-top: 16px;
 }
 }
 
 
-.light #mast {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
-}
-.dark #mast {
-    background-color: #444;
-    box-shadow: 0 2px 8px #222;
-}
-
 #mast .nav-menu-button {
 #mast .nav-menu-button {
     width: 30px;
     width: 30px;
     height: 30px;
     height: 30px;
@@ -44,12 +35,6 @@ html[data-platform='iPad'] #mast {
     margin-bottom: 4px;
     margin-bottom: 4px;
     cursor: pointer;
     cursor: pointer;
 }
 }
-.light #mast .nav-menu-button:hover {
-    background-color: #ddd;
-}
-.dark #mast .nav-menu-button:hover {
-    background-color: #777;
-}
 
 
 #mast img.logo {
 #mast img.logo {
     height: 38px;
     height: 38px;
@@ -57,23 +42,12 @@ html[data-platform='iPad'] #mast {
     padding-right: 8px;
     padding-right: 8px;
 }
 }
 
 
-#mast img.logo:hover {
-    /* need something better */
-    /*background-color: #888;*/
-}
-
 #mast .title {
 #mast .title {
     font-size: 14pt;
     font-size: 14pt;
     font-style: italic;
     font-style: italic;
     vertical-align: 12px;
     vertical-align: 12px;
 }
 }
 
 
-.light #mast .title {
-    color: #369;
-}
-.dark #mast .title {
-    color: #eee;
-}
 
 
 #mast-right {
 #mast-right {
     display: inline-block;
     display: inline-block;
@@ -84,21 +58,6 @@ html[data-platform='iPad'] #mast {
     line-height: 44px;
     line-height: 44px;
 }
 }
 
 
-.light #mast-right a {
-    color: #369;
-}
-
-.dark #mast-right a {
-    color: #eee;
-}
-
-.light #mast nav  {
-    color: #369;
-}
-
-.dark #mast nav  {
-    color: #eee;
-}
 
 
 /*
 /*
     MAST HEAD DROPDOWN MENU
     MAST HEAD DROPDOWN MENU
@@ -145,33 +104,3 @@ html[data-platform='iPad'] #mast {
 html[data-platform='iPad'] #mast .dropdown {
 html[data-platform='iPad'] #mast .dropdown {
     top: 57px;
     top: 57px;
 }
 }
-
-/* Theme styles for drop down menu */
-
-.light #mast .dropdown {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
-}
-
-.dark #mast .dropdown {
-    background-color: #444;
-    box-shadow: 0 2px 8px #111;
-}
-
-.light #mast .dropdown a {
-    color: #369;
-    border-bottom: solid #ccc 1px;
-}
-
-.dark #mast .dropdown a {
-    color: #eee;
-    border-bottom: solid #333 1px;
-}
-
-.light #mast .dropdown a:hover {
-    background-color: #ddd;
-}
-
-.dark #mast .dropdown a:hover {
-    background-color: #777;
-}
\ No newline at end of file

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Navigation (theme) -- CSS file
+ */
+
+.light #nav {
+    background-color: #bbb;
+    box-shadow: 0 2px 8px #777;
+}
+.dark #nav {
+    background-color: #444;
+    box-shadow: 0 2px 8px #111;
+}
+
+.light #nav .nav-hdr {
+    color: #ddd;
+    border-bottom: solid 1px #999;
+    background-color: #aaa;
+}
+.dark #nav .nav-hdr {
+    color: #888;
+    border-bottom: solid 1px #444;
+    background-color: #555;
+}
+
+.light #nav a {
+    color: #369;
+    border-bottom: solid #ccc 1px;
+}
+.dark #nav a {
+    color: #eee;
+    border-bottom: solid #333 1px;
+}
+
+.light #nav a:hover {
+    background-color: #ddd;
+}
+.dark #nav a:hover {
+    background-color: #777;
+}
+
+#nav a div svg.embeddedIcon g.icon .glyph {
+    fill: #c66;
+}
+

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Navigation -- CSS file
+ ONOS GUI -- Navigation (layout) -- CSS file
  */
  */
 
 
 #nav {
 #nav {
@@ -31,31 +31,11 @@ html[data-platform='iPad'] #nav {
     top: 57px;
     top: 57px;
 }
 }
 
 
-.light #nav {
-    background-color: #bbb;
-    box-shadow: 0 2px 8px #777;
-}
-.dark #nav {
-    background-color: #444;
-    box-shadow: 0 2px 8px #111;
-}
-
 #nav .nav-hdr {
 #nav .nav-hdr {
     font-style: italic;
     font-style: italic;
     padding: 6px 8px 6px 8px;
     padding: 6px 8px 6px 8px;
 }
 }
 
 
-.light #nav .nav-hdr {
-    color: #ddd;
-    border-bottom: solid 1px #999;
-    background-color: #aaa;
-}
-.dark #nav .nav-hdr {
-    color: #888;
-    border-bottom: solid 1px #444;
-    background-color: #555;
-}
-
 #nav a {
 #nav a {
     text-decoration: none;
     text-decoration: none;
     font-size: 14pt;
     font-size: 14pt;
@@ -63,28 +43,8 @@ html[data-platform='iPad'] #nav {
     padding: 8px 16px 6px 12px;
     padding: 8px 16px 6px 12px;
 }
 }
 
 
-.light #nav a {
-    color: #369;
-    border-bottom: solid #ccc 1px;
-}
-.dark #nav a {
-    color: #eee;
-    border-bottom: solid #333 1px;
-}
-
-.light #nav a:hover {
-    background-color: #ddd;
-}
-.dark #nav a:hover {
-    background-color: #777;
-}
-
 #nav a div {
 #nav a div {
     display: inline-block;
     display: inline-block;
     vertical-align: middle;
     vertical-align: middle;
     padding-right: 4px;
     padding-right: 4px;
 }
 }
-
-#nav a div svg.embeddedIcon g.icon .glyph {
-    fill: #c66;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Glyph Service (theme) -- CSS file
+ */
+
+.light svg .glyph,
+.dark svg .glyph.overlay {
+    fill: black;
+}
+
+.dark svg .glyph,
+.light svg .glyph.overlay {
+    fill: white;
+}

@@ -15,20 +15,10 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Glyph Service -- CSS file
+ ONOS GUI -- Glyph Service (layout) -- CSS file
  */
  */
 
 
 svg .glyph {
 svg .glyph {
     stroke: none;
     stroke: none;
     fill-rule: evenodd;
     fill-rule: evenodd;
 }
 }
-
-.light svg .glyph,
-.dark svg .glyph.overlay {
-    fill: black;
-}
-
-.dark svg .glyph,
-.light svg .glyph.overlay {
-    fill: white;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Icon Service (theme) -- CSS file
+ */
+
+.light svg.embeddedIcon g.icon .glyph {
+    fill: white;
+}
+.dark svg.embeddedIcon g.icon .glyph {
+    fill: white;
+}
+
+
+/* Sortable table headers */
+.light div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: black;
+}
+.dark div.tableColSort svg.embeddedIcon .icon .glyph {
+    fill: #ccc;
+}
+
+.light svg.embeddedIcon .icon.active .glyph {
+    fill: green;
+}
+.dark svg.embeddedIcon .icon.active .glyph {
+    fill: #308C10;
+}
+
+.light table svg.embeddedIcon {
+    fill: #ccc;
+}
+.dark table svg.embeddedIcon {
+    fill: #222;
+}
+.light table svg.embeddedIcon .glyph {
+    fill: #333;
+}
+.dark table svg.embeddedIcon .glyph {
+    fill: #ccc;
+}
+
+.light svg.embeddedIcon .icon.active .glyph {
+    fill: green;
+}
+.light svg.embeddedIcon .icon.inactive .glyph {
+    fill: darkred;
+}
+.dark svg.embeddedIcon .icon.active .glyph {
+    fill: #308C10;
+}
+.dark svg.embeddedIcon .icon.inactive .glyph {
+    fill: #AD2D2D;
+}
+

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Icon Service -- CSS file
+ ONOS GUI -- Icon Service (layout) -- CSS file
  */
  */
 
 
 svg#IconLibDefs {
 svg#IconLibDefs {
@@ -37,56 +37,9 @@ svg.embeddedIcon g.icon rect {
 
 
 svg.embeddedIcon g.icon .glyph {
 svg.embeddedIcon g.icon .glyph {
     stroke: none;
     stroke: none;
-    fill: white;
     fill-rule: evenodd;
     fill-rule: evenodd;
 }
 }
 
 
-
-/* Sortable table headers */
-.light div.tableColSort svg.embeddedIcon .icon .glyph {
-    fill: black;
-}
-.dark div.tableColSort svg.embeddedIcon .icon .glyph {
-    fill: #ccc;
-}
-
-
-/* color schemes for specific icon classes */
-
 svg.embeddedIcon .icon.appInactive .glyph {
 svg.embeddedIcon .icon.appInactive .glyph {
     fill: none;
     fill: none;
 }
 }
-
-.light svg.embeddedIcon .icon.active .glyph {
-    fill: green;
-}
-.dark svg.embeddedIcon .icon.active .glyph {
-    fill: #308C10;
-}
-
-
-.light table svg.embeddedIcon {
-    fill: #ccc;
-}
-.dark table svg.embeddedIcon {
-    fill: #222;
-}
-.light table svg.embeddedIcon .glyph {
-    fill: #333;
-}
-.dark table svg.embeddedIcon .glyph {
-    fill: #ccc;
-}
-
-.light svg.embeddedIcon .icon.active .glyph {
-    fill: green;
-}
-.light svg.embeddedIcon .icon.inactive .glyph {
-    fill: darkred;
-}
-.dark svg.embeddedIcon .icon.active .glyph {
-    fill: #308C10;
-}
-.dark svg.embeddedIcon .icon.inactive .glyph {
-    fill: #AD2D2D;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Button Service (theme) -- CSS file
+ */
+
+
+/* Selected button color */
+.light .button svg.embeddedIcon .icon rect,
+.light .toggleButton.selected svg.embeddedIcon .icon rect,
+.light .radioButton.selected svg.embeddedIcon .icon rect {
+    fill: #838383;
+}
+
+.light .button:hover svg.embeddedIcon .icon rect,
+.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
+    /* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444444;
+}
+
+.light .button svg.embeddedIcon .glyph,
+.light .toggleButton.selected svg.embeddedIcon .glyph,
+.light .radioButton.selected svg.embeddedIcon .glyph {
+    fill: white;
+}
+
+.dark .button svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected svg.embeddedIcon .icon rect,
+.dark .radioButton.selected svg.embeddedIcon .icon rect {
+    fill: #151515;
+}
+
+.dark .button:hover svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
+    /* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444;
+}
+
+.dark .button svg.embeddedIcon .glyph,
+.dark .toggleButton.selected svg.embeddedIcon .glyph,
+.dark .radioButton.selected svg.embeddedIcon .glyph {
+    fill: #B2B2B2;
+}
+
+/* Unselected button color */
+.light .toggleButton svg.embeddedIcon .icon rect,
+.light .radioButton svg.embeddedIcon .icon rect {
+    fill: #eee;
+}
+
+.light .toggleButton:hover svg.embeddedIcon .icon rect,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #ccc;
+}
+
+.light .toggleButton svg.embeddedIcon .glyph,
+.light .radioButton svg.embeddedIcon .glyph {
+    fill: #bbb;
+}
+.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #999;
+}
+
+.dark .toggleButton svg.embeddedIcon .icon rect,
+.dark .radioButton svg.embeddedIcon .icon rect {
+    fill: #303030;
+}
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #555;
+}
+
+.dark .toggleButton svg.embeddedIcon .glyph,
+.dark .radioButton svg.embeddedIcon .glyph {
+    fill: #565656;
+}
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #777;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Button Service -- CSS file
+ ONOS GUI -- Button Service (layout) -- CSS file
  */
  */
 
 
 .button,
 .button,
@@ -39,82 +39,3 @@
 .radioButton svg.embeddedIcon .icon rect{
 .radioButton svg.embeddedIcon .icon rect{
     stroke: none;
     stroke: none;
 }
 }
-
-/* Selected button color */
-.light .button svg.embeddedIcon .icon rect,
-.light .toggleButton.selected svg.embeddedIcon .icon rect,
-.light .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #838383;
-}
-
-.light .button:hover svg.embeddedIcon .icon rect,
-.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
-/* NOTE: selected radio button should NOT have hover highlight */
-{
-    fill: #444444;
-}
-
-.light .button svg.embeddedIcon .glyph,
-.light .toggleButton.selected svg.embeddedIcon .glyph,
-.light .radioButton.selected svg.embeddedIcon .glyph {
-    fill: white;
-}
-
-.dark .button svg.embeddedIcon .icon rect,
-.dark .toggleButton.selected svg.embeddedIcon .icon rect,
-.dark .radioButton.selected svg.embeddedIcon .icon rect {
-    fill: #151515;
-}
-
-.dark .button:hover svg.embeddedIcon .icon rect,
-.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
-/* NOTE: selected radio button should NOT have hover highlight */
-{
-    fill: #444;
-}
-
-.dark .button svg.embeddedIcon .glyph,
-.dark .toggleButton.selected svg.embeddedIcon .glyph,
-.dark .radioButton.selected svg.embeddedIcon .glyph {
-    fill: #B2B2B2;
-}
-
-/* Unselected button color */
-.light .toggleButton svg.embeddedIcon .icon rect,
-.light .radioButton svg.embeddedIcon .icon rect {
-    fill: #eee;
-}
-
-.light .toggleButton:hover svg.embeddedIcon .icon rect,
-.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
-    fill: #ccc;
-}
-
-.light .toggleButton svg.embeddedIcon .glyph,
-.light .radioButton svg.embeddedIcon .glyph {
-    fill: #bbb;
-}
-.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
-.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
-    fill: #999;
-}
-
-.dark .toggleButton svg.embeddedIcon .icon rect,
-.dark .radioButton svg.embeddedIcon .icon rect {
-    fill: #303030;
-}
-
-.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
-.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
-    fill: #555;
-}
-
-.dark .toggleButton svg.embeddedIcon .glyph,
-.dark .radioButton svg.embeddedIcon .glyph {
-    fill: #565656;
-}
-
-.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
-.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
-    fill: #777;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ------ for summary-list tables (theme) ------ */
+
+.light div.summary-list tr:nth-child(even) {
+    background-color: #ddd;
+}
+.light div.summary-list tr:nth-child(odd) {
+    background-color: #eee;
+}
+.dark div.summary-list tr:nth-child(even) {
+    background-color: #333;
+}
+.dark div.summary-list tr:nth-child(odd) {
+    background-color: #444;
+}
+
+.light div.summary-list tr.selected {
+    background-color: deepskyblue !important;
+}
+
+.dark div.summary-list tr.selected {
+    background-color: #304860;
+}
+
+/* highlighting */
+.light div.summary-list tr.data-change {
+    background-color: #FDFFDC;
+}
+.dark div.summary-list tr.data-change {
+    background-color: #5A5600;
+}
+
+.light div.summary-list .table-header td {
+    background-color: #bbb;
+}
+.dark div.summary-list .table-header td {
+    background-color: #222;
+    color: #ccc;
+}
+
+.dark div.summary-list td {
+    color: #ccc;
+}
+
+/* Inactive */
+.light .ctrl-btns div g.icon rect,
+.light .ctrl-btns div:hover g.icon rect {
+    fill: #eee;
+}
+.dark .ctrl-btns div g.icon rect,
+.dark .ctrl-btns div:hover g.icon rect {
+    fill: #222;
+}
+
+.light .ctrl-btns div g.icon use {
+    fill: #ddd;
+}
+.dark .ctrl-btns div g.icon use {
+    fill: #333;
+}
+
+/* Active hover */
+.light .ctrl-btns div.active:hover g.icon rect {
+    fill: #800;
+}
+
+.dark .ctrl-btns div.active:hover g.icon rect {
+    fill: #CE5650;
+}
+
+/* Active */
+.light .ctrl-btns div.active g.icon use {
+    fill: #fff;
+}
+.dark .ctrl-btns div.active g.icon use {
+    fill: #eee;
+}
+
+.light .ctrl-btns div.active g.icon rect {
+    fill: #bbb;
+}
+.dark .ctrl-btns div.active g.icon rect {
+    fill: #444;
+}
+
+/* Refresh button specific */
+.light .ctrl-btns div.refresh.active g.icon rect {
+    fill: #964949;
+}
+
+.dark .ctrl-btns div.refresh.active g.icon rect {
+    fill: #9B4641;
+}
+.light .ctrl-btns div.refresh:hover g.icon rect {
+    fill: #964949;
+}
+
+.dark .ctrl-btns div.refresh:hover g.icon rect {
+    fill: #9B4641;
+}
+

@@ -14,7 +14,7 @@
  * limitations under the License.
  * limitations under the License.
  */
  */
 
 
-/* ------ for summary-list tables ------ */
+/* ------ for summary-list tables (layout) ------ */
 
 
 div.summary-list {
 div.summary-list {
     margin: 0 20px 16px 10px;
     margin: 0 20px 16px 10px;
@@ -42,37 +42,11 @@ div.summary-list tr.no-data td {
     font-style: italic;
     font-style: italic;
 }
 }
 
 
-.light div.summary-list tr:nth-child(even) {
-    background-color: #ddd;
-}
-.light div.summary-list tr:nth-child(odd) {
-    background-color: #eee;
-}
-.dark div.summary-list tr:nth-child(even) {
-    background-color: #333;
-}
-.dark div.summary-list tr:nth-child(odd) {
-    background-color: #444;
-}
-
-.light div.summary-list tr.selected {
-    background-color: deepskyblue !important;
-}
-
-.dark div.summary-list tr.selected {
-    background-color: #304860;
-}
 
 
 /* highlighting */
 /* highlighting */
 div.summary-list tr {
 div.summary-list tr {
     transition: background-color 500ms;
     transition: background-color 500ms;
 }
 }
-.light div.summary-list tr.data-change {
-    background-color: #FDFFDC;
-}
-.dark div.summary-list tr.data-change {
-    background-color: #5A5600;
-}
 
 
 div.summary-list td {
 div.summary-list td {
     padding: 6px;
     padding: 6px;
@@ -92,23 +66,11 @@ div.summary-list .table-header td:last-child {
     border-radius: 0 8px 0 0;
     border-radius: 0 8px 0 0;
 }
 }
 
 
-.light div.summary-list .table-header td {
-    background-color: #bbb;
-}
-.dark div.summary-list .table-header td {
-    background-color: #222;
-    color: #ccc;
-}
-
 /* rows are selectable */
 /* rows are selectable */
 div.summary-list .table-body td {
 div.summary-list .table-body td {
     cursor: pointer;
     cursor: pointer;
 }
 }
 
 
-.dark div.summary-list td {
-    color: #ccc;
-}
-
 /* Tabular view upper right control buttons */
 /* Tabular view upper right control buttons */
 
 
 div.ctrl-btns {
 div.ctrl-btns {
@@ -119,7 +81,6 @@ div.ctrl-btns {
     margin-top: 7px;
     margin-top: 7px;
 }
 }
 
 
-
 div.ctrl-btns div {
 div.ctrl-btns div {
     display: inline-block;
     display: inline-block;
     padding: 4px;
     padding: 4px;
@@ -131,60 +92,3 @@ div.ctrl-btns div.separator  {
     width: 24px;
     width: 24px;
     border: none;
     border: none;
 }
 }
-
-/* Inactive */
-.light .ctrl-btns div g.icon rect,
-.light .ctrl-btns div:hover g.icon rect {
-    fill: #eee;
-}
-.dark .ctrl-btns div g.icon rect,
-.dark .ctrl-btns div:hover g.icon rect {
-    fill: #222;
-}
-
-.light .ctrl-btns div g.icon use {
-    fill: #ddd;
-}
-.dark .ctrl-btns div g.icon use {
-    fill: #333;
-}
-
-/* Active hover */
-.light .ctrl-btns div.active:hover g.icon rect {
-    fill: #800;
-}
-
-.dark .ctrl-btns div.active:hover g.icon rect {
-    fill: #CE5650;
-}
-
-/* Active */
-.light .ctrl-btns div.active g.icon use {
-    fill: #fff;
-}
-.dark .ctrl-btns div.active g.icon use {
-    fill: #eee;
-}
-
-.light .ctrl-btns div.active g.icon rect {
-    fill: #bbb;
-}
-.dark .ctrl-btns div.active g.icon rect {
-    fill: #444;
-}
-
-/* Refresh button specific */
-.light .ctrl-btns div.refresh.active g.icon rect {
-    fill: #964949;
-}
-
-.dark .ctrl-btns div.refresh.active g.icon rect {
-    fill: #9B4641;
-}
-.light .ctrl-btns div.refresh:hover g.icon rect {
-    fill: #964949;
-}
-
-.dark .ctrl-btns div.refresh:hover g.icon rect {
-    fill: #9B4641;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Toolbar Service (theme) -- CSS file
+ */
+
+.light .tbar-arrow svg.embeddedIcon .icon .glyph {
+    fill: #838383;
+}
+.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
+    fill: #B2B2B2;
+}
+
+.tbar-arrow svg.embeddedIcon .icon rect {
+    stroke: none;
+}
+.light .tbar-arrow svg.embeddedIcon .icon rect {
+    fill: none;
+}
+.dark .tbar-arrow svg.embeddedIcon .icon rect {
+    fill: none;
+}
+
+.light .separator {
+    border-color: #ddd;
+}
+.dark .separator {
+    border-color: #1A1A1A;
+}

@@ -15,17 +15,9 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Toolbar Service -- CSS file
+ ONOS GUI -- Toolbar Service (layout) -- CSS file
  */
  */
 
 
-.light .tbar-arrow svg.embeddedIcon .icon .glyph {
-    fill: #838383;
-}
-.dark .tbar-arrow svg.embeddedIcon .icon .glyph {
-    fill: #B2B2B2;
-}
-
-
 div.tbar-arrow {
 div.tbar-arrow {
     position: absolute;
     position: absolute;
     top: 53%;
     top: 53%;
@@ -42,17 +34,6 @@ div.tbar-arrow {
     margin-right: -3%;
     margin-right: -3%;
 }
 }
 
 
-.tbar-arrow svg.embeddedIcon .icon rect {
-    stroke: none;
-}
-.light .tbar-arrow svg.embeddedIcon .icon rect {
-    fill: none;
-}
-.dark .tbar-arrow svg.embeddedIcon .icon rect {
-    fill: none;
-}
-
-
 .toolbar {
 .toolbar {
     line-height: 125%;
     line-height: 125%;
 }
 }
@@ -60,8 +41,6 @@ div.tbar-arrow {
     display: inline-block;
     display: inline-block;
 }
 }
 
 
-
-
 .separator {
 .separator {
     border: 1px solid;
     border: 1px solid;
     margin: 0 4px 0 4px;
     margin: 0 4px 0 4px;
@@ -69,9 +48,3 @@ div.tbar-arrow {
     height: 23px;
     height: 23px;
     width: 0;
     width: 0;
 }
 }
-.light .separator {
-    border-color: #ddd;
-}
-.dark .separator {
-    border-color: #1A1A1A;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Tooltip Service (theme) -- CSS file
+ */
+
+
+.light #tooltip {
+    background-color: #ddd;
+    color: #444;
+    border-color: #ccc;
+}
+
+.dark #tooltip {
+    background-color: #151515;
+    color: #B2B2B2;
+    border-color: #252525;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Tooltip Service -- CSS file
+ ONOS GUI -- Tooltip Service (layout) -- CSS file
  */
  */
 
 
 #tooltip {
 #tooltip {
@@ -28,17 +28,3 @@
     display: none;
     display: none;
     pointer-events: none;
     pointer-events: none;
 }
 }
-
-/* colors subject to change */
-
-.light #tooltip {
-    background-color: #ddd;
-    color: #444;
-    border-color: #ccc;
-}
-
-.dark #tooltip {
-    background-color: #151515;
-    color: #B2B2B2;
-    border-color: #252525;
-}
\ No newline at end of file

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- core (theme) -- CSS file
+ */
+
+body.light {
+    background-color: white;
+}
+body.dark {
+    background-color: #2b2b2b;
+}
+
+.light #view h2 {
+    color: #800;
+}
+.dark #view h2 {
+    color: #CE5650;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- core -- CSS file
+ ONOS GUI -- core (layout) -- CSS file
  */
  */
 
 
 html {
 html {
@@ -35,13 +35,6 @@ body {
     overflow: hidden;
     overflow: hidden;
 }
 }
 
 
-body.light {
-    background-color: white;
-}
-body.dark {
-    background-color: #2b2b2b;
-}
-
 #view {
 #view {
     padding: 6px;
     padding: 6px;
     width: 100%;
     width: 100%;
@@ -52,21 +45,3 @@ body.dark {
     padding-left: 12px;
     padding-left: 12px;
 }
 }
 
 
-.light #view h2 {
-    color: #800;
-}
-.dark #view h2 {
-    color: #CE5650;
-}
-
-.centered {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    box-shadow: 2px 2px 24px 5px #888;
-    background-color: #eee;
-    margin: 0;
-    padding: 10px;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Applications View (theme) -- CSS file
+ */
+
+.light #app-dialog p {
+    color: darkred;
+}
+.dark #app-dialog p {
+    color: #c55;
+}
+
+.light #app-dialog p.strong {
+    color: red;
+    background-color: #ff0;
+}
+.dark #app-dialog p.strong {
+    color: #c55;
+    background-color: #dd4;
+}
+
+
+.light #app-dialog.floatpanel.dialog {
+    background-color: #fff;
+}
+.dark #app-dialog.floatpanel.dialog {
+    background-color: #444;
+}
+
+.light #application-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #application-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #ccc;
+}
+
+#application-details-panel td.label,
+#application-details-panel .app-url i {
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+.light #application-details-panel hr {
+    opacity: .5;
+    border-color: #FFF;
+}
+.dark #application-details-panel hr {
+    border-color: #666;
+}
+
+.light #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+.light #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #EBEDF2;
+}
+.dark #application-details-panel .bottom tr:nth-child(odd) {
+    background-color: #333;
+}
+.dark #application-details-panel .bottom tr:nth-child(even) {
+    background-color: #555;
+}
+
+.light div.dropping {
+    border: solid 3px deepskyblue;
+}
+
+.dark div.dropping {
+    border: solid 3px deepskyblue;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Applications View -- CSS file
+ ONOS GUI -- Applications View (layout) -- CSS file
  */
  */
 
 
 #ov-app h2 {
 #ov-app h2 {
@@ -34,32 +34,10 @@
 #app-dialog p {
 #app-dialog p {
     font-size: 12pt;
     font-size: 12pt;
 }
 }
-.light #app-dialog p {
-    color: darkred;
-}
-.dark #app-dialog p {
-    color: #c55;
-}
 
 
 #app-dialog p.strong {
 #app-dialog p.strong {
     font-weight: bold;
     font-weight: bold;
 }
 }
-.light #app-dialog p.strong {
-    color: red;
-    background-color: #ff0;
-}
-.dark #app-dialog p.strong {
-    color: #c55;
-    background-color: #dd4;
-}
-
-
-.light #app-dialog.floatpanel.dialog {
-    background-color: #fff;
-}
-.dark #app-dialog.floatpanel.dialog {
-    background-color: #444;
-}
 
 
 #application-details-panel.floatpanel {
 #application-details-panel.floatpanel {
     -moz-border-radius: 0;
     -moz-border-radius: 0;
@@ -67,12 +45,6 @@
     z-index: 0;
     z-index: 0;
 }
 }
 
 
-.light #application-details-panel.floatpanel {
-    background-color: rgb(229, 234, 237);
-}
-.dark #application-details-panel.floatpanel {
-    background-color: #3A4042;
-}
 
 
 #application-details-panel .container {
 #application-details-panel .container {
     padding: 0 10px;
     padding: 0 10px;
@@ -84,12 +56,6 @@
     top: 0;
     top: 0;
     cursor: pointer;
     cursor: pointer;
 }
 }
-.light .close-btn svg.embeddedIcon .icon.plus .glyph {
-    fill: #aaa;
-}
-.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
-    fill: #ccc;
-}
 
 
 #application-details-panel .app-icon {
 #application-details-panel .app-icon {
     display: inline-block;
     display: inline-block;
@@ -127,8 +93,6 @@
 #application-details-panel .app-url i {
 #application-details-panel .app-url i {
     font-style: italic;
     font-style: italic;
     padding-right: 12px;
     padding-right: 12px;
-    /* works for both light and dark themes ... */
-    color: #777;
 }
 }
 
 
 #application-details-panel td.value-bold {
 #application-details-panel td.value-bold {
@@ -143,13 +107,6 @@
     width: 95%;
     width: 95%;
     margin: 10px auto;
     margin: 10px auto;
 }
 }
-.light #application-details-panel hr {
-    opacity: .5;
-    border-color: #FFF;
-}
-.dark #application-details-panel hr {
-    border-color: #666;
-}
 
 
 #application-details-panel .bottom table {
 #application-details-panel .bottom table {
     border-spacing: 0;
     border-spacing: 0;
@@ -161,27 +118,8 @@
     text-align: left;
     text-align: left;
 }
 }
 
 
-.light #application-details-panel .bottom tr:nth-child(odd) {
-    background-color: #f9f9f9;
-}
-.light #application-details-panel .bottom tr:nth-child(even) {
-    background-color: #EBEDF2;
-}
-.dark #application-details-panel .bottom tr:nth-child(odd) {
-    background-color: #333;
-}
-.dark #application-details-panel .bottom tr:nth-child(even) {
-    background-color: #555;
-}
 
 
 .dropping {
 .dropping {
 
 
 }
 }
 
 
-.light div.dropping {
-    border: solid 3px deepskyblue;
-}
-
-.dark div.dropping {
-    border: solid 3px deepskyblue;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Device View (theme) -- CSS file
+ */
+
+.light #ov-device .current-view use {
+    fill: white;
+}
+.dark #ov-device .current-view use {
+    fill: #304860;
+}
+
+.light #ov-device .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-device .current-view rect {
+    fill: #eee;
+}
+
+.light #device-details-panel.floatpanel {
+    background-color: rgb(229, 234, 237);
+}
+.dark #device-details-panel.floatpanel {
+    background-color: #3A4042;
+}
+
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+    fill: #ccc;
+}
+
+.light .dev-icon svg.embeddedIcon .glyph {
+    fill: rgb(0, 172, 229);
+}
+.dark .dev-icon svg.embeddedIcon .glyph {
+    fill: #486D91;
+}
+
+#device-details-panel .editable {
+    cursor: pointer;
+    border-bottom: 1px dashed darkgreen;
+}
+
+#device-details-panel td.label {
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+.light #device-details-panel hr {
+    opacity: .5;
+    border-color: #FFF;
+}
+.dark #device-details-panel hr {
+    border-color: #666;
+}
+
+.light #device-details-panel .bottom th {
+    background-color: #CCC;
+    /* default text color */
+}
+.dark #device-details-panel .bottom th {
+    background-color: #131313;
+    color: #ccc;
+}
+
+.light #device-details-panel .bottom tr:nth-child(odd) {
+    background-color: #f9f9f9;
+}
+.light #device-details-panel .bottom tr:nth-child(even) {
+    background-color: #EBEDF2;
+}
+.dark #device-details-panel .bottom tr:nth-child(odd) {
+    background-color: #333;
+}
+.dark #device-details-panel .bottom tr:nth-child(even) {
+    background-color: #555;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Device View -- CSS file
+ ONOS GUI -- Device View (layout) -- CSS file
  */
  */
 
 
 #ov-device h2 {
 #ov-device h2 {
@@ -25,19 +25,6 @@
 #ov-device div.ctrl-btns {
 #ov-device div.ctrl-btns {
 }
 }
 
 
-.light #ov-device .current-view use {
-    fill: white;
-}
-.dark #ov-device .current-view use {
-    fill: #304860;
-}
-
-.light #ov-device .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-device .current-view rect {
-    fill: #eee;
-}
 
 
 /* More in generic panel.css */
 /* More in generic panel.css */
 
 
@@ -47,12 +34,6 @@
     z-index: 0;
     z-index: 0;
 }
 }
 
 
-.light #device-details-panel.floatpanel {
-    background-color: rgb(229, 234, 237);
-}
-.dark #device-details-panel.floatpanel {
-    background-color: #3A4042;
-}
 
 
 #device-details-panel .container {
 #device-details-panel .container {
     padding: 0 12px;
     padding: 0 12px;
@@ -64,34 +45,18 @@
     top: 0;
     top: 0;
     cursor: pointer;
     cursor: pointer;
 }
 }
-.light .close-btn svg.embeddedIcon .icon.plus .glyph {
-    fill: #aaa;
-}
-.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
-    fill: #ccc;
-}
 
 
 #device-details-panel .dev-icon {
 #device-details-panel .dev-icon {
     display: inline-block;
     display: inline-block;
     padding: 0 6px 0 0;
     padding: 0 6px 0 0;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.light .dev-icon svg.embeddedIcon .glyph {
-    fill: rgb(0, 172, 229);
-}
-.dark .dev-icon svg.embeddedIcon .glyph {
-    fill: #486D91;
-}
 
 
 #device-details-panel h2 {
 #device-details-panel h2 {
     display: inline-block;
     display: inline-block;
     margin: 8px 0;
     margin: 8px 0;
 }
 }
 
 
-#device-details-panel .editable {
-    cursor: pointer;
-    border-bottom: 1px dashed darkgreen;
-}
 
 
 #device-details-panel h2 input {
 #device-details-panel h2 input {
     font-size: 1.0em;
     font-size: 1.0em;
@@ -108,8 +73,6 @@
 #device-details-panel td.label {
 #device-details-panel td.label {
     font-style: italic;
     font-style: italic;
     padding-right: 12px;
     padding-right: 12px;
-    /* works for both light and dark themes ... */
-    color: #777;
 }
 }
 
 
 #device-details-panel .actionBtns div {
 #device-details-panel .actionBtns div {
@@ -121,13 +84,6 @@
     margin: 0 auto;
     margin: 0 auto;
 }
 }
 
 
-.light #device-details-panel hr {
-    opacity: .5;
-    border-color: #FFF;
-}
-.dark #device-details-panel hr {
-    border-color: #666;
-}
 
 
 #device-details-panel .bottom table {
 #device-details-panel .bottom table {
     border-spacing: 0;
     border-spacing: 0;
@@ -137,14 +93,6 @@
     letter-spacing: 0.02em;
     letter-spacing: 0.02em;
 }
 }
 
 
-.light #device-details-panel .bottom th {
-    background-color: #CCC;
-    /* default text color */
-}
-.dark #device-details-panel .bottom th {
-    background-color: #131313;
-    color: #ccc;
-}
 
 
 #device-details-panel .bottom th,
 #device-details-panel .bottom th,
 #device-details-panel .bottom td {
 #device-details-panel .bottom td {
@@ -152,15 +100,3 @@
     text-align: center;
     text-align: center;
 }
 }
 
 
-.light #device-details-panel .bottom tr:nth-child(odd) {
-    background-color: #f9f9f9;
-}
-.light #device-details-panel .bottom tr:nth-child(even) {
-    background-color: #EBEDF2;
-}
-.dark #device-details-panel .bottom tr:nth-child(odd) {
-    background-color: #333;
-}
-.dark #device-details-panel .bottom tr:nth-child(even) {
-    background-color: #555;
-}

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Flow View (theme) -- CSS file
+ */
+
+
+.light #ov-flow .current-view use {
+    fill: white;
+}
+.dark #ov-flow .current-view use {
+    fill: #304860;
+}
+
+.light #ov-flow .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-flow .current-view rect {
+    fill: #eee;
+}
+
+.light #ov-flow tr:nth-child(6n + 1),
+.light #ov-flow tr:nth-child(6n + 2),
+.light #ov-flow tr:nth-child(6n + 3) {
+    background-color: #eee;
+}
+.light #ov-flow tr:nth-child(6n + 4),
+.light #ov-flow tr:nth-child(6n + 5),
+.light #ov-flow tr:nth-child(6n) {
+    background-color: #ddd;
+}
+.dark #ov-flow tr:nth-child(6n + 1),
+.dark #ov-flow tr:nth-child(6n + 2),
+.dark #ov-flow tr:nth-child(6n + 3) {
+    background-color: #444;
+}
+.dark #ov-flow tr:nth-child(6n + 4),
+.dark #ov-flow tr:nth-child(6n + 5),
+.dark #ov-flow tr:nth-child(6n) {
+    background-color: #333;
+}
+
+/* highlighted color */
+.light #ov-flow tr:nth-child(6n + 1).data-change,
+.light #ov-flow tr:nth-child(6n + 2).data-change,
+.light #ov-flow tr:nth-child(6n + 3).data-change,
+.light #ov-flow tr:nth-child(6n + 4).data-change,
+.light #ov-flow tr:nth-child(6n + 5).data-change,
+.light #ov-flow tr:nth-child(6n).data-change {
+    background-color: #FDFFDC;
+}
+.dark #ov-flow tr:nth-child(6n + 1).data-change,
+.dark #ov-flow tr:nth-child(6n + 2).data-change,
+.dark #ov-flow tr:nth-child(6n + 3).data-change,
+.dark #ov-flow tr:nth-child(6n + 4).data-change,
+.dark #ov-flow tr:nth-child(6n + 5).data-change,
+.dark #ov-flow tr:nth-child(6n).data-change {
+    background-color: #5A5600;
+}
+
+#ov-flow td.selector,
+#ov-flow td.treatment {
+    opacity: 0.65;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Flow View -- CSS file
+ ONOS GUI -- Flow View (layout) -- CSS file
  */
  */
 
 
 #ov-flow h2 {
 #ov-flow h2 {
@@ -25,59 +25,6 @@
 #ov-flow div.ctrl-btns {
 #ov-flow div.ctrl-btns {
 }
 }
 
 
-.light #ov-flow .current-view use {
-    fill: white;
-}
-.dark #ov-flow .current-view use {
-    fill: #304860;
-}
-
-.light #ov-flow .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-flow .current-view rect {
-    fill: #eee;
-}
-
-.light #ov-flow tr:nth-child(6n + 1),
-.light #ov-flow tr:nth-child(6n + 2),
-.light #ov-flow tr:nth-child(6n + 3) {
-    background-color: #eee;
-}
-.light #ov-flow tr:nth-child(6n + 4),
-.light #ov-flow tr:nth-child(6n + 5),
-.light #ov-flow tr:nth-child(6n) {
-    background-color: #ddd;
-}
-.dark #ov-flow tr:nth-child(6n + 1),
-.dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3) {
-    background-color: #444;
-}
-.dark #ov-flow tr:nth-child(6n + 4),
-.dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n) {
-    background-color: #333;
-}
-
-/* highlighted color */
-.light #ov-flow tr:nth-child(6n + 1).data-change,
-.light #ov-flow tr:nth-child(6n + 2).data-change,
-.light #ov-flow tr:nth-child(6n + 3).data-change,
-.light #ov-flow tr:nth-child(6n + 4).data-change,
-.light #ov-flow tr:nth-child(6n + 5).data-change,
-.light #ov-flow tr:nth-child(6n).data-change {
-    background-color: #FDFFDC;
-}
-.dark #ov-flow tr:nth-child(6n + 1).data-change,
-.dark #ov-flow tr:nth-child(6n + 2).data-change,
-.dark #ov-flow tr:nth-child(6n + 3).data-change,
-.dark #ov-flow tr:nth-child(6n + 4).data-change,
-.dark #ov-flow tr:nth-child(6n + 5).data-change,
-.dark #ov-flow tr:nth-child(6n).data-change {
-    background-color: #5A5600;
-}
-
 #ov-flow td {
 #ov-flow td {
     text-align: center;
     text-align: center;
 }
 }
@@ -88,5 +35,4 @@
 #ov-flow td.treatment {
 #ov-flow td.treatment {
     text-align: left;
     text-align: left;
     padding-left: 36px;
     padding-left: 36px;
-    opacity: 0.65;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Group View (theme) -- CSS file
+ */
+
+.light #ov-group .current-view use {
+    fill: white;
+}
+.dark #ov-group .current-view use {
+    fill: #304860;
+}
+
+.light #ov-group .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-group .current-view rect {
+    fill: #eee;
+}
+
+.light #ov-group tr:nth-child(4n + 1),
+.light #ov-group tr:nth-child(4n + 2) {
+    background-color: #eee;
+}
+.light #ov-group tr:nth-child(4n + 3),
+.light #ov-group tr:nth-child(4n) {
+    background-color: #ddd;
+}
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
+    background-color: #444;
+}
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
+    background-color: #333;
+}
+
+/* highlighted color */
+.light #ov-group tr:nth-child(4n + 1).data-change,
+.light #ov-group tr:nth-child(4n + 2).data-change,
+.light #ov-group tr:nth-child(4n + 3).data-change,
+.light #ov-group tr:nth-child(4n).data-change {
+    background-color: #FDFFDC;
+}
+.dark #ov-group tr:nth-child(4n + 1).data-change,
+.dark #ov-group tr:nth-child(4n + 2).data-change,
+.dark #ov-group tr:nth-child(4n + 3).data-change,
+.dark #ov-group tr:nth-child(4n).data-change {
+    background-color: #5A5600;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Group View -- CSS file
+ ONOS GUI -- Group View (layout) -- CSS file
  */
  */
 
 
 #ov-group h2 {
 #ov-group h2 {
@@ -25,50 +25,7 @@
 #ov-group div.ctrl-btns {
 #ov-group div.ctrl-btns {
 }
 }
 
 
-.light #ov-group .current-view use {
-    fill: white;
-}
-.dark #ov-group .current-view use {
-    fill: #304860;
-}
-
-.light #ov-group .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-group .current-view rect {
-    fill: #eee;
-}
-
-.light #ov-group tr:nth-child(4n + 1),
-.light #ov-group tr:nth-child(4n + 2) {
-    background-color: #eee;
-}
-.light #ov-group tr:nth-child(4n + 3),
-.light #ov-group tr:nth-child(4n) {
-    background-color: #ddd;
-}
-.dark #ov-group tr:nth-child(4n + 1),
-.dark #ov-group tr:nth-child(4n + 2) {
-    background-color: #444;
-}
-.dark #ov-group tr:nth-child(4n + 3),
-.dark #ov-group tr:nth-child(4n) {
-    background-color: #333;
-}
 
 
-/* highlighted color */
-.light #ov-group tr:nth-child(4n + 1).data-change,
-.light #ov-group tr:nth-child(4n + 2).data-change,
-.light #ov-group tr:nth-child(4n + 3).data-change,
-.light #ov-group tr:nth-child(4n).data-change {
-    background-color: #FDFFDC;
-}
-.dark #ov-group tr:nth-child(4n + 1).data-change,
-.dark #ov-group tr:nth-child(4n + 2).data-change,
-.dark #ov-group tr:nth-child(4n + 3).data-change,
-.dark #ov-group tr:nth-child(4n).data-change {
-    background-color: #5A5600;
-}
 
 
 #ov-group td {
 #ov-group td {
     text-align: center;
     text-align: center;

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Intent View (theme) -- CSS file
+ */
+
+.light #ov-intent tr:nth-child(6n + 1),
+.light #ov-intent tr:nth-child(6n + 2),
+.light #ov-intent tr:nth-child(6n + 3) {
+    background-color: #eee;
+}
+.light #ov-intent tr:nth-child(6n + 4),
+.light #ov-intent tr:nth-child(6n + 5),
+.light #ov-intent tr:nth-child(6n) {
+    background-color: #ddd;
+}
+.dark #ov-intent tr:nth-child(6n + 1),
+.dark #ov-intent tr:nth-child(6n + 2),
+.dark #ov-intent tr:nth-child(6n + 3) {
+    background-color: #444;
+}
+.dark #ov-intent tr:nth-child(6n + 4),
+.dark #ov-intent tr:nth-child(6n + 5),
+.dark #ov-intent tr:nth-child(6n) {
+    background-color: #333;
+}
+
+.light #ov-intent tr:nth-child(6n + 1).data-change,
+.light #ov-intent tr:nth-child(6n + 2).data-change,
+.light #ov-intent tr:nth-child(6n + 3).data-change,
+.light #ov-intent tr:nth-child(6n + 4).data-change,
+.light #ov-intent tr:nth-child(6n + 5).data-change,
+.light #ov-intent tr:nth-child(6n).data-change {
+    background-color: #FDFFDC;
+}
+.dark #ov-intent tr:nth-child(6n + 1).data-change,
+.dark #ov-intent tr:nth-child(6n + 2).data-change,
+.dark #ov-intent tr:nth-child(6n + 3).data-change,
+.dark #ov-intent tr:nth-child(6n + 4).data-change,
+.dark #ov-intent tr:nth-child(6n + 5).data-change,
+.dark #ov-intent tr:nth-child(6n).data-change {
+    background-color: #5A5600;
+}
+
+#ov-intent td.resources,
+#ov-intent td.details {
+    opacity: 0.65;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Intent View -- CSS file
+ ONOS GUI -- Intent View (layout) -- CSS file
  */
  */
 
 
 #ov-intent h2 {
 #ov-intent h2 {
@@ -25,46 +25,8 @@
 #ov-intent div.ctrl-btns {
 #ov-intent div.ctrl-btns {
 }
 }
 
 
-.light #ov-intent tr:nth-child(6n + 1),
-.light #ov-intent tr:nth-child(6n + 2),
-.light #ov-intent tr:nth-child(6n + 3) {
-    background-color: #eee;
-}
-.light #ov-intent tr:nth-child(6n + 4),
-.light #ov-intent tr:nth-child(6n + 5),
-.light #ov-intent tr:nth-child(6n) {
-    background-color: #ddd;
-}
-.dark #ov-intent tr:nth-child(6n + 1),
-.dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3) {
-    background-color: #444;
-}
-.dark #ov-intent tr:nth-child(6n + 4),
-.dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n) {
-    background-color: #333;
-}
-
-.light #ov-intent tr:nth-child(6n + 1).data-change,
-.light #ov-intent tr:nth-child(6n + 2).data-change,
-.light #ov-intent tr:nth-child(6n + 3).data-change,
-.light #ov-intent tr:nth-child(6n + 4).data-change,
-.light #ov-intent tr:nth-child(6n + 5).data-change,
-.light #ov-intent tr:nth-child(6n).data-change {
-    background-color: #FDFFDC;
-}
-.dark #ov-intent tr:nth-child(6n + 1).data-change,
-.dark #ov-intent tr:nth-child(6n + 2).data-change,
-.dark #ov-intent tr:nth-child(6n + 3).data-change,
-.dark #ov-intent tr:nth-child(6n + 4).data-change,
-.dark #ov-intent tr:nth-child(6n + 5).data-change,
-.dark #ov-intent tr:nth-child(6n).data-change {
-    background-color: #5A5600;
-}
 
 
 #ov-intent td.resources,
 #ov-intent td.resources,
 #ov-intent td.details {
 #ov-intent td.details {
     padding-left: 36px;
     padding-left: 36px;
-    opacity: 0.65;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Meter View (theme) -- CSS file
+ */
+
+.light #ov-meter .current-view use {
+    fill: white;
+}
+.dark #ov-meter .current-view use {
+    fill: #304860;
+}
+
+.light #ov-meter .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-meter .current-view rect {
+    fill: #eee;
+}
+
+.light #ov-meter tr:nth-child(4n + 1),
+.light #ov-meter tr:nth-child(4n + 2) {
+    background-color: #eee;
+}
+.light #ov-meter tr:nth-child(4n + 3),
+.light #ov-meter tr:nth-child(4n) {
+    background-color: #ddd;
+}
+.dark #ov-meter tr:nth-child(4n + 1),
+.dark #ov-meter tr:nth-child(4n + 2) {
+    background-color: #444;
+}
+.dark #ov-meter tr:nth-child(4n + 3),
+.dark #ov-meter tr:nth-child(4n) {
+    background-color: #333;
+}
+
+/* highlighted color */
+.light #ov-meter tr:nth-child(4n + 1).data-change,
+.light #ov-meter tr:nth-child(4n + 2).data-change,
+.light #ov-meter tr:nth-child(4n + 3).data-change,
+.light #ov-meter tr:nth-child(4n).data-change {
+    background-color: #FDFFDC;
+}
+.dark #ov-meter tr:nth-child(4n + 1).data-change,
+.dark #ov-meter tr:nth-child(4n + 2).data-change,
+.dark #ov-meter tr:nth-child(4n + 3).data-change,
+.dark #ov-meter tr:nth-child(4n).data-change {
+    background-color: #5A5600;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Meter View -- CSS file
+ ONOS GUI -- Meter View (layout) -- CSS file
  */
  */
 
 
 #ov-meter h2 {
 #ov-meter h2 {
@@ -25,51 +25,6 @@
 #ov-meter div.ctrl-btns {
 #ov-meter div.ctrl-btns {
 }
 }
 
 
-.light #ov-meter .current-view use {
-    fill: white;
-}
-.dark #ov-meter .current-view use {
-    fill: #304860;
-}
-
-.light #ov-meter .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-meter .current-view rect {
-    fill: #eee;
-}
-
-.light #ov-meter tr:nth-child(4n + 1),
-.light #ov-meter tr:nth-child(4n + 2) {
-    background-color: #eee;
-}
-.light #ov-meter tr:nth-child(4n + 3),
-.light #ov-meter tr:nth-child(4n) {
-    background-color: #ddd;
-}
-.dark #ov-meter tr:nth-child(4n + 1),
-.dark #ov-meter tr:nth-child(4n + 2) {
-    background-color: #444;
-}
-.dark #ov-meter tr:nth-child(4n + 3),
-.dark #ov-meter tr:nth-child(4n) {
-    background-color: #333;
-}
-
-/* highlighted color */
-.light #ov-meter tr:nth-child(4n + 1).data-change,
-.light #ov-meter tr:nth-child(4n + 2).data-change,
-.light #ov-meter tr:nth-child(4n + 3).data-change,
-.light #ov-meter tr:nth-child(4n).data-change {
-    background-color: #FDFFDC;
-}
-.dark #ov-meter tr:nth-child(4n + 1).data-change,
-.dark #ov-meter tr:nth-child(4n + 2).data-change,
-.dark #ov-meter tr:nth-child(4n + 3).data-change,
-.dark #ov-meter tr:nth-child(4n).data-change {
-    background-color: #5A5600;
-}
-
 #ov-meter td {
 #ov-meter td {
     text-align: center;
     text-align: center;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Port View (theme) -- CSS file
+ */
+
+.light #ov-port .current-view use {
+    fill: white;
+}
+.dark #ov-port .current-view use {
+    fill: #304860;
+}
+
+.light #ov-port .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-port .current-view rect {
+    fill: #eee;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Port View -- CSS file
+ ONOS GUI -- Port View (layout) -- CSS file
  */
  */
 
 
 #ov-port h2 {
 #ov-port h2 {
@@ -25,20 +25,6 @@
 #ov-port div.ctrl-btns {
 #ov-port div.ctrl-btns {
 }
 }
 
 
-.light #ov-port .current-view use {
-    fill: white;
-}
-.dark #ov-port .current-view use {
-    fill: #304860;
-}
-
-.light #ov-port .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-port .current-view rect {
-    fill: #eee;
-}
-
 #ov-port td {
 #ov-port td {
     text-align: center;
     text-align: center;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Processor View (theme) -- CSS file
+ */
+
+.light #ov-processor .current-view use {
+    fill: white;
+}
+.dark #ov-processor .current-view use {
+    fill: #304860;
+}
+
+.light #ov-processor .current-view rect {
+    fill: deepskyblue;
+}
+.dark #ov-processor .current-view rect {
+    fill: #eee;
+}

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Processor View -- CSS file
+ ONOS GUI -- Processor View (layout) -- CSS file
  */
  */
 
 
 #ov-processor h2 {
 #ov-processor h2 {
@@ -26,20 +26,6 @@
     width: 40px;
     width: 40px;
 }
 }
 
 
-.light #ov-processor .current-view use {
-    fill: white;
-}
-.dark #ov-processor .current-view use {
-    fill: #304860;
-}
-
-.light #ov-processor .current-view rect {
-    fill: deepskyblue;
-}
-.dark #ov-processor .current-view rect {
-    fill: #eee;
-}
-
 #ov-processor td.number {
 #ov-processor td.number {
     text-align: right;
     text-align: right;
 }
 }

+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology View (theme) -- CSS file
+ */
+
+/* --- Base SVG Layer --- */
+
+.light #ov-topo svg {
+    background-color: #fff;
+}
+.dark #ov-topo svg {
+    background-color: #2b2b2b;
+}
+
+/* --- "No Devices" Layer --- */
+
+.light #ov-topo svg .noDevsBird {
+    fill: #ecd;
+}
+.dark #ov-topo svg .noDevsBird {
+    fill: #683434;
+}
+
+.light #ov-topo svg #topo-noDevsLayer text {
+    fill: #dde;
+}
+.dark #ov-topo svg #topo-noDevsLayer text {
+    fill: #3b3b4f;
+}
+
+/* --- Topo Map --- */
+
+#ov-topo svg #topo-map {
+    stroke-width: 2px;
+    fill: transparent;
+}
+
+.light #ov-topo svg #topo-map {
+    stroke: #ddd;
+}
+.dark #ov-topo svg #topo-map {
+    stroke: #444;
+}
+
+/* --- general topo-panel styling --- */
+
+.light .topo-p svg .glyph {
+    fill: #222;
+}
+.dark .topo-p svg .glyph {
+    fill: #ddd;
+}
+
+.light .topo-p svg .glyph.overlay {
+    fill: #fff;
+}
+.dark .topo-p svg .glyph.overlay {
+    fill: #222;
+}
+
+.light .topo-p h2 {
+    color: black;
+}
+.dark .topo-p h2 {
+    color: #ddd;
+}
+
+.light .topo-p h3 {
+    color: black;
+}
+.dark .topo-p h3 {
+    color: #ddd;
+}
+
+.topo-p td.label {
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+.topo-p td.value {
+}
+
+.light .topo-p hr {
+    background-color: #ccc;
+    color: #ccc;
+}
+.dark .topo-p hr {
+    background-color: #888;
+    color: #888;
+}
+
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance svg rect {
+    stroke-width: 3.5;
+}
+#topo-p-instance .online svg rect {
+    opacity: 1;
+}
+.light #topo-p-instance svg rect {
+    fill: #ccc;
+    stroke: #aaa;
+}
+.light #topo-p-instance .online svg rect {
+    fill: #9cf;
+    stroke: #555;
+}
+.dark #topo-p-instance svg rect {
+    fill: #666;
+    stroke: #222;
+}
+.dark #topo-p-instance .online svg rect {
+    fill: #9cf;
+    stroke: #999;
+}
+
+
+#topo-p-instance svg .glyph {
+    fill: #888;
+    fill-rule: evenodd;
+}
+#topo-p-instance .online svg .glyph {
+    fill: #000;
+}
+
+
+#topo-p-instance svg .badgeIcon {
+    fill-rule: evenodd;
+    opacity: 0.4;
+}
+.light #topo-p-instance svg .badgeIcon {
+    fill: #777;
+}
+.dark #topo-p-instance svg .badgeIcon {
+    fill: #555;
+}
+
+#topo-p-instance .online svg .badgeIcon {
+    opacity: 1.0;
+}
+.light #topo-p-instance .online svg .badgeIcon {
+    fill: #fff;
+}
+.dark #topo-p-instance .online svg .badgeIcon {
+    fill: #fff;
+}
+
+#topo-p-instance svg text {
+    text-anchor: middle;
+    opacity: 0.3;
+}
+#topo-p-instance .online svg text {
+    opacity: 1.0;
+}
+.light #topo-p-instance svg text {
+    fill: #444;
+}
+.light #topo-p-instance .online svg text {
+    fill: #eee;
+}
+.dark #topo-p-instance svg text {
+    fill: #aaa;
+}
+.dark #topo-p-instance .online svg text {
+    fill: #ccc;
+}
+
+#topo-p-instance .onosInst.mastership {
+    opacity: 0.3;
+}
+#topo-p-instance .onosInst.mastership.affinity {
+    opacity: 1.0;
+}
+.light #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url(#blue-glow);
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url(#yellow-glow);
+}
+.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+}
+
+/* --- Topo Nodes --- */
+
+#ov-topo svg .suppressed {
+    opacity: 0.5 !important;
+}
+
+#ov-topo svg .suppressedmax {
+    opacity: 0.2 !important;
+}
+
+.light #ov-topo svg .node.selected rect,
+.light #ov-topo svg .node.selected circle {
+    fill: #f90;
+    filter: url(#blue-glow);
+}
+.dark #ov-topo svg .node.selected rect,
+.dark #ov-topo svg .node.selected circle {
+    fill: #f90;
+    filter: url(#yellow-glow);
+}
+.light.firefox #ov-topo svg .node.selected rect,
+.light.firefox #ov-topo svg .node.selected circle {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #ov-topo svg .node.selected rect,
+.dark.firefox #ov-topo svg .node.selected circle {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+}
+
+/* Device Nodes */
+
+#ov-topo svg .node.device rect {
+    stroke-width: 1.5;
+}
+
+#ov-topo svg .node.device.fixed rect {
+    stroke-width: 1.5;
+}
+.light #ov-topo svg .node.device.fixed rect {
+    stroke: #aaa;
+}
+.dark #ov-topo svg .node.device.fixed rect {
+    stroke: #999;
+}
+
+/* note: device is offline without the 'online' class */
+.light #ov-topo svg .node.device {
+    fill: #777;
+}
+.dark #ov-topo svg .node.device {
+    fill: #555;
+}
+
+.light #ov-topo svg .node.device rect {
+    stroke: #666;
+}
+.light #ov-topo svg .node.device rect {
+    stroke: #999;
+}
+
+.light #ov-topo svg .node.device.online {
+    fill: #6e7fa3;
+}
+.dark #ov-topo svg .node.device.online {
+    fill: #4E5C7F;
+}
+
+/* note: device is offline without the 'online' class */
+#ov-topo svg .node.device text {
+    fill: #bbb;
+    font: 10pt sans-serif;
+}
+
+#ov-topo svg .node.device.online text {
+    fill: white;
+}
+
+#ov-topo svg .node.device .svgIcon rect {
+    fill: #aaa;
+}
+#ov-topo svg .node.device .svgIcon use {
+    fill: #777;
+}
+#ov-topo svg .node.device.selected .svgIcon rect {
+    fill: #f90;
+}
+#ov-topo svg .node.device.online .svgIcon rect {
+    fill: #ccc;
+}
+#ov-topo svg .node.device.online .svgIcon use {
+    fill: #000;
+}
+#ov-topo svg .node.device.online.selected .svgIcon rect {
+    fill: #f90;
+}
+
+/* Badges */
+/* (... works for both light and dark themes...) */
+#ov-topo svg .node .badge circle {
+    stroke: #aaa;
+}
+
+#ov-topo svg .node .badge.badgeInfo circle {
+    fill: #99d;
+}
+
+#ov-topo svg .node .badge.badgeWarn circle {
+    fill: #da2;
+}
+
+#ov-topo svg .node .badge.badgeError circle {
+    fill: #e44;
+}
+
+#ov-topo svg .node .badge use {
+    fill: white !important;
+}
+
+#ov-topo svg .node .badge.badgeInfo use {
+    fill: #448;
+}
+
+#ov-topo svg .node .badge text {
+    fill: white !important;
+}
+
+#ov-topo svg .node .badge.badgeInfo text {
+    fill: #448;
+}
+
+/* Host Nodes */
+
+#ov-topo svg .node.host {
+}
+
+#ov-topo svg .node.host text {
+    stroke: none;
+    font: 9pt sans-serif;
+}
+.light #ov-topo svg .node.host text {
+    fill: #846;
+}
+.dark #ov-topo svg .node.host text {
+    fill: #BB809D;
+}
+
+.light svg .node.host circle {
+    stroke: #000;
+    fill: #edb;
+}
+.dark svg .node.host circle {
+    stroke: #eee;
+    fill: #B2A180;
+}
+
+.light svg .node.host .svgIcon {
+    fill: #444;
+}
+.dark svg .node.host .svgIcon {
+    fill: #222;
+}
+
+/* --- Topo Links --- */
+
+#ov-topo svg .link {
+    opacity: .9;
+}
+
+#ov-topo svg .link.selected,
+#ov-topo svg .link.enhanced {
+    stroke-width: 4.5px;
+}
+.light #ov-topo svg .link.selected,
+.light #ov-topo svg .link.enhanced {
+    filter: url(#blue-glow);
+}
+.dark #ov-topo svg .link.selected,
+.dark #ov-topo svg .link.enhanced {
+    filter: url(#yellow-glow);
+}
+.light.firefox #ov-topo svg .link.selected,
+.light.firefox #ov-topo svg .link.enhanced {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #ov-topo svg .link.selected,
+.dark.firefox #ov-topo svg .link.enhanced {
+    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+
+}
+
+#ov-topo svg .link.inactive {
+    opacity: .5;
+    stroke-dasharray: 8 4;
+}
+/* FIXME: Review for not-permitted links */
+#ov-topo svg .link.not-permitted {
+    stroke: rgb(255,0,0);
+    stroke-width: 5.0;
+    stroke-dasharray: 8 4;
+}
+
+#ov-topo svg .link.secondary {
+    stroke-width: 3px;
+}
+.light #ov-topo svg .link.secondary {
+    stroke: rgba(0,153,51,0.5);
+}
+.dark #ov-topo svg .link.secondary {
+    stroke: rgba(121,231,158,0.5);
+}
+
+/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+
+.light #ov-topo svg .link.secondary.port-traffic-Kbps {
+    stroke: rgb(0,153,51);
+    stroke-width: 5.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
+    stroke: rgb(98, 153, 118);
+    stroke-width: 5.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Mbps {
+    stroke: rgb(128,145,27);
+    stroke-width: 6.5;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
+    stroke: rgb(91, 109, 54);
+    stroke-width: 6.5;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Gbps {
+    stroke: rgb(255, 137, 3);
+    stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
+    stroke: rgb(174, 119, 55);
+    stroke-width: 8.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+    stroke: rgb(183, 30, 21);
+    stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+    stroke: rgb(127, 40, 39);
+    stroke-width: 8.0;
+}
+
+
+
+#ov-topo svg .link.animated {
+    stroke-dasharray: 8 5;
+    animation: ants 5s infinite linear;
+    /* below line will be added via Javascript based on path */
+    /*animation-direction: reverse;*/
+}
+@keyframes ants {
+    from {
+        stroke-dashoffset: 0;
+    }
+    to {
+        stroke-dashoffset: 400;
+    }
+}
+
+#ov-topo svg .link.primary {
+    stroke-width: 4px;
+}
+.light #ov-topo svg .link.primary {
+    stroke: #ffA300;
+}
+.dark #ov-topo svg .link.primary {
+    stroke: #D58E0F;
+}
+
+#ov-topo svg .link.secondary.optical {
+    stroke-width: 4px;
+}
+.light #ov-topo svg .link.secondary.optical {
+    stroke: rgba(128,64,255,0.5);
+}
+.dark #ov-topo svg .link.secondary.optical {
+    stroke: rgba(164,139,215,0.5);
+}
+
+#ov-topo svg .link.primary.optical {
+    stroke-width: 6px;
+}
+.light #ov-topo svg .link.primary.optical {
+    stroke: #74f;
+}
+.dark #ov-topo svg .link.primary.optical {
+    stroke: #7352CD;
+}
+
+/* Link Labels */
+#ov-topo svg .linkLabel rect {
+    stroke: none;
+}
+.light #ov-topo svg .linkLabel rect {
+    fill: #eee;
+}
+.dark #ov-topo svg .linkLabel rect {
+    fill: #555;
+}
+
+.light #ov-topo svg .linkLabel text {
+    fill: #444;
+}
+.dark #ov-topo svg .linkLabel text {
+    fill: #eee;
+}
+
+/* Port Labels */
+
+#ov-topo svg .portLabel rect {
+    stroke: none;
+}
+.light #ov-topo svg .portLabel rect {
+    fill: #eee;
+}
+.dark #ov-topo svg .portLabel rect {
+    fill: #222;
+}
+
+.light #ov-topo svg .portLabel text {
+    fill: #444;
+}
+.dark #ov-topo svg .portLabel text {
+    fill: #eee;
+}
+
+/* Number of Links Labels */
+
+
+.light #ov-topo text.numLinkText {
+    fill: #444;
+}
+.dark #ov-topo text.numLinkText {
+    fill: #eee;
+}
+
+/* ------------------------------------------------- */
+/* Sprite Layer */
+
+.light #ov-topo svg #topo-sprites .gold1 use {
+    stroke: #fda;
+    fill: none;
+}
+.dark #ov-topo svg #topo-sprites .gold1 use {
+    stroke: #541;
+    fill: none;
+}
+.light #ov-topo svg #topo-sprites .gold1 text {
+    fill: #eda;
+}
+.dark #ov-topo svg #topo-sprites .gold1 text {
+    fill: #543;
+}
+
+.light #ov-topo svg #topo-sprites .blue1 use {
+    stroke: #bbd;
+    fill: none;
+}
+.dark #ov-topo svg #topo-sprites .blue1 use {
+    stroke: #445;
+    fill: none;
+}
+.light #ov-topo svg #topo-sprites .blue1 text {
+    fill: #cce;
+}
+.dark #ov-topo svg #topo-sprites .blue1 text {
+    fill: #446;
+}
+
+.light #ov-topo svg #topo-sprites .gray1 use {
+    stroke: #ccc;
+    fill: none;
+}
+.dark #ov-topo svg #topo-sprites .gray1 use {
+    stroke: #333;
+    fill: none;
+}
+.light #ov-topo svg #topo-sprites .gray1 text {
+    fill: #ddd;
+}
+.dark #ov-topo svg #topo-sprites .gray1 text {
+    fill: #444;
+}
+
+/* fills */
+.light #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #eee;
+}
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+    fill: #444;
+}
+
+.light #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #bce;
+}
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+    fill: #447;
+}
+
+/* -- MISC -- */

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Topology View -- CSS file
+ ONOS GUI -- Topology View (layout) -- CSS file
  */
  */
 
 
 /* --- Base SVG Layer --- */
 /* --- Base SVG Layer --- */
@@ -24,12 +24,6 @@
     /* prevents the little cut/copy/paste square that would appear on iPad */
     /* prevents the little cut/copy/paste square that would appear on iPad */
     -webkit-user-select: none;
     -webkit-user-select: none;
 }
 }
-.light #ov-topo svg {
-    background-color: #fff;
-}
-.dark #ov-topo svg {
-    background-color: #2b2b2b;
-}
 
 
 
 
 /* --- "No Devices" Layer --- */
 /* --- "No Devices" Layer --- */
@@ -38,38 +32,10 @@
     visibility: hidden;
     visibility: hidden;
 }
 }
 
 
-.light #ov-topo svg .noDevsBird {
-    fill: #ecd;
-}
-.dark #ov-topo svg .noDevsBird {
-    fill: #683434;
-}
-
 #ov-topo svg #topo-noDevsLayer text {
 #ov-topo svg #topo-noDevsLayer text {
     font-size: 60pt;
     font-size: 60pt;
     font-style: italic;
     font-style: italic;
 }
 }
-.light #ov-topo svg #topo-noDevsLayer text {
-    fill: #dde;
-}
-.dark #ov-topo svg #topo-noDevsLayer text {
-    fill: #3b3b4f;
-}
-
-
-/* --- Topo Map --- */
-
-#ov-topo svg #topo-map {
-    stroke-width: 2px;
-    fill: transparent;
-}
-
-.light #ov-topo svg #topo-map {
-    stroke: #ddd;
-}
-.dark #ov-topo svg #topo-map {
-    stroke: #444;
-}
 
 
 
 
 /* --- Topo Summary Panel --- */
 /* --- Topo Summary Panel --- */
@@ -78,6 +44,7 @@
     /* Base css from panel.css */
     /* Base css from panel.css */
 }
 }
 
 
+
 /* --- Topo Detail Panel --- */
 /* --- Topo Detail Panel --- */
 
 
 #topo-p-detail {
 #topo-p-detail {
@@ -117,21 +84,6 @@ html[data-platform='iPad'] #topo-p-detail {
     height: 42px;
     height: 42px;
 }
 }
 
 
-.light .topo-p svg .glyph {
-    fill: #222;
-}
-
-.dark .topo-p svg .glyph.overlay {
-    fill: #222;
-}
-
-.dark .topo-p svg .glyph {
-    fill: #ddd;
-}
-.light .topo-p svg .glyph.overlay {
-    fill: #fff;
-}
-
 
 
 .topo-p h2 {
 .topo-p h2 {
     padding: 0 4px;
     padding: 0 4px;
@@ -141,12 +93,6 @@ html[data-platform='iPad'] #topo-p-detail {
     width: 210px;
     width: 210px;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.light .topo-p h2 {
-    color: black;
-}
-.dark .topo-p h2 {
-    color: #ddd;
-}
 
 
 .topo-p h3 {
 .topo-p h3 {
     padding: 0 4px;
     padding: 0 4px;
@@ -155,12 +101,6 @@ html[data-platform='iPad'] #topo-p-detail {
     top: 20px;
     top: 20px;
     left: 50px;
     left: 50px;
 }
 }
-.light .topo-p h3 {
-    color: black;
-}
-.dark .topo-p h3 {
-    color: #ddd;
-}
 
 
 .topo-p p, table {
 .topo-p p, table {
     padding: 4px;
     padding: 4px;
@@ -173,8 +113,6 @@ html[data-platform='iPad'] #topo-p-detail {
 .topo-p td.label {
 .topo-p td.label {
     font-style: italic;
     font-style: italic;
     padding-right: 12px;
     padding-right: 12px;
-    /* works for both light and dark themes ... */
-    color: #777;
 }
 }
 .topo-p td.value {
 .topo-p td.value {
 }
 }
@@ -183,14 +121,7 @@ html[data-platform='iPad'] #topo-p-detail {
     height: 1px;
     height: 1px;
     border: 0;
     border: 0;
 }
 }
-.light .topo-p hr {
-    background-color: #ccc;
-    color: #ccc;
-}
-.dark .topo-p hr {
-    background-color: #888;
-    color: #888;
-}
+
 
 
 /* --- Topo Instance Panel --- */
 /* --- Topo Instance Panel --- */
 
 
@@ -205,79 +136,6 @@ html[data-platform='iPad'] #topo-p-detail {
     cursor: pointer;
     cursor: pointer;
 }
 }
 
 
-#topo-p-instance svg rect {
-    stroke-width: 3.5;
-}
-#topo-p-instance .online svg rect {
-    opacity: 1;
-}
-.light #topo-p-instance svg rect {
-    fill: #ccc;
-    stroke: #aaa;
-}
-.light #topo-p-instance .online svg rect {
-    fill: #9cf;
-    stroke: #555;
-}
-.dark #topo-p-instance svg rect {
-    fill: #666;
-    stroke: #222;
-}
-.dark #topo-p-instance .online svg rect {
-    fill: #9cf;
-    stroke: #999;
-}
-
-
-#topo-p-instance svg .glyph {
-    fill: #888;
-    fill-rule: evenodd;
-}
-#topo-p-instance .online svg .glyph {
-    fill: #000;
-}
-
-#topo-p-instance svg .badgeIcon {
-    fill-rule: evenodd;
-    opacity: 0.4;
-}
-.light #topo-p-instance svg .badgeIcon {
-    fill: #777;
-}
-.dark #topo-p-instance svg .badgeIcon {
-    fill: #555;
-}
-
-#topo-p-instance .online svg .badgeIcon {
-    opacity: 1.0;
-}
-.light #topo-p-instance .online svg .badgeIcon {
-    fill: #fff;
-}
-.dark #topo-p-instance .online svg .badgeIcon {
-    fill: #fff;
-}
-
-#topo-p-instance svg text {
-    text-anchor: middle;
-    opacity: 0.3;
-}
-#topo-p-instance .online svg text {
-    opacity: 1.0;
-}
-.light #topo-p-instance svg text {
-    fill: #444;
-}
-.light #topo-p-instance .online svg text {
-    fill: #eee;
-}
-.dark #topo-p-instance svg text {
-    fill: #aaa;
-}
-.dark #topo-p-instance .online svg text {
-    fill: #ccc;
-}
-
 #topo-p-instance svg text.instTitle {
 #topo-p-instance svg text.instTitle {
     font-size: 11pt;
     font-size: 11pt;
     font-weight: bold;
     font-weight: bold;
@@ -287,25 +145,6 @@ html[data-platform='iPad'] #topo-p-detail {
     font-style: italic;
     font-style: italic;
 }
 }
 
 
-#topo-p-instance .onosInst.mastership {
-    opacity: 0.3;
-}
-#topo-p-instance .onosInst.mastership.affinity {
-    opacity: 1.0;
-}
-.light #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url(#blue-glow);
-}
-.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url(#yellow-glow);
-}
-.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
 
 
 /* --- Toolbar --- */
 /* --- Toolbar --- */
 
 
@@ -335,345 +174,33 @@ html[data-platform='iPad'] #topo-p-detail {
     cursor: pointer;
     cursor: pointer;
 }
 }
 
 
-.light #ov-topo svg .node.selected rect,
-.light #ov-topo svg .node.selected circle {
-    fill: #f90;
-    filter: url(#blue-glow);
-}
-.dark #ov-topo svg .node.selected rect,
-.dark #ov-topo svg .node.selected circle {
-    fill: #f90;
-    filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .node.selected rect,
-.light.firefox #ov-topo svg .node.selected circle {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .node.selected rect,
-.dark.firefox #ov-topo svg .node.selected circle {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
 #ov-topo svg .node text {
 #ov-topo svg .node text {
     pointer-events: none;
     pointer-events: none;
 }
 }
 
 
+
 /* Device Nodes */
 /* Device Nodes */
 
 
 #ov-topo svg .node.device {
 #ov-topo svg .node.device {
 }
 }
 
 
-#ov-topo svg .node.device rect {
-    stroke-width: 1.5;
-}
-
-#ov-topo svg .node.device.fixed rect {
-    stroke-width: 1.5;
-}
-.light #ov-topo svg .node.device.fixed rect {
-    stroke: #aaa;
-}
-.dark #ov-topo svg .node.device.fixed rect {
-    stroke: #999;
-}
-
-/* note: device is offline without the 'online' class */
-.light #ov-topo svg .node.device {
-    fill: #777;
-}
-.dark #ov-topo svg .node.device {
-    fill: #555;
-}
-
-.light #ov-topo svg .node.device rect {
-    stroke: #666;
-}
-.light #ov-topo svg .node.device rect {
-    stroke: #999;
-}
-
-.light #ov-topo svg .node.device.online {
-    fill: #6e7fa3;
-}
-.dark #ov-topo svg .node.device.online {
-    fill: #4E5C7F;
-}
-
-/* note: device is offline without the 'online' class */
-#ov-topo svg .node.device text {
-    fill: #bbb;
-    font: 10pt sans-serif;
-}
-
-#ov-topo svg .node.device.online text {
-    fill: white;
-}
-
-#ov-topo svg .node.device .svgIcon rect {
-    fill: #aaa;
-}
-#ov-topo svg .node.device .svgIcon use {
-    fill: #777;
-}
-#ov-topo svg .node.device.selected .svgIcon rect {
-    fill: #f90;
-}
-#ov-topo svg .node.device.online .svgIcon rect {
-    fill: #ccc;
-}
-#ov-topo svg .node.device.online .svgIcon use {
-    fill: #000;
-}
-#ov-topo svg .node.device.online.selected .svgIcon rect {
-    fill: #f90;
-}
-
-/* Badges */
-/* (... works for both light and dark themes...) */
-#ov-topo svg .node .badge circle {
-    stroke: #aaa;
-}
-
-#ov-topo svg .node .badge.badgeInfo circle {
-    fill: #99d;
-}
-
-#ov-topo svg .node .badge.badgeWarn circle {
-    fill: #da2;
-}
-
-#ov-topo svg .node .badge.badgeError circle {
-    fill: #e44;
-}
-
-#ov-topo svg .node .badge use {
-    fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo use {
-    fill: #448;
-}
-
-#ov-topo svg .node .badge text {
-    fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo text {
-    fill: #448;
-}
-
-/* Host Nodes */
-
-#ov-topo svg .node.host {
-}
-
-#ov-topo svg .node.host text {
-    stroke: none;
-    font: 9pt sans-serif;
-}
-.light #ov-topo svg .node.host text {
-    fill: #846;
-}
-.dark #ov-topo svg .node.host text {
-    fill: #BB809D;
-}
-
-.light svg .node.host circle {
-    stroke: #000;
-    fill: #edb;
-}
-.dark svg .node.host circle {
-    stroke: #eee;
-    fill: #B2A180;
-}
-
-.light svg .node.host .svgIcon {
-    fill: #444;
-}
-.dark svg .node.host .svgIcon {
-    fill: #222;
-}
-
-/* --- Topo Links --- */
-
-#ov-topo svg .link {
-    opacity: .9;
-}
-
-#ov-topo svg .link.selected,
-#ov-topo svg .link.enhanced {
-    stroke-width: 4.5px;
-}
-.light #ov-topo svg .link.selected,
-.light #ov-topo svg .link.enhanced {
-    filter: url(#blue-glow);
-}
-.dark #ov-topo svg .link.selected,
-.dark #ov-topo svg .link.enhanced {
-    filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .link.selected,
-.light.firefox #ov-topo svg .link.enhanced {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .link.selected,
-.dark.firefox #ov-topo svg .link.enhanced {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  1.0 0 0 0 0  1.0 0 0 0 0  0.3 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-
-}
-
-#ov-topo svg .link.inactive {
-    opacity: .5;
-    stroke-dasharray: 8 4;
-}
-/* FIXME: Review for not-permitted links */
-#ov-topo svg .link.not-permitted {
-    stroke: rgb(255,0,0);
-    stroke-width: 5.0;
-    stroke-dasharray: 8 4;
-}
-
-#ov-topo svg .link.secondary {
-    stroke-width: 3px;
-}
-.light #ov-topo svg .link.secondary {
-    stroke: rgba(0,153,51,0.5);
-}
-.dark #ov-topo svg .link.secondary {
-    stroke: rgba(121,231,158,0.5);
-}
-
-/* Port traffic color visualization for Kbps, Mbps, and Gbps */
-
-.light #ov-topo svg .link.secondary.port-traffic-Kbps {
-    stroke: rgb(0,153,51);
-    stroke-width: 5.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
-    stroke: rgb(98, 153, 118);
-    stroke-width: 5.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Mbps {
-    stroke: rgb(128,145,27);
-    stroke-width: 6.5;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
-    stroke: rgb(91, 109, 54);
-    stroke-width: 6.5;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps {
-    stroke: rgb(255, 137, 3);
-    stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
-    stroke: rgb(174, 119, 55);
-    stroke-width: 8.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
-    stroke: rgb(183, 30, 21);
-    stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
-    stroke: rgb(127, 40, 39);
-    stroke-width: 8.0;
-}
-
-
-#ov-topo svg .link.animated {
-    stroke-dasharray: 8 5;
-    animation: ants 5s infinite linear;
-    /* below line will be added via Javascript based on path */
-    /*animation-direction: reverse;*/
-}
-@keyframes ants {
-    from {
-        stroke-dashoffset: 0;
-    }
-    to {
-        stroke-dashoffset: 400;
-    }
-}
-
-#ov-topo svg .link.primary {
-    stroke-width: 4px;
-}
-.light #ov-topo svg .link.primary {
-    stroke: #ffA300;
-}
-.dark #ov-topo svg .link.primary {
-    stroke: #D58E0F;
-}
-
-#ov-topo svg .link.secondary.optical {
-    stroke-width: 4px;
-}
-.light #ov-topo svg .link.secondary.optical {
-    stroke: rgba(128,64,255,0.5);
-}
-.dark #ov-topo svg .link.secondary.optical {
-    stroke: rgba(164,139,215,0.5);
-}
-
-#ov-topo svg .link.primary.optical {
-    stroke-width: 6px;
-}
-.light #ov-topo svg .link.primary.optical {
-    stroke: #74f;
-}
-.dark #ov-topo svg .link.primary.optical {
-    stroke: #7352CD;
-}
 
 
 /* Link Labels */
 /* Link Labels */
 
 
-#ov-topo svg .linkLabel rect {
-    stroke: none;
-}
-.light #ov-topo svg .linkLabel rect {
-    fill: #eee;
-}
-.dark #ov-topo svg .linkLabel rect {
-    fill: #555;
-}
-
 #ov-topo svg .linkLabel text {
 #ov-topo svg .linkLabel text {
     text-anchor: middle;
     text-anchor: middle;
     stroke-width: 0.1;
     stroke-width: 0.1;
     font-size: 9pt;
     font-size: 9pt;
 }
 }
-.light #ov-topo svg .linkLabel text {
-    fill: #444;
-}
-.dark #ov-topo svg .linkLabel text {
-    fill: #eee;
-}
 
 
-/* Port Labels */
 
 
-#ov-topo svg .portLabel rect {
-    stroke: none;
-}
-.light #ov-topo svg .portLabel rect {
-    fill: #eee;
-}
-.dark #ov-topo svg .portLabel rect {
-    fill: #222;
-}
+/* Port Labels */
 
 
 #ov-topo svg .portLabel text {
 #ov-topo svg .portLabel text {
     text-anchor: middle;
     text-anchor: middle;
     stroke-width: 0.1;
     stroke-width: 0.1;
     font-size: 11pt;
     font-size: 11pt;
 }
 }
-.light #ov-topo svg .portLabel text {
-    fill: #444;
-}
-.dark #ov-topo svg .portLabel text {
-    fill: #eee;
-}
 
 
 /* Number of Links Labels */
 /* Number of Links Labels */
 #ov-topo line.numLinkHash {
 #ov-topo line.numLinkHash {
@@ -682,20 +209,10 @@ html[data-platform='iPad'] #topo-p-detail {
 
 
 #ov-topo text.numLinkText {
 #ov-topo text.numLinkText {
     font-size: 15pt;
     font-size: 15pt;
-}
-
-#ov-topo text.numLinkText {
     text-anchor: middle;
     text-anchor: middle;
 }
 }
 
 
-.light #ov-topo text.numLinkText {
-    fill: #444;
-}
-.dark #ov-topo text.numLinkText {
-    fill: #eee;
-}
 
 
-/* ------------------------------------------------- */
 /* Sprite Layer */
 /* Sprite Layer */
 
 
 #ov-topo svg #topo-sprites use {
 #ov-topo svg #topo-sprites use {
@@ -707,65 +224,8 @@ html[data-platform='iPad'] #topo-p-detail {
     font-style: italic;
     font-style: italic;
 }
 }
 
 
-.light #ov-topo svg #topo-sprites .gold1 use {
-    stroke: #fda;
-    fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gold1 use {
-    stroke: #541;
-    fill: none;
-}
-.light #ov-topo svg #topo-sprites .gold1 text {
-    fill: #eda;
-}
-.dark #ov-topo svg #topo-sprites .gold1 text {
-    fill: #543;
-}
 
 
-.light #ov-topo svg #topo-sprites .blue1 use {
-    stroke: #bbd;
-    fill: none;
-}
-.dark #ov-topo svg #topo-sprites .blue1 use {
-    stroke: #445;
-    fill: none;
-}
-.light #ov-topo svg #topo-sprites .blue1 text {
-    fill: #cce;
-}
-.dark #ov-topo svg #topo-sprites .blue1 text {
-    fill: #446;
-}
-
-.light #ov-topo svg #topo-sprites .gray1 use {
-    stroke: #ccc;
-    fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gray1 use {
-    stroke: #333;
-    fill: none;
-}
-.light #ov-topo svg #topo-sprites .gray1 text {
-    fill: #ddd;
-}
-.dark #ov-topo svg #topo-sprites .gray1 text {
-    fill: #444;
-}
-
-/* fills */
-.light #ov-topo svg #topo-sprites use.fill-gray2 {
-    fill: #eee;
-}
-.dark #ov-topo svg #topo-sprites use.fill-gray2 {
-    fill: #444;
-}
-
-.light #ov-topo svg #topo-sprites use.fill-blue2 {
-    fill: #bce;
-}
-.dark #ov-topo svg #topo-sprites use.fill-blue2 {
-    fill: #447;
-}
+/* -- MISC -- */
 
 
 .notReady .readyBadge {
 .notReady .readyBadge {
     visibility: hidden;
     visibility: hidden;
@@ -778,4 +238,3 @@ html[data-platform='iPad'] #topo-p-detail {
 .map-list select {
 .map-list select {
     font-size: 20px;
     font-size: 20px;
 }
 }
-

@@ -93,21 +93,35 @@
 
 
     <!-- TODO: use a single catenated-minified file here -->
     <!-- TODO: use a single catenated-minified file here -->
     <link rel="stylesheet" href="app/onos.css">
     <link rel="stylesheet" href="app/onos.css">
+    <link rel="stylesheet" href="app/onos-theme.css">
     <link rel="stylesheet" href="app/common.css">
     <link rel="stylesheet" href="app/common.css">
     <link rel="stylesheet" href="app/fw/mast/mast.css">
     <link rel="stylesheet" href="app/fw/mast/mast.css">
+    <link rel="stylesheet" href="app/fw/mast/mast-theme.css">
     <link rel="stylesheet" href="app/fw/svg/glyph.css">
     <link rel="stylesheet" href="app/fw/svg/glyph.css">
+    <link rel="stylesheet" href="app/fw/svg/glyph-theme.css">
     <link rel="stylesheet" href="app/fw/svg/icon.css">
     <link rel="stylesheet" href="app/fw/svg/icon.css">
+    <link rel="stylesheet" href="app/fw/svg/icon-theme.css">
     <link rel="stylesheet" href="app/fw/layer/panel.css">
     <link rel="stylesheet" href="app/fw/layer/panel.css">
+    <link rel="stylesheet" href="app/fw/layer/panel-theme.css">
     <link rel="stylesheet" href="app/fw/layer/dialog.css">
     <link rel="stylesheet" href="app/fw/layer/dialog.css">
+    <link rel="stylesheet" href="app/fw/layer/dialog-theme.css">
     <link rel="stylesheet" href="app/fw/layer/flash.css">
     <link rel="stylesheet" href="app/fw/layer/flash.css">
+    <link rel="stylesheet" href="app/fw/layer/flash-theme.css">
     <link rel="stylesheet" href="app/fw/layer/quickhelp.css">
     <link rel="stylesheet" href="app/fw/layer/quickhelp.css">
+    <link rel="stylesheet" href="app/fw/layer/quickhelp-theme.css">
     <link rel="stylesheet" href="app/fw/layer/veil.css">
     <link rel="stylesheet" href="app/fw/layer/veil.css">
+    <link rel="stylesheet" href="app/fw/layer/veil-theme.css">
     <link rel="stylesheet" href="app/fw/layer/loading.css">
     <link rel="stylesheet" href="app/fw/layer/loading.css">
     <link rel="stylesheet" href="app/fw/nav/nav.css">
     <link rel="stylesheet" href="app/fw/nav/nav.css">
+    <link rel="stylesheet" href="app/fw/nav/nav-theme.css">
     <link rel="stylesheet" href="app/fw/widget/button.css">
     <link rel="stylesheet" href="app/fw/widget/button.css">
+    <link rel="stylesheet" href="app/fw/widget/button-theme.css">
     <link rel="stylesheet" href="app/fw/widget/toolbar.css">
     <link rel="stylesheet" href="app/fw/widget/toolbar.css">
+    <link rel="stylesheet" href="app/fw/widget/toolbar-theme.css">
     <link rel="stylesheet" href="app/fw/widget/tooltip.css">
     <link rel="stylesheet" href="app/fw/widget/tooltip.css">
+    <link rel="stylesheet" href="app/fw/widget/tooltip-theme.css">
     <link rel="stylesheet" href="app/fw/widget/table.css">
     <link rel="stylesheet" href="app/fw/widget/table.css">
+    <link rel="stylesheet" href="app/fw/widget/table-theme.css">
 
 
     <!-- Builtin views javascript. -->
     <!-- Builtin views javascript. -->
     <script src="app/view/topo/topo.js"></script>
     <script src="app/view/topo/topo.js"></script>
@@ -148,18 +162,27 @@
 
 
     <!-- Builtin views stylesheets. -->
     <!-- Builtin views stylesheets. -->
     <link rel="stylesheet" href="app/view/topo/topo.css">
     <link rel="stylesheet" href="app/view/topo/topo.css">
+    <link rel="stylesheet" href="app/view/topo/topo-theme.css">
     <link rel="stylesheet" href="app/view/device/device.css">
     <link rel="stylesheet" href="app/view/device/device.css">
+    <link rel="stylesheet" href="app/view/device/device-theme.css">
     <link rel="stylesheet" href="app/view/flow/flow.css">
     <link rel="stylesheet" href="app/view/flow/flow.css">
+    <link rel="stylesheet" href="app/view/flow/flow-theme.css">
     <link rel="stylesheet" href="app/view/port/port.css">
     <link rel="stylesheet" href="app/view/port/port.css">
+    <link rel="stylesheet" href="app/view/port/port-theme.css">
     <link rel="stylesheet" href="app/view/group/group.css">
     <link rel="stylesheet" href="app/view/group/group.css">
+    <link rel="stylesheet" href="app/view/group/group-theme.css">
     <link rel="stylesheet" href="app/view/meter/meter.css">
     <link rel="stylesheet" href="app/view/meter/meter.css">
+    <link rel="stylesheet" href="app/view/meter/meter-theme.css">
     <link rel="stylesheet" href="app/view/link/link.css">
     <link rel="stylesheet" href="app/view/link/link.css">
     <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/host/host.css">
     <link rel="stylesheet" href="app/view/intent/intent.css">
     <link rel="stylesheet" href="app/view/intent/intent.css">
+    <link rel="stylesheet" href="app/view/intent/intent-theme.css">
     <link rel="stylesheet" href="app/view/app/app.css">
     <link rel="stylesheet" href="app/view/app/app.css">
+    <link rel="stylesheet" href="app/view/app/app-theme.css">
     <link rel="stylesheet" href="app/view/settings/settings.css">
     <link rel="stylesheet" href="app/view/settings/settings.css">
     <link rel="stylesheet" href="app/view/cluster/cluster.css">
     <link rel="stylesheet" href="app/view/cluster/cluster.css">
     <link rel="stylesheet" href="app/view/processor/processor.css">
     <link rel="stylesheet" href="app/view/processor/processor.css">
+    <link rel="stylesheet" href="app/view/processor/processor-theme.css">
     <link rel="stylesheet" href="app/view/tunnel/tunnel.css">
     <link rel="stylesheet" href="app/view/tunnel/tunnel.css">
 
 
     <!-- Contributed stylesheets injected here -->
     <!-- Contributed stylesheets injected here -->