/*

Common Styles Used Throughout the Site

*/

body { font-family: verdana,arial,sans-serif; font-size: 11px; color: #555; background-color: #fff; padding: 20px 0 20px 0; margin: 0; }
p { font-size: 11px; line-height: 14px; padding: 0; margin: 0 0 11px 0; }
img { display: block; border: 0; }
form { margin: 20px 0 20px 0; padding: 0; }
table { padding: 0; border: 0; border-collapse: collapse; }
td { padding: 0; border: 0; }
a { color: #555; text-decoration: underline; }
a:focus, a:hover, a:active { outline: none; }
ul { padding: 0; margin: 0; list-style: none; }
li { padding: 0; }

h1 { font-family: 'Lucida Grande',verdana,sans-serif; font-size: 16px; font-weight: normal; color: #333; padding: 0; margin: 0 0 10px 0; }
h2 { font-family: 'Lucida Grande',verdana,sans-serif; font-size: 10px; font-weight: normal; color: #333; padding: 0; margin: 15px 0 0 0; }
body#portfolio h1 { margin: 0 0 10px 10px; }




/*

Global Custom Styles

*/

#page { width: 660px; margin-left: auto; margin-right: auto; }
#content { width: 512px; margin: 0 0 0 96px; }
#content:after { clear: both; display: block; content: "."; height: 0px; visibility: hidden; }




/*

Global Navigation

*/

#navigation { width: 564px; padding: 74px 0 36px 96px; background-image: url(../images/global/bground.gif); background-repeat: no-repeat; }
#navigation:after { clear: both; display: block; content: "."; height: 0px; visibility: hidden; }
#navigation ul li { float: left; font-family: 'Lucida Grande',verdana,sans-serif; font-size: 12px; margin-right: 54px; }
#navigation ul li a { color: #333; text-decoration: none; }
#navigation ul li a:hover { text-decoration: underline; }
#footer { width: 565px; font-size: 10px; padding: 5px 0 0 77px; border-top: 1px solid #7c7c7c; margin: 24px 0 0 18px; }




/*

Home Page

*/

#home #content { width: 660px; padding: 0 0 10px 0; background-image: url(../images/home/bground.gif); background-repeat: repeat-y; margin: 0; }
#home #content h1 { font-size: 24px; font-weight: normal; padding: 0; margin: 0 0 10px 0; }
#home #content h2 { font-size: 16px; font-weight: normal; padding: 0; margin: 0 0 10px 0; }
#home #footer { width: 611px; padding: 5px 0 0 31px; }

#colMain { float: left; width: 360px; padding: 0 60px 0 50px; }
#colSide { float: left; width: 190px; padding: 5px 0 0 0; }

#colMain p { font-size: 12px; line-height: 17px; padding: 0; margin: 0 0 11px 0; }
#colMain div.summaryList { width: 340px; padding: 10px 0 20px 0; }
#colMain div.summaryList ul li { padding: 0 0 3px 10px; background-image: url(../images/global/bullet.gif); background-repeat: no-repeat; background-position: 0px 5px; margin: 0 0 0 20px; }

#colSide #featuredProjects { padding: 0 0 20px 0; }
#colSide #featuredProjects div.projectThumb img { border: 1px solid #444; }
#colSide #featuredProjects div.projectName { font-size: 9px; margin: 3px 0 20px 0; }

#colSide #recentClients div.recentList ul li.hide a { display: none; color: #fff; cursor: default; }





/*

Portfolio Page

*/

#portfolio #content { width: 522px; margin: 0 0 0 86px; }

#portfolioList { float: left; width: 160px; padding: 0 0 120px 10px; }
#portfolioList ul li a { text-decoration: none; }
#portfolioList ul li a:hover { text-decoration: underline; }
#portfolioList ul li.selected { background-image: url(../images/global/caret.gif); background-repeat: no-repeat; background-position: 0px 5px; padding: 0 0 0 8px; margin: 0 0 0 -8px; }
#portfolioList ul li.selected a:hover { text-decoration: none; }

#portfolioDetail { float: left; width: 352px; color: #444; }
#portfolioDetail #portfolioWrap { position: absolute; width: 352px; opacity: 1; filter: alpha(opacity=100); }
#portfolioDetail #portfolioWrap #portfolioImage img { border: 1px solid #999; }
#portfolioDetail #portfolioWrap #portfolioClient { font-size: 14px; font-weight: bold; color: #444; background-color: #fff; margin: 7px 0 5px 0; }
#portfolioDetail #portfolioWrap #portfolioEmployer { color: #444; background-color: #fff; }
#portfolioDetail #portfolioWrap #portfolioLocation { color: #444; background-color: #fff; }
#portfolioDetail #portfolioWrap #portfolioText { color: #444; background-color: #fff; margin: 10px 0 0 0; }





/*

Interior Pages

*/

div.clientList { width: 512px; padding: 0 0 10px 0; }
div.clientList ul li { float: left; width: 170px; font-size: 11px; }
div.clientList:after { clear: both; display: block; content: "."; height: 0px; visibility: hidden; }

div.skillsList { margin: 0 0 20px 0; }
div.skillsList ul li { font-size: 11px; background-image: url(../images/global/caret.gif); background-repeat: no-repeat; background-position: 0px 5px; padding: 0 0 0 10px; margin: 0 45px 10px 30px; }





/*

Contact Page

*/

input { font-family: verdana,arial,sans-serif; font-size: 10px; width: 225px; border: 1px solid #444; padding: 1px 3px 1px 3px; }
input:focus { background-color: #eee; }
textarea { font-family: verdana,arial,sans-serif; font-size: 10px; width: 375px; height: 175px; padding: 3px; border: 1px solid #444; overflow: auto; }
textarea:focus { background-color: #eee; }
div.submit { width: 50px; font-size: 9px; font-weight: bold; text-align: center; padding: 4px; border: 1px solid #444; margin: 20px 0 0 0; cursor: pointer; }
div.submit:hover { background-color: #eee; }