/*** Some basic stuff ***/

body
{
	background: #fff url('img/bg-pattern.jpg') 0 0 repeat;
}

div#outer-wrapper
{
}

div#header
{
	position: relative;
	background: url('img/bg-top.jpg') 0 0 repeat-x;
	height: 69px;
}

h1#logo
{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 212px;
	height: 45px;
	text-indent: -9999px;
	background: url('img/logo-topline.jpg') 0 0 no-repeat;
}

/*** The planner frame area: this stuff will be read also by the resizing javascript ***/

div#planner-area div#frame
{
	margin: 0 20px;
	padding: 0;
}

div#ViewpointArea
{
	background: #fff url('img/bg-vmp.jpg') 0 0 no-repeat;
	border: 1px solid #bfbfbf;
}

div#info
{
	position: relative;
	height: 34px;
	background: #dfe4e5 url('img/info.jpg') 0 0 no-repeat;
	margin: 4px 253px 4px 0px;
}

	div#info div.helper
	{
		position: absolute; width: 10px; height: 100%; top: 0; right: 0;
		background: #dfe4e5 url('img/info.jpg') top right no-repeat;
	}

div#functions
{
	position: relative;
	height: 34px;
	background: url('img/bg-toolbox.gif') 0 0 no-repeat;
}
	
	div#functions div.helper
	{
		position: absolute; width: 10px; height: 100%; top: 0; right: 0;
		background: url('img/bg-toolbox.gif') top right no-repeat;
	}
	
	div#functions ul.functions-list, div#functions ul.functions-list li
	{
		height: 34px;
		line-height: 34px;
		margin-bottom: 0;
		margin: 0 0 0 0;
	}
	
	div#functions ul.functions-list li
	{
		display: block;
		width: 96px;
		height: 34px;
		line-height: 34px;
		margin-right: 8px;
	}
	
	div#functions ul.functions-list li a
	{
		text-indent: 0;
		display: block;
		color: white;
		text-align: left;
		float: none;
		height: 100%;
		padding-left: 35px;
		width: auto;
	}
	
	div#functions
	{
		padding-left: 10px;
	}
	
	div#functions div#functions-right ul
	{
		float: left;
	}
	
div#library
{
	width: 248px;
	margin-bottom: 38px;
	padding-top: 38px;
	background: url('img/bg-lib.gif') bottom left no-repeat;
}

	div#library h2
	{
		position: absolute;
		height: 28px;
		line-height: 28px;
		background: url('img/bg-lib-title.jpg') 0 0 no-repeat;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	div#library h3 a
	{
		display: block;
		line-height: 22px;
		height: 22px;
		padding: 0 10px 0 30px;
		background: url('img/bg-lib-header.jpg') 0 0 no-repeat;
		clear: both;
	}
	
	div#library h3 a.open
	{
		background: url('img/bg-lib-header-selected.jpg') 0 0 no-repeat;
	}
	
	div#library-options
	{
		margin: 0 25px 15px 10px;
		border: 2px solid #bbb;
		padding: 10px;
		height: 150px;
		position: relative;
		overflow: hidden;
	}
	
		a#lib-options-toggle
		{
			display: block;
			position: absolute;
			bottom: 0;
			right: 0;
			background: #bbb;
			height: 25px;
			line-height: 25px;
			padding: 0 10px;
		}
	
	div#library-contents
	{
		position: relative;
		height: 100%;
		width: 237px;
		left: 10px;
		overflow: auto;
	}
	
	div#library-contents ul.lib-icons li
	{
		width: 96px;
		float: left;
		margin: 0 10px 10px 0;
	}
	
	div#library-contents ul.lib-icons li.wide
	{
		width: 200px;
		float: left;
		margin: 0 15px 10px 0;
	}

	div#library-contents div.breadcrumbs
	{
		margin-bottom: 5px;
	}
	
	
	
	
/** Categories buttons: also affects the layout height **/
div#categories
{
	position: relative;
	height: 27px;
	margin: 10px 19px -2px 19px;
	padding-left: 10px;
	background: url('img/bg-categories-bar.gif') top left no-repeat;
}

	div#categories ul
	{
		height: 24px;
		padding-right: 14px;
		background: url('img/bg-categories-bar.gif') top right no-repeat;
		float: right;
	}
	
		div#categories ul li a
		{
			height: 22px;
			line-height: 22px;
			width: auto !important;
			width: 100px;
			min-width: 100px;
			padding: 0 15px;
			background: url('img/bg-category-button.jpg') 0 0 no-repeat;
			color: white;
			text-align: left;
		}
	
		div#categories ul li a:hover,
		div#categories ul li.current a
		{
			background-position: 0 -22px;
		}


/*** Tabs, menus and categories ***/

/* The upper tabs/buttons */
ul#system-states
{
	position: absolute;
	top: 40px;
	left: 250px;
}

	ul#system-states li a
	{
		color: #555;
		height: 29px;
		line-height: 18px;
		margin-left: 30px;
		font-weight: normal;
		font-size: 14px;
	}

	body ul#system-states li a:hover,
	body ul#system-states li.current a
	{
		background: url('img/tab.gif') bottom center no-repeat;
	}
	
	
/* VividLink */
a.vividplatform
{
	display: block;
	width: 134px;
	height: 34px;
	text-indent: -9999em;
	background: url('img/vividplatform.jpg') 0 0 no-repeat;
	outline: none;
	position: absolute;
	right: 20px;
	bottom: 0px;
}
	
	
/** Footer, and some nurmela specific stuff **/

div#footer
{
}