diff --git a/TODO.otl b/TODO.otl
index 5c5a9d3..44d2807 100755
--- a/TODO.otl
+++ b/TODO.otl
@@ -174,14 +174,7 @@
 			[_] plain
 		[X] 100% default actions
 			[X] show/hide layer
-	[_] 0% stage 3 - issue browser
-		[_] issue browser structure
-		[_] 0% issue navigation
-			[_] issue list
-			[_] 0% issue download
-				[_] whole edition dowload and update (primary mode)
-				[_] seporate issue download (secondary)
-	[_] 33% stage 4 - editor and templating
+	[_] 33% stage 3 - editor and templating
 		[_] 0% template engine
 		[_] 66% edition editor / publisher
 			[X] create/delete magazine
@@ -198,6 +191,13 @@
 			[_] 0% fill template field
 				[_] image
 				[_] text
+	[_] 0% stage 4 - issue browser
+		[_] issue browser structure
+		[_] 0% issue navigation
+			[_] issue list
+			[_] 0% issue download
+				[_] whole edition dowload and update (primary mode)
+				[_] seporate issue download (secondary)
 	
 [_] 0% Low priority todo
 	[_] vertically scrollable pages....
diff --git a/lister.css b/lister.css
new file mode 100755
index 0000000..c408dec
--- /dev/null
+++ b/lister.css
@@ -0,0 +1,168 @@
+/**********************************************************************
+* 
+**********************************************************************/
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+
+
+/************************************* layers and hidable elements ***/
+.hidden {
+	display: none;
+}
+/* keep this empty... */
+.shown {
+}
+
+
+
+/*********************************************************** pages ***/
+.page {
+	/* XXX make this browser-sized... */
+	position: relative;
+	text-align: left;
+	overflow: hidden;
+
+	text-align: center;
+
+	width: 100%;
+	height: auto;
+
+	font-size: 12px;
+
+	background: white;
+}
+
+.page .content {
+	display: inline-block;
+	text-align: left;
+	position: relative;
+	overflow: visible;
+	white-space: normal;
+
+	/* these set the "safe" marks for page content */
+	width: 800px;
+	height: 600px;
+
+	border: dashed 1px red;
+}
+.content:after {
+	display: block;
+	position: absolute;
+	top: 10px;
+	right: -90px;
+	width: 80px;
+	height: 30px;
+	padding-left: 15px;
+
+	font-size: 20px;
+
+	background: gray;
+	color: white;
+	border-left: solid 5px black; 
+
+	opacity: 0.3;
+}
+
+.page .content:after {
+	content: "Page";
+}
+.cover .content:after {
+	content: "Cover";
+}
+
+.page .content:before {
+	position: absolute;
+	content: "";
+	z-index: 9999;
+	right: 0px;
+	top: 0px;
+	width: 50px;
+	height: 50px;
+
+	border-bottom: dashed red 1px;
+	border-left: dashed red 1px;
+}
+
+/************************************************** general layout ***/
+
+/* magazine article, this can contain a cover and a number of pages */
+.article {
+	position: relative;
+	overflow: visible;
+	font-size: 0px;
+	min-width: 200px;
+
+	border: dashed red 1px;
+}
+
+.article:after {
+	display: block;
+	position: absolute;
+	content: 'Article';
+	top: 0px;
+	left: 0px;
+	width: 100px;
+	height: 30px;
+
+	padding-right: 5px;
+	text-align: right;
+	font-size: 20px;
+
+	background: gray;
+	color: white;
+	border-right: solid 5px black; 
+
+	opacity: 0.3;
+}
+
+.article > .cover {
+}
+
+
+
+/******************************************************* templates ***/
+/* XXX split these into seporate files... */
+.caption {
+	display: block;
+	position: absolute;
+	height: 100px;
+	width: 100%;
+	bottom: 0px;
+	left: 0px;
+
+	padding: 15px;
+	color: white;
+	background: black;
+	opacity: 0.5;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;	
+	transition: all 0.2s ease;
+}
+.caption.hidden {
+	opacity: 0;
+	height: 0px;
+}
+.caption.shown {
+	opacity: 0.8;
+}
+
+
+
+/*********************************************************************/
+/* keep this at the end... */
+.unanimated {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-o-transition: all 0 ease;
+	-ms-transition: none;	
+	transition: none;
+}
+
+
+/*********************************************************************/
diff --git a/lister.html b/lister.html
new file mode 100755
index 0000000..2aed82a
--- /dev/null
+++ b/lister.html
@@ -0,0 +1,109 @@
+<!-- XXX for some reason a doctype kills the layout, need to investigate -->
+<!--DOCTYPE html-->
+<html>
+<head>
+<title>PortableMag</title>
+
+<link rel="stylesheet" href="lister.css">
+<link rel="stylesheet" href="magazine-custom.css">
+
+<script src="jquery.js"></script>
+<!-- XXX make this optional... -->
+<script src="ckeditor/ckeditor.js"></script>
+
+<script src="jli.js"></script>
+<script src="magazine.js"></script>
+
+<script>
+
+var DEBUG = true
+
+$(document).ready(function(){
+
+	$('.viewer')
+		// setup internal events...
+		.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
+		.on('pageChanged', updatePageNumberIndicator)
+		.on('bookmarksCleared', clearBookmarkIndicators)
+		.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
+		.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
+
+		// editor specific events...
+		.on('pageCreated articleCreated magazineCreated', resetNavigator)
+		.on('pageMoved articleMoved', resetNavigator)
+		.on('pageRemoved articleRemoved', resetNavigator)
+
+	// XXX this will need to be repeated to newly created elements...
+	$('[contenteditable=true]')
+		.on('focus', function(){
+			toggleEditorMode('on')
+		})
+		.on('blur', function(){
+			toggleEditorMode('off')
+		})
+
+})
+
+</script>
+</head>
+<body>
+
+<div class="viewer">
+<div class="scaler">
+<div class="aligner">
+	<div class="magazine" title="PortableMag Templates">
+		<div class="cover page current">
+			<div class="content">
+				<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
+				<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
+
+				<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+				 <g>
+				  <title>PortableMag cover</title>
+				  <defs>
+				   <path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
+				  </defs>
+				  <text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
+				  <g id="svg_1">
+				   <g id="svg_8">
+					<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
+					<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
+				   </g>
+				   <text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
+				  </g>
+				 </g>
+				</svg>
+					
+			</div>
+		</div>
+
+		<!-- XXX do we need a Magazine Credits page??? -->
+
+		<div class="article">
+			<div class="cover page">
+				<div class="content">
+					<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
+				</div>
+			</div>
+			<div class="page">
+				<div class="content">
+					<h1 contenteditable="true">Two column</h1>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;">
+						Column 1
+					</div>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
+						Column 2
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>
+<!-- vim:set ts=4 sw=4 nowrap : -->