@import url(master.css);

body {
	background: #7B6E68 url(/images/bg_body.gif);
}

#wrapper #Content {
	position: relative;
	width: 932px;
	height: 576px;
}

#wrapper #Content #Header {
	position: relative;
	width: 932px;
	height: 174px;
	background: url(/images/bg_header.gif) repeat-x;
	z-index: 10;
}

#Header h1 {
	position: absolute;
	left: 50px;
	top: 112px;
	width: 259px;
	height: 39px;
	overflow: hidden;
}

#Header h1 a {
	display: block;
	width: 259px;
	height: 39px;
	text-indent: -9999px;
	overflow: hidden;
}

html>body #Header h1 a {
	background: url(/images/metriklogo.png) no-repeat;
}

#Header ol#Navigation {
	position: absolute;
	left: 52px;
	top: 155px;
	width: 255px;
	height: 19px;
}

#Header ol#Navigation li#nav-Portfolio {
	background: url(/images/buttonseparator.png) no-repeat 74px 9px;
}

#Header ol#Navigation li#nav-CustomWork {
	background: url(/images/buttonseparator.png) no-repeat 110px 9px;
}

#Header ol#Navigation li#nav-AboutUs {
	background: none;
}

html>body #Header ol#Navigation li#nav-Portfolio a {
	background: url(/images/button_portfolio.png) no-repeat;
}

html>body #Header ol#Navigation li#nav-Portfolio a:hover {
	background: url(/images/button_portfolio.png) no-repeat 0 -19px;
}

html>body #Header ol#Navigation li#nav-Portfolio a.selected {
	background: url(/images/button_portfolio.png) no-repeat 0 -19px !important;
}

html>body #Header ol#Navigation li#nav-CustomWork a {
	background: url(/images/button_custom_work.png) no-repeat;
}

html>body #Header ol#Navigation li#nav-CustomWork a:hover {
	background: url(/images/button_custom_work.png) no-repeat 0 -19px;
}

html>body #Header ol#Navigation li#nav-CustomWork a.selected {
	background: url(/images/button_custom_work.png) no-repeat 0 -19px !important;
}

html>body #Header ol#Navigation li#nav-AboutUs a {
	background: url(/images/button_about_us.png) no-repeat;
}

html>body #Header ol#Navigation li#nav-AboutUs a:hover {
	background: url(/images/button_about_us.png) no-repeat 0 -19px;
}

html>body #Header ol#Navigation li#nav-AboutUs a.selected {
	background: url(/images/button_about_us.png) no-repeat 0 -19px !important;
}

#wrapper #Content #PortfolioImage {
	position: absolute;
	left: 0;
	top: 0;
	width: 932px;
	height: 576px;
	overflow: hidden;
	z-index: 1;
}

#wrapper #Content #PortfolioDescription {
	position: absolute;
	left: 52px;
	top: 200px;
	width: 315px;
	height: 370px;
	font-family: Georgia, "Times New Roman", serif;
	color: #FFF;
	overflow: auto;
	z-index: 10;
}

#wrapper #Content #PortfolioDescription.darktext {
	color: #333;
}

#wrapper #Content #PortfolioDescription h2 {
	width: 290px;
	margin: 0 0 15px 0;
	font-size: 3.6em;
	line-height: .9em;
}

#wrapper #Content #PortfolioDescription p {
	width: 290px;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 15px;
}

#wrapper #Content #PortfolioDescription table {
	width: 290px;
}

#wrapper #Content #PortfolioDescription table td {
	padding-bottom: 12px;
	font-size: 1.2em;
	line-height: 1.5em;
	vertical-align: top;
}

#wrapper #Content #PortfolioDescription table td.leftcol {
	padding-right: 8px;
	white-space: nowrap;
}

#wrapper #Content #PortfolioThumb {
	position: absolute;
	right: 232px;
	top: 191px;
	z-index: 10;
}

#wrapper #Content #PortfolioThumb img {
	border: 3px solid #FFF;
}

#wrapper #Content ul#PortfolioNav {
	position: absolute;
	left: 741px;
	top: 214px;
	width: 117px;
	height: 231px;
	z-index: 10;
}

ul#PortfolioNav li {
	float: left;
	margin: 0 4px 4px 0;
	width: 29px;
	height: 29px;
	border: 3px solid #FFF;	
}

ul#PortfolioNav li a {
	position: relative;
	display: block;
	width: 29px;
	height: 29px;
	text-decoration: none;
	text-indent: -9999px;
	z-index: 10;
	outline: none;
}

ul#PortfolioNav li.selected {
	background: #FFF !important;
	text-indent: -9999px !important;
}

ul#PortfolioNav li a:hover {
	text-indent: 0;
	background: #FF4E00;
}


ul#PortfolioNav li a:hover span.outerSpan {
	position: absolute;
	right: -3px;
	bottom: 22px;
	display: block;
	padding: 2px 7px 14px 10px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6em;
	color: #FFF;
	white-space: nowrap;
	background: url(/images/bg_portfolionav_desc.gif) no-repeat right bottom;
	border: 3px solid #FFF;
	border-left: none;
	border-bottom: none;
	z-index: 20;
}

ul#PortfolioNav li a:hover span.innerSpan {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 3px;
	height: 100%;
	background: url(/images/bg_portfolionav_desc_left.gif) no-repeat left bottom;
	z-index: 25;
}