body, h1, h2, h3, p, img, ul, li{
		border:0; margin:0; padding:0;
	}
		/*the above is a very basic reset rule.  Every browser has a slightly different default for HTML tags.  By using this simple CSS reset, all the more glaring styles 
		are reset and can now be set to whatever properties that would suit your website best. */
	
	body{
		background:#cccc99;	/* a light blue background color. */
		font-family:Arial, Helvetica, sans-serif; /* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */
		font-size:13px; /* all normal text on the web page has a base font size of 14px now */
	}
		
	h1, h2, h3, p{
		margin-bottom:10px; /* redeclaring how much of a margin each of these tags should have benethe them */
	}
h1 {
	font:13px Helvetica; 
}		
h2 {
	font:14px Helvetica;
}
	p{
		letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
		line-height:21px; /* line height sets the vertical spacing between lines of text. */
	}
.name {
	font:bold 14px Helvetica;
}		
.title {
	font:bold italic 12px Helvetica;
}
.office {
	font: bold 12px Helvetica;
}
	div#container{
				margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
		width:1020px;	/* sets the width of the div to 900px. Remember that if you add padding to this element it will increase the size by the number of pixels in the padding. In this example the width is 900px and we have 15px to the left and right so the total width of the header will be (870px + 15px+15px=930px */
		border:2px solid;
	background-image:url('images/contentbg.gif');
background-repeat:repeat;	
				}		
	div#header{
		padding:15px 15px 15px;	/* by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller.  In this case, the header div is now 15px wider and taller on each side. */
		/* width:922px;	/* sets the width of the div to 900px. Remember that if you add padding to this element it will increase the size by the number of pixels in the padding. In this example the width is 900px and we have 15px to the left and right so the total width of the header will be (870px + 15px+15px=930px */
				}
img.center {   display: block;   margin-left: auto;   margin-right: auto; }		
	
	
	div.content{
	/*	margin:15px auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content.  The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
		min-height:300px;
		width:840px;
	}
				
	div.col-right{
		float:right;
		width:660px
		}
		
	div.sidebar-left{
		float:left;
		padding:0 10px;
		width:150px;	/* when floating content next to each other, applying set widths will make the content play nice with each other. Change the width of the siebar, or take away the width of the above "div.col-right" and see what happens to get a better idea of how widths effect floats */
		}
		

	.list{
		border-bottom:1px solid #c3dce1; /* adds a border to the bottom of the list to further divide the content for eaier segragation */
		padding:0 0 20px 15px;	/* adds spacing to the bottom of the list to further divide the content for eaier segragation */
	}
	.list li{
		margin-bottom:10px
	}
	.list li a{
		font-weight:bold;	/* this makes all anchor classes with .list bold without using <strong>  */
		text-transform:uppercase;	/* this makes all anchor classes with .list uppercase  */
		font-size:11px;	/* this makes all anchor classes with .list applied 11px tall  */
	}
				
	div#footer{
		background-color:#c4d5d9;
		margin:0 auto;
		padding:15px;
		text-align:center;
		width:900px;
		font:12px arial;
	}
	.float-left{
		float:left;	/* use this on an element (like an image) to make it float to the left of it's containing HTML element */
		margin:0  10px 10px 0;
	}
	.float-right{
		float:right;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}
	.float-right img{
		margin:0 0 10px 10px;	/* use this on an element (like an image) to make it float to the right of it's containing HTML element */
	}
	.clear{
		clear:both; /* this clears floats.  This would be used to cancel out a float's behavior on content below it.  */
	}