diff --git a/ui (gen4)/css/fonts.css b/ui (gen4)/css/fonts.css
new file mode 100755
index 00000000..6a96ac2a
--- /dev/null
+++ b/ui (gen4)/css/fonts.css	
@@ -0,0 +1,230 @@
+/**********************************************************************
+*
+*
+**********************************************************************/
+
+/* Open Sans 
+*	- line spacing a bit too large...
+*/
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Regular.ttf)
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: OpenSans;
+	src: url(fonts/Open_Sans/OpenSans-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+
+
+
+/* Work Sans 
+*	- does not have an explicit italic face but seems to look ok when 
+*	  slanted programmatically...
+*/
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Thin.ttf);
+	font-weight: 100;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-ExtraLight.ttf);
+	font-weight: 200;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Light.ttf);
+	font-weight: 300;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Regular.ttf);
+	font-weight: 400;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Medium.ttf);
+	font-weight: 500;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-SemiBold.ttf);
+	font-weight: 600;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Bold.ttf);
+	font-weight: 700;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-ExtraBold.ttf);
+	font-weight: 800;
+}
+@font-face {
+	font-family: WorkSans;
+	src: url(fonts/Work_Sans/WorkSans-Black.ttf);
+	font-weight: 900;
+}
+
+
+
+/* Source Sans Pro */
+/*
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf)
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: SourceSansPro;
+	src: url(fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+*/
+
+
+
+/* Arimo 
+*	- bold face a bit too narrow
+*/
+/*
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Regular.ttf)
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: Arimo;
+	src: url(fonts/Arimo/Arimo-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+*/
+
+
+
+/* Roboto */
+/*
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Regular.ttf)
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Bold.ttf)
+	font-weight: bold;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Italic.ttf)
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-BoldItalic.ttf)
+	font-weight: bold;
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-ExtraBold.ttf)
+	font-weight: bolder;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-ExtraBoldItalic.ttf)
+	font-weight: bolder;
+	font-style: italic;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-Light.ttf)
+	font-weight: lighter;
+}
+@font-face {
+	font-family: Roboto;
+	src: url(fonts/Roboto/Roboto-LightItalic.ttf)
+	font-weight: lighter;
+	font-style: italic;
+}
+*/
+
+
+
+/*********************************************************************/
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 820eb0cd..969a8cff 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -4,6 +4,7 @@
 
 <meta name="msapplication-tap-highlight" content="no" />
 
+<link rel="stylesheet" href="css/fonts.css">
 <link rel="stylesheet" href="css/layout.css">
 <link rel="stylesheet" href="css/editor.css">
 <link rel="stylesheet" href="css/widget/browse.css">
@@ -13,230 +14,6 @@
 <!-- XXX remove before use... -->
 <style>
 
-/* Open Sans 
-*	- line spacing a bit too large...
-*/
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-Regular.ttf)
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-Bold.ttf)
-	font-weight: bold;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-Italic.ttf)
-	font-style: italic;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-BoldItalic.ttf)
-	font-weight: bold;
-	font-style: italic;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-ExtraBold.ttf)
-	font-weight: bolder;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf)
-	font-weight: bolder;
-	font-style: italic;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-Light.ttf)
-	font-weight: lighter;
-}
-@font-face {
-	font-family: OpenSans;
-	src: url(fonts/Open_Sans/OpenSans-LightItalic.ttf)
-	font-weight: lighter;
-	font-style: italic;
-}
-
-
-
-/* Work Sans 
-*	
-*/
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Thin.ttf);
-	font-weight: 100;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-ExtraLight.ttf);
-	font-weight: 200;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Light.ttf);
-	font-weight: 300;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Regular.ttf);
-	font-weight: 400;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Medium.ttf);
-	font-weight: 500;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-SemiBold.ttf);
-	font-weight: 600;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Bold.ttf);
-	font-weight: 700;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-ExtraBold.ttf);
-	font-weight: 800;
-}
-@font-face {
-	font-family: WorkSans;
-	src: url(fonts/Work_Sans/WorkSans-Black.ttf);
-	font-weight: 900;
-}
-
-
-
-/* Source Sans Pro */
-/*
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf)
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf)
-	font-weight: bold;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-Italic.ttf)
-	font-style: italic;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-BoldItalic.ttf)
-	font-weight: bold;
-	font-style: italic;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBold.ttf)
-	font-weight: bolder;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-ExtraBoldItalic.ttf)
-	font-weight: bolder;
-	font-style: italic;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-Light.ttf)
-	font-weight: lighter;
-}
-@font-face {
-	font-family: SourceSansPro;
-	src: url(fonts/Source_Sans_Pro/SourceSansPro-LightItalic.ttf)
-	font-weight: lighter;
-	font-style: italic;
-}
-*/
-
-
-
-/* Arimo 
-*	- bold face a bit too narrow
-*/
-/*
-@font-face {
-	font-family: Arimo;
-	src: url(fonts/Arimo/Arimo-Regular.ttf)
-}
-@font-face {
-	font-family: Arimo;
-	src: url(fonts/Arimo/Arimo-Bold.ttf)
-	font-weight: bold;
-}
-@font-face {
-	font-family: Arimo;
-	src: url(fonts/Arimo/Arimo-Italic.ttf)
-	font-style: italic;
-}
-@font-face {
-	font-family: Arimo;
-	src: url(fonts/Arimo/Arimo-BoldItalic.ttf)
-	font-weight: bold;
-	font-style: italic;
-}
-*/
-
-
-
-/* Roboto */
-/*
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-Regular.ttf)
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-Bold.ttf)
-	font-weight: bold;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-Italic.ttf)
-	font-style: italic;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-BoldItalic.ttf)
-	font-weight: bold;
-	font-style: italic;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-ExtraBold.ttf)
-	font-weight: bolder;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-ExtraBoldItalic.ttf)
-	font-weight: bolder;
-	font-style: italic;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-Light.ttf)
-	font-weight: lighter;
-}
-@font-face {
-	font-family: Roboto;
-	src: url(fonts/Roboto/Roboto-LightItalic.ttf)
-	font-weight: lighter;
-	font-style: italic;
-}
-*/
-
-
-
-/*********************************************************************/
 
 body {
 	margin: 0;