/* DON'T change. */
#main {
	width:				100%;
	height:				100%;
}

/* DON'T change. */
#interface {
	width:				100%;
	height:				100%;
	position:			absolute;
}

/* DON'T change. */
#content {
	width:				100%;
	height:				100%;
}

/* Shouldn't really be changed! */
body {
	margin:				0px;
	padding:			0px;
}

/* DON'T change the position, width or height - background-color can be changed BUT must be present. */
#loading {
	width:				100%;
	height:				100%;
	position:			absolute;
	background-color:		white;
}

/* Main content div - apply styles to this rather than content IFrame directly. */
#content_holder {
	width:				60%;
	height:				60%;
	position:			absolute;

}

/* Loading div styles can go here. */

#loading .message {
	width:				50%;
	height:				50%;
	position:			absolute;
	top:				25%;
	left:				25%;
	text-align:			center;
}

/* Interface div styles can go here. */

/* General. */

#page_title, #navigation, #sub_navigation, #page_of_page, #top_buttons, #home_link {
	position:			absolute;
	overflow:			auto;
}

/* Page top area. */
#home_link 
{
	width:				60%;
	height:				3%;
	top:				10%;
	left:				30%;
}


#page_title {
	width:				60%;
	height:				3%;
	top:				10%;
	left:				30%;
}

#page_title {
	width:				60%;
	height:				3%;
	top:				14.5%;
	left:				30%;
}

/* Left hand navigation. */

#navigation {
	width:				20%;
	height:				74%;
	top:				10%;
	left:				5%;
}

#navigation ul ul {
	display:			none;
}

#navigation ul ul.current {
	display:			block;
}

/* Sub-module / page navigation area. */

#sub_navigation {
	width:				60%;
	height:				3%;
	top:				77%;
	left:				30%;
}

#sub_navigation ul, #sub_navigation ul li {
	display:			inline;
}

/* Other. */

#page_of_page {
	width:				60%;
	height:				3%;
	top:				82%;
	left:				30%;
}

#back_next {
	position:			absolute;
	overflow:			hidden;
	width:				60%;
	height:				3%;
	top:				87%;
	left:				30%;
}