From 3f264e649183f9bf8d583dccafef916f9d30bf84 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sun, 20 Jul 2014 03:02:18 +0400
Subject: [PATCH] added several misc files...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/buildcache.js   |   16 +
 ui (gen4)/css/layout.css  | 1762 +++++++++++++++++++++++++++++++++++++
 ui (gen4)/css/layout.less | 1582 +++++++++++++++++++++++++++++++++
 ui (gen4)/images.js       |   16 +
 ui (gen4)/viewer.js       |   16 +
 5 files changed, 3392 insertions(+)
 create mode 100755 ui (gen4)/buildcache.js
 create mode 100644 ui (gen4)/css/layout.css
 create mode 100755 ui (gen4)/css/layout.less
 create mode 100755 ui (gen4)/images.js
 create mode 100755 ui (gen4)/viewer.js

diff --git a/ui (gen4)/buildcache.js b/ui (gen4)/buildcache.js
new file mode 100755
index 00000000..41720809
--- /dev/null
+++ b/ui (gen4)/buildcache.js	
@@ -0,0 +1,16 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+
+//var DEBUG = DEBUG != null ? DEBUG : true
+
+
+/*********************************************************************/
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                                                */
diff --git a/ui (gen4)/css/layout.css b/ui (gen4)/css/layout.css
new file mode 100644
index 00000000..808dfb0c
--- /dev/null
+++ b/ui (gen4)/css/layout.css	
@@ -0,0 +1,1762 @@
+/**********************************************************************
+* 
+**********************************************************************/
+/******************************************************** Settings ***/
+/********************************************************** Mixins ***/
+/********************************************************* utility ***/
+.expanding-text .hidden {
+  display: none;
+}
+.expanding-text:hover .shown {
+  display: none;
+}
+.expanding-text .shown,
+.expanding-text:hover .hidden {
+  display: inline;
+}
+/* XXX cleanup and style... 
+ 	- make the arrow exact (like in .tooltip-right)
+	- need to align correctly for really narrow elements...
+*/
+[tooltip] {
+  position: relative;
+  text-decoration: none;
+}
+[tooltip]:after {
+  display: none;
+  content: attr(tooltip);
+  position: absolute;
+  bottom: 130%;
+  left: 20%;
+  background: #ffcb66;
+  padding: 5px 15px;
+  color: black;
+  border-radius: 10px;
+  white-space: pre;
+  text-align: left;
+  font-size: 10px;
+  opacity: 0;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+[tooltip]:before {
+  display: none;
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 20px solid #ffcb66;
+  border-left: 20px solid transparent;
+  border-right: 20px solid transparent;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+  opacity: 0;
+  left: 30%;
+  bottom: 90%;
+}
+[tooltip]:hover:after {
+  display: block;
+  bottom: 100%;
+}
+[tooltip]:hover:before {
+  display: block;
+  bottom: 70%;
+}
+[tooltip]:hover:after,
+[tooltip]:hover:before {
+  opacity: 1;
+}
+/* make this above everything else... 
+* XXX not sure if this is the best way...
+*/
+[tooltip]:hover {
+  z-index: 1000;
+}
+.tooltip-right[tooltip]:after {
+  min-height: 30px;
+  bottom: auto;
+  top: -50%;
+  left: 15px;
+}
+.tooltip-right[tooltip]:before {
+  border-left: 5px solid transparent;
+  border-right: 5px solid #ffcb66;
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
+  bottom: auto;
+  left: 5px;
+  top: 25%;
+}
+.tooltip-right[tooltip]:hover:after {
+  bottom: auto;
+}
+.tooltip-right[tooltip]:hover:before {
+  bottom: auto;
+}
+/* XXX might be good to move this to forms... */
+.tooltip-icon {
+  font-size: small;
+  opacity: 0.9;
+}
+/*********************************************************************/
+body {
+  font-family: sans-serif;
+  padding: 0px;
+  margin: 0px;
+}
+input,
+button {
+  border: solid silver 1px;
+  border-radius: 3px;
+}
+button:hover {
+  box-shadow: 0px 0px 7px 0px black;
+}
+/************************************************************** UI ***/
+.title-bar {
+  display: block;
+  position: fixed;
+  content: "";
+  top: 0px;
+  left: 0px;
+  height: 20px;
+  width: 100%;
+  color: white;
+  background: black;
+  overflow: hidden;
+  opacity: 0;
+  z-index: 10000;
+  /* node-webkit */
+
+  -webkit-app-region: drag;
+}
+.title-bar:hover {
+  opacity: 1;
+}
+.title-bar .title {
+  display: inline-block;
+  float: left;
+  height: 20px;
+  width: auto;
+  color: white;
+  background: transparent;
+  font-size: 11px;
+  font-style: italic;
+  font-weight: bold;
+  vertical-align: middle;
+  text-align: left;
+  margin: 2px;
+  margin-left: 10px;
+}
+.title-bar .button {
+  display: inline-block;
+  float: right;
+  width: 20px;
+  height: 20px;
+  color: white;
+  background: transparent;
+  font-size: 18px;
+  vertical-align: middle;
+  /* node-webkit */
+
+  -webkit-app-region: no-drag;
+}
+.title-bar .button:hover {
+  cursor: hand;
+}
+.title-bar .close:hover {
+  color: red;
+}
+/*
+.full-screen-mode .title-bar {
+	display: none;
+}
+*/
+/********************************************************** Viewer ***/
+.viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  /*border: solid blue 1px;*/
+
+  box-sizing: border-box;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+/* XXX this is a stub for printing help/docs... */
+@media print {
+  .viewer {
+    display: none;
+  }
+}
+/****************************************************** Ribbon set ***/
+.ribbon-set {
+  position: absolute;
+  display: block;
+  /* NOTE: this needs for scaling/zooming to behave correctly and not 
+		shift the element, when its dimensions change... 
+		...this is because .ribbon-set will both be used for scaling 
+		and aligning... */
+
+  -webkit-transform-origin: top left;
+  -ms-transform-origin: top left;
+  transform-origin: top left;
+}
+/* empty ribbon set... */
+.ribbon-set:empty {
+  width: 100%;
+  height: 100%;
+}
+.ribbon-set:empty:before,
+.ribbon-set:empty:after {
+  display: block;
+  position: absolute;
+  content: "Nothing loaded...";
+  top: 50%;
+  left: 0px;
+  width: 100%;
+  height: 20px;
+  margin-top: -20px;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 18px;
+  font-weight: bold;
+  color: silver;
+  opacity: 0.9;
+  cursor: hand;
+}
+.ribbon-set:empty:after {
+  content: "Press 'O' to load, 'F1' for help or '?' for keyboard mappings.";
+  margin-top: 5px;
+  font-weight: normal;
+  font-size: 16px;
+  opacity: 0.5;
+}
+/********************************************************** Ribbon ***/
+.ribbon {
+  position: relative;
+  display: block;
+  /* XXX BUG: setting this will mess up new ribbon creation....
+	display: inline-block;*/
+
+  height: auto;
+  min-width: 0px;
+  overflow: visible;
+  white-space: nowrap;
+  font-size: 0;
+  float: left;
+  clear: both;
+  /* XXX not still sure about this... */
+
+  background: black;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.ribbon:empty {
+  display: none;
+}
+.ribbon:first-child {
+  margin-top: 0px;
+}
+.ribbon:last-child {
+  margin-bottom: 0px;
+}
+/*********************************************************** Image ***/
+.marker,
+.current-marker,
+.mark,
+.image {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: left;
+  width: 300px;
+  height: 300px;
+  font-size: 12pt;
+  overflow: hidden;
+  box-sizing: border-box;
+  color: white;
+  text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
+  background: no-repeat 50% transparent;
+  background-size: contain;
+  border: solid 5px transparent;
+}
+/*
+.current.image {
+	border: solid 5px red;
+}
+*/
+.current-marker {
+  position: absolute;
+  border: solid 5px red;
+  background: none;
+  z-index: 100;
+}
+.marker {
+  width: 50px;
+  border: none;
+  background: no-repeat 50% transparent;
+  background-color: transparent;
+  color: white;
+}
+.marker:after {
+  display: block;
+  position: absolute;
+  content: "marker";
+  font-size: 32px;
+  font-weight: bold;
+  text-align: center;
+  overflow: visible;
+  width: 200px;
+  height: 32px;
+  top: 50%;
+  margin-top: -16px;
+  left: 50%;
+  margin-left: -100px;
+  -webkit-transform-origin: center center;
+  -ms-transform-origin: center center;
+  transform-origin: center center;
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
+  transform: rotate(270deg) 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;
+	*/
+
+  opacity: 0.5;
+}
+.single-image-mode.viewer .marker {
+  display: none;
+}
+/* single image mode transitions */
+/* XXX still buggy and not too needed...
+.single-image-mode.viewer .image {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+
+	opacity: 0;
+
+	.transition(opacity);
+}
+.single-image-mode.viewer .current.image {
+	opacity: 1;
+}
+*/
+/* image turning... */
+/* NOTE: need to account for proportions after turning... */
+.image[orientation="90"] {
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+.image[orientation="180"] {
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"] {
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+/* Flipped vertically only... */
+/* NOTE: wee need to do all possible combinations here as we can't 
+ 	combine different parts of a transform attr from different 
+ 	classes */
+.image[flipped*="vertical"] {
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped="vertical"] {
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped="vertical"] {
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped="vertical"] {
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+/* Flipped horizontally only... */
+.image[flipped*="horizontal"] {
+  -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped="horizontal"] {
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped="horizontal"] {
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped="horizontal"] {
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+/* Flipped vertically and horizontally... */
+.image[flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+/* default backgrounds */
+/* XXX not sure if we need these... 
+.image {
+	background-image: url(images/loading.gif);
+}
+.image[orientation="90"] {
+	background-image: url(images/loading-90deg.gif);
+}
+.image[orientation="180"] {
+	background-image: url(images/loading-180deg.gif);
+}
+.image[orientation="270"] {
+	background-image: url(images/loading-270deg.gif);
+}
+*/
+/* separator test */
+/*
+.image.red+.image:not(.red):before {
+	display: inline-block;
+	position: relative;
+	content: "";
+	top:0px;
+	left: -50px;
+	width: 100px;
+	height: 100%;
+
+	background-color: yellow;
+}
+*/
+/***************************************************** Image marks ***/
+/*
+.marks-visible.single-image-mode.viewer .marker {
+	display: inline-block;
+	opacity: 0.5;
+}
+*/
+/*
+.marks-visible.viewer .marked.image:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: @ribbon-mark-size;
+	height: @ribbon-mark-size;
+
+	top: auto;
+	bottom: @ribbon-mark-offset;
+	left: auto;
+	right: @ribbon-mark-offset;
+
+	border-radius: 50%;
+	background: blue;
+
+	box-shadow: 0px 0px 7px 0px black;
+}
+.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
+	top: @ribbon-mark-offset;
+	bottom: auto;
+	left: auto;
+	right: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
+	top: @ribbon-mark-offset;
+	bottom: auto;
+	left: @ribbon-mark-offset;
+	right: auto;
+}
+.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
+	top: auto;
+	bottom: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+	right: auto;
+}
+*/
+/* NOTE: we use a different mark representation for single image mode... */
+/*
+.marks-visible.single-image-mode.viewer .marked.image:after {
+	display: none;
+}
+*/
+/* corner mark... (a-la bookmarks in PortableMag) 
+ * XXX account for flipping... */
+/*
+@ribbon-mark-offset: -15px;
+
+.marks-visible.viewer .marked.image:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: 30px;
+	height: 30px;
+
+	top: @ribbon-mark-offset;
+	right: @ribbon-mark-offset;
+
+	background: blue;
+
+	.rotate(45deg)
+}
+.marks-visible.viewer .marked.image[orientation="90"]:after {
+	top: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image[orientation="180"]:after {
+	bottom: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image[orientation="270"]:after {
+	bottom: @ribbon-mark-offset;
+	right: @ribbon-mark-offset;
+}
+
+
+.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
+	opacity: 0.3;
+}
+*/
+/* new gen marks... */
+.mark {
+  /* this fully covers the image to simplify positioning of actual marks */
+
+  margin-left: -300px;
+  border: none;
+}
+.viewer:not(.marks-visible) .mark {
+  display: none;
+}
+.mark.bookmark,
+.mark.selected {
+  width: 0px;
+  margin-left: 0px;
+  border: none;
+  overflow: visible;
+}
+.mark.bookmark:after,
+.mark.selected:after {
+  display: block;
+  position: absolute;
+  content: "";
+  font-size: 0pt;
+  border: none;
+  width: 5px;
+  height: 5px;
+  top: auto;
+  bottom: 10px;
+  left: auto;
+  right: 10px;
+  box-shadow: 2px 2px 20px -2px rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: blue;
+  left: -25;
+}
+.marks-visible.single-image-mode.viewer .mark:after {
+  display: none;
+}
+.mark.bookmark:after {
+  background: yellow;
+  left: -15;
+}
+/****************************************************** Image info ***/
+.inline-image-info {
+  display: none;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  background: black;
+  opacity: 0.7;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.inline-image-info:hover {
+  -moz-user-select: auto;
+  -webkit-user-select: auto;
+  -o-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.inline-image-info::selection {
+  color: white;
+  background: red;
+}
+.image-info-visible.viewer .global-image-info,
+.image-info-visible.viewer .current-marker:hover .inline-image-info,
+.image-info-visible.viewer .image:hover .inline-image-info {
+  display: block;
+}
+.single-image-mode.viewer .current-marker:hover .inline-image-info,
+.single-image-mode.viewer .image:hover .inline-image-info {
+  display: none;
+}
+.image[orientation="90"] .inline-image-info {
+  top: auto;
+  left: 100%;
+  -webkit-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  transform-origin: bottom left;
+  -webkit-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(-90deg) scaleY(1) scaleX(1);
+  transform: rotate(-90deg) 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;
+	*/
+
+}
+.image[orientation="180"] .inline-image-info {
+  top: 0px;
+  bottom: auto;
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"] .inline-image-info {
+  top: auto;
+  left: auto;
+  right: 100%;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+/* compensate for flipping... */
+/* XXX START: I hate this code, will think if a better way to do this... */
+.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
+  -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: 0px;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: 0px;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -moz-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -o-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+.image[flipped*="vertical"] .inline-image-info {
+  top: 0px;
+  bottom: auto;
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: 100%;
+  right: auto;
+  -webkit-transform-origin: bottom left;
+  -ms-transform-origin: bottom left;
+  transform-origin: bottom left;
+  -webkit-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1);
+  transform: rotate(-270deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped*="vertical"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -moz-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -o-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
+  transform: rotate(270deg) 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;
+	*/
+
+}
+.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: 0px;
+  bottom: auto;
+  -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
+  transform: rotate(0deg) 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;
+	*/
+
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: -100%;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(-90deg) 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;
+	*/
+
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 0px;
+  left: auto;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
+  transform: rotate(180deg) 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;
+	*/
+
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+  top: auto;
+  bottom: 100%;
+  left: auto;
+  right: auto;
+  -webkit-transform-origin: bottom right;
+  -ms-transform-origin: bottom right;
+  transform-origin: bottom right;
+  -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -moz-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -o-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
+  transform: rotate(90deg) 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;
+	*/
+
+}
+/* XXX END */
+.overlay-info {
+  display: none;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  padding: 2px;
+  padding-left: 10px;
+  padding-right: 10px;
+  box-sizing: border-box;
+  background: black;
+  color: white;
+  opacity: 0.6;
+}
+.overlay-info:hover {
+  -moz-user-select: auto;
+  -webkit-user-select: auto;
+  -o-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.overlay-info .float-right {
+  float: right;
+}
+.overlay-info .secondary {
+  font-style: italic;
+  font-size: small;
+  color: silver;
+}
+.overlay-info::selection,
+.overlay-info ::selection {
+  color: white;
+  background: red;
+}
+/*************************************************** Global status ***/
+.global-status {
+  display: block;
+  opacity: 1;
+  z-index: 1000;
+}
+/****************************************************** Indicators ***/
+.up-indicator,
+.down-indicator,
+.start-indicator,
+.end-indicator,
+.top-indicator,
+.bottom-indicator {
+  display: block;
+  position: absolute;
+  content: "";
+  top: 0px;
+  left: 50%;
+  height: 50px;
+  width: 100px;
+  margin-left: -50px;
+  overflow: hidden;
+  cursor: hand;
+}
+.up-indicator:after,
+.down-indicator:after {
+  display: inline-block;
+  position: absolute;
+  content: "";
+  width: 50px;
+  height: 50px;
+  bottom: -25px;
+  left: 25px;
+  background: yellow;
+  -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;
+	*/
+
+}
+.down-indicator {
+  top: auto;
+  bottom: 0px;
+}
+.down-indicator:after {
+  top: -25px;
+  bottom: auto;
+}
+.start-indicator,
+.end-indicator {
+  left: 0px;
+  width: 10px;
+  height: 100%;
+  margin: 0px;
+  background: yellow;
+}
+.end-indicator {
+  left: auto;
+  right: 0px;
+}
+.top-indicator,
+.bottom-indicator {
+  left: 0px;
+  height: 10px;
+  width: 100%;
+  margin: 0px;
+  background: yellow;
+}
+.bottom-indicator {
+  top: auto;
+  bottom: 0px;
+}
+/* default state */
+.up-indicator,
+.down-indicator,
+.start-indicator,
+.end-indicator,
+.top-indicator,
+.bottom-indicator {
+  display: none;
+}
+/* these are generic containers for indicators */
+.global-mode-indicators,
+.context-mode-indicators {
+  position: absolute;
+  height: 20px;
+  width: auto;
+  min-width: 300px;
+  text-align: right;
+  color: transparent;
+}
+.global-mode-indicators {
+  top: 20px;
+  right: 20px;
+}
+.context-mode-indicators {
+  right: 20px;
+  bottom: 20px;
+}
+.global-mode-indicators .mode-tip,
+.context-mode-indicators .mode-tip {
+  display: none;
+  opacity: 0.5;
+  font-weight: bold;
+  color: gray;
+}
+.global-mode-indicators:hover .mode-tip,
+.context-mode-indicators:hover .mode-tip {
+  display: inline-block;
+}
+.global-mode-indicators > *,
+.context-mode-indicators > * {
+  font-size: small;
+  vertical-align: middle;
+  margin-left: 10px;
+}
+.global-mode-indicators .circle,
+.context-mode-indicators .circle {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+/* hide indicators in single image mode */
+.single-image-mode.viewer .global-mode-indicators {
+  opacity: 0.5;
+}
+.light.single-image-mode.viewer .global-mode-indicators {
+  opacity: 0.1;
+}
+.dark.single-image-mode.viewer .global-mode-indicators {
+  opacity: 0.6;
+}
+.single-image-mode.viewer .global-mode-indicators:hover {
+  opacity: 1;
+}
+.global-mode-indicators .indicator,
+.context-mode-indicators .indicator {
+  display: none;
+  height: 20px;
+  vertical-align: middle;
+}
+/* actual indicators */
+/* marks... */
+.global-mode-indicators .marked-only-visible,
+.global-mode-indicators .marks-visible,
+.context-mode-indicators .current-image-marked {
+  color: blue;
+  cursor: hand;
+  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;
+  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,
+.global-mode-indicators .marks-visible .shown,
+.context-mode-indicators .current-image-bookmarked .shown,
+.context-mode-indicators .current-image-marked .shown {
+  display: none;
+}
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-bookmarked:after,
+.context-mode-indicators .current-image-marked:after {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  content: "";
+  background-color: blue;
+  border: solid 2px blue;
+  margin-left: 5px;
+  margin-top: 3px;
+  top: 50%;
+  box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0.7);
+}
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-marked:after {
+  color: blue;
+}
+.context-mode-indicators .current-image-bookmarked:after {
+  color: yellow;
+  background-color: yellow;
+  border: solid 2px yellow;
+}
+.marks-visible.viewer .global-mode-indicators .marks-visible {
+  display: inline-block;
+}
+/* image mark in single image mode... */
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked {
+  /*display: none;*/
+
+  display: inline-block;
+  text-decoration: line-through;
+  opacity: 0.3;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
+  display: inline-block;
+  text-decoration: none;
+  opacity: 1;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):after,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):after {
+  background-color: transparent;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):hover,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):hover {
+  opacity: 0.8;
+}
+.cropped-view.marks-visible.viewer .global-mode-indicators .cropped-view {
+  color: gray;
+  display: inline-block;
+}
+.ribbon-indicator {
+  display: none;
+  position: absolute;
+  top: 10px;
+  left: 15px;
+  color: white;
+  font-size: 42px;
+  font-weight: bold;
+  font-style: italic;
+  text-shadow: black 0.1em 0.1em 0.6em;
+  opacity: 0.1;
+}
+.flashing-ribbon-indicator {
+  display: inline-block;
+}
+.single-image-mode.marks-visible.viewer .ribbon-indicator {
+  display: inline-block;
+}
+.ribbon-indicator:hover:after {
+  display: inline-block;
+  content: "ribbon number";
+  font-size: 14px;
+  opacity: 0.8;
+}
+/*************************************************** Progress bars ***/
+progress {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 8px;
+}
+progress::-webkit-progress-bar {
+  background: transparent;
+  border: solid 1px gray;
+  border-radius: 3px;
+  padding: 1px;
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2) inset;
+}
+progress::-webkit-progress-value {
+  background: yellow;
+  border-radius: 2px;
+  box-shadow: -1px -1px 5px -2px rgba(0, 0, 0, 0.8) inset;
+}
+/*
+progress:not(value)::-webkit-progress-bar {
+	background: transparent;
+	background-image: 
+		-webkit-linear-gradient(-45deg, transparent 33%, rgba(0,0,0,0.2) 33%,
+						rgba(0,0,0,0.2) 66%, transparent 66%),
+		-webkit-linear-gradient(left, yellow, orange, yellow);
+	background-size: 50px 50px;
+
+	-webkit-animation: animate-progress 5s linear infinite;
+	animation: animate-progress 5s linear infinite;
+}
+
+@-webkit-keyframes animate-progress {
+	100% {
+		background-position: -100% 0px;
+	}
+}
+@keyframes animate-progress {
+	100% {
+		background-position: -100% 0px;
+	}
+}
+*/
+.progress-container {
+  position: absolute;
+  top: 20px;
+  margin: 5px;
+  padding: 2px;
+  border-radius: 5px;
+  background: rgba(0, 0, 0, 0.1);
+}
+.progress-container:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+.progress-container:empty {
+  display: none;
+}
+.progress-bar {
+  color: silver;
+  font-size: 10px;
+  margin: 10px;
+}
+.progress-bar .close {
+  display: none;
+}
+.progress-bar:hover .close {
+  position: absolute;
+  display: inline-block;
+  right: 10px;
+}
+.progress-bar .close:hover {
+  position: absolute;
+  display: inline-block;
+  color: red;
+  cursor: hand;
+}
+.progress-bar progress {
+  display: block;
+  width: 300px;
+}
+/********************************************** Mode: single image ***/
+.single-image-mode.viewer .ribbon {
+  background-color: transparent;
+}
+.single-image-mode.viewer .current-marker {
+  display: none;
+}
+.single-image-mode.viewer .image {
+  background-color: transparent;
+  /* NOTE: need to keep a distance from screen borders... */
+
+  border: solid transparent 2px;
+}
+.single-image-mode.viewer .image:not(.current) {
+  /* XXX for some reason this breaks the alignment on large magnifications...
+	display: none;
+	*/
+
+  /* XXX this makes images pass through the :visible filter...
+	opacity: 0;
+	*/
+
+  visibility: hidden;
+}
+/********************************************************** Themes ***/
+/* XXX this is by no means final... */
+.viewer,
+.light.viewer,
+.light.viewer .overlay-block .background {
+  background: white;
+}
+.light.viewer .overlay-block:hover .background:after {
+  color: black;
+}
+.light.viewer .ribbon-set:empty:before,
+.light.viewer .ribbon-set:empty:after {
+  color: gray;
+}
+.light.viewer .ribbon-indicator {
+  color: silver;
+  text-shadow: none;
+  opacity: 0.3;
+}
+.light.viewer .ribbon-indicator:hover:after {
+  color: gray;
+  text-shadow: none;
+  opacity: 0.8;
+}
+.light.viewer progress::-webkit-progress-bar {
+  border: solid 1px silver;
+}
+.light.viewer .progress-container {
+  background: rgba(0, 0, 0, 0.05);
+}
+.light.viewer .progress-container:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+.light.viewer .progress-bar {
+  color: silver;
+}
+.gray.viewer,
+.gray.viewer .overlay-block .background {
+  background: #333;
+}
+.gray.viewer .overlay-block .dialog {
+  background: #555;
+}
+.gray.viewer .overlay-block:hover .background:after {
+  color: silver;
+  opacity: 0.4;
+}
+.dark.viewer,
+.dark.viewer .overlay-block .background {
+  background: #0a0a0a;
+}
+.dark.viewer .overlay-block .dialog {
+  background: #333;
+}
+.dark.viewer .overlay-block:hover .background:after {
+  color: gray;
+  opacity: 0.4;
+}
+.dark.viewer .ribbon-indicator {
+  opacity: 0.2;
+}
+.dark.viewer .ribbon-indicator:hover:after {
+  opacity: 0.8;
+}
+.large.viewer:not(.single-image-mode) .current-marker {
+  border-width: 2px;
+}
+.large.viewer:not(.single-image-mode) .mark:after,
+.large.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -moz-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -o-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
+  /* This prevents elements from aligning to sub-pixels...*/
+
+  /*
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	*/
+
+}
+.small.viewer:not(.single-image-mode) .mark:after,
+.small.viewer:not(.single-image-mode) .marked.image:after {
+  -webkit-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
+  -moz-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
+  -o-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
+  -ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
+  transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
+  /* This prevents elements from aligning to sub-pixels...*/
+
+  /*
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	*/
+
+}
+/********************************************************* Overlay ***/
+.overlay-block {
+  display: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+}
+.viewer.overlay .overlay-block {
+  display: block;
+}
+/* XXX this is experimental... */
+.viewer.overlay .ribbon-set {
+  /* XXX blur makes things slow with transparency... */
+
+  -webkit-filter: /*blur(2px)*/ grayscale(0.5);
+  filter: /*blur(2px)*/ grayscale(0.5);
+  /*
+	-webkit-animation-name: testAnim;
+	-webkit-animation-duration: .2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-delay: 0s;
+	*/
+
+}
+.overlay-block .content,
+.overlay-block .background {
+  /* XXX for some magical reason position and top are overwritten 
+		with 'static' and 'auto' values respectively */
+
+  position: absolute !important;
+  top: 0px !important;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  cursor: auto;
+  opacity: 0.9;
+}
+.overlay-block .content,
+.overlay-block .content table {
+  background: transparent;
+}
+.overlay-block .background {
+  opacity: 0.7;
+}
+.overlay-block:hover .background:after {
+  display: inline-block;
+  position: absolute;
+  content: 'Click background to close.';
+  height: auto;
+  width: auto;
+  bottom: 20px;
+  right: 20px;
+  color: white;
+  opacity: 0.7;
+}
+.overlay-block .dialog {
+  display: inline-block;
+  min-height: 50px;
+  min-width: 300px;
+  /* XXX for some reason this is not sized correctly... */
+
+  max-height: 90%;
+  max-width: 90%;
+  /* XXX this needs to be lower priority than max-height... */
+
+  /*overflow-y: auto;*/
+
+  color: white;
+  border: solid silver 1px;
+  border-radius: 3px;
+  background: gray;
+  padding: 20px;
+  vertical-align: middle;
+  box-shadow: 0px 5px 50px 0px black;
+}
+/* tables in dialogs... */
+.overlay-block .dialog table {
+  color: white;
+  font-size: small;
+  -moz-user-select: auto;
+  -webkit-user-select: auto;
+  -o-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+.overlay-block .dialog table tr td:first-child {
+  text-align: right;
+  font-weight: bold;
+}
+.overlay-block .dialog table tr td:last-child {
+  color: silver;
+}
+.overlay-block .dialog .choice .item {
+  text-align: left;
+}
+.field :focus {
+  box-shadow: 0px 0px 3px 0px red;
+}
+/* XXX this is a hack -- hide the radio button itself... */
+.field.choice input[type=radio] {
+  opacity: 0;
+  position: absolute;
+}
+.field.choice input ~ span {
+  display: block;
+  padding: 1px;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.field.choice :checked ~ span {
+  color: white;
+  background: gray;
+}
+.field.choice :focus ~ span {
+  box-shadow: 0px 0px 3px 0px red;
+}
+.light.viewer .field.choice :checked ~ span {
+  color: white;
+  background: silver;
+}
+.field .disabled-text {
+  opacity: 0.5;
+}
+/************************************************************ Help ***/
+/* XXX make this more generic, and not just for the keyboard... */
+/* this is for sliding stuff */
+.viewer.drawer-mode {
+  box-shadow: 0px 0px 50px 0px silver;
+}
+/* help */
+.keyboard-help {
+  width: 80%;
+  margin-top: 20px;
+  margin-left: 15%;
+  margin-right: 5%;
+  margin-bottom: 100px;
+}
+.keyboard-help .section-doc {
+  font-size: small;
+  vertical-align: top;
+  font-style: italic;
+}
+.keyboard-help th {
+  text-align: left;
+  height: 50px;
+  vertical-align: bottom;
+  border-bottom: solid gray 1px;
+}
+.keyboard-help tr:hover {
+  background: #eee;
+  vertical-align: top;
+}
+.keyboard-help tr td:first-child {
+  color: gray;
+  font-style: italic;
+  padding-right: 20px;
+  padding-left: 10px;
+}
+.keyboard-help .section-doc td:only-child {
+  padding-right: 0px;
+  padding-left: 0px;
+}
+/**********************************************************************
+* vim:set spell ft=css :                                             */
diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
new file mode 100755
index 00000000..943efaaa
--- /dev/null
+++ b/ui (gen4)/css/layout.less	
@@ -0,0 +1,1582 @@
+/**********************************************************************
+* 
+**********************************************************************/
+
+/******************************************************** Settings ***/
+
+@image-tile-size: 300px;
+
+@ribbon-mark-offset: 5px;
+
+@ribbon-mark-size: 10px;
+
+@single-image-indicator-size: 10px;
+
+
+
+/********************************************************** Mixins ***/
+
+.user-select (@mode: auto) {
+	-moz-user-select: @mode;
+	-webkit-user-select: @mode;
+	-o-user-select: @mode;
+	-ms-user-select: @mode;
+	user-select: @mode;
+}
+
+
+.origin (@x:top, @y:left) {
+	-webkit-transform-origin: @arguments;
+	-ms-transform-origin: @arguments;
+	transform-origin: @arguments;
+}
+
+
+.transform (@deg:0deg, @scaleX:1, @scaleY:1) {
+	-webkit-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-moz-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-o-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	-ms-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+	transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
+
+	/* This prevents elements from aligning to sub-pixels...*/
+	/*
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+	*/
+	
+}
+.scale (@scale) {
+	.transform(0deg, @scale, @scale)
+}
+.rotate (@deg) {
+	.transform(@deg)
+}
+.flipped-vertically () {
+	.transform(0deg, 1, -1)
+}
+.flipped-horizontally () {
+	.transform(0deg, -1, 1)
+}
+
+.transition (@attr:all, @t:0.2s, @easing:ease) {
+	-webkit-transition: @attr @t @easing;
+	-moz-transition: @attr @t @easing;
+	-o-transition: @attr @t @easing;
+	-ms-transition: @attr @t @easing;	
+	transition: @attr @t @easing;
+}
+
+
+/********************************************************* utility ***/
+.expanding-text .hidden {
+	display: none;
+}
+.expanding-text:hover .shown {
+	display: none;
+}
+.expanding-text .shown,
+.expanding-text:hover .hidden {
+	display: inline;
+}
+
+
+/* XXX cleanup and style... 
+ 	- make the arrow exact (like in .tooltip-right)
+	- need to align correctly for really narrow elements...
+*/
+[tooltip] {
+	position: relative;
+	text-decoration: none;
+}
+[tooltip]:after {
+	display: none;
+	content: attr(tooltip);
+	position: absolute;
+	bottom: 130%;
+	left: 20%;
+	background: #ffcb66;
+	padding: 5px 15px;
+	color: black;
+	border-radius: 10px;
+	white-space: pre;
+	text-align: left;
+	font-size: 10px;
+	opacity: 0;
+	-webkit-transition: all 0.4s ease;
+	-moz-transition: all 0.4s ease;
+	transition: all 0.4s ease;
+}
+[tooltip]:before {
+	display: none;
+	content: "";
+	position: absolute;
+	width: 0;
+	height: 0;
+	border-top: 20px solid #ffcb66;
+	border-left: 20px solid transparent;
+	border-right: 20px solid transparent;
+	-webkit-transition: all 0.4s ease;
+	-moz-transition : all 0.4s ease;
+	transition : all 0.4s ease;
+	opacity: 0;
+	left: 30%;
+	bottom: 90%;
+}
+[tooltip]:hover:after {
+	display: block;
+	bottom: 100%;
+}
+[tooltip]:hover:before {
+	display: block;
+	bottom: 70%;
+}
+[tooltip]:hover:after, 
+[tooltip]:hover:before {
+	opacity: 1;
+}
+/* make this above everything else... 
+* XXX not sure if this is the best way...
+*/
+[tooltip]:hover {
+	z-index: 1000;
+}
+
+.tooltip-right[tooltip] {
+}
+.tooltip-right[tooltip]:after {
+	min-height: 30px;
+	bottom: auto;
+	top: -50%;
+	left: 15px;
+}
+.tooltip-right[tooltip]:before {
+	border-left: 5px solid transparent;
+	border-right: 5px solid #ffcb66;
+	border-bottom: 5px solid transparent;
+	border-top: 5px solid transparent;
+	bottom: auto;
+	left: 5px;
+	top: 25%;
+}
+.tooltip-right[tooltip]:hover:after {
+	bottom: auto;
+}
+.tooltip-right[tooltip]:hover:before {
+	bottom: auto;
+}
+
+/* XXX might be good to move this to forms... */
+.tooltip-icon {
+	font-size: small;
+	opacity: 0.9;
+}
+
+
+
+/*********************************************************************/
+
+body {
+	font-family: sans-serif;
+	padding: 0px;
+	margin: 0px;
+}
+
+input,
+button {
+	border: solid silver 1px;
+	border-radius: 3px;
+}
+button:hover {
+	box-shadow: 0px 0px 7px 0px black;
+}
+
+
+
+/************************************************************** UI ***/
+
+.title-bar {
+	display: block;
+	position: fixed;
+	content: "";
+
+	top: 0px;
+	left: 0px;
+	height: 20px;
+	width: 100%;
+
+	color: white;
+	background: black;
+
+	overflow: hidden;
+
+	opacity: 0;
+
+	z-index: 10000;
+
+	/* node-webkit */
+	-webkit-app-region: drag;
+}
+.title-bar:hover {
+	opacity: 1;
+}
+
+.title-bar .title {
+	display: inline-block;
+	float: left;
+
+	height: 20px;
+	width: auto;
+
+	color: white;
+	background: transparent;
+
+	font-size: 11px;
+	font-style: italic;
+	font-weight: bold;
+
+	vertical-align: middle;
+	text-align: left;
+
+	margin: 2px;
+	margin-left: 10px;
+}
+
+.title-bar .button {
+	display: inline-block;
+	float: right;
+
+	width: 20px;
+	height: 20px;
+
+	color: white;
+	background: transparent;
+
+	font-size: 18px;
+	vertical-align: middle;
+
+	/* node-webkit */
+	-webkit-app-region: no-drag;
+}
+.title-bar .button:hover {
+	cursor: hand;
+}
+
+.title-bar .close:hover {
+	color: red;
+}
+
+/*
+.full-screen-mode .title-bar {
+	display: none;
+}
+*/
+
+
+/********************************************************** Viewer ***/
+.viewer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+
+	/*border: solid blue 1px;*/
+	box-sizing: border-box;
+
+	.user-select(none);
+}
+
+/* XXX this is a stub for printing help/docs... */
+@media print {
+
+.viewer {
+	display: none;
+}
+
+}
+
+
+/****************************************************** Ribbon set ***/
+.ribbon-set {
+	position: absolute;
+	display: block;
+
+	/* NOTE: this needs for scaling/zooming to behave correctly and not 
+		shift the element, when its dimensions change... 
+		...this is because .ribbon-set will both be used for scaling 
+		and aligning... */
+	.origin(top, left);
+}
+
+/* empty ribbon set... */
+.ribbon-set:empty {
+	width: 100%;
+	height: 100%;
+}
+.ribbon-set:empty:before,
+.ribbon-set:empty:after {
+	display: block;
+	position: absolute;
+
+	content: "Nothing loaded...";
+
+	top: 50%;
+	left: 0px;
+	width: 100%;
+	height: 20px;
+	margin-top: -20px;
+
+	text-align: center;
+	vertical-align: middle;
+
+	font-size: 18px;
+	font-weight: bold;
+	color: silver;
+	opacity: 0.9;
+
+	cursor: hand;
+}
+.ribbon-set:empty:after {
+
+	content: "Press 'O' to load, 'F1' for help or '?' for keyboard mappings.";
+
+	margin-top: 5px;
+	font-weight: normal;
+	font-size: 16px;
+	opacity: 0.5;
+}
+
+
+
+/********************************************************** Ribbon ***/
+.ribbon {
+	position: relative;
+	display: block;
+	/* XXX BUG: setting this will mess up new ribbon creation....
+	display: inline-block;*/
+	height: auto;
+	min-width: 0px;
+	overflow: visible;
+	white-space: nowrap;
+	font-size: 0;
+
+	float: left;
+	clear: both;
+
+	/* XXX not still sure about this... */
+	background: black;
+
+	margin-top: 10px;
+	margin-bottom: 10px;
+}
+.ribbon:empty {
+	display: none;
+}
+.ribbon:first-child {
+	margin-top: 0px;
+}
+.ribbon:last-child {
+	margin-bottom: 0px;
+}
+
+
+
+/*********************************************************** Image ***/
+.marker,
+.current-marker,
+.mark,
+.image {
+	position: relative;
+	display: inline-block;
+	vertical-align: middle;
+	text-align:left;
+	width: @image-tile-size;
+	height: @image-tile-size;
+	font-size: 12pt;
+	overflow: hidden;
+
+	box-sizing: border-box;
+	color: white;
+
+	text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
+
+	background: no-repeat 50% transparent;
+	background-size: contain;
+	border: solid 5px transparent;
+}
+/*
+.current.image {
+	border: solid 5px red;
+}
+*/
+
+.current-marker {
+	position: absolute;
+	border: solid 5px red;
+	background: none;
+	z-index: 100;
+}
+
+.marker {
+	width: 50px;
+	border: none;
+	background: no-repeat 50% transparent;
+	background-color: transparent;
+	color: white;
+}
+.marker:after {
+	display: block;
+	position: absolute;
+	content: "marker";
+	font-size: 32px;
+	font-weight: bold;
+	text-align: center;
+	overflow: visible;
+
+	width: 200px;
+	height: 32px;
+	top: 50%;
+	margin-top: -16px;
+	left: 50%;
+	margin-left: -100px;
+
+	.origin(center, center);
+	.rotate(270deg);
+
+	opacity: 0.5;
+}
+.single-image-mode.viewer .marker {
+	display: none;
+}
+
+
+/* single image mode transitions */
+/* XXX still buggy and not too needed...
+.single-image-mode.viewer .image {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+
+	opacity: 0;
+
+	.transition(opacity);
+}
+.single-image-mode.viewer .current.image {
+	opacity: 1;
+}
+*/
+
+
+/* image turning... */
+/* NOTE: need to account for proportions after turning... */
+.image[orientation="90"] {
+	.rotate(90deg);
+}
+.image[orientation="180"] {
+	.rotate(180deg);
+}
+.image[orientation="270"] {
+	.rotate(270deg);
+}
+
+
+/* Flipped vertically only... */
+/* NOTE: wee need to do all possible combinations here as we can't 
+ 	combine different parts of a transform attr from different 
+ 	classes */
+.image[flipped*="vertical"] {
+	.flipped-vertically;
+}
+.image[orientation="90"][flipped="vertical"] {
+	.transform(90deg, 1, -1)
+}
+.image[orientation="180"][flipped="vertical"] {
+	.transform(180deg, 1, -1)
+}
+.image[orientation="270"][flipped="vertical"] {
+	.transform(270deg, 1, -1)
+}
+
+
+/* Flipped horizontally only... */
+.image[flipped*="horizontal"] {
+	.flipped-horizontally;
+}
+.image[orientation="90"][flipped="horizontal"] {
+	.transform(90deg, -1)
+}
+.image[orientation="180"][flipped="horizontal"] {
+	.transform(180deg, -1)
+}
+.image[orientation="270"][flipped="horizontal"] {
+	.transform(270deg, -1)
+}
+
+/* Flipped vertically and horizontally... */
+.image[flipped*="vertical"][flipped*="horizontal"] {
+	.transform(0deg, -1, -1)
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(90deg, -1, -1)
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(180deg, -1, -1)
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
+	.transform(270deg, -1, -1)
+}
+
+
+/* default backgrounds */
+/* XXX not sure if we need these... 
+.image {
+	background-image: url(images/loading.gif);
+}
+.image[orientation="90"] {
+	background-image: url(images/loading-90deg.gif);
+}
+.image[orientation="180"] {
+	background-image: url(images/loading-180deg.gif);
+}
+.image[orientation="270"] {
+	background-image: url(images/loading-270deg.gif);
+}
+*/
+
+
+/* separator test */
+/*
+.image.red+.image:not(.red):before {
+	display: inline-block;
+	position: relative;
+	content: "";
+	top:0px;
+	left: -50px;
+	width: 100px;
+	height: 100%;
+
+	background-color: yellow;
+}
+*/
+
+
+
+/***************************************************** Image marks ***/
+
+/*
+.marks-visible.single-image-mode.viewer .marker {
+	display: inline-block;
+	opacity: 0.5;
+}
+*/
+
+/*
+.marks-visible.viewer .marked.image:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: @ribbon-mark-size;
+	height: @ribbon-mark-size;
+
+	top: auto;
+	bottom: @ribbon-mark-offset;
+	left: auto;
+	right: @ribbon-mark-offset;
+
+	border-radius: 50%;
+	background: blue;
+
+	box-shadow: 0px 0px 7px 0px black;
+}
+.marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
+	top: @ribbon-mark-offset;
+	bottom: auto;
+	left: auto;
+	right: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
+	top: @ribbon-mark-offset;
+	bottom: auto;
+	left: @ribbon-mark-offset;
+	right: auto;
+}
+.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
+.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
+.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
+	top: auto;
+	bottom: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+	right: auto;
+}
+*/
+
+/* NOTE: we use a different mark representation for single image mode... */
+/*
+.marks-visible.single-image-mode.viewer .marked.image:after {
+	display: none;
+}
+*/
+
+
+/* corner mark... (a-la bookmarks in PortableMag) 
+ * XXX account for flipping... */
+/*
+@ribbon-mark-offset: -15px;
+
+.marks-visible.viewer .marked.image:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: 30px;
+	height: 30px;
+
+	top: @ribbon-mark-offset;
+	right: @ribbon-mark-offset;
+
+	background: blue;
+
+	.rotate(45deg)
+}
+.marks-visible.viewer .marked.image[orientation="90"]:after {
+	top: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image[orientation="180"]:after {
+	bottom: @ribbon-mark-offset;
+	left: @ribbon-mark-offset;
+}
+.marks-visible.viewer .marked.image[orientation="270"]:after {
+	bottom: @ribbon-mark-offset;
+	right: @ribbon-mark-offset;
+}
+
+
+.marked-only-view.viewer:not(.marks-visible) .image:not(.marked) {
+	opacity: 0.3;
+}
+*/
+
+
+
+/* new gen marks... */
+
+.mark {
+	/* this fully covers the image to simplify positioning of actual marks */
+	margin-left: -@image-tile-size;
+	border: none;
+}
+.viewer:not(.marks-visible) .mark {
+	display: none;
+}
+
+.mark.bookmark,
+.mark.selected {
+	width: 0px;
+	margin-left: 0px;
+	border: none;
+	overflow: visible;
+}
+.mark.bookmark:after,
+.mark.selected:after {
+	display: block;
+	position: absolute;
+	content: "";
+	font-size: 0pt;
+	border: none;
+
+	width: 5px;
+	height: 5px;
+
+	top: auto;
+	bottom: 10px;
+	left: auto;
+	right: 10px;
+
+	box-shadow: 2px 2px 20px -2px rgba(0,0,0,0.7);
+
+	box-sizing: border-box;
+	border-radius: 50%;
+
+
+	background: blue;
+	left: -25;
+}
+.marks-visible.single-image-mode.viewer .mark:after {
+	display: none;
+}
+
+.mark.bookmark:after {
+	background: yellow;
+	left: -15;
+}
+
+
+
+/****************************************************** Image info ***/
+.inline-image-info {
+	display: none;
+
+	position: absolute;
+	bottom: 0px;
+	width: 100%;
+	background: black;
+	opacity: 0.7;
+
+	overflow: hidden;
+	white-space: nowrap;
+}
+.inline-image-info:hover {
+	.user-select(auto);
+}
+.inline-image-info::selection {
+	color: white;
+	background: red;
+}
+.image-info-visible.viewer .global-image-info,
+.image-info-visible.viewer .current-marker:hover .inline-image-info,
+.image-info-visible.viewer .image:hover .inline-image-info {
+	display: block;
+}
+.single-image-mode.viewer .current-marker:hover .inline-image-info,
+.single-image-mode.viewer .image:hover .inline-image-info {
+	display: none;
+}
+.image[orientation="90"] .inline-image-info {
+	top: auto;
+	left: 100%;
+	.origin(bottom, left);
+	.rotate(-90deg);
+}
+.image[orientation="180"] .inline-image-info {
+	top: 0px;
+	bottom: auto;
+	.rotate(180deg);
+}
+.image[orientation="270"] .inline-image-info {
+	top: auto;
+	left: auto;
+	right: 100%;
+	.origin(bottom, right);
+	.rotate(90deg);
+}
+
+
+/* compensate for flipping... */
+/* XXX START: I hate this code, will think if a better way to do this... */
+.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
+	.flipped-horizontally;
+}
+.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: -100%;
+	right: auto;
+	.origin(bottom, right);
+	.transform(90deg, -1, 1);
+}
+.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: 0px;
+	right: auto;
+	.origin(bottom, right);
+	.transform(180deg, -1, 1);
+
+}
+.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: 0px;
+	right: auto;
+	.origin(bottom, right);
+	.transform(270deg, -1, 1);
+}
+
+.image[flipped*="vertical"] .inline-image-info {
+	top: 0px;
+	bottom: auto;
+	.flipped-vertically;
+}
+.image[orientation="90"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: 100%;
+	right: auto;
+	.origin(bottom, left);
+	.transform(-270deg, 1, -1);
+}
+.image[orientation="180"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: -100%;
+	right: auto;
+	.origin(bottom, right);
+	.transform(180deg, 1, -1);
+}
+.image[orientation="270"][flipped*="vertical"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: -100%;
+	right: auto;
+	.origin(bottom, right);
+	.transform(270deg, 1, -1);
+}
+
+.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: 0px;
+	bottom: auto;
+	.transform(0deg, -1, -1);
+}
+.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: -100%;
+	right: auto;
+	.origin(bottom, right);
+	.transform(-90deg, -1, -1);
+}
+.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 0px;
+	left: auto;
+	right: auto;
+	.origin(bottom, right);
+	.transform(180deg, -1, -1);
+}
+.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
+	top: auto;
+	bottom: 100%;
+	left: auto;
+	right: auto;
+	.origin(bottom, right);
+	.transform(90deg, -1, -1);
+}
+/* XXX END */
+
+
+.overlay-info {
+	display: none;
+	position: absolute;
+
+	bottom: 0px;
+	left: 0px;
+	width: 100%;
+	padding: 2px;
+	padding-left: 10px;
+	padding-right: 10px;
+	box-sizing: border-box;
+
+	background: black;
+	color: white;
+
+	opacity: 0.6;
+}
+.overlay-info:hover {
+	.user-select(auto);
+}
+.overlay-info .float-right {
+	float: right;
+}
+.overlay-info .secondary {
+	font-style: italic;
+	font-size: small;
+	color: silver;
+}
+.overlay-info::selection,
+.overlay-info ::selection {
+	color: white;
+	background: red;
+}
+
+
+
+/*************************************************** Global status ***/
+.global-status {
+	display: block;
+	opacity: 1;
+	z-index: 1000;
+}
+
+
+
+/****************************************************** Indicators ***/
+.up-indicator,
+.down-indicator,
+.start-indicator,
+.end-indicator,
+.top-indicator,
+.bottom-indicator
+{
+	display: block;
+	position: absolute;
+	content: "";
+	top: 0px;
+	left: 50%;
+	height: 50px;
+	width: 100px;
+	margin-left: -50px;
+
+	overflow: hidden;
+
+	cursor: hand;
+}
+.up-indicator:after,
+.down-indicator:after {
+	display: inline-block;
+	position: absolute;
+	content: "";
+	width: 50px;
+	height: 50px;
+
+	bottom: -25px;
+	left: 25px;
+
+	background: yellow;
+
+	.rotate(45deg);
+}
+.down-indicator {
+	top: auto;
+	bottom: 0px;
+}
+.down-indicator:after {
+	top: -25px;
+	bottom: auto;
+}
+.start-indicator,
+.end-indicator {
+	left: 0px;
+	width: 10px;
+	height: 100%;
+	margin: 0px;
+
+	background: yellow;
+}
+.end-indicator {
+	left: auto;
+	right: 0px;
+}
+.top-indicator,
+.bottom-indicator {
+	left: 0px;
+	height: 10px;
+	width: 100%;
+	margin: 0px;
+
+	background: yellow;
+}
+.bottom-indicator {
+	top: auto;
+	bottom: 0px;
+}
+
+/* default state */
+.up-indicator,
+.down-indicator,
+.start-indicator,
+.end-indicator, 
+.top-indicator,
+.bottom-indicator
+{
+	display: none;
+}
+
+
+/* these are generic containers for indicators */
+.global-mode-indicators,
+.context-mode-indicators {
+	position: absolute;
+	height: 20px;
+	width: auto;
+	min-width: @image-tile-size;
+	text-align: right;
+
+	color: transparent;
+}
+
+.global-mode-indicators {
+	top: 20px;
+	right: 20px;
+}
+.context-mode-indicators {
+	right: 20px;
+	bottom: 20px;
+}
+
+.global-mode-indicators .mode-tip,
+.context-mode-indicators .mode-tip {
+	display: none;
+	opacity: 0.5;
+	font-weight: bold;
+	color: gray;
+}
+.global-mode-indicators:hover .mode-tip,
+.context-mode-indicators:hover .mode-tip {
+	display: inline-block;
+}
+
+.global-mode-indicators > *,
+.context-mode-indicators > * {
+	font-size: small;
+	vertical-align: middle;
+	margin-left: 10px;
+}
+
+.global-mode-indicators .circle,
+.context-mode-indicators .circle {
+	display: inline-block;
+	width: @single-image-indicator-size;
+	height: @single-image-indicator-size;
+	border-radius: 50%;
+}
+
+/* hide indicators in single image mode */
+.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.5;
+}
+.light.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.1;
+}
+.dark.single-image-mode.viewer .global-mode-indicators {
+	opacity: 0.6;
+}
+.single-image-mode.viewer .global-mode-indicators:hover {
+	opacity: 1;
+}
+
+.global-mode-indicators .indicator,
+.context-mode-indicators .indicator {
+	display: none;
+	height: 20px;
+	vertical-align: middle;
+}
+
+
+/* actual indicators */
+/* marks... */
+.global-mode-indicators .marked-only-visible,
+.global-mode-indicators .marks-visible,
+.context-mode-indicators .current-image-marked {
+	color: blue;
+	cursor: hand;
+	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;
+	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,
+.global-mode-indicators .marks-visible .shown,
+.context-mode-indicators .current-image-bookmarked .shown,
+.context-mode-indicators .current-image-marked .shown {
+	display: none;
+}
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-bookmarked:after,
+.context-mode-indicators .current-image-marked:after {
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	content: "";
+	background-color: blue;
+	border: solid 2px blue;
+	margin-left: 5px;
+
+	margin-top: 3px;
+	top: 50%;
+
+	box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);
+}
+.global-mode-indicators .marked-only-visible:after,
+.global-mode-indicators .marks-visible:after,
+.context-mode-indicators .current-image-marked:after {
+	color: blue;
+}
+.context-mode-indicators .current-image-bookmarked:after {
+	color: yellow;
+	background-color: yellow;
+	border: solid 2px yellow;
+}
+.marks-visible.viewer .global-mode-indicators .marks-visible {
+	display: inline-block;
+}
+/* image mark in single image mode... */
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked {
+	/*display: none;*/
+	display: inline-block;
+	text-decoration: line-through;
+
+	opacity: 0.3;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked.shown,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked.shown {
+	display: inline-block;
+	text-decoration: none;
+
+	opacity: 1;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):after,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):after {
+	background-color: transparent;
+}
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked:not(.shown):hover,
+.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked:not(.shown):hover {
+	opacity: 0.8;
+}
+
+
+
+.cropped-view.marks-visible.viewer .global-mode-indicators .cropped-view {
+	color: gray;
+	display: inline-block;
+}
+
+
+.ribbon-indicator {
+	display: none;
+	position: absolute;
+	top: 10px;
+	left: 15px;
+
+	color: white;
+	font-size: 42px;
+	font-weight: bold;
+	font-style: italic;
+	text-shadow: black 0.1em 0.1em 0.6em;
+
+	opacity: 0.1;
+}
+.flashing-ribbon-indicator {
+	display: inline-block;
+}
+.single-image-mode.marks-visible.viewer .ribbon-indicator {
+	display: inline-block;
+}
+.ribbon-indicator:hover:after {
+	display: inline-block;
+	content: "ribbon number";
+	font-size: 14px;
+
+	opacity: 0.8;
+}
+
+
+
+/*************************************************** Progress bars ***/
+progress {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+
+	height: 8px;
+}
+progress::-webkit-progress-bar {
+	background: transparent;
+	border: solid 1px gray;
+	border-radius: 3px;
+	padding: 1px;
+	box-shadow: 0px 2px 5px rgba(0,0,0,0.2) inset;
+}
+progress::-webkit-progress-value {
+	background: yellow;
+	border-radius: 2px;
+	box-shadow: -1px -1px 5px -2px rgba(0,0,0,0.8) inset;
+}
+
+/*
+progress:not(value)::-webkit-progress-bar {
+	background: transparent;
+	background-image: 
+		-webkit-linear-gradient(-45deg, transparent 33%, rgba(0,0,0,0.2) 33%,
+						rgba(0,0,0,0.2) 66%, transparent 66%),
+		-webkit-linear-gradient(left, yellow, orange, yellow);
+	background-size: 50px 50px;
+
+	-webkit-animation: animate-progress 5s linear infinite;
+	animation: animate-progress 5s linear infinite;
+}
+
+@-webkit-keyframes animate-progress {
+	100% {
+		background-position: -100% 0px;
+	}
+}
+@keyframes animate-progress {
+	100% {
+		background-position: -100% 0px;
+	}
+}
+*/
+
+
+.progress-container {
+	position: absolute;
+	top: 20px;
+	margin: 5px;
+	padding: 2px;
+	border-radius: 5px;
+	background: rgba(0,0,0,0.1);
+}
+.progress-container:hover {
+	background: rgba(0,0,0,0.8);
+}
+.progress-container:empty {
+	display: none;
+}
+.progress-bar {
+	color: silver;
+	font-size: 10px;
+	margin: 10px;
+}
+.progress-bar .close {
+	display: none;
+}
+.progress-bar:hover .close {
+	position: absolute;
+	display: inline-block;
+	right: 10px;
+}
+.progress-bar .close:hover {
+	position: absolute;
+	display: inline-block;
+	color: red;
+	cursor: hand;
+}
+.progress-bar progress {
+	display: block;
+	width: 300px;
+}
+
+
+
+/********************************************** Mode: single image ***/
+
+.single-image-mode.viewer .ribbon {
+	background-color: transparent;
+}
+.single-image-mode.viewer .current-marker {
+	display: none;
+}
+.single-image-mode.viewer .image {
+	background-color: transparent;
+	/* NOTE: need to keep a distance from screen borders... */
+	border: solid transparent 2px;
+}
+.single-image-mode.viewer .image:not(.current) {
+	/* XXX for some reason this breaks the alignment on large magnifications...
+	display: none;
+	*/
+	/* XXX this makes images pass through the :visible filter...
+	opacity: 0;
+	*/
+	visibility: hidden;
+}
+
+
+
+/********************************************************** Themes ***/
+
+/* XXX this is by no means final... */
+.viewer,
+.light.viewer,
+.light.viewer .overlay-block .background {
+	background: white;
+}
+.light.viewer .overlay-block .dialog {
+}
+.light.viewer .overlay-block:hover .background:after {
+	color: black;
+}
+.light.viewer .ribbon-set:empty:before,
+.light.viewer .ribbon-set:empty:after {
+	color: gray;
+}
+.light.viewer .ribbon-indicator {
+	color: silver;
+	text-shadow: none;
+
+	opacity: 0.3;
+}
+.light.viewer .ribbon-indicator:hover:after {
+	color: gray;
+	text-shadow: none;
+
+	opacity: 0.8;
+}
+.light.viewer progress::-webkit-progress-bar {
+	border: solid 1px silver;
+}
+.light.viewer .progress-container {
+	background: rgba(0,0,0,0.05);
+}
+.light.viewer .progress-container:hover {
+	background: rgba(0,0,0,0.5);
+}
+.light.viewer .progress-bar {
+	color: silver;
+}
+
+.gray.viewer,
+.gray.viewer .overlay-block .background {
+	background: #333;
+}
+.gray.viewer .overlay-block .dialog {
+	background: #555;
+}
+.gray.viewer .overlay-block:hover .background:after {
+	color: silver;
+	opacity: 0.4;
+}
+
+.dark.viewer,
+.dark.viewer .overlay-block .background {
+	background: #0a0a0a;
+}
+.dark.viewer .overlay-block .dialog {
+	background: #333;
+}
+.dark.viewer .overlay-block:hover .background:after {
+	color: gray;
+	opacity: 0.4;
+}
+.dark.viewer .ribbon-indicator {
+	opacity: 0.2;
+}
+.dark.viewer .ribbon-indicator:hover:after {
+	opacity: 0.8;
+}
+
+
+
+.large.viewer:not(.single-image-mode) .current-marker {
+	border-width: 2px;
+}
+.large.viewer:not(.single-image-mode) .mark:after,
+.large.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(0.7);
+}
+
+.small.viewer:not(.single-image-mode) .mark:after,
+.small.viewer:not(.single-image-mode) .marked.image:after {
+	.scale(1.5);
+}
+
+
+
+/********************************************************* Overlay ***/
+
+.overlay-block {
+	display: none;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	height: 100%;
+	width: 100%;
+}
+.viewer.overlay .overlay-block {
+	display: block;
+}
+/* XXX this is experimental... */
+.viewer.overlay .ribbon-set {
+
+	/* XXX blur makes things slow with transparency... */
+	-webkit-filter: /*blur(2px)*/ grayscale(.5);
+	filter: /*blur(2px)*/ grayscale(.5);
+
+	/*
+	-webkit-animation-name: testAnim;
+	-webkit-animation-duration: .2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-direction: alternate;
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-fill-mode: forwards;
+	-webkit-animation-delay: 0s;
+	*/
+}
+.overlay-block .content,
+.overlay-block .background {
+	/* XXX for some magical reason position and top are overwritten 
+		with 'static' and 'auto' values respectively */
+	position: absolute !important;
+	top: 0px !important;
+	left: 0px;
+	height: 100%;
+	width: 100%;
+	cursor: auto;
+
+	opacity: 0.9;
+}
+.overlay-block .content,
+.overlay-block .content table {
+	background: transparent;
+}
+.overlay-block .background {
+	opacity: 0.7;
+}
+
+.overlay-block:hover .background:after {
+	display: inline-block;
+	position: absolute;
+	content: 'Click background to close.';
+	height: auto;
+	width: auto;
+	bottom: 20px;
+	right: 20px;
+
+	color: white;
+
+	opacity: 0.7;
+}
+
+
+.overlay-block .dialog {
+	display: inline-block;
+
+	min-height: 50px;
+	min-width: 300px;
+	/* XXX for some reason this is not sized correctly... */
+	max-height: 90%;
+	max-width: 90%;
+
+	/* XXX this needs to be lower priority than max-height... */
+	/*overflow-y: auto;*/
+
+	color: white;
+	border: solid silver 1px;
+	border-radius: 3px;
+	background: gray;
+
+	padding: 20px;
+
+	vertical-align: middle;
+
+	box-shadow: 0px 5px 50px 0px black;
+}
+
+/* tables in dialogs... */
+
+.overlay-block .dialog table {
+	color: white;
+	font-size: small;
+
+	.user-select(auto);
+}
+.overlay-block .dialog table tr td:first-child {
+	text-align: right;
+	font-weight: bold;
+}
+.overlay-block .dialog table tr td:last-child {
+	color: silver;
+}
+
+.overlay-block .dialog .choice .item {
+	text-align: left;
+}
+
+.field :focus {
+	box-shadow: 0px 0px 3px 0px red;
+}
+
+/* XXX this is a hack -- hide the radio button itself... */
+.field.choice input[type=radio] {
+	opacity: 0;
+	position: absolute;
+}
+
+.field.choice input ~ span {
+	display: block;
+	padding: 1px;
+	padding-left: 5px;
+	padding-right: 5px;
+}
+.field.choice :checked ~ span {
+	color: white;
+	background: gray;
+}
+.field.choice :focus ~ span {
+	box-shadow: 0px 0px 3px 0px red;
+}
+
+.light.viewer .field.choice :checked ~ span {
+	color: white;
+	background: silver;
+}
+
+
+.field .disabled-text {
+	opacity: 0.5;
+}
+
+
+
+
+/************************************************************ Help ***/
+
+/* XXX make this more generic, and not just for the keyboard... */
+
+/* this is for sliding stuff */
+.viewer.drawer-mode {
+	box-shadow: 0px 0px 50px 0px silver;
+}
+
+/* help */
+.keyboard-help {
+	width: 80%;
+	margin-top: 20px;
+	margin-left: 15%;
+	margin-right: 5%;
+	margin-bottom: 100px;
+}
+.keyboard-help .section-doc {
+	font-size: small;
+	vertical-align: top;
+	font-style: italic;
+}
+.keyboard-help th {
+	text-align: left;
+	height: 50px;
+	vertical-align: bottom;
+	border-bottom: solid gray 1px;
+}
+.keyboard-help tr:hover {
+	background: #eee;
+	vertical-align: top;
+}
+.keyboard-help tr td:first-child {
+	color: gray;
+	font-style: italic;
+	padding-right: 20px;
+	padding-left: 10px;
+}
+.keyboard-help .section-doc td:only-child {
+	padding-right: 0px;
+	padding-left: 0px;
+}
+
+
+
+/**********************************************************************
+* vim:set spell ft=css :                                             */
diff --git a/ui (gen4)/images.js b/ui (gen4)/images.js
new file mode 100755
index 00000000..41720809
--- /dev/null
+++ b/ui (gen4)/images.js	
@@ -0,0 +1,16 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+
+//var DEBUG = DEBUG != null ? DEBUG : true
+
+
+/*********************************************************************/
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                                                */
diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js
new file mode 100755
index 00000000..41720809
--- /dev/null
+++ b/ui (gen4)/viewer.js	
@@ -0,0 +1,16 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+
+//var DEBUG = DEBUG != null ? DEBUG : true
+
+
+/*********************************************************************/
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                                                */