@import url('headers.css');
@import url('common.css');

/*---------- CSS for theOur Work Menu  ----------------*/

#work-menu {
	width: 718px;
	height: 403px;
	border: solid 1px #CCC;
	margin: 15px 0 30px 0;
	background-image: url(../sitepix/structural/portfolio-nav-up.png);
	background-repeat: no-repeat;
	position: relative;
}

#work-menu a {
	display: block;
	float: left;
	text-indent: -9999%;
}


#work-menu a#branding {
	position: absolute;
	display: block;
	top:19px;
	left: 511px;
	width: 156px;
	height: 79px;
	background-repeat: no-repeat;
}

#work-menu a#branding:hover {
	width: 156px;
	height: 79px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -511px -19px;
}

#work-menu a#branding.active {
	width: 156px;
	height: 79px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -511px -19px;
}


#work-menu a#website {
	position: absolute;
	display: block;
	top:63px;
	left: 333px;
	width: 157px;
	height: 71px;
	background-repeat: no-repeat;
}

#work-menu a#website:hover {
	width: 157px;
	height: 71px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -333px -63px;
}

#work-menu a#website.active {
	width: 157px;
	height: 71px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -333px -63px;
}

#work-menu a#photo {
	position: absolute;
	display: block;
	top:168px;
	left: 333px;
	width: 157px;
	height: 78px;
	background-repeat: no-repeat;
}

#work-menu a#photo:hover {
	width: 157px;
	height: 78px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -333px -168px;
}

#work-menu a#photo.active {
	width: 157px;
	height: 78px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -333px -168px;
}


#work-menu a#print {
	position: absolute;
	display: block;
	top:133px;
	left: 511px;
	width: 157px;
	height: 78px;
	background-repeat: no-repeat;
}

#work-menu a#print:hover {
	width: 157px;
	height: 78px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -511px -133px;
}

#work-menu a#print.active {
	width: 157px;
	height: 78px;
	background-image: url(../sitepix/structural/portfolio-nav-over.png);
	background-repeat: no-repeat;
	background-position: -511px -133px;
}


/*---------- CSS for the Photography page ----------------*/

#image-box {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#image-box li {
	width: 218px;
	height: 168px;
	border: solid 1px #CCC;
	float: left;
	margin: 0 30px 30px 0;
}

#image-box li.last {
	margin: 0;
}

/*---------- CSS for the branding page ----------------*/

#brands {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#brands li {
	width: 218px;
	height: 160px;
	border: solid 1px #CCC;
	float: left;
	margin: 0 30px 30px 0;
	text-align: center;
}

#brands li.last {
	margin: 0;
}


/*---------- CSS for the Website and Print page ----------------*/


.description {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 718px;
	
}

.description li {
	border: solid 1px #CCC;
	position: relative;
	padding: 15px 0 15px 15px;	
	height: 140px;
	margin: 0 0 20px 0;
}

.description li h2 {
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

.description li p {
	font-size: 14px;
	width: 255px;
}

.description li a.image {
	width: 183px;
	height: 138px;
	border: solid 1px #CCC;
	display: block;
	float: right;
	margin: 0 15px 0 0;
	display: inline;
}

.description li a.small {
	position: absolute;
	top: 130px;
	left: 15px;
}