/* LAYOUT */

html, body {
	height: 100%;
	font-family: Helvetica, Trebuchet MS, sans-serif;
	margin:0px;
	font-size:12px;
	line-height:140%;
	text-align:left;
	background:#EEEEEE;
}
		
#contentleft {
	width:27%;
	min-height: 100%;
	padding:0px;
	float:left;
	background:#EEEEEE;
	/*overflow:auto;*/
	}
	
#contentright {
	width:73%;
	min-height: 100%;
	padding:0px;
	float:left;
	background:#DDDDDD;
	/*overflow:auto;*/
	}
	
#leftColumn{
	width:220px;
	float:right;
	height:auto;
	padding-left:40px;
	padding-right:30px;
	padding-top:80px;
	background:#EEEEEE;
	}
		
#header{
	height:40px;
	width:770px;
	float:left;
	text-align:right;
	padding-top:40px;
	background-color:#DDDDDD;
	}

#mainContent{
	width:770px;
	height:auto;
	float:left;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:40px;
	background-color:#DDDDDD;
	}
	
#righthandtext{
	width:300px;
	height:530px;
	float:right;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:40px;
	background-color:#DDDDDD;
	}
	
#mainText{
	width:750px;
	height:auto;
	float:left;
	padding-left:20px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	background-color:#DDDDDD;
	}

/* BASIC TEXT */
.bodytext					{ color: #2F2F2F; font-family: Helvetica, Trebuchet MS, sans-serif; font-size: 11px; }
.bodytext  A:link 			{ text-decoration: none; color:#2F2F2F; }
.bodytext  A:active 		{ text-decoration: none; color:#2F2F2F; }
.bodytext  A:visited 		{ text-decoration: none; color:#2F2F2F; }
.bodytext  A:hover 			{ text-decoration: none; color:#636363; }
.italics 					{ color: #636363; font-family: Helvetica, Trebuchet MS, sans-serif; font-size: 11px; font-style:italic; }
.headertext 				{ color: #636363; font-family: Helvetica, Trebuchet MS, sans-serif; font-size: 11px; }
.headertext  A:link 		{ text-decoration: none; color:#636363; }
.headertext  A:active 		{ text-decoration: none; color:#636363; }
.headertext  A:visited 		{ text-decoration: none; color:#636363; }
.headertext  A:hover 		{ text-decoration: none; color:#531926; }
.style1						{ color: #2F2F2F; font-size: 18px; }
.style2						{ color: #636363; font-size: 14px; }
.style3 					{ color: #636363; font-weight: bold; }
.style4						{ text-decoration: none; color:#636363; }

/* MAIN NAV */
.nav A:link 				{ text-decoration: none; color:#636363; }
.nav A:active 				{ text-decoration: none; color:#636363; }
.nav A:visited 				{ text-decoration: none; color:#636363; }
.nav A:hover 				{ text-decoration: none; color:#531926; }
.slideshow					{ color: #636363; font-family: Helvetica, Trebuchet MS, sans-serif; font-size: 12px; text-decoration:line-through; }

/* SUB NAV */
.sub-nav 					{ text-decoration:none; font-size:11px; list-style-type: none; padding-left: 0px; margin: 0; }
.sub-nav  A:link 			{ text-decoration: none; color:#636363; }
.sub-nav  A:active 			{ text-decoration: none; color:#636363; }
.sub-nav  A:visited 		{ text-decoration: none; color:#636363; }
.sub-nav  A:hover 			{ text-decoration: none; color:#531926; }
.sub-nav ul 				{ text-decoration: none; list-style-type: none; padding: 0; margin: 0; }

/* SUB SUB NAV */
.sub-sub-nav 				{ text-decoration:none; font-size:12px; list-style-type: none; padding-left: 10px; margin: 0; }
.nav A:link 				{ text-decoration: none; color:#636363; }
.nav A:active 				{ text-decoration: none; color:#636363; }
.nav A:visited 				{ text-decoration: none; color:#636363; }
.nav A:hover 				{ text-decoration: none; color:#531926; }
.sub-sub-nav ul 			{ text-decoration: none; list-style-type: none; padding: 0; margin: 0; }

/* PROJECT IMG NAV */
.project-img-nav			{ text-decoration:none; font-size:12px; }
.project-img-nav A:link 	{ text-decoration:none; color:#636363; }
.project-img-nav A:active 	{ text-decoration:none; color:#636363; }
.project-img-nav A:visited 	{ text-decoration:none; color:#636363; }
.project-img-nav A:hover 	{ text-decoration:none; color:#531926; }



/* 
when an item contains floated elements, it loses it's depth (the floated elements are treated as if they're not there anymore so don't push the container down as it were)
this is why the pageContainer div wasn't extending to the bottom of the page - the leftCol and mainContent divs were both floated to achieve the 2-col layout
by adding the below code to your stylesheets this problem can be force fixed (copy + paste for any future projects)
then all you need to do is add the class of clearfix to the container (in this case pageContainer)
.breaker is a seperate class applied to an empty div - cause the .clearfix hack doesn't work on IE Mac, which you may or may not care about... hehe!
if you check the code below, you'll see where these are applied...
	
more info on this here - http://www.positioniseverything.net/easyclearing.html
I see a new method is being suggested now - http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
will have to try that out in my browser test suite and see if it works on all the old versions of IE I try to support... interesting! :)
*/
	
/* fixes for 'container with floated content' depth bug */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* End hide from IE-mac */
.breaker { margin: 0; padding: 0; width: 100%; height: 1px; clear: both;}