@charset "utf-8";
/* CSS Document */

#controls p {
	
	margin: 0;
	text-transform: uppercase;
	
}

#controls #view {
	
	float: left;
	width: 130px;
	
}

#controls {
	
	overflow: hidden;
	position: relative;
	margin-top: 30px;
	
}

#controls #breadCrumbs {
	
	width: 175px;
	float: left;
	padding: 0;
	
}

#selectors {
	
	top: -8px;
	position: absolute;
	right: 0;
	
}

#scrollBar {
	
	height: 8px;
	width: 722px;
	background-color: #eeeeee;
	float: left;
	position:relative;
	margin-top: 6px;
	overflow: hidden;
	
}

.project #scrollBar {

	width: 675px;
	
}

#scroller {
	
	height: 8px;
	background-color: #e31b24;
	width: 80px;
	cursor: pointer;
	position: absolute;
	
}

#portfolioContainer {
	
	margin-top: 30px;

	
}

#portfolioList {
	
	width: 1008px;
	
}

#portfolioList .last {
	
	margin-right: 0;
	
}

.portfolioItem {
	
	width: 310px;
	margin-right: 26px;
	float: left;
	margin-bottom: 30px;
	
}


.portfolioItem .img {
	
	height: 250px;
	width: 310px;
	background-color: #e31b24;
	
}

.portfolioItem h4 {
	
	font-size: 1.17em;
	color: #e31b24;
	margin: 30px 0 2px 0;
	text-transform: uppercase;
	
}


.projectDate {
	
	font-size: .83em;
	font-weight: bold;
	margin: 0 0 25px 0;
	text-transform: uppercase;
	
}

.portfolioItem .links {
	
	margin-top: 25px;
	
}

.links a {
	
	font-size: .83em;
	color: #666666;
	text-decoration: underline;
	text-transform: uppercase;
	
}

.links a:hover {

	color: #e31b24;
	
}

#portfolioLeft {
	
	margin-right: 5px;
	
}

#portfolioRight {
	
	margin-left: 5px;
	
}

#tagContainer {
	
	width: 982px;
	position: relative;
	
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

#intro {
	
	overflow: hidden;
	margin-top: 30px;
	position: relative;
	border-bottom: #e31b24 1px solid;
	padding-bottom: 30px;
	margin-bottom: 10px;

}

#intro img {
	
	float: right;
	
}

#titleBlock {
	
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 330px;
	
}

#titleBlock h2 {
	
	line-height: 1.1em;
	
}

#titleBlock p {
	
	margin: 0;
	
}

#info {
	
	width: 646px;
	float: left;
	
}

#info p {
	
	margin-left: 53px !important;
	
}

p.tagline {
	
	margin: 0 0 20px 0 !important;
	background-color: #FFF;
	border: 1px solid #eeeeee;
	
}

#project p.tagline {
	
	margin-top: 20px !important;
	
}

#project .content p {
	
	margin: 20px 20px 0 20px;
	
}

.overview {
	
	background: url(images/project/overview.png) top left no-repeat;
	
}

.challenge {
	
	background: url(images/project/challenge.png) top left no-repeat;
	
}

.solution {
	
	background: url(images/project/solution.png) top left no-repeat;
	
}

.results {
	
	background: url(images/project/results.png) top left no-repeat;
	
}

.statistics {
	
	background: url(images/project/statistics.png) top left no-repeat;
	
}

#info h3 {
	
	padding: 0 20px 15px 53px;
	
}

#info ul {
	
	margin-left: 56px;
	margin-bottom: 20px;
	
}

#info li {
	
	margin: 10px;
	padding-left: 15px;
	
}

#sideImage {
	
	width: 306px;
	margin-left: 25px;
	margin-top: 6px;
	float: left;
	
}

#sideView {
	
	background: url(images/view.gif) center left no-repeat;
	font-weight: bold;
	margin-bottom: 5px;
	text-transform: uppercase;
	
}

#sideView a {
	
	color: #999999;
	cursor: pointer;
	
}

.spacing {
	
	padding-right: 30px;
	color: #eeeeee;
	
}

#imgHolder {
	
	height: 240px;
	overflow: hidden;
	width: 311px;
	position: relative;
	
}

#magnify {
	
	position: absolute;
	display: none;
	left: 0;
	top: 0;
	z-index: 20;
	
}