﻿/**************************************************************/
/*                                                            */
/* LAGO page layout - applies to all pages of this site.      */
/*                                                            */
/* Author:  Michael Schweitzer, SwisSoft                      */
/* Version: August, 1st, 2008                                 */
/*                                                            */
/**************************************************************/

/**************************************************************/
/*                                                            */
/* Global settings (top level)                                */
/*                                                            */
/**************************************************************/


html
{
	/* No margins */
	margin:0px;
	
	/* No padding */
	padding:: 0px;
	
	/* Dimensions: Full viewport width and height */
	width:100%;
	height:100%;	
}

body
{	
	/* No margins */;
	margin: 0px;

	/* No padding */	
	padding: 0px;
	
	/* Dimensions: Full viewport width and height */	
	width: 100%;
	height:100%;
}

/**************************************************************/
/*                                                            */
/* Page header. Contains the Lago logo and the picture        */
/*                                                            */
/**************************************************************/

#header
{		
	/* Margins. The bottom margin is visible as white horizonal line */
    margin-bottom:8px;
    
	/* Dimensions */
	width:100%;
	height:138px;	/* Same as height of picture */

	/* Overflow */
	overflow:hidden;
}

#lagologo
{
	/* Position */
	position: relative;
	left:10px;			/* Distance Logo <-> Left viewport border */
	top:7px;			/* Distance Logo <-> Top viewport border */
				
	/* Dimensions (image)*/
	height:124px;		/* True height of image */
}

div#lagologo img
{
}

#picture
{
	/* Position */
	position: absolute;
	left:240px;			/* Distance Picture <-> Left viewport border */
	top:0px;			/* Distance Picture <-> Top viewport border */
		
	/* Dimensions */
	height:100%;		/* Use all available space */
	
	/* Overflow */
	overflow:hidden;
}

div#picture img
{
}
/**************************************************************/
/*                                                            */
/* Top navigation (horizontal)                                */
/*                                                            */
/**************************************************************/

#top_navi
{
	clear:both;			/* Stop floating */

	/* Position */
	position:relative;
	left:0px;
	top:0px;
	
	/* Padding */
	padding-top:0.25em;
	padding-bottom:0.25em;
	
	/* Dimensions */
	width:100%;
	
	/* Text */
	text-align:right;	
}

#top_navi_item
{
	float:right;
}
/**************************************************************/
/*                                                            */
/* Center page area. Contains left navigation and page content*/
/*                                                            */
/**************************************************************/


#center_area
{	
	clear:both;			/* Stop floating */
	
	/* Padding */
	padding-top:2px;
	
	/* Dimensions */
	width:100%;
	
	/* Repeated image (background) for page content */
	background-image:url('../images/design/bg_lago_grey.jpg');
	background-repeat:repeat-y;
	
	/* First number must be equal to left_navi.width and page_content.margin_left */
	background-position:16em 0em;	/* Left/Top offset */
}
/**************************************************************/
/*                                                            */
/* Left navigation. Contains global and local link sections   */
/*                                                            */
/**************************************************************/


#left_navi
{
	float:left;

	/* Width: must agree with margin-left of page_content */
	width:16em;
				
	/* Text alignment */
	text-align:right;
}

#left_navi_global_links
{
	/* Margins */
	margin-top:7.5em;
	margin-right:1.0em;
}


#left_navi_local_links
{
	/* Margins */
	margin-top: 2.0em; 
	margin-left: 5px;
	margin-right: 1.0em;		
}

/**************************************************************/
/*                                                            */
/* Page content. Contains the text area and an empty block    */
/*                                                            */
/**************************************************************/


#page_content
{
	/* Padding */
	padding:1px;

	/* Must agree with width of left_nav */
	margin-left: 16em;
}

#text_area
{
	/* Margins */
    margin-left: 1.5em;
	margin-right: 1.5%; 
}

/* Now comes the trick: do not modify this one! */
#empty_block
{
	clear:left;
	display:block;
	
	height:0px;
	overflow:hidden;
	font-size:0px;
}

/**************************************************************/
/*                                                            */
/* Page footer. Contains the Lago seal.                       */
/*                                                            */
/**************************************************************/


#footer
{
	clear:both;			/* Stop floating */

	/* Position */
	position:relative;
	
	/* Padding */	
	padding-top:4px;	/* Distance Seal <-> Top footer border */

	/* Dimensions */
	width:100%;
	height:88px;
}


#lagoseal 
{	
	/* Margins */
	margin-left:91%;	/* Distance Seal <-> Left viewport border */
		
	/* Dimensions (image)*/
	height:80px; 
}

div#lagoseal img
{
}

/**************************************************************/
/*                                                            */
/* Square bullet used in navigation links                     */
/*                                                            */
/**************************************************************/


#bullet
{
	/* Dimensions */
	width:0.5em;
	height:0.5em;
}
