/*
 * raster.css --
 *
 *      CSS file defining the positioning of elements
 *
 */

/*
 * Outer wrapper
 *
 * Contains the actual site. Positions it in the middle and sets it's width.
 *
 */
#main_container {
	margin: 0 auto;
	width: 1000px;
	height: 768px;
}



/*
 * Horizontal alignment wrappers
 *
 * Split the page up in 3 rows.
 * 1. Header
 * 2. Main content
 * 3. Footer
 *
 */
#header {
	height: 142px;
	width: 1000px;
}

#main_content {
	/* Debug */
/* 	background-color: #000; */
	height: 594px;
	width: 1000px;
}

#footer {
	height: 31px;
	width: 1000px;
}



/*
 * Vertical alignment inside the main_content wrapper
 *
 * Split up the main content wrapper into 3 main columns
 * 1. Navigation menu (left)
 * 2. Main content (middle)
 * 3. Additional info/content (right)
 *
 */
#column_left {
	/* Debug */
/* 	background-color: green; */

	width: 165px;
	height: 595px;
	float: left;
	/* Make absolute positioning possible inside this wrapper */
	position: relative;
}

#column_middle {
	/* Debug */
/* 	background-color: blue; */

	width: 637px;
/* 	_width: 600px; */
/* 	height: 100%; */
	height: 595px;
	float: left;
	/* Make absolute positioning possible inside this wrapper */
	position: relative;
}

#column_right {
	/* Debug */
/* 	background-color: red; */

	width: 196px;
	/* Move to IE6 only stylesheet */
	_width: 187px;
	height: 595px;
	float: left;
	/* Make absolute positioning possible inside this wrapper */
	position: relative;
}



/* Raster for the contents of the left column */
#navigation_menu {
	/* Debug */
/*  	background-color: grey; */
	margin: 0;
	padding: 0;
	/* Measured, OK */
	margin-top: 22px;
	_margin-top: 12px;
	width: 100%;
}

#navigation_menu li {
	/* Debug */
/* 	background-color: orange; */

/* 	display: block; */
	margin-top: 8px;
/* 	_margin-top: -4px; */
	margin-left: 11px;
}

#navigation_menu a {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 3px;
}



/* Raster for the contents of the middle column */
#breadcrumb {
/* 	background-color: red; */
	margin-left: 16px;
	width: 600px;
	margin-top: 5px;
	height: 16px;
	font-size: 10px;
}

#breadcrumb a {
	margin-right: 6px;
	margin-left: 6px;
}


#column_middle .content,
#navigation_middle {
	padding: 0;
	margin: 0;
	margin-left: 22px;
	width: 613px;
}

/* Middle column's image navigation */
#navigation_middle {
	/* Debug */
/* 	background-color: yellow; */

	height: 112px;
/* 	margin-top: 24px; */
	margin-top: 4px;
}

#column_middle img#content_background {
	position: absolute;
	z-index: 0;
	right: 24px;
	bottom: 24px;
}

/* Content wrapper */
#column_middle .content {
	/* Debug */
/* 	background-color: red; */

	margin-top: 10px;
	height: 423px;
	overflow: auto;
	/* Make absolute positioning possible, which is needed to get scrolling
	   working properly with a background image */
	position: relative;
	padding-top: 0;
}


/* Columns inside the main content, below the middle navigation */
#column_middle .full_width,
#column_middle .column_3_5,
#column_middle .column_2_5 {
	height: 405px;
	padding-top: 5px;
	/* If the following 2 lines break anything, move them into a separate class.
	   They are needed for having a background image */
	z-index: 1;
	position: absolute;
}

/* Full width column */
#column_middle .full_width {
	/* Debug */
/* 	background-color: grey; */

	width: 593px;
}


/* The left 3/5th */
/* Only span to the first 3 images of the menu */
#column_middle .column_3_5 {
	/* Debug */
/* 	background-color: green; */

	width: 353px;
	float: left;
/* 	padding-right: 15px; */
}

/* The right 2/5th */
#column_middle .column_2_5 {
	/* Debug */
/* 	background-color: blue; */

	width: 233px;
/* 	float: left; */
/* 	margin-left: 360px; */
	padding-right: 0;
	padding-top: 5px;
/* 	padding-left: 5px; */
/* 	margin-left: 7px; */
/* 	clear: left; */
/* 	margin-left: 357px; */
	text-align: right;
/* 	right: 22px; */
/* 	left: 360px; */
	margin-left: 360px;
/* 	right: 0; */
}




/* Raster for the contents of the right column */
#column_right .content {
	/* Debug */
/* 	background-color: grey; */

	margin-top: 22px;
	padding-left: 11px;
	padding-right: 11px;
}