diff --git a/index.html b/index.html
index 87c4e04..3239b08 100755
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
 
 <link rel="stylesheet" href="magazine.css">
 <link rel="stylesheet" href="magazine-themes.css">
-<!--link rel="stylesheet" href="magazine-custom.css"-->
+<link rel="stylesheet" href="magazine-custom.css">
 
 <script src="ext-lib/jquery.js"></script>
 <script src="ext-lib/jquery.touchSwipe.js"></script>
diff --git a/layout.html b/layout.html
index 67379ef..45b014c 100755
--- a/layout.html
+++ b/layout.html
@@ -7,6 +7,7 @@
 
 <link rel="stylesheet" href="magazine.css">
 <link rel="stylesheet" href="magazine-themes.css">
+<link rel="stylesheet" href="magazine-custom.css">
 <style>
 
 .viewer {
diff --git a/magazine-custom.css b/magazine-custom.css
index 7ee5199..23ff62d 100755
--- a/magazine-custom.css
+++ b/magazine-custom.css
@@ -5,44 +5,30 @@
 
 /*************************************** main structural elements ****/
 
-.viewer {
-	background: gray;
-}
-
 .magazine {
-	background: transparent;
 }
 
 .magazine .cover {
 }
 
 .article {
-	background: transparent;
 }
 
 .article .cover {
 }
 
 .page {
-	background: silver;
-
-	font-family: Arial;
+}
+.page .content {
 }
 
 .cover {
-	background: white;
 }
 
 
-.top-toolbar, .bottom-toolbar {
-	font-size: 14px;
-	color: silver;
-}
 
-.top-toolbar .title,
-.bottom-toolbar .title {
-	font-size: 40px;
-}
+/**************************************************** UI elements ****/
+/* NOTE: these may override themes... */
 
 /* toolbar links */
 .top-toolbar a, .bottom-toolbar a {
@@ -51,6 +37,7 @@
 }
 
 .button {
+	color: silver;
 	font-size: 25px;
 	font-weight: bold;
 	cursor: hand;
@@ -86,65 +73,21 @@
 
 
 
-/**************************************************** light theme ****/
-
-.light {
-	color: gray;
-	background: white;
-}
-
-.light.viewer {
-}
+/*********************************************************** sizes ***/
 
 .magazine {
+	/*
+	height: auto;
+	margin-top: -300px;
+	*/
 }
 
-.light .magazine .cover {
-}
-
-.light .article .cover {
-}
-
-.light .page {
-}
-
-
-
-/**************************************************** dark theme ****/
-
-.dark {
-	color: white;
-	background: black;
-}
-
-.dark.viewer {
-}
-
-.dark .magazine .cover {
-}
-
-.dark .article .cover {
-}
-
-.dark .page {
+.page .content {
+	/*
+	width: 800px;
+	height: 600px;
+	*/
 }
 
 
-/*********************************************************************/
-
-body {
-	font-family: arial;
-}
-
-.page a, 
-.page a:visited, 
-.page a:active {
-	color: blue;
-}
-.page a:hover {
-	color: red;
-}
-
-
-
 /*********************************************************************/
diff --git a/magazine.css b/magazine.css
index 1f1e0c4..d6315ef 100755
--- a/magazine.css
+++ b/magazine.css
@@ -179,8 +179,9 @@ body {
 	top: 50%;
 
 	min-width: 200px;
-	/* can we avoid setting the sizes in so many places? */
+	/* XXX has to be the same as default page height */
 	height: 600px;
+	/* XXX has to pe half of page height */
 	margin-top: -300px;
 
 	/* this is minus half the page width */