body {
	background: #000;
	color: #fff;
	margin: 0;
	font-family: Verdana, sans-serif;
	font-size: 0.8em;
}

img {
	border: 0;
}

/* Logo */

.logo-1 {
	margin: 0;
	padding: 30px 0 0 168px;
	height: 200px;
}

.logo-2 {
	display: block;
}

/* Layout */

.sidebar {
	float: left;
	width: 190px;
	position: relative;
}

.main {
	float: left;
	position: relative;
}

.navigation-header {
	display: block;
	margin: 0;
	font-size: 1em;
	font-weight: normal;
	text-align: center;
	padding: 13px 0 13px;
	height: 15px;
}

.navigation-header img {
	display: block;
	margin: 0 auto;
}

.start-begin,
.start-green,
.start-purple,
.start-silver {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: block;
	overflow: hidden;
	width: 41px;
	height: 41px;
	text-decoration: none;
	margin: 0 0 0 5px;
	text-indent: -9999em;
	background: url(start.gif) no-repeat 0 0;
}

.start-begin {
	width: 71px;
}

.start-green {
	background: url(start-green.gif) no-repeat 0 0;
}

.start-purple {
	background: url(start-purple.gif) no-repeat 0 0;
}

.start-silver {
	background: url(start-silver.gif) no-repeat 0 0;
}

/* Navigation */

.navigation-popup {
	position: absolute;
	top: 28px; left: -9999px;
	margin: 0; padding: 5px;
	text-align: right;
	list-style: none;
	width: 157px;
	background: #000;
}

.navigation-hover {
	margin-bottom: -13px;
}

.navigation-hover:hover .navigation-popup,
.navigation-show .navigation-popup
{
	left: 10px;
}

.navigation-popup a {
	display: block;
	text-decoration: none;
	color: #c2a8cc;
}

/* Sidebar content */

.navigation-body {
	text-align: right;
	color: #bebebe;
	line-height: 1.2em;
	padding: 0 13px;
}

.navigation-body h1 {
	font-size: 1.2em;
	margin: 1em 0;
	padding: 0;
	font-weight: normal;
	color: #c2a8cc;
}

.navigation-body h2 {
	font-size: 1.2em;
	margin: 1em 0 0 0;
	padding: 0;
	font-weight: normal;
	color: #fff;
}

.navigation-body ul,
.navigation-body dl,
.navigation-body p {
	list-style: none;
	font-size: 0.9em;
	margin: 1.3333em 0;
	padding: 0;
}

.navigation-body li,
.navigation-body dd,
.navigation-body dt {
	margin: .6667em 0;
	padding: 0;
}

.navigation-body h2 + ul,
.navigation-body h2 + dl,
.navigation-body h2 + p {
	margin-top: 0;
}

.navigation-body a {
	color: #ffe600;
}

/* Graphic Menu */

.visualise-menu, .produce-menu {
	position: absolute; top: -25px; left: 0;
	list-style: none;
	margin: 0; padding: 0;
	width: 642px; height: 458px;
}

.visualise-menu {
	background: url(visualise.gif) 0 0 no-repeat;
}

.produce-menu {
	background: url(produce-v2.gif) 0 0 no-repeat;
}

.graphic-item {
	position: absolute;	margin: 0; padding: 0;
}

.visualise-menu a,
.visualise-menu h2,
.visualise-menu span.selected,
.produce-menu a,
.produce-menu h2,
.produce-menu span.selected {
	display: block; height: 22px; text-indent: -9999px; overflow: hidden;
}

.visualise-menu a:hover, .produce-menu a:hover {
	background: rgba(0,0,0,0.5);
}

.visualise-menu span.selected, .produce-menu span.selected {
	background: rgba(0,0,0,0.75);
}

.visualise-submenu { margin: 0; padding: 0; list-style: none; }

.visualise-header         { width: 145px; height: 22px; left: 304px; top:  34px; }
.visualise-submenu .item1 { width: 145px; height: 22px; left: 266px; top:  72px; }
.visualise-submenu .item2 { width: 145px; height: 22px; left: 228px; top: 110px; }
.visualise-submenu .item3 { width: 145px; height: 22px; left: 190px; top: 148px; }
.visualise-submenu .item4 { width: 145px; height: 22px; left: 152px; top: 186px; }
.visualise-submenu .item5 { width: 145px; height: 22px; left: 114px; top: 224px; }
.visualise-submenu .item6 { width: 145px; height: 22px; left:  76px; top: 262px; }
.visualise-submenu .item7 { width: 145px; height: 22px; left:  38px; top: 300px; }
.visualise-submenu .item8 { width: 145px; height: 22px; left:   0px; top: 338px; }

.produce-submenu { margin: 0; padding: 0; list-style: none; }

.produce-header         { width: 149px; height: 22px; left: 497px; top:  34px; }
.produce-submenu .item1 { width: 149px; height: 22px; left: 459px; top:  72px; }
.produce-submenu .item2 { width: 149px; height: 22px; left: 421px; top: 110px; }
.produce-submenu .item3 { width: 149px; height: 22px; left: 383px; top: 148px; }
.produce-submenu .item4 { width: 149px; height: 22px; left: 345px; top: 186px; }
.produce-submenu .item5 { width: 149px; height: 22px; left: 307px; top: 224px; }
.produce-submenu .item6 { width: 149px; height: 22px; left: 269px; top: 262px; }
.produce-submenu .item7 { width: 149px; height: 22px; left: 231px; top: 300px; }
.produce-submenu .item8 { width: 149px; height: 22px; left: 193px; top: 338px; }

/* Content */

.content,
.tall-content {
	position: absolute;
	top: 43px;
	left: 71px;
	white-space: nowrap;
	padding: 10px 10px 10px 0;
	border: 1px solid #7d7d7d;
}

/* TODO: Improve layout so this kind of hack isn't needed. */
.menu-main .content
{
	left: 690px;
	top: 11px;
}

.content .item,
.tall-content .item
{
	display: inline-block;
	zoom: 1;
	*display: inline;
	margin: 0 0 0 10px;
	vertical-align: top;
	overflow: hidden;
}

.content .text-item,
.content .story-item,
.tall-content .text-item,
.tall-content .story-item
 {
	background: #fff;
	color: #272627;
	width: 200px;
	white-space: normal;
	overflow: auto;
}

.content .story-item,
.tall-content .story-item
{
	width: 450px;
}

.content .image,
.tall-content .image
 {
	display: inline-block;
	zoom: 1;
	*display: inline;
	width: 150px;
	background: #525152;
	margin: 0 0 0 10px;
}

.content .image-item img,
.tall-content .image-item img
{
	display: block;
}

/* Style text content */

.content .text {
	line-height: 1.2em;
	margin: 1.2em;
}

.content .text h2 {
	font-size: 1.2em;
	margin: 1em 0;
}

.content .text h2 a {
	text-decoration: none;
	color: #000;
}

.content .text p {
	margin: 1.2em 0;
}

/* Normal content is fixed height:
 * I possibly should do this the other way round, normally
 * have fixed height, and then disable it using height: auto.
 */

.content,
.content .item,
.content .image
{
	height: 180px;
}


/* Stone */

.stone {
	position: absolute; top: 228px; left: 530px; height: 205px; width: 341px;
}

.scrolling-text {
	position: absolute; top: 228px; left: 871px; height: 205px;
	background-position: 
}

/* Footer */

.footer {
	padding: 475px 0 0 20px;
}

.footer p {
	margin: 0;
}

/* Stone numbers */

.number {
	font-size: 50px;
	font-weight: bold;
	color: black;
}