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

div, img, a, p
{
position: relative;
margin: 0;
padding: 0;
border: 0;
font: 12px verdana;
line-height: 24px;
}

p
{
margin-bottom: 15px;
}

#contactinfo p
{
line-height: 20px;
color:#999999;
}

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

a:hover
{
color: #FF9900;

}


body
{
background: #EEEEEC url('images/background.gif') repeat-x;
margin: 0;
padding: 0;
border: 0;
}

#container
{
width: 904px;
margin: 70px auto;
}

#top
{
width: 904px;
background: url('images/topbanner.gif') no-repeat;
height: 140px;
}

#contactinfo
{
position: absolute;
right: 225px;
top: 17px;
height: 100px;
width: 220px;
text-align: right;
}

#middle
{
position: relative;
width: 904px;
background: url('images/newmiddle.png') no-repeat;
height: 376px;
}

#examplearea
{
position: absolute;
bottom: 27px;
left: 65px;
width: 525px;
height: 192px;
/*background: url('images/examplesback.png') -12px -7px no-repeat;*/
}


#welcometext
{
position: absolute;
top: 80px;
left: 55px;
width: 500px;
height: 60px;
}

.slideshow
{
position: absolute;
right: 55px;
top: 46px;
width: 258px;
height: 255px;
}

#bottom
{
width: 904px;
background: url('images/bottomcap.png') no-repeat;
height: 227px;
}

#bottom2
{
width: 904px;
background: url('images/bottomcap2.png') no-repeat;
height: 227px;
}

#progarea
{
width: 800px;
height: 170px;
padding-top: 20px;
padding-left: 85px;
text-align: left;
}

#progarea img
{
float: left;
clear: both;	
margin-bottom: 10px;
}

.progblock
{
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #505050;
	width: 144px;
	float: left;
	margin-right: 52px;
	padding-bottom: 10px;
}

.progblock div
{
height: 8px;
width: 144px;	
background: url('images/progback.png');
}

.progblock div div
{
height: 8px;
margin-left: 4px;
width: 0px;
background: url('images/progbar.png') right top;	
}

#portfoliobutton
{
position: absolute;
display: block;
width: 57px;
height: 56px;
top: 23px;
right: 217px;
}

#portfoliobutton:hover
{
background: url('images/portfoliohover.gif') no-repeat;
}

#resumebutton
{
position: absolute;
display: block;
width: 48px;
height: 56px;
top: 23px;
right: 150px;
}

#resumebutton:hover
{
background: url('images/resumehover.gif') no-repeat;
}

#contactbutton
{
position: absolute;
display: block;
width: 49px;
height: 56px;
top: 23px;
right: 80px;
}

#contactbutton:hover
{
background: url('images/contacthover.gif') no-repeat;
}

#contactwidebutton
{
position: absolute;
display: block;
width: 259px;
height: 35px;
bottom: 26px;
right: 54px;
}

#contactwidebutton:hover
{
background: url('images/contactwidehover.png') no-repeat;
}

#examplearea a
{
float: left;
padding: 10px;
width: 82px;
height: 82px;
background: url('images/backgroundframe.png') no-repeat;
}

#examplearea a:hover
{
background-position: -102px 0;
}



.ffclear
{
clear: both;
line-height: 1px;
height: 0px;
}