diff --git a/ui/TODO.otl b/ui/TODO.otl
index 38b996b2..0e54b67a 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -108,8 +108,9 @@ Roadmap
 				[_] real GIDs
 		[_] BUG: jumping in ribbon sometimes does not load the ribbon correctly...
 		| Example 1:
-		| 	first ribbon in (loaded atfirst image):
+		| 	first ribbon in (loaded at first image):
 		|	 "file:///L:/mnt/hdd13 (photo)/NTFS1/media/img/my/work/- 20130616Y.001/DCIM/preview (RAW)/"
+		|	 "F:\work\ImageGrid\cur\ImageGrid\src\ui\BUGS\ribbon loading error\"
 		|	jumping to the end will result in an inconsistent view:
 		|		- ribbon not loaded at the correct spot
 		|		- wrong image is .current
diff --git a/ui/layout.css b/ui/layout.css
index 1a49c565..777efca1 100644
--- a/ui/layout.css
+++ b/ui/layout.css
@@ -243,6 +243,21 @@ button:hover {
 
   border: solid red 5px;
 }
+/* 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"] {
diff --git a/ui/layout.less b/ui/layout.less
index 04870bd4..cd5a21c0 100755
--- a/ui/layout.less
+++ b/ui/layout.less
@@ -50,6 +50,13 @@
 	.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 ***/
@@ -340,6 +347,24 @@ button:hover {
 	border: solid red 5px;
 }
 
+
+/* 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"] {