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


body{
	background: #000000;
}	

a{
	text-decoration:none;
	color:#999999;
}	

a:hover{
	text-decoration:none;
	color:#CCCCCC;
}

.wrapper{
	margin: 1em auto 0 auto;
	position: absolute;
	padding: 0;
	width: 1200px;
	height: 620px;
	overflow: hidden;
}

#logopanel{
	position: absolute;
	left:0 px;
	top: 0px;
	height: 200px;
	width: 550px;
}

/*navigation*/

#nav{
	position:absolute;
	left:550px;
	top:35px;
	height:75px;
	width:650px;
}	


#about a{
	display:block;
	float: left;
	background: url(graphics/about_button.jpg) top;
	width: 125px;
	height: 74px;
}

#about a:hover{
	background: url(graphics/about_button.jpg) no-repeat bottom;
}

#about-on{
	display: block;
	float:left;
	background: url(graphics/About_On.jpg);
	width: 125px;
	height: 74px;	
}

#services a{
	display:block;
	float: left;
	background: url(graphics/services_button.jpg) top;
	width: 140px;
	height: 74px;	
}

#services a:hover{
	background: url(graphics/services_button.jpg) no-repeat bottom;
}

#services-on{
	display:block;
	float: left;
	width: 140px;
	height: 74px;	
	background: url(graphics/Services_On.jpg);
}

#portfolio a{
	display:block;
	float: left;
	background: url(graphics/portfolio_button.jpg) top;
	width: 150px;
	height: 74px;	
}

#portfolio a:hover{
	background: url(graphics/portfolio_button.jpg) no-repeat bottom;
}

#portfolio-on{
	width: 150px;
	height: 74px;	
	display:block;
	float: left;
	background: url(graphics/Portfolio_On.jpg);
}

#contact a{
	display:block;
	float: left;
	background: url(graphics/contact_button.jpg) top;
	width: 235px;
	height: 74px;	
}

#contact a:hover{
	background: url(graphics/contact_button.jpg) no-repeat bottom;
}

#contact-on{
	display:block;
	float: left;
	width: 235px;
	height: 74px;	
	background: url(graphics/Contact_On.jpg);
}

/*end navigation*/

.content{
	position:absolute;
	left:175px;
	top:250px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#FFFFFF;
}

/*portfolio page*/


#portfolioframe{
	position:absolute;
	top:220px;
	left:180px;
	height:400px;
	width:900px;
	z-index:800;
	overflow: hidden;
}	

#port-subnav{
	position: absolute;
	left: 830px;
	top: 100px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color:#999999;
	overflow: hidden;
}	

#port-subnav ul{
	list-style-type:none;
}


/*portfolio item pages*/

#port-wrap{
	position: absolute;
	padding:0px;
	top:0px;
	left:0px;
	height:395px;
	width:900px;
	overflow: hidden;
}	

#port-content{
	position:absolute;
	padding: 10px;
	top:0px;
	left:0px;
	height:390px;
	width:445px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#999999;
	overflow: hidden;
}	

#right-portcontent{
	position:absolute;
	top:0px;
	left:445px;
	height:390px;
	width:445px;
	border-width: medium;
	border-color: #999999;
	border-style: solid;
	overflow: hidden;
}	

#right-portcontent-wide{
	position:absolute;
	top:0px;
	left:0px;
	height:390px;
	width:890px;
	border-width: medium;
	border-color: #999999;
	border-style: solid;
	overflow: hidden;
}	

#port-img{
	position:absolute;
	top:0px;
	left:0px;
	height:350px;
	width:445px;
	overflow: hidden;
}	

#port-img-wide{
	position:absolute;
	top:0px;
	left:0px;
	height:350px;
	width:900px;
	overflow: hidden;
}	

#portnavbox{
	position:absolute;
	top: 350px;
	left:0px;
	width: 445px;
	height: 40px;
	bottom:0px;
	background:url(graphics/captionbox-bkgrndcolor.jpg) repeat;
}

#portnavbox-wide{
	position:absolute;
	top: 350px;
	left:445px;
	width: 445px;
	height: 40px;
	bottom:0px;
	background:url(graphics/captionbox-bkgrndcolor.jpg) repeat;
}

#leftarrow{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 40px;
	height: 40px;
}	
	
#leftarrow a{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 40px;
	height: 40px;
	background:url(graphics/leftarrow_button.jpg) top;
}

#leftarrow a:hover{
	position:absolute;
	top: 0px;
	left: 0px;
	width: 40px;
	height: 40px;
	background:url(graphics/leftarrow_button.jpg) no-repeat bottom;
}

#caption{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	color:#999999;
	position:absolute;
	top: 5px;
	left: 40px;
	width:365px;
	height: 40px;
	text-align:center;
}	

#right-arrow{
	position:absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
}

#right-arrow a{
	position:absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
	background: url(graphics/right-arrow_button.jpg) top;
}

#right-arrow a:hover{
	position:absolute;
	top: 0px;
	right: 0px;
	width: 40px;
	height: 40px;
	background: url(graphics/right-arrow_button.jpg) no-repeat bottom;
}