diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css
index d8e54015..85f4064a 100644
--- a/ui (gen4)/css/layout.css	
+++ b/ui (gen4)/css/layout.css	
@@ -162,7 +162,7 @@ button:hover {
   -webkit-app-region: no-drag;
 }
 .title-bar .button:hover {
-  cursor: hand;
+  cursor: pointer;
 }
 .title-bar .close:hover {
   color: red;
@@ -234,7 +234,7 @@ button:hover {
   font-weight: bold;
   color: silver;
   opacity: 0.9;
-  cursor: hand;
+  cursor: pointer;
 }
 .viewer:empty:after,
 .ribbon-set:empty:after {
@@ -1186,6 +1186,80 @@ stretching in width... */
   color: white;
   background: red;
 }
+.overlay-info.full,
+.overlay-info.minimal {
+  display: block;
+  /* XXX is this correct??? */
+  z-index: 1000;
+}
+.overlay-info.minimal {
+  background: transparent;
+}
+.overlay-info.minimal .full-only {
+  display: none;
+}
+/* XXX REUSE: this is the same as selected/bookmarked image markers... */
+.overlay-info .marked,
+.overlay-info .marked:after,
+.overlay-info .marked:before,
+.overlay-info .bookmarked:after {
+  display: block;
+  position: relative;
+  content: "";
+  font-size: 0pt;
+  border: none;
+  margin: 4px;
+  margin-left: 6px;
+  width: 10px;
+  height: 10px;
+  box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: blue;
+  cursor: pointer;
+}
+/* tick... */
+.overlay-info .marked {
+  background: transparent;
+  margin-left: 6px;
+}
+.overlay-info .marked:before,
+.overlay-info .marked:after {
+  position: absolute;
+  bottom: auto;
+  border-radius: 3px;
+  -webkit-transform: rotate(-45deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(-45deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(-45deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(-45deg) scaleY(1) scaleX(1);
+  transform: rotate(-45deg) scaleY(1) scaleX(1);
+  /* This prevents elements from aligning to sub-pixels...*/
+  /*
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	*/
+}
+.overlay-info .marked:before {
+  width: 3px;
+  height: 6px;
+}
+.overlay-info .marked:after {
+  width: 12px;
+  height: 3px;
+}
+.overlay-info .bookmarked:after {
+  background: yellow;
+}
+.overlay-info .marked:not(.on),
+.overlay-info .bookmarked:not(.on) {
+  opacity: 0.5;
+}
+.overlay-info .marked:not(.on):before,
+.overlay-info .marked:not(.on):after,
+.overlay-info .bookmarked:not(.on):after {
+  background: gray;
+}
 /*************************************************** Global status ***/
 .global-status {
   display: block;
@@ -1208,7 +1282,7 @@ stretching in width... */
   width: 100px;
   margin-left: -50px;
   overflow: hidden;
-  cursor: hand;
+  cursor: pointer;
 }
 .up-indicator:after,
 .down-indicator:after {
@@ -1340,12 +1414,12 @@ stretching in width... */
 .global-mode-indicators .marks-visible,
 .context-mode-indicators .current-image-marked {
   color: blue;
-  cursor: hand;
+  cursor: pointer;
   text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
 }
 .context-mode-indicators .current-image-bookmarked {
   color: yellow;
-  cursor: hand;
+  cursor: pointer;
   text-shadow: rgba(0, 0, 0, 0.5) 0.1em 0.1em 0.4em, rgba(0, 0, 0, 0.5) 0.1em 0.1em;
 }
 .global-mode-indicators .marked-only-visible .shown,
@@ -1517,7 +1591,7 @@ progress:not(value)::-webkit-progress-bar {
   position: absolute;
   display: inline-block;
   color: red;
-  cursor: hand;
+  cursor: pointer;
 }
 .progress-bar progress {
   display: block;
diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 5bcedf54..0a7c4ea5 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -269,7 +269,7 @@ button:hover {
 	-webkit-app-region: no-drag;
 }
 .title-bar .button:hover {
-	cursor: hand;
+	cursor: pointer;
 }
 
 .title-bar .close:hover {
@@ -357,7 +357,7 @@ button:hover {
 	color: silver;
 	opacity: 0.9;
 
-	cursor: hand;
+	cursor: pointer;
 }
 .viewer:empty:after,
 .ribbon-set:empty:after {
@@ -1048,6 +1048,85 @@ stretching in width... */
 	background: red;
 }
 
+.overlay-info.full,
+.overlay-info.minimal {
+	display: block;
+	/* XXX is this correct??? */
+	z-index: 1000,
+}
+
+.overlay-info.minimal {
+	background: transparent;
+}
+.overlay-info.minimal .full-only {
+	display: none;
+}
+
+/* XXX REUSE: this is the same as selected/bookmarked image markers... */
+.overlay-info .marked,
+.overlay-info .marked:after,
+.overlay-info .marked:before,
+.overlay-info .bookmarked:after {
+	display: block;
+	position: relative;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	margin: 4px;
+	margin-left: 6px;
+
+	width: 10px;
+	height: 10px;
+
+	box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
+
+	box-sizing: border-box;
+	border-radius: 50%;
+
+	background: blue;
+
+	cursor: pointer;
+}
+
+/* tick... */
+.overlay-info .marked {
+	background: transparent;
+	margin-left: 6px;
+}
+.overlay-info .marked:before,
+.overlay-info .marked:after {
+	position: absolute;
+	bottom: auto;
+
+	border-radius: 3px;
+
+	.rotate(-45deg);
+}
+.overlay-info .marked:before {
+	width: 3px;
+	height: 6px;
+}
+.overlay-info .marked:after {
+	width: 12px;
+	height: 3px;
+}
+
+
+.overlay-info .bookmarked:after {
+	background: yellow;
+}
+
+.overlay-info .marked:not(.on),
+.overlay-info .bookmarked:not(.on) {
+	opacity: 0.5;
+}
+.overlay-info .marked:not(.on):before,
+.overlay-info .marked:not(.on):after,
+.overlay-info .bookmarked:not(.on):after {
+	background: gray;
+}
+
 
 
 /*************************************************** Global status ***/
@@ -1078,7 +1157,7 @@ stretching in width... */
 
 	overflow: hidden;
 
-	cursor: hand;
+	cursor: pointer;
 }
 .up-indicator:after,
 .down-indicator:after {
@@ -1217,13 +1296,13 @@ stretching in width... */
 .global-mode-indicators .marks-visible,
 .context-mode-indicators .current-image-marked {
 	color: blue;
-	cursor: hand;
+	cursor: pointer;
 	text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em, 
 			rgba(0,0,0,0.5) 0.1em 0.1em;
 }
 .context-mode-indicators .current-image-bookmarked {
 	color: yellow;
-	cursor: hand;
+	cursor: pointer;
 	text-shadow: rgba(0,0,0,0.5) 0.1em 0.1em 0.4em, 
 			rgba(0,0,0,0.5) 0.1em 0.1em;
 }
@@ -1422,7 +1501,7 @@ progress:not(value)::-webkit-progress-bar {
 	position: absolute;
 	display: inline-block;
 	color: red;
-	cursor: hand;
+	cursor: pointer;
 }
 .progress-bar progress {
 	display: block;
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index c38c7178..4b676d10 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -2505,36 +2505,130 @@ var makeStateIndicatorItem = function(container, type, text){
 // XXX should we use this or makeStateIndicatorItem(..)???
 // 		...investigate the features of the above...
 // 			- .attr('text')???
-var makeExpandingInfoItem = function(container, cls, align){
+var makeExpandingInfoItem = function(container, cls, align, full_only){
 	var e = $('<span>')
-		.addClass(cls + ' expanding-text ' + align)
+		.addClass(cls + ' expanding-text ' + align +' '+ (full_only && 'full-only'))
 		.append($('<span class="shown">'))
 		.append($('<span class="hidden">'))
 	container.append(e)
 	return e
 }
-var makeInfoItem = function(container, cls, align){
+var makeInfoItem = function(container, cls, align, full_only){
 	var e = $('<span>')
-		.addClass(cls +' '+ align)
+		.addClass(cls +' '+ align +' '+ (full_only && 'full_only'))
 	container.append(e)
 	return e
 } 
 
 
-// Format:
-// 	full:
-// 	[ (12/123) DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50	B M C ]
-// 	or
-// 	[ DSC_1234.jpg GID:a1b2c3 T:2016-01-28 08:37:50		B M C (12/123) ]
-//
-// 	minimal (no background):
-// 	[ (12/123) 													 B M C ]
-// 	or
-// 	[ 													B M C (12/123) ]
-//
-// 	hidden:
-// 	[																  ]
-//
+var ImageStateIndicatorActions = actions.Actions({
+	updateStateIndicators: ['- Interface/',
+		function(gid){
+			gid = gid || this.current
+
+			var that = this
+
+			// make/get indicator containers...
+			/*
+			var image = this.ribbons.viewer.find('.state-indicator-container.image-info')
+			if(image.length == 0){
+				image = makeStateIndicator('image-info') 
+					.appendTo(this.ribbons.viewer)
+			}
+			*/
+
+			var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
+			if(global.length == 0){
+				//global = makeStateIndicator('global-info') 
+				global = makeStateIndicator('global-info overlay-info') 
+
+				var align = ''
+				var order = this.config['global-state-indicator-elements'].slice()
+
+				var i = order.indexOf('---')
+				// rearrange the tail section...
+				// NOTE: this is here as we need to push the floated
+				// 		right items in reverse order...
+				if(i >= 0){
+					order = order.concat(order.splice(i+1, order.length).reverse())
+				}
+
+				order.forEach(function(elem){
+					var full_only = that.config['global-state-indicator-elements-full-only'].indexOf(elem) >= 0
+					// spacer...
+					if(elem == '---'){
+						align = 'float-right'
+
+					// expanding indicators...
+					} else if(elem == 'gid' || elem == 'path'){
+						makeExpandingInfoItem(global, elem, align, full_only)
+
+					// simple indicators...
+					} else if(elem == 'index'){
+						makeInfoItem(global, elem, align, full_only)
+
+					// toggler indicators...
+					} else if(elem == 'bookmark' || elem == 'mark'){
+						makeInfoItem(global, elem+'ed', align, full_only)
+							.click(function(){
+								that['toggle'+elem.capitalize()]()
+							})
+					}
+				})
+
+				global.appendTo(this.ribbons.viewer)
+			}
+
+			if(!gid){
+				return
+			}
+
+
+			// populate the info...
+
+			var img = this.images && gid in this.images && this.images[gid]
+
+			// gid..
+			global.find('.gid .shown').text(gid.slice(-6))
+			global.find('.gid .hidden').text(gid)
+
+			// path...
+			global.find('.path .shown').text(img && img.path || '---')
+			global.find('.path .hidden').text(img && img.path || '---')
+
+			// pos...
+			global.find('.index')
+				.text(
+					(this.data.getImageOrder('ribbon', gid)+1) 
+					+'/'+ 
+					this.data.getImages(gid).len)
+
+			// NOTE: we are not using .toggleMark('?') and friends 
+			// 		here to avoid recursion as we might be handling 
+			// 		them here...
+			// 		...this also simpler than handling '?' and other
+			// 		special toggler args in the handler...
+			var tags = this.data.getTags(gid)
+
+			// marks...
+			global.find('.marked')[
+				tags.indexOf('selected') < 0 ?
+					'removeClass' 
+					: 'addClass']('on')
+			global.find('.bookmarked')[
+				tags.indexOf('bookmark') < 0 ? 
+					'removeClass' 
+					: 'addClass']('on')
+		}],
+	toggleStateIndicator: ['Interface/Toggle state indicator modes',
+		toggler.CSSClassToggler(
+			function(){ 
+				return this.ribbons.viewer.find('.state-indicator-container.global-info') }, 
+			function(){ return this.config['global-state-indicator-modes'] },
+			function(state){ this.config['global-state-indicator-mode'] = state }) ],
+})
+
+
 // XXX an alternative approach:
 // 		- global status area
 // 		- status bar for local status
@@ -2552,7 +2646,11 @@ var makeInfoItem = function(container, cls, align){
 //
 // XXX Q: can title bar be used instead of global state indication???
 // 		...especially if we are indicating only crop...
-// XXX
+// XXX add styling:
+// 		- element spacing
+// 		- tip text
+// 		- avoid multi-line -- scroll???
+// XXX rename to status bar???
 var ImageStateIndicator = 
 module.ImageStateIndicator = core.ImageGridFeatures.Feature({
 	title: '',
@@ -2565,126 +2663,39 @@ module.ImageStateIndicator = core.ImageGridFeatures.Feature({
 	],
 
 	config: {
-		'global-info-elements': [
-			'path',
-			'gid',
-			'---',
+		'global-state-indicator-elements': [
+			// XXX should index be here or to the right???
 			'index',
+			//'path',
+			'gid',
+
+			'---',
+
 			'mark',
 			'bookmark',
 		],
+
+		'global-state-indicator-elements-full-only': [
+			'gid',
+		],
+
+		'global-state-indicator-modes': [
+			'none',
+			'minimal',
+			'full',
+		],
+		'global-state-indicator-mode': null,
 	},
 
-	actions: actions.Actions({
-		// XXX for some reason mark indicator clicking does not work in
-		// 		single image mode...
-		updateStateIndicators: ['- Interface/',
-			function(gid){
-				gid = gid || this.current
-
-				var that = this
-
-				// make/get indicator containers...
-				var image = this.ribbons.viewer.find('.state-indicator-container.image-info')
-				if(image.length == 0){
-					image = makeStateIndicator('image-info') 
-						.appendTo(this.ribbons.viewer)
-				}
-
-				var global = this.ribbons.viewer.find('.state-indicator-container.global-info')
-				if(global.length == 0){
-					//global = makeStateIndicator('global-info') 
-					global = makeStateIndicator('global-info overlay-info') 
-
-					var align = ''
-					var order = this.config['global-info-elements'].slice()
-
-					var i = order.indexOf('---')
-					// rearrange the tail section...
-					// NOTE: this is here as we need to push the floated
-					// 		right items in reverse order...
-					if(i >= 0){
-						order = order.concat(order.splice(i+1, order.length).reverse())
-					}
-
-					order.forEach(function(elem){
-						// spacer...
-						if(elem == '---'){
-							align = 'float-right'
-
-						// expanding indicators...
-						} else if(elem == 'gid' || elem == 'path'){
-							makeExpandingInfoItem(global, elem, align)
-
-						// simple indicators...
-						} else if(elem == 'index'){
-							makeInfoItem(global, elem, align)
-
-						// toggler indicators...
-						} else if(elem == 'bookmark' || elem == 'mark'){
-							makeInfoItem(global, elem+'ed', align)
-								.click(function(){
-									that['toggle'+elem.capitalize()]()
-								})
-								// XXX use CSS for this...
-								.text(elem[0].toUpperCase())
-						}
-					})
-
-					global.appendTo(this.ribbons.viewer)
-				}
-
-				if(!gid){
-					return
-				}
-
-
-				// populate the info...
-
-				var img = this.images && gid in this.images && this.images[gid]
-
-				// gid..
-				global.find('.gid .shown').text(gid.slice(-6))
-				global.find('.gid .hidden').text(gid)
-
-				// path...
-				global.find('.path .shown').text(img && img.path || '---')
-				global.find('.path .hidden').text(img && img.path || '---')
-
-				// pos...
-				global.find('.index')
-					.text(
-						(this.data.getImageOrder('ribbon', gid)+1) 
-						+'/'+ 
-						this.data.getImages(gid).len)
-
-				// NOTE: we are not using .toggleMark('?') and friends 
-				// 		here to avoid recursion as we might be handling 
-				// 		them here...
-				// 		...this also simpler than handling '?' and other
-				// 		special toggler args in the handler...
-				var tags = this.data.getTags(gid)
-
-				// marks...
-				global.find('.marked')
-					[tags.indexOf('selected') < 0 ? 'removeClass' : 'addClass']('on')
-					// XXX STUB: add a css rule for visualising the above...
-					.css({
-						opacity: tags.indexOf('selected') < 0 ? '0.5' : '1',
-					})
-				global.find('.bookmarked')
-					[tags.indexOf('bookmark') < 0 ? 'removeClass' : 'addClass']('on')
-					// XXX STUB: add a css rule for visualising the above...
-					.css({
-						opacity: tags.indexOf('bookmark') < 0 ? '0.5' : '1',
-					})
-			}],
-
-		// XXX add toggler to toggle global image indicator (status bar) modes...
-		// XXX
-	}),
+	actions: ImageStateIndicatorActions,
 
 	handlers: [
+		['start',
+			function(){
+				if(this.config['global-state-indicator-mode']){
+					this.toggleStateIndicator(this.config['global-state-indicator-mode'])
+				}
+			}],
 		[[
 			'focusImage',
 			'toggleBookmark',
diff --git a/ui (gen4)/ui.js b/ui (gen4)/ui.js
index 9b1b693c..95f2270c 100755
--- a/ui (gen4)/ui.js	
+++ b/ui (gen4)/ui.js	
@@ -219,9 +219,10 @@ module.GLOBAL_KEYBOARD = {
 		},
 		I: {
 			default: 'showMetadata',
-			shift: 'showMetadata: "current" "full"',
+			shift: 'toggleStateIndicator',
 
 			ctrl: 'toggleMark!: "ribbon"',
+			'ctrl+shift': 'showMetadata: "current" "full"',
 
 			'meta+alt': 'showDevTools',
 		},