diff --git a/layout.html b/layout.html
index f1c1c54..eaec36b 100755
--- a/layout.html
+++ b/layout.html
@@ -37,6 +37,18 @@
 	transition: none;
 }
 
+/* vertical */
+.vertical.magazine,
+.vertical.article,
+.vertical.group {
+	vertical-align: top;
+}
+.vertical .article,
+.vertical .group,
+.vertical .page {
+	display: block;
+}
+
 </style>
 
 <script src="ext-lib/jquery.js"></script>
@@ -389,7 +401,7 @@ $(document).ready(function(){
 				</div>
 			</div>
 		</div>
-		<div class="article">
+		<div class="article vertical">
 			<div class="cover page">
 				<div class="content">
 					<h1>Article Cover</h1>
@@ -399,21 +411,31 @@ $(document).ready(function(){
 				</div>
 			</div>
 
-			<div class="page">
-				<div class="content">
-					Page
+			<div class="group">
+				<div class="page">
+					<div class="content">
+						Page
 
-					<div class="page-number-text">[PAGE NUMBER]</div>
+						<div class="page-number-text">[PAGE NUMBER]</div>
+					</div>
+				</div>
+				<div class="page">
+					<div class="content">
+						Page
+
+						<div class="page-number-text">[PAGE NUMBER]</div>
+					</div>
+				</div>
+				<div class="page">
+					<div class="content">
+						Page<br>
+						<a href="#home">home</a><br>
+
+						<div class="page-number-text">[PAGE NUMBER]</div>
+					</div>
 				</div>
 			</div>
-			<div class="page">
-				<div class="content">
-					Page<br>
-					<a href="#home">home</a><br>
 
-					<div class="page-number-text">[PAGE NUMBER]</div>
-				</div>
-			</div>
 		</div>
 		<div class="article">
 			<!-- page set -->
diff --git a/layout.js b/layout.js
index b951c43..c3d7684 100755
--- a/layout.js
+++ b/layout.js
@@ -41,6 +41,7 @@ function getPageNumber(page){
 	if(!NAVIGATE_RELATIVE_TO_VISIBLE){
 		return $('.page').index($('.current.page'))
 	} else {
+		// XXX this gets crazy when magazine is scaled...
 		var s = $('.viewer').scrollLeft()
 		var W = $('.viewer').width()
 		var scale = getMagazineScale()
@@ -56,6 +57,7 @@ function getPageNumber(page){
 	}
 }
 
+
 function getMagazineScale(){
 	return getElementScale($('.magazine'))
 }
@@ -67,6 +69,7 @@ function setMagazineScale(scale){
 	mag.css({
 		'margin-left': m,
 		'margin-right': m
+		// XXX also add margins at top and bottom for vertical elements...
 	})
 	setElementScale(mag, scale)
 	setCurrentPage()
@@ -74,8 +77,6 @@ function setMagazineScale(scale){
 
 
 
-
-
 /********************************************************* actions ***/
 
 function setCurrentPage(n){
@@ -104,6 +105,7 @@ function setCurrentPage(n){
 		var offset = $('.viewer').width()/2 - (cur.width()/2)*scale
 	}
 	cur.ScrollTo({
+		offsetTop: $('.viewer').height()/2 - (cur.height()/2)*scale,
 		offsetLeft: offset
 	})
 }
diff --git a/magazine.css b/magazine.css
index d6315ef..5ca4f1b 100755
--- a/magazine.css
+++ b/magazine.css
@@ -24,7 +24,7 @@ body {
 	/* XXX make this browser-sized... */
 	position: relative;
 	display: inline-block;
-	vertical-align: bottom;
+	vertical-align: middle;
 	text-align: left;
 	overflow: hidden;
 
@@ -175,7 +175,7 @@ body {
 .magazine {
 	position: relative;
 	display: inline-block;
-	vertical-align: bottom;
+	vertical-align: middle;
 	top: 50%;
 
 	min-width: 200px;