/*** Layouting ***/

html, body { height: 100%; overflow: hidden;}

div#outer-wrapper, form#form1
{
	position: relative;
	height: 100%;
	width: 100%;
}

div#outer-wrapper
{
	position: relative;
	height: 100%;
	width: 100%;
}

div#header
{
	position: relative;
	height: 60px;
}

div#planner-area
{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	border-collapse: collapse;
	clear: both;
}
	
	div#planner-area div#frame
	{ height: 100%; }
	
	div#planner-frame
	{
		position: relative;
		top: 5px;
	}
	
	div#ViewpointArea,
	div#FlashArea
	{
		height: 100%;
		top: 2px;
		left: 0px;
		margin: 0 253px 0 0;
	}
	
		div#ViewpointArea
		{
			visibility: visible;
			position: relative;
		}
		
		div#FlashArea
		{
			visibility: hidden;
			position: absolute;
		}
	
	div#planner-area div#frame { position: relative; display: block; height: 100%; }
	
div#functions
{
	position: relative;
}

	div#functions ul.functions-list, div#functions ul.functions-list li
	{
		list-style-type: none;
		float: left;
	}
    
	div#functions div#functions-right ul
	{
		float: right;
	}
    
	div#functions ul.functions-list li
	{
		display: inline;
		position: relative;
	}
    
	div#functions ul.functions-list li a
	{
		display: block;
		float: left;
		height: 100%;
		width: 96px;
		text-indent: -9999px;
		margin: 0;
		padding: 0;
		outline: none;
	}
    
		/** Vasemmalle tulevat funkkarit **/
		div#functions ul.functions-list li#back-function a
		{
			background: url('img/button-back.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#back-function a:hover { background-position: 0 -34px; }
		
		div#functions ul.functions-list li#new-function a
		{
			background: url('img/button-new.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#new-function a:hover { background-position: 0 -34px; }
		
		div#functions ul.functions-list li#measure-function a
		{
			background: url('img/button-measure.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#measure-function a:hover { background-position: 0 -34px; }
    
		div#functions ul.functions-list li#remove-function a
		{
			background: url('img/button-remove.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#remove-function a:hover { background-position: 0 -34px; }
    
		/** Oikealle tulevat funkkarit **/
		div#functions ul.functions-list li#screenshot-function a
		{
			background: url('img/button-pic.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#screenshot-function a:hover { background-position: 0 -34px; }
		
		div#functions ul.functions-list li#print-function a
		{
			background: url('img/button-print.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#print-function a:hover { background-position: 0 -34px; }

		div#functions ul.functions-list li#save-function a
		{
			background: url('img/button-new.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#save-function a:hover { background-position: 0 -34px; }

		div#functions ul.functions-list li#load-function a
		{
			background: url('img/button-new.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#load-function a:hover { background-position: 0 -34px; }
			
		div#functions ul.functions-list li#help-function a
		{
			background: url('img/button-help.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#help-function a:hover { background-position: 0 -34px; }
	
		div#functions ul.functions-list li#clear-function a
		{
			background: url('img/button-new.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#clear-function a:hover { background-position: 0 -34px; }
		
		div#functions ul.functions-list li#rotate-function a
		{
			background: url('img/button-steprotate.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#rotate-function a:hover { background-position: 0 -34px; }
		
			div#functions ul.functions-list li#zoomout-function a
		{
			background: url('img/button-zoomout.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#zoomout-function a:hover { background-position: 0 -34px; }
				div#functions ul.functions-list li#zoomin-function a
		{
			background: url('img/button-zoomin.jpg') 0 0 no-repeat;
		}
		div#functions ul.functions-list li#zoomin-function a:hover { background-position: 0 -34px; }
		
div#library
{
	position: absolute;
	height: 100%;
	top: 0;
	right: 0;
	overflow: hidden; /* never show parent scrollbar */
}

div#footer
{
	position: absolute;
	bottom: 0;
	height: 30px;
	width: 100%;
}

/* Layout layering */
div#functions ul.functions-list
{ z-index: 1000;}

div#footer, div#header, div#planner-area div#frame span, div#ViewpointArea, div#categories, div#functions
{ z-index: 100; }

div#functions
{ z-index: 75; }

div#planner-area, div#planner-frame div#planner-frame, div#library, div#library-contents
{ z-index: 50; }
	
	
	
/*** Tabs and menus ***/

ul, li
{
	list-style-type: none;
}

	li { display: inline; }
	
	li a { display: block; float: left; outline: none; text-align: center; text-decoration: none; }