/* @override http://localhost:8888/johnbloomfield/css/style.css */

/** CSS - John Bloomfield **/

/* Reset */
* { outline: 0; list-style: none; margin: 0; padding: 0; border: 0; }

/* Layout */
html { height: 100%; }
body { height: 100%; background: #181818 url(../img/bg-body.jpg) no-repeat center top; font-family: 'Lucida Grande', Arial, Sans-Serif; }
#page { width: 954px; min-width: 954px; height: auto !important; height: 100%; min-height: 100%; margin: 0 auto; position: relative; }
#container { width: 570px; margin: 0 auto; }
h2 { font-size: 16px; color: #999; padding: 5px; text-shadow: 1px 1px #fff; }
table { width: 100%; }
table td { width: 33%; text-align: left; }
	
	#hd { width: 490px; height: 59px; background: url(../img/bg-hd.png) no-repeat left top; padding: 75px 0 0 80px; }
	#hd #job { font-size: 10px; color: #fff; margin-top: 34px; }
	#hd a, #hd a:link, #hd a:active, #hd a:visited { color: #fff; text-decoration: underline; }
	#hd a:hover, #hd a:focus { color: #e2e2e2; }

	#nav { width: 508px; height: 27px; background: url(../img/bg-nav.png) no-repeat left top; padding: 4px 0 0 70px; }
	#nav li { float: left; margin-right: 5px; }
	#nav a, #nav a:visited, #nav a:active { display: block; font-size: 12px; color: #4f7a01; text-shadow: 1px 1px #9df003; text-decoration: none; padding: 4px 10px 5px; }
	#nav a:hover, #nav a:focus { color: #679f02; }
	.social #nav li#nav-social a, .about #nav li#nav-about a, .contact #nav li#nav-contact a { color: #3a5901; text-shadow: 1px 1px #9df003; }

	#con #con-top { width: 570px; height: 12px; background: url(../img/bg-con-top.png) no-repeat left top; }
	#con #con-mid { width: 570px; background: url(../img/bg-con-mid.png) repeat-y left top; overflow: auto;  padding-bottom: 8px; }
	#con-mid #content { width: 450px; margin-left: 60px; overflow: hidden; }
		
		/* Social */
		#social { overflow: auto; padding: 0 15px; }
		#social a .tooltip { position: absolute; left: 0; top: 0; width: 141px; height: 34px; background: url(../img/bg-tooltip.png) no-repeat left top; font-size: 15px; padding: 9px 0 0 15px; opacity: 0.8; color: #fff; display: none; }
		#social .twitter a .tooltip { left: 110px; top: 228px; }
		#social .facebook a .tooltip { left: 180px; top: 228px; }
		#social .delicious a .tooltip { left: 110px; top: 285px; }
		#social .flickr a .tooltip { left: 110px; top: 345px; }
		#social .linkedin a .tooltip { left: 180px; top: 345px; }
		#social .digg a .tooltip { left: 180px; top: 405px; }
		#social #icons { width: 155px; height: 239px; float: left; background: url(../img/bg-icontray.gif) no-repeat left top; padding: 18px 0 0 10px; }
		#social .icon { display: block; float: left; margin: 0 4px 5px 0; }
		#social .icon a { display: block; width: 68px; height: 68px; text-decoration: none; background: url(../img/social-sprite-large.png) no-repeat left top; }
		#social .facebook a { background-position: -68px -68px; }
		#social .delicious a { background-position: -68px 0; }
		#social .flickr a { background-position: -68px -136px; }
		#social .linkedin a { background-position: 0 -136px; }
		#social .digg a { background-position: 0 -68px; }
		#social #dropzone { width: 241px; height: 257px; background: url(../img/bg-dropzone-sprite.gif) no-repeat 0 0; float: left; margin-left: 14px; }
		#social #dropzone.hover { background-position: -241px 0; }
		
		/* About */
		#about { overflow: auto; }
		#about h2 { padding-left: 15px; }
		#about a, #about a:visited, #about a:active { color: #333; }
		#about a:hover, #about a:focus { color: #666; }
		#about .item { display: block; height: 76px; background: #f3f2f3; border-top: 1px solid #fff; border-bottom: 1px solid #dddbdb; }
		#about .badge { display: block; width: 53px; height: 54px; float: left; margin: 12px 15px 0; }
		#about .title { margin-top: 20px; text-shadow: 0 1px #fff; color: #3b3b3b; font-size: 16px; }
		#about .info { color: #3b3b3b; font-size: 11px; padding-right: 20px; }
		#about .about-me { background: #f3f2f3; border-top: 1px solid #fff; border-bottom: 1px solid #dddbdb; font-size: 11px; color: #3b3b3b; padding: 10px 40px 10px 83px; }
		#about #projects { background: #f3f2f3; border-top: 1px solid #fff; border-bottom: 1px solid #dddbdb; font-size: 11px; color: #3b3b3b; padding: 10px 40px 10px 83px;  }
		
		
		/* Contact */
		#contact { overflow: auto; }
		#contact a, #contact a:link, #contact a:active, #contact a:visited { color: #999; text-decoration: underline; }
		#contact a:hover, #contact a:focus { color: #666; }
		#contact h2 { padding-left: 15px; }
		#contact .badge { display: block; width: 53px; height: 54px; float: left; margin: 12px 20px 0 28px; }
		#contact .item { display: block; height: 76px; background: #f3f2f3; border-top: 1px solid #fff; border-bottom: 1px solid #dddbdb; }
		#contact .title { margin-top: 20px; text-shadow: 0 1px #fff; color: #3b3b3b; font-size: 16px; }
		#contact .info { color: #3b3b3b; font-size: 11px; padding-right: 20px; }
		#contact #skype .badge { margin: 20px 10px 0 20px; width: 70px; height: 31px; }
		
	#con #con-btm { width: 385px; height: 80px; background: url(../img/bg-con-btm.png) no-repeat left top; color: #999; font-size: 10px; padding: 6px 0 0 185px; text-shadow: 1px 1px #e9e9e9; clear: both; }
	#con #con-btm a { color: #999; }
	#con #con-btm a:hover { color: #666; }