﻿@import url(Layout.css);

/*	Three column layout */
/* http://www.positioniseverything.net/articles/onetruelayout/anyorder */

.Page {
	position: relative ;
	width: 960px ;
	margin: auto ;
	overflow: hidden ; /* Hides the exess height for the columns. */
}

/*	
	Equal Height Columns.
	What happens is that columns really become as tall as the content
	they contain plus 30000px thanks to the padding-bottom.
	The negative margin-bottom brings the flow of the document back to
	where the same point as where the padding-bottom began, and the overflow: hidden
	on the containing element chops off the overflow. 
*/

/*	Content group
------------------------ */
.Content_1,
.Content_2,
.Content_3 {
	float: left ;
	margin-bottom: -30000px ; /* See Equal Height Columns */
	padding-bottom: 30000px ; /* See Equal Height Columns */
	display: inline ; /* Center-content must be inline so IE can render it. */
	overflow: hidden ; /* Prevents too big content from blowing up the layout. */
}

/*	Content 1
------------------------ */
.Col1 .Content_1 { width: 960px ; }
.Col2 .Content_1 { width: 850px ; }
.Col3 .Content_1 { width: 555px ; }

.Col2 .Content_1,
.Col3 .Content_1 {
	margin-left: 235px ; /* Make room for the left menu. */
}

/* Failsafe for images in modern browsers. */
.Col1 .Content_1 img { max-width: 960px ; }
.Col2 .Content_1 img { max-width: 810px ; }
.Col3 .Content_1 img { max-width: 555px ; }

/*	Content 2
------------------------ */
.Col1 .Content_2 { display: none ; } /* Only .Content_1 is used in a one column layout */

.Col2 .Content_2 {
	width: 170px ;
	margin-left: -960px ; /* Place column to the far left. Just as wide as the page */
}

.Col3 .Content_2 { width: 170px ; }

/*	Content 3
------------------------ */
.Col1 .Content_3,
.Col2 .Content_3 { display: none ; } /* Only .Content_1 is used in a one column layout */

.Col3 .Content_3 {
	width: 235px ;
	margin-left: -960px ; /* Place column to the far left. Just as wide as the page */
}

/* Header, Main navigation & Footer
------------------------ */
.Header,
.Footer,
.FooterWhiteSpace,
.Nav_Horizontal {
	float: left ;
	clear: both ;
	width: 100% ;
}

/*	Footer
------------------------ */
.FooterWhiteSpace,
.Footer 
{
	position: relative ;
	z-index: 2 ;
}

.Footer address {
	padding: 5px 0 ;
	display: block ;
	font-style: normal ;
}

/*	Header
------------------------ */
.Header { height: 95px ; }

.Header h1 {
	position: relative ;
	left: 15px ;
	top: 30px ;
	margin: 0 ;
}

/*	Navigation, Main
------------------------ */
.Nav_Horizontal {
	position: absolute ;
	background:url(../images/nav_background.gif) no-repeat 0 0;
	top: 91px ;
	left: 20px ;
	z-index: 2 ;
	margin: auto ;
}

.Nav_Horizontal ul {
	margin: 0 ;
	padding: 0 ;
	list-style: none ;

	width: 100% ;
	clear: both ;
}

.Nav_Horizontal ul li { float: left ; }

.Nav_Horizontal ul li a {
	display: block ;
	line-height: 34px ;
	padding: 0 5px ;
}