/*----------------------------------------------------------------------------------------------------------------------------------------------------
3-col.css

	Description:		Fluid layout: 3 equal height columns, 1 fixed em, 1 variable % and 1 fixed px width.
	Project:		Basic Layouts
	Version:		1.0
	Last change:		2009-02-09
	Author:			Dirk Sidney Jansen [http://sidisinsane.com]
	
	Important! Add this to your HTML:
	<!--[if lte IE 7]>
	<style>
	.section {
		display: inline-block;
	}
	.article {
	    float: left;
	    display: inline;
	    margin: 0 0 -3000px 0;
	}
	</style>
	<![endif]-->
-----------------------------------------------------------------------------------------------------------------------------------------------------
TOC (Table of contents)

	I.		General settings
	    I.1.		Resets, browser-corrections, defaults
	    I.2.		Typography
	    I.3.		Colors
	II.		Layout elements
	    II.1.		Outer containers
	    II.2.		Inner containers
	    II.3.		Inner elements
-----------------------------------------------------------------------------------------------------------------------------------------------------			
TEST-REPORT
	
	Mac OS:
	Firefox 3			Working!
	Firefox 2			Working!
	Safari 3			Working!
	Opera 9.5			Working!
	Chrome				Not tested!
	
	Windows OS:
	Firefox 3			Not tested!
	Firefox 2			Not tested!
	IE 8				Working!
	IE 7				Working!
	IE 6				Working!
	IE 5.5				Working!
	Chrome				Not tested!
----------------------------------------------------------------------------------------------------------------------------------------------------*/

/*
	I.		General settings
------------------------------------------------------------------------------------------------------*/
/*
	I.1.		Resets, browser-corrections, defaults
------------------------------------------------------------------------------------------------------*/
html,body {
    border: 0; /* Fixes border bug in IE 8 and lt IE 7. */
}
html {
    font-size: 100.01%; /* Corrects font related browserbugs in IE, Opera and Safari. */
    word-wrap: break-word;
}
body {
    font-size: 16px;
}
body,div {
    margin: 0;
    padding: 0;
}
img {
    border: 0;
}
/*
	I.2.		Typography
------------------------------------------------------------------------------------------------------*/
body {
	font-family: Verdana,Arial,"Helvetica Neue",Helvetica, sans-serif;	
}
/* Line-heights */
h1,h2,h3,h4 {
	line-height: 1em;
	margin: 0 0 1em 0;	
}
p {
	line-height: 1.6em;
	margin: 0 0 1em 0;
}
/* Headlines */
h1 {
	font-size: 2.25em; /* 16 x 2.25 = 36 */
	font-weight: 900;
	letter-spacing: -.01em;
}
/* Sublines */
h2,dt {
	font-size: 1.5em; /* 16 x 1.5 = 24 */
	font-weight: 100;
	letter-spacing: .2em;
}
/* Titles */
h3 {
	font-size: 1.125em; /* 16 x 1.125 = 18 */
	font-weight: 700;
	letter-spacing: .05em;
}
h4 {
	font-size: 1em;
	font-weight: 500;
	letter-spacing: .1em;
}
/* Copytext */
p {
	font-size: 1em;  /* 16 x 1 = 16 */ 
}
/* Semantic enhancements */
em,strong {
	font-weight: 900;
	letter-spacing: .1em;
}
b {
	font-weight: 700;
}
sup {
	font-variant: small-caps;	
}
/* Links */
a {
	text-decoration: none;	
}
/* Specific elements */
.nav li.active,.nav li a {
    text-transform: lowercase;
    font-variant: small-caps;
}
/*
	I.3.		Colors
------------------------------------------------------------------------------------------------------*/
.header {
    background: #4D4D4D;
    color: #C6EDFB;
}
.section {
    background: #F1F1F1;
    color: #4D4D4D;
}
.footer {
    background: #749DBD;
    color: #C6EDFB;
}
    .footer a {
    	color: #C6EDFB;
    }
    .footer a:hover {
    	color: #EBC67F;
    }
.nav {
    background: #EBC67F;
}			
	.nav li a {
	    background: #4D4D4D;
	    color: #F1F1F1;
	}			
	.nav li.active,.nav li a:hover {
	    background: none;
	    color: #4D4D4D;
	    border-color: #4D4D4D;
	}
.article {
    background: none;
    border-color: #4D4D4D;
}
    .article a {
        color: #4D4D4D;
    }
    .article a:hover {
	color: #EBC67F;
    }
.aside {
    background: #C6EDFB;
}
    .aside div {
	background: #F1F1F1;
	border-left-color: #749DBD;
    }
	.aside div a {
	    background: #749DBD;
	}
	.aside div a:hover {
	    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari */
	    filter: alpha(opacity=50); /* IE lt 8 */
	    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
	    -khtml-opacity: .50; /* Safari 1.x */
	    -moz-opacity: .50; /* FF lt 1.5, Netscape */
	}
	
/*
	II.		Layout elements
------------------------------------------------------------------------------------------------------*/
/*
	II.1.		Outer containers
------------------------------------------------------------------------------------------------------*/
.header {
    padding: 1em 2em 1em 2em;
}
.section {
    overflow: hidden; /* Hides overflowing background of inner containers! */
}
.footer {
    clear: both;
    padding: 1em 2em 1em 2em;
}

/*
	II.2.		Inner containers
------------------------------------------------------------------------------------------------------*/
/* Fixed width */
.nav {
    float: left;
    width: 15em;
    margin: 0 0 -3000px 0;
    padding: 0 0 3000px 0;
}
.aside {
    float: right;
    width: 200px;
    margin: 0 0 -3000px 0;
    padding: 0 0 3010px 0; /* Added some padding to the bottom. */
}
/* Fluid width */
.article {
    margin: 0 200px -3000px 15.1em; /* Left and right margins are equal to width of neighbouring containers. A tiny margin is added to the left, but is ignored in IE. */
    padding: 1em 2em 3010px 2em; /* Added some padding to the bottom. */
    border-left-width: 1px;
    border-left-style: solid;
}

/*
	II.3.		Inner elements
------------------------------------------------------------------------------------------------------*/
.nav ul {
    margin: 0;
    padding: 0 0 0 2em;
    list-style-type: none;
}
    .nav li {
	display: inline; /* Fixes margin bug in IE 8 and lt IE 7! (Double Margin Bug with non-floats?) */
    }
    .nav li.active,.nav li a {
	display: block;
	line-height: 2.5em;
	margin: 1px 0 1px 0;
	padding: 0 1em 0 1em;
	text-decoration: none;
    }			
    .nav li.active,.nav li a:hover {
	font-weight: 700;
	letter-spacing: .2em;
	border-right-width: .25em;
	border-right-style: solid;
    }
    .nav li.active {
	text-align: right;
    }
    
    .aside div {
	margin: 1px 0 0 0;
	padding: 1px;
	text-align: center;
	border-width: 1px;
	border-style: solid;
    }
	.aside div a {
	    display: block;
	    margin: 0;
	    border: none;
	}
		.aside img {
			margin: 1em auto 1em auto;	
		}