/* 
approx. px to em conversion:

0.7em	11px  8pt
0.75em	12px  9pt
0.8em	13px  10pt
0.875em	14px  10.5pt
0.95em	15px  11pt
1.0em	16px  12pt
1.05em  17px  13pt
1.2em	19px  14pt
1.125em	20px  15pt  
1.4em	22px  16.5pt
1.8em	29px  
2.0em	32px  24pt

*/

/* CONTENTS:

1. CSS Reset
2. Universals (site standards)
3. Utility classes

*/

/* 
==============================
1. CSS Reset 
==============================
*/

/* 

This gets rid of defaults that vary between browsers, etc.
original by Eric Meyer, see http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ 

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
background: white;
color: black;
line-height: 1;
}
ul, ol {
list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
/*
padding-right: 10px;
padding-top: 5px;
*/

}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a {color:#256922; text-decoration:none;} 
a:hover {text-decoration:underline;}
strong {font-weight:bold;}
em, i {font-style:italic;}

/* 
==============================
2. Universals
==============================
*/

body {font: normal 100.01% Arial, Helvetica, sans-serif;} /* % to allow IE/Win to resize fonts proportionally - 100.01% to correct for bugs in Opera and Safari */ 

h1, h2, h3, h4 {font-weight:bold;}

h1 {font-size:2.0em;} /* h1 is the logo/masthead, so size here is when Img Replacement is turned off */
h2 {font-size:1.8em;}
h3 {font-size:1.4em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:0.8em;}

/* 
==============================
3. Utility classes
==============================
*/

/* BEGIN clearfix is for clearing floats */

.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.clearfix {display: inline-block;}

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

/* END clearfix */



/* 
	these next styles are based off 
	of the Lime Zinger color pallette 
	on the website: http://www.colourlovers.com

	Lilies #E4E49C - light beige
	Rounge #FF6600 - orange
	grass greenie #256922 - dark green
	oola la its green #5FA25D - light green
	lime zinger #CAE781 - lightest green with a little bit of a yellow hue

	
	new style - http://www.colourlovers.com/pattern/198210/Love_Flowers
	familiar foliage #7D9E3C - green
	faded orange aura #FFE2A6 - light orange
	warm flush #FE9F8C - pink
	French Vanilla #FFFEC0 - vanilla white
	rooted in truth #73581D - a bark color...brown



	i will go with this one next http://www.colourlovers.com/pattern/65955/Maybe_Next_Time



*/



/* start meat and potato css */


body {
	margin:20px 0px; 
	padding:0px; 
	text-align:center; 
	background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/198/198210.png) repeat;
	}

#container {
	position:relative;
	width:755px; 
	margin:0px auto;
	border:5px solid #73581D;
	background-color:#FFFEC0; 
	color:#7D9E3C;
	min-height:400px;
  	height:auto !important; /* ie6 hack */
  	height:400px; 			/* ie6 hack */
	text-align:left; /* Counteract to IE5/Win Hack */
	padding:10px;
	}

#header {text-align:center;}

#nav {
	position:absolute;
	left:150px;
	top:62px;
	width:550px;
	border:2px solid #73581D;
	background-color:#FFE2A6;
	padding:10px 10px 10px 80px;
	}


/* 
	I added this next part to show you that 
	if you float list items to the left, they 
	will all go from left to right in the 
	order of the list. Then I added some padding 
	so they are spaced out.
*/
#nav li {float:left;padding:0px 30px 0px 0px;}




a:link {
	font-weight:bold;
	text-decoration:none;
	color:#73581D;
	}
a:visited {
	font-weight:bold;
	text-decoration:none;
	color:#73581D;
	}
a:active {
	font-weight:bold;
	text-decoration:none;
	color:#73581D;
	}
a:hover {
	font-weight:bold;
	text-decoration:none;
	color:#FE9F8C;
	}

#mainContentContainer {
	margin:35px 10px 20px 80px;
	background-color:#fff;
	padding:30px 10px 60px 10px;
	border:1px solid #ccc;
	}