diff --git a/ui (gen4)/css/widget/browse.css b/ui (gen4)/css/widget/browse.css
index ac25783c..6e7df861 100755
--- a/ui (gen4)/css/widget/browse.css	
+++ b/ui (gen4)/css/widget/browse.css	
@@ -1,6 +1,6 @@
 
 /********************************************************** Widget ***/
-.browse {
+.browse-widget {
 	display: inline-block;
 	min-width: 300px;
 	width: initial;
@@ -12,20 +12,20 @@
 	color: white;
 }
 /*
-.browse:not(:focus) {
+.browse-widget:not(:focus) {
 	opacity: 0.8;
 }
 */
-.browse .v-block {
+.browse-widget .v-block {
 	width: 100%;
 	height: auto;
 
 	box-sizing: border-box;
 }
-.browse .v-block:not(:first-of-type) {
+.browse-widget .v-block:not(:first-of-type) {
 	border-top: 1px solid rgba(255, 255, 255, 0.3);
 }
-.browse .v-block:empty {
+.browse-widget .v-block:empty {
 	display: none;
 }
 
@@ -33,7 +33,7 @@
 
 /************************************************************ Path ***/
 
-.browse .path {
+.browse-widget .path {
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -50,55 +50,55 @@
 	overflow: auto;
 }
 /* XXX not sure about this... */
-.browse .path::-webkit-scrollbar {
+.browse-widget .path::-webkit-scrollbar {
 	width: 5px;
 	height: 5px;
 }
-.browse .path:hover {
+.browse-widget .path:hover {
 	opacity: 1;
 }
-.browse .path:empty {
+.browse-widget .path:empty {
 	display: block;
 }
-.browse:not(.flat) .path:not([contenteditable]):before {
+.browse-widget:not(.flat) .path:not([contenteditable]):before {
 	content: "/";
 }
-.browse .path .dir {
+.browse-widget .path .dir {
 	display: inline-block;
 	cursor: pointer;
 
 	opacity: 0.8;
 }
-.browse .path .dir:after {
+.browse-widget .path .dir:after {
 	content: "/";
 }
-.browse .path .dir:hover ~ .dir {
+.browse-widget .path .dir:hover ~ .dir {
 	opacity: 0.2;
 }
-.browse .path .dir.cur {
+.browse-widget .path .dir.cur {
 	opacity: 0.5;
 	cursor: text;
 }
-.browse .path .dir.cur:after {
+.browse-widget .path .dir.cur:after {
 	content: "";
 }
-.browse .path .dir.cur:hover {
+.browse-widget .path .dir.cur:hover {
 	opacity: 1;
 }
-.browse .path .dir.cur[contenteditable] {
+.browse-widget .path .dir.cur[contenteditable] {
 	opacity: 1;
 }
-.browse .path .dir.cur:empty:not([contenteditable]) {
+.browse-widget .path .dir.cur:empty:not([contenteditable]) {
 	position: relative;
 	width: 50px;
 	height: 12px;
 	background: transparent;
 	opacity: 0;
 }
-.browse .path .dir.cur:empty:hover:not([contenteditable]) {
+.browse-widget .path .dir.cur:empty:hover:not([contenteditable]) {
 	opacity: 0.6;
 }
-.browse .path .dir.cur:empty:hover:not([contenteditable]):after {
+.browse-widget .path .dir.cur:empty:hover:not([contenteditable]):after {
 	content: "______";
 	border: dashed white 1px;
 	cursor: text;
@@ -109,7 +109,7 @@
 /************************************************************ List ***/
 
 /* XXX need to make this resizable up but only to a certain size (~80vh) */
-.browse .list {
+.browse-widget .list {
 	/* XXX need a way to make this automatic and depend on .browser 
 		setup to avoid multiple scrollbars and the need to manually
 	 	dive into the configuration to change the container size 
@@ -121,7 +121,7 @@
 	overflow-x: hidden;
 }
 /*
-.browse .list:before {
+.browse-widget .list:before {
 	content: "";
 	position: absolute;
 	display: inline-block;
@@ -131,7 +131,7 @@
 	left: 0px;
 	background: linear-gradient(to top, rgba(128, 128, 128, 0), rgba(128, 128, 128, 1));
 }
-.browse .list:after {
+.browse-widget .list:after {
 	content: "";
 	position: absolute;
 	display: inline-block;
@@ -143,11 +143,11 @@
 }
 */
 /*
-.browse .list:empty {
+.browse-widget .list:empty {
 	display: block;
 }
 */
-.browse .list div {
+.browse-widget .list div {
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -164,21 +164,21 @@
 	max-width: 50vh;
 	overflow: hidden;
 }
-.browse:not(.flat) .list div:not(.not-traversable):after {
+.browse-widget:not(.flat) .list div:not(.not-traversable):after {
 	content: "/";
 }
 
-.browse:focus .list div.selected,
-.browse .path .dir:hover,
-.browse .list div:hover {
+.browse-widget:focus .list div.selected,
+.browse-widget .path .dir:hover,
+.browse-widget .list div:hover {
 	background: rgba(0, 0, 0, 0.05);
 
 	opacity: 0.9;
 }
-.browse .list div.selected {
+.browse-widget .list div.selected {
 	background: rgba(0, 0, 0, 0.08);
 }
-.browse:focus .list div.selected {
+.browse-widget:focus .list div.selected {
 	background: rgba(0, 0, 0, 0.08);
 	box-shadow: rgba(0, 0, 0, 0.2) 0.1em 0.1em 0.2em; 
 
@@ -186,52 +186,52 @@
 }
 
 /* XXX need to make the next two different...  */
-.browse .list div.filtered-out {
+.browse-widget .list div.filtered-out {
 	opacity: 0.5;
 }
-.browse:not(.show-filtered-out) .list div.filtered-out {
+.browse-widget:not(.show-filtered-out) .list div.filtered-out {
 	display: none;	
 }
-.browse .list div.disabled {
+.browse-widget .list div.disabled {
 	opacity: 0.3;
 }
 
 /* numbers... */
 /* XXX need to show this only on devices with keyboards... */
-.browse .list div:before {
+.browse-widget .list div:before {
 	opacity: 0.3;
 	float: right;
 	font-size: small;
 }
-.browse.filtering .list div:before {
+.browse-widget.filtering .list div:before {
 	display: none;
 }
 
-.browse .list div:nth-of-type(1):before {
+.browse-widget .list div:nth-of-type(1):before {
 	content: "1";
 }
-.browse .list div:nth-of-type(2):before {
+.browse-widget .list div:nth-of-type(2):before {
 	content: "2";
 }
-.browse .list div:nth-of-type(3):before {
+.browse-widget .list div:nth-of-type(3):before {
 	content: "3";
 }
-.browse .list div:nth-of-type(4):before {
+.browse-widget .list div:nth-of-type(4):before {
 	content: "4";
 }
-.browse .list div:nth-of-type(5):before {
+.browse-widget .list div:nth-of-type(5):before {
 	content: "5";
 }
-.browse .list div:nth-of-type(6):before {
+.browse-widget .list div:nth-of-type(6):before {
 	content: "6";
 }
-.browse .list div:nth-of-type(7):before {
+.browse-widget .list div:nth-of-type(7):before {
 	content: "7";
 }
-.browse .list div:nth-of-type(8):before {
+.browse-widget .list div:nth-of-type(8):before {
 	content: "8";
 }
-.browse .list div:nth-of-type(9):before {
+.browse-widget .list div:nth-of-type(9):before {
 	content: "9";
 }
 
@@ -240,31 +240,31 @@
 /******************************************************** Theaming ***/
 
 /* Light */
-.light .browse {
+.light .browse-widget {
 	background: white;
 	color: rgba(0, 0, 0, 0.8);
 }
-.light .browse .v-block:not(:first-of-type) {
+.light .browse-widget .v-block:not(:first-of-type) {
 	border-top: 1px solid rgba(0, 0, 0, 0.2);
 }
 
 
 
 /* Dark */
-.dark .browse {
+.dark .browse-widget {
 	background: #0a0a0a;
 	color: rgba(255, 255, 255, 0.8);
 }
 /* XXX can we make this simpler??? */
-.dark .browse:focus .list div.selected,
-.dark .browse .path .dir:hover,
-.dark .browse .list div:hover {
+.dark .browse-widget:focus .list div.selected,
+.dark .browse-widget .path .dir:hover,
+.dark .browse-widget .list div:hover {
 	background: rgba(255, 255, 255, 0.08);
 }
-.dark .browse .list div.selected {
+.dark .browse-widget .list div.selected {
 	background: rgba(255, 255, 255, 0.1);
 }
-.dark .browse:focus .list div.selected {
+.dark .browse-widget:focus .list div.selected {
 	background: rgba(255, 255, 255, 0.1);
 }
 
diff --git a/ui (gen4)/css/widget/overlay.css b/ui (gen4)/css/widget/overlay.css
index 5753ce04..edb59fe8 100755
--- a/ui (gen4)/css/widget/overlay.css	
+++ b/ui (gen4)/css/widget/overlay.css	
@@ -1,5 +1,5 @@
 
-.overlay {
+.overlay-widget {
 	position: absolute;
 
 	width: 100%;
@@ -15,12 +15,12 @@
 	-moz-transform-style: preserve-3d;
 	transform-style: preserve-3d;
 }
-.overlay~.overlay {
+.overlay-widget~.overlay-widget {
 	background: rgba(0, 0, 0, 0.1);
 }
 
 
-.overlay .content {
+.overlay-widget .content {
 	position: relative;
 	display: inline-block;
 
@@ -40,7 +40,7 @@
 
 	box-shadow: rgba(0, 0, 0, 0.1) 0.3em 0.3em 5em;
 }
-.overlay~.overlay .content {
+.overlay-widget~.overlay-widget .content {
 	box-shadow: rgba(0, 0, 0, 0.05) 0.1em 0.1em 3em;
 }
 
@@ -51,7 +51,7 @@
 	-webkit-filter: blur(2px);
 	filter: blur(2px);
 }
-.blur>.overlay {
+.blur>.overlay-widget {
 	-webkit-filter: none;
 	filter: none;
 }
diff --git a/ui (gen4)/lib/widget/browse.html b/ui (gen4)/lib/widget/browse.html
index f5f71430..d270cb14 100755
--- a/ui (gen4)/lib/widget/browse.html	
+++ b/ui (gen4)/lib/widget/browse.html	
@@ -374,7 +374,7 @@ Basic key bindings:
 
 
 <div class="container">
-	<div class="browse">
+	<div class="browse-widget">
 		<!-- title, optional -->
 		<div class="v-block title">
 			[title]
diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js
index 666ed7b7..fcb04326 100755
--- a/ui (gen4)/lib/widget/browse.js	
+++ b/ui (gen4)/lib/widget/browse.js	
@@ -35,7 +35,7 @@ var BrowserClassPrototype = {
 	// construct the dom...
 	make: function(options){
 		var browser = $('<div>')
-			.addClass('browse')
+			.addClass('browse-widget')
 			// make thie widget focusable...
 			// NOTE: tabindex 0 means automatic tab indexing and -1 means 
 			//		focusable bot not tabable...
@@ -111,7 +111,7 @@ var BrowserPrototype = {
 		// NOTE: this will not disable manual updates or explicit path 
 		// 		setting.
 		// NOTE: another way to disable traversal is to set 
-		// 		.not-traversable on the .browse element
+		// 		.not-traversable on the .browse-widget element
 		traversable: true,
 
 		// Handle keys that are not bound...
@@ -143,7 +143,7 @@ var BrowserPrototype = {
 	// 		in filter mode???
 	keyboard: {
 		FullPathEdit: {
-			pattern: '.browse .path[contenteditable]',
+			pattern: '.browse-widget .path[contenteditable]',
 
 			// keep text editing action from affecting the selection...
 			ignore: [
@@ -171,7 +171,7 @@ var BrowserPrototype = {
 		},
 
 		Filter: {
-			pattern: '.browse .path div.cur[contenteditable]',
+			pattern: '.browse-widget .path div.cur[contenteditable]',
 
 			// keep text editing action from affecting the selection...
 			ignore: [
@@ -199,7 +199,7 @@ var BrowserPrototype = {
 		},
 
 		General: {
-			pattern: '.browse',
+			pattern: '.browse-widget',
 
 			Up: 'prev!',
 			Down: 'next!',
@@ -456,7 +456,7 @@ var BrowserPrototype = {
 	// This will trigger the 'update' event.
 	//
 	// For uniformity and ease of access from DOM, this will also set the
-	// 'path' html attribute on the .browse element.
+	// 'path' html attribute on the .browse-widget element.
 	//
 	// If the given string path does not end with a '/' then the path
 	// up to the last item will be loaded and the last item loaded.
@@ -1011,7 +1011,7 @@ var BrowserPrototype = {
 	// This will trigger the 'select' or 'deselect' events.
 	//
 	// For uniformity and ease of access from DOM, this will also set 
-	// the value attr on the .browse element.
+	// the value attr on the .browse-widget element.
 	// NOTE: this is one way and setting the html attribute "value" will
 	// 		not affect the selection, but changing the selection will 
 	// 		overwrite the attribute.
diff --git a/ui (gen4)/lib/widget/overlay.js b/ui (gen4)/lib/widget/overlay.js
index 8c5a8c63..58c450df 100755
--- a/ui (gen4)/lib/widget/overlay.js	
+++ b/ui (gen4)/lib/widget/overlay.js	
@@ -19,7 +19,7 @@ var OverlayClassPrototype = {
 	make: function(client, options){
 		var that = this
 		var overlay = $('<div>')
-			.addClass('overlay')
+			.addClass('overlay-widget')
 			.click(function(){
 				event.stopPropagation()
 			})
@@ -56,7 +56,7 @@ var OverlayPrototype = {
 		// trigger the event...
 		if(handler == null){
 			this.dom.detach()
-			if(this.parent.children('.overlay').length == 0){
+			if(this.parent.children('.overlay-widget').length == 0){
 				this.parent.removeClass('blur')
 			}
 			this.trigger('close')