/* all elements that will behave like a page */
.cover, .page {
	/* XXX make this browser-sized... */
	display: inline-block;
	vertical-align: bottom;

	overflow: auto;

	/* XXX need these to be the same as the magazine, for some reason does not work...
	 *	one way to go is to use a fixed page layout and scale things manually.
	 */
	
	width: 400px;
	height: 300px;

	font-size: 12px;

	border: solid blue 1px;
}


/* general layout */

.magazine {
	/* this makes the magazine behave like a ribbon */
	width: 100%;
	height: 100%;
	overflow: visible;
	white-space: nowrap;
	font-size: 0px;

	background: gray;

	border: solid blue 1px;
}

.magazine > .cover {
	background: white;
}

.article {
	width: auto;
	overflow: visible;
	white-space: nowrap;
	font-size: 0px;

	display: inline-block;
}

.article > .cover {
	background: white;
}

.page {
	background: silver;
}