/* CSS Reset */

body, div, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
body {
	font-family: Lucida Sans, Lucida Grande, Lucida Sans Unicode, Arial, Sans-serif;
	background:#99ccff
}
/* Lay out the page structure with a container */
#container {
	width: 960px; /* Aligns the container to the center of the page */
	padding: 60px 0 0 0px; /* Add some top padding */
	margin: 0 auto;
}
#header h1 a {
	display: block; /* Anchors are inline by default, change it to block... */
	width: 960px;
	height: 100px; /*...Which then allows us to specify width and height (according to the image) */
	color: #99ccff; /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
	background: url(images/1-logo.gif);
	text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
}
#header h2 {
	display: block; /* Anchors are inline by default, change it to block... */
	width: 960px;
	height: 120px; /*...Which then allows us to specify width and height (according to the image) */
	color: #99ccff; /* the color can't actually be seen on the text, but it avoids a blue dotted border in Firefox */
	background: url(images/2-intro.gif);
	text-indent: -9999px; /* Add the background image as part of the CSS Image Replacement and shift the text out of the way */
}
#portfolio {
	margin: 0px;
}
#portfolio ul {
	list-style: none; /* Remove the bullet points from the list */
}
#portfolio ul li {
	float: left; /* Float the lists to the left, laying them out side by side */
}
#residential {
	float: left; /* Float the lists to the left, laying them out side by side */
	width: 330px;
	height: 510px;
	background-image: url(images/3a-0-tab.gif);
	background-repeat: no-repeat;
}
#residential ul {
	margin: 49px 0 0 0;
}
#residential ul li {
	margin: 0 0 0 59px;
	padding: 0 0 6px 0;
}
#residential img {
	border: 1px solid #999;
}
#graphic {
	float: left; /* Float the lists to the left, laying them out side by side */
	width: 300px;
	height: 510px;
	background-image: url(images/3b-0-tab.gif);
	background-repeat: no-repeat;
}
#graphic ul {
	margin: 49px 0 0 0;
}
#graphic ul li {
	margin: 0 0 0 29px;
	padding: 0 0 6px 0;
}
#graphic img {
	border: 1px solid #999;
}
#web {
	float: left; /* Float the lists to the left, laying them out side by side */
	width: 330px;
	height: 510px;
	background-image: url(images/3c-0-tab.gif);
	background-repeat: no-repeat;
}
#web ul {
	margin: 49px 0 0 0;
}
#web ul li {
	margin: 0 0 0 29px;
	padding: 0 0 6px 0;
}
#web img {
	border: 1px solid #999;
}
#footer {
	float: left; /* Float the lists to the left, laying them out side by side */
	margin: 0px;
	padding: 0px;
	width: 960px;
	height: 270px;
	background-image: url(images/4-0-tab.gif);
	background-repeat: no-repeat;
}
#footer h3 {
	font-size:14px
}
#footer p {
	font-size:12px;
	padding-bottom: 10px;
}
#footer li {
	font-size:12px;
}
#contact {
	float: left;
	margin: 50px 0 0 60px;
	width: 590px;
	height: 150px;
	color: #222; /* Style up the text */
}
#social {
	float: left;
	margin: 50px 0 0 0;
	padding-left: 10px;
	width: 240px;
	height: 150px;
	color: #222;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	width: 240px;
}
#social h3 {
	padding: 0 0 10px 0
}
#social ul {
	list-style: none; /* Remove the bullet points from the list */
}
#social img {
	padding-right: 5px;
}
#footer p.copyright {
	clear: both;
	float: right;
	margin: 20px 60px 0 0; /* Add a new float to the right and shift into place with some right margin */
	font-size: 12px;
	color: #666; /* Style up the text */
}
/* A handy 'Clearfix' technique to clear floats in order to avoid affecting page elements further down the document */		
.clear:after {
	content: "";
	display: block;
	visibility: hidden;
	clear: both;
}
/* Clearfix IE fix */
.clear {
	zoom: 1;