body {font:11px Verdana, Arial, Helvetica, sans-serif;margin: 0;padding: 0;text-align: center;color: #cacaca;background: #1E1C1A url(../images/gradient_bg.gif) repeat-x fixed center top;}

/* Text Styles*/
h1 {font-size:24px;margin-bottom:8px; color:#b8ce7b; position:relative; z-index:0;}
h2 {font-size:16px; margin-bottom:8px; color:#b8ce7b;}
h3 {color:#b6b77a;	font:14px Georgia, "Times New Roman", Times, serif;margin-bottom:4px;}
subhead {color:#b6b77a;	font:14px Georgia, "Times New Roman", Times, serif;}
a:link,a:visited {color: #55c5ea;text-decoration:underline;}
a:hover{color: #d6ba00;	text-decoration:none}
li{list-style-image:url(../images/bullet.gif); margin-left:20px;padding-top:4px }
#mainContent p { padding-bottom:15px;padding-top:5px; font-size:11px; line-height:17px; }
strong {font-weight: bold;}

/* navigation*/
#nav {width: 228px;	height: 22px;background: url(../images/navigation.gif);}
#nav li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#nav li, #nav a {height: 22px; display: block; text-decoration:none;}
#nav span {visibility:hidden}
#portfolio {left: 0px; width: 76px;}
#resume{left: 76px; width: 76px;}
#about {left: 152px; width: 76px;}
#contact {left: 228px; width: 76px;}
#portfolio a:hover { background: transparent url(../images/navigation.gif) 0px -22px no-repeat;}
#resume a:hover { background: transparent url(../images/navigation.gif)  -76px -22px no-repeat;}
#about a:hover { background: transparent url(../images/navigation.gif) -152px -22px no-repeat;}
#contact a:hover { background: transparent url(../images/navigation.gif)  -228px -22px no-repeat;}

#theme {width:72px; height:24px; background: url(../images/themeNav.gif); margin:0; padding:0;}
#theme li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#theme li, #theme a {height:24px; display:block; text-decoration:none;}

#gradient {left: 0px; width: 24px;}
#b52 {left: 24px; width: 24px;}
#concrete {left: 48px; width: 24px;}

#gradient a:hover {	background: transparent url(../images/themeNav.gif) no-repeat 0px -24px;}
#b52 a:hover { background: transparent url(../images/themeNav.gif)  -24px -24px no-repeat;}
#concrete a:hover {background: transparent url(../images/themeNav.gif) no-repeat -48px -24px;}

#portfolioNav {width:450px;	height: 74px;background: url(../images/portfolioNav.gif);margin:0; padding:0;}
#portfolioNav li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}
#portfolioNav li, #portfolioNav a {height: 74px; display: block; text-decoration:none;}
#portfolioNav span {visibility:hidden}
#websites {left: 0px; width: 113px;}
#logos{left: 113px; width: 113px;}
#print {left: 226px; width: 111px;}
#illustrations {left: 341px; width: 113px;}
#websites a:hover, .websitesSelected { background: transparent url(../images/portfolioNav.gif) 0px -74px no-repeat;}
#logos a:hover, .logoSelected { background: transparent url(../images/portfolioNav.gif)  -113px -74px no-repeat;}
#print a:hover, .printSelected { background: transparent url(../images/portfolioNav.gif)  -226px -74px no-repeat;}
#illustrations a:hover, .illustrationsSelected { background: transparent url(../images/portfolioNav.gif) -341px -74px no-repeat;}

#pContainer{width:450px;height:74px;left:  180px;margin: 0px;padding: 0px 0px 20px;	position: relative;}

/*  end navigation*/

/* Main Structure*/
#container {width: 850px;margin: 0 auto; text-align: left;background:#1e1e1e; border:solid 2px #333;}
#header {background: #000000 url(../images/header_canvas.jpg) repeat-x top;	padding: 0px;height:150px;width: 850px;padding:0px;	margin: 0px;}
#header span{ visibility:hidden}
#mainContent {padding: 60px 20px 0px;}
#logoContainer{width:140px; position:relative; top:20px; margin-left:20px;}
.clear{clear: both;}
#columnRight{float: right; width:320px; margin-right:10px; }
#columnAbout{float: right; width:250px; margin-right:10px;} 
#columnLinkedIn{float: left;} 
#columnFacebook{float: left;margin-left:80px;margin-right: 20px;}
#columnLeft{float: left; width:440px; margin-right:10px;}
#navContainer{width:450px;height:30px; top:48px;margin: 0px 0px 20px 20px;padding: 0;position: relative;}

#tContainer{width:72px;	height:24px;top:10px;margin: 0px 0px 0px 0px;padding: 0;position: relative;	float: right;
}
#tContainer p{color:#666666;font-size: 10px;}
#recentWork{margin:0px;	padding:0px;width:810px;height: 180px;background: #999999;}

/* Home Containers*/
#homeAbout{width:250px; height:220px;float:left; margin: 10px 0px 0px 0px;}
#homeSkills{width:250px; height:220px;float:left;margin: 10px 0px 0px 30px;}
#homeContact{width:250px; height:220px;float:right;margin: 10px 0px 0px 0px;}
#homeRecentContainer{float:left;width:810px; height:215px;}
#homeASKContainer{width:810px; margin:auto;}
.homeRight{margin-bottom:5px;  width:340px; float:left; clear:none;}
.homeRight  a img {border: 5px solid #555;}
.homeRight  a:hover img{border: 5px solid #cbe584;}

.homefolioLeft{margin-bottom:5px;  width:380px; float:left; clear:none;}
.homefolioLeft  a img {border: 5px solid #555;}
.homefolioLeft  a:hover img{border: 5px solid #cbe584;}

.homefolioRight{margin-bottom:5px;float:right; width:380px; }
.homefolioRight  a img {border: 5px solid #555;  }
.homefolioRight  a:hover img{border: 5px solid #cbe584;}

.folioContent {	background:#2d2e2c;	width:380px;margin-bottom:8px;padding: 4px 0px 7px 10px;}
#mainContent .folioContent p{ padding-bottom:0px; font-size:10px;}

#footer {padding: 0; background:#000;background: url(../images/footer_bg.jpg) no-repeat top;width:850px; height:80px;}
ul#footerNav{margin:0;padding: 40px 0px 0px 0px;font-size:10px;}
#footerNav li{display: inline;	list-style-type: none; margin-right:-5px;}
#footerNav a {padding: 3px 2px 3px 3px;}
#footerNav a:link, #footerNav a:visited{color:#666;text-decoration: underline;}
#footerNav a:hover{color: #b8ce7b;text-decoration: none;}

#footer p {	margin: 0;padding: 8px 0px 4px 20px;color:#666;	font-size:10px;}
/* Main Content Image Styles */
.displayCenter {display:block; margin-left:auto; text-align:center; margin-right:auto; }
.displayLeft {float:left; padding:8px; }
.displayRight {display:block; float:right;padding:8px; }
.viewResume{padding-top:10px;}


/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{position: relative;z-index: 0;}

.thumbnail:hover{background-color: transparent;z-index: 50;}

.thumbnail span{ /*CSS for enlarged image*/position: absolute;background-color: #fff;padding: 5px;left: -1000px;border: 1px solid #000;visibility: hidden;color: black;text-decoration: none;}

.thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 60px; /*position where enlarged image should offset horizontally */}

.contactForm div { clear:left; padding-bottom: 0.6em; }
.contactForm label { float:left; width:80px;text-align:right; margin-right:12px; }
input.text, textarea {	padding:3px;color:#c3d1b1;	width:240px;background: #2a2a2a url(../images/inputBg.gif) repeat-x;border-top: 1px solid #1b1b1b;border-right: 1px solid #424242;border-bottom: 1px solid #424242;
	border-left: 1px solid #1b1b1b;}
.contactForm .btn{color:#333;border:1px solid #999;	padding:5px;font-size:12px;	margin-left:94px;background: #1e1e1e url(../images/button_bg.gif) repeat-x center;}
.required {color:#c3d1b1;}