*	{
	margin: 0;
	padding: 0;
	}
	
/* ---------- General layout ---------- */
	
body {
	font-family: Trebuchet, "Trebuchet MS", Arial, Tahoma, sans-serif;
	font-size: small;
	background: #e3e9f0 url(../images/layout/background-left.jpg) top left fixed repeat-y;
	}
	
#outerContainer {
	background: url(../images/layout/background-right.jpg) top right fixed repeat-y;
	}
	
#container {
	width: 752px;
	margin: 0 auto 0 auto;
	padding-top: 80px;
	}
	
a img {
	border: none;
	}

/* ---------- Main Content ---------- */
	
#logo {
	float: left;
	margin-left: -57px;
	}
	
#mainP {
	padding: 22px 26px;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 210%;
	line-height: 1.4em;
	}
	
.lightBorder, .portfolioPiece, .portfolioPiece3rd {
	border: 1px solid #d0d5dc;
	}

.boxedSection, #footer {
	border: 18px solid #fff;
	background: #f8fafb;
	}
	
.portfolioPiece, .portfolioPiece3rd {
	float: left;
	width: 201px;
	margin: 0 26px 45px 0;
	padding: 15px;
	background: #fff;
	}
	
.portfolioPiece3rd {
	margin-right: 0;
	}
	
#tooltip {
	position: absolute;
	z-index: 3000;
	width: 200px;
	border: 1px solid #40474c;
	background-color: #f8fafb;
	padding: 15px;
	opacity: 0.95;
	}
	
#portfolioPage #tooltip {
	position: absolute;
	z-index: 3000;
	width: auto;
	margin: -60px 0 0 -40px;
	border: 1px solid #40474c;
	background-color: #f8fafb;
	padding: 8px;
	text-align: center;
	opacity: 0.95;
	}
	
#tooltip h3 {
	color: #484848;
	text-transform: none;
	font-size: 85%;
	font-weight: normal;
	line-height: 1.4em;
	}
	
#portfolioPage #tooltip h3 {
	color: #e80953;
	}
	
/* -- Portfolio styles -- */

#projectDescription {
	width: 310px;
	float: left;
	margin-bottom: 60px;
	color: #424242;
	line-height: 1.3em;
	background: url(../images/layout/dotted-border.gif) bottom left repeat-x;
	}
	
#projectDescription p {
	margin-bottom: 20px;
	}
	
#backLink {
	background: url(../images/layout/dotted-border.gif) top left repeat-x;
	display: block;
	padding: 7px 0;
	font-size: 100%;
	text-decoration: none;
	color: #234575;
	}
	
#backLink:hover, #slider li.unbordered a:hover {
	color: #e80953;
	}
	
#portfolioPiece {
	width: 407px;
	float: right;
	margin-bottom: 60px;
	}
	
#portfolioPiece img {
	padding: 15px;
	background: #fff;
	border: 1px solid #d0d5dc;
	}
	
#slider {
	width: 407px;
	float: right;
	margin: 0 auto 60px auto;
	position: relative;
	}
	
.panel {
	background: #fff;
	}
	
#slider ul {
	list-style: none;
	}
	
#slider li {
	border: 1px solid #d0d5dc;
	float: left;
	margin: 5px 4px 0 0;
	}
		
#launchSite {
	color: #234575;
	font-size: 90%;
	float: right;
	margin-top: 12px;
	}
	
.navigation li a, .navigation li a.activeSquare {
	float: left;
	width: 17px;
	height: 17px;
	background: #e80953;
	border: 4px solid #fff;
	}
	
.navigation li a:hover {
	background: #f9b6dc;
	}

.navigation li a.activeSquare {
	background: #a5b222;
	}

	
.scroll {
	height: 283px;
	overflow: auto;
	position: relative; /* fix for IE to respect overflow */
	clear: left;
	background: #fff;
	border: 1px solid #d0d5dc;
	}

.scrollContainer div.panel {
	padding: 15px;
	height: 253px;
	width: 407px; /* change to 560px if not using JS to remove rh.scroll */
	}
		
/* ---------- Contact styles ---------- */

#contactUs {
	position: absolute;
	width: 100%;
	}

#contactInner {
	width: 752px;
	margin: 0 auto;
	}
	
#contactTab {
	float: right;
	}

#contactTab {
	width: 131px;
	height: 34px;
	display: block;
	text-indent: -9999px;
	background: url(../images/contact-tab.png);
	}

#contactTab:hover, #contactTab.active {
	background: url(../images/contact-tab-hover.png);
	}
	
#formContainer {
	background: #e80953;
	color: #fff;
	display: none;
	}
	
#formFloats {
	width: 752px;
	margin: 0 auto;
	}
		
#formContainer p {
	width: 270px;
	float: left;
	margin: 40px 0;
	font-family: Georgia, Times, "Times New Roman", serif;
	font-size: 150%;
	line-height: 1.4em;
	color: #5f0322;
	}
	
#contactForm {
	width: 430px;
	float: right;
	margin: 40px 0;
	}
	
#contactForm dt {
	float: left;
	padding-top: 5px;
	}
	
#contactForm .text {
	width: 300px;
	float: right;
	padding: 8px;
	margin-bottom: 10px;
	border: 1px solid #b70842;
	background: url(../images/layout/textbox-background.gif) 0 0 no-repeat;
	}
	
#contactForm .button {
	clear: both;
	float: right;
	}
		
/* ---------- Footer Styles ---------- */

#footer {
	padding: 15px;
	color: #8b9199;
	font-size: 90%;
	line-height: 1.4em;
	}

#freelancers {
	width: 320px;
	float: left;
	}
	
#address {
	width: 320px;
	float: right;
	text-align: right;
	}
	
#address .leftP {
	width: 60%;
	float: left;
	text-align: left;
	}
	
#copyright {
	padding: 10px 0 40px 0;
	text-align: right;
	font-size: 85%;
	}

/* ---------- Typography Styles ---------- */

h1	{
	margin: 55px 0 25px 0;
	color: #aa4316;
	text-transform: uppercase;
	font-size: 140%;
	}
	
h2	{
	margin-top: 15px;
	color: #7e6e6e;
	text-transform: uppercase;
	font-size: 110%;
	}
	
h3 {
	color: #f154b4;
	text-transform: uppercase;
	font-size: 80%;
	}
	
h4	{
	margin-bottom: 8px;
	padding-bottom: 5px;
	color: #40566f;
	background: url(../images/layout/dotted-border.gif) bottom left repeat-x;
	text-transform: uppercase;
	}
	
/* ---------- Hacks and Patches  ---------- */

.clear, #clear {
	clear: both;
	}
	
/* -- Clearing floats -- */

#footer:after,
#formFloats:after,
#formFloats dd:after {
	content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html #footer,
* html #formFloats,
* html #formFloats dd {
	height: 1px;
	}

*:first-child+html #footer,
*:first-child+html #formFloats,
*:first-child+html #formFloats dd {
	min-height: 1px;
	}