#projects-container {
	position: relative;
	width: 680px;
	height: 500px;
	margin: 0 0 0 55px;
}

#portfolio-navigation {
	border: 6px #dfeff9 solid;
	padding: 7px;
	font-size: 10px;
	color: #5c4d3b;
	margin: 0 0 0 7px;
}

	#portfolio-navigation a {
		color: #5c4d3b;
		font-weight: bold;
		text-decoration: none;
		padding: 0 5px;
	}
	
	#portfolio-navigation a:hover,
	#portfolio-navigation a.on {
		color: #bf4053;
	}
	
	#portfolio-navigation span {
		padding: 0 0 0 50px;
	}
	
		#portfolio-navigation span a {
			padding: 0 2px;
			color: #7ec1e7;
		}
		
		#portfolio-navigation span span {
			padding: 0 10px 0 0;
			font-weight: bold;
			color: #bf4053;
		}
		
#blue-box-container {
	position: absolute;
	top: 56px;
	left: 0;
	width: 229px;
	height: 351px;
	background-image: url("/i/design/blue-box-container-bg.png");
	background-position: 0 0;
	background-repeat: no-repeat;
}

	#blue-box {
		width: 220px;
		height: 317px;/*342*/
		padding-top: 25px;
		margin: 0 0 0 7px;
		background-color: #74d3f3;
		border: 1px #636365 solid;
	}
	
	#blue-box p {
		font-size: 10px;
		color: #fff;
		line-height: 16px;
		margin: 0 15px 20px 20px
	}
	
		#blue-box p strong {
			font-weight: bold;
		}
	
#project-box-container {
	position: absolute;
	top: 56px;
	left: 238px;
	width: 355px;
	height: 351px;
	background-image: url("/i/design/project-box-container-bg.png");
	background-position: 0 0;
	background-repeat: no-repeat;
}

	#project-box {
		position: relative;
		width: 346px;
		height: 342px;
		border: 1px #636365 solid;
		margin: 0 0 0 7px;
	}
	
		#project-box img {
			display: block;
			width: 346px;
			height: 342px;
		}
		
		span#click-the-squares {
			position: absolute;
			top: 20px;
			left: 20px;
			color: #7ec2e7;
			font-weight: bold;
			font-size: 10px;
			line-height: 14px;
		}
		
		span#logo-design {
			position: absolute;
			bottom: 20px;
			left: 20px;
			color: #000;
			font-weight: bold;
			font-size: 10px;
			line-height: 12px;
		}
	
#projects-squares {
	position: absolute;
	top: 56px;
	right: 0;
	width: 72px;
}

	#projects-squares a {
		position: relative;
		display: block;
		width: 72px;
		height: 56px;
		background-image: url("/i/design/square-bg.png");
		background-position: 0 0;
		background-repeat: no-repeat;
		border-bottom: 3px #fff solid;
		text-decoration: none;
	}
	
		#projects-squares a:hover,
		#projects-squares a.on {
			background-image: none;
			opacity: 0.3;
			filter:alpha(opacity=30);
		}
	
	#projects-squares a img {
		position: absolute;
		top: 0;
		left: 7px;
		display: block;
		width: 47px;
		height: 47px;
		border: 1px #636365 solid;
		background-color: #eee;
	}
	
	#projects-squares a span {
		position: absolute;
		top: 0;
		right: 0;
		width: 12px;
		height: 46px;/*49*/
		padding-top: 3px;
		background-color: #7ec2e7;
		color: #fff;
		font-size: 10px;
		font-weight: bold;
		text-align: center;
	}