/*
	#	This is Version 3 (CV Edition) of the Soul-Scape.com v6.Charcoal stylesheet
	#	Copyright 2008 Ben Jenkinson
	#	http://benjenkinson.com
	#	contact at benjenkinson dot com
	*/

	/*
	#	Icons used for the navigation bar are Sanscons from:
	#		http://somerandomdude.com/projects/sanscons/
	#	licensed under the Creative Commons Attribution-Share Alike 3.0 license
	#		http://creativecommons.org/licenses/by-sa/3.0/us/
	*/

	@font-face {
		font-family: "Junction";
		src: url("/type/Junction 02.otf") format("opentype");}
	
	html, body {
	    background: #222; }

	body {
	    font: 75% "Helvetica Neue", Helvetica, Arial, sans-serif;
	    color: #333;}

	strong{
	    font-weight: bold;}

	em {
		font-style: italic;}

	small {
		margin:0px 2px;
		color:#888;}

	a:link,
	a:visited {
		color: #0063C8;
		border-bottom:1px solid #fff;
		text-decoration: none;}
	a:hover,
	a:active {
		border-color:#0063C8;}

	abbr, acronym {border:none;}
	abbr[title], acronym[title] {border-bottom:1px dotted #888;}
	abbr[title]:hover, acronym[title]:hover {cursor:help !important;}
	a:hover abbr, a:hover acronym {border:none;}

	.clear {
		clear: both;
		display: block;
		overflow: hidden;
		width: 0;
		height: 0;}

	img {
		color:#888;
		background:#fff url(../img/icons/loading.gif) 50% 50% no-repeat;}
	p img {
		display:block;
		margin-bottom:7px;}

	#top {
		position:absolute;
		top:0px;
		left:0px;}

	#container {
		float:left;
		display:block;
		width:540px;
		margin: 50px 0px 20px 50px;
		background:#fefefe;
		padding-bottom:20px;
		border-right:5px solid #000;
		border-bottom:5px solid #000;}

	#navigation {
		position:fixed;
		top:150px;
		left:630px;
		float:left;
		color:#111;}
	#navigation ul {
		padding:0px;
		margin-bottom:1.2em;}
	#navigation li {
		padding-left:20px;}
	li.about-me {
		background:url(../img/icons/about-me.gif) 0px 50% no-repeat;}
	li.skills {
		background:url(../img/icons/skills.gif) 0px 50% no-repeat;}
	li.education {
		background:url(../img/icons/education.gif) 0px 50% no-repeat;}
	li.portfolio {
		background:url(../img/icons/experience.gif) 0px 50% no-repeat;}
	li.contact-me {
		background:url(../img/icons/contact-me.gif) 0px 50% no-repeat;}
	li.top {
		background:url(../img/icons/top.gif) 0px 50% no-repeat;}
	#navigation a:link,
	#navigation a:visited{
		color: #777;
		border:none;}
	#navigation a:hover,
	#navigation a:active{
		color:#999;
		border-bottom:1px solid #999;}

	#header {
		padding:20px 15px 15px 20px;
		background:#ee3a44;
		color:#fff;
		font-family:"Junction", "Helvetica", "Helvetica Neue", 'Arial', serif;
		font-size:32px;
		margin-bottom:8px;
		text-shadow: 1px 1px 1px #97252B;}
	#header a {
		color:#fff;}
	h1 {
		font-weight:normal;}
	h2 {
		padding-top:5px;
		font-size:20px;}
	#photo {
		float:right;
		position:relative;
		top:20px;
		right:20px;
		padding:2px;
		border-top:1px solid #ddd;
		border-right:1px solid #aaa;
		border-bottom:1px solid #aaa;
		border-left:1px solid #ddd;}


	#hcard h3 span {
		background:url(../img/icons/hcard.png) 0px 50% no-repeat;
		padding-left:18px;
		margin-left:2px;}

	#hcard-Ben-Jenkinson {
		margin:20px 0px 20px 0px;
		padding:0px 20px;}
	.fn {
		background:url(../img/icons/fn.gif) 0px 50% no-repeat;
		padding-left:20px;}
	.email {
		margin-left:20px;}
	#hcard-Ben-Jenkinson .org {
		display:none;}
	#hcard-Ben-Jenkinson .adr {
		background:url(../img/icons/adr.gif) 0px 2px no-repeat;
		padding-left:20px;
		margin-top:9px;}
	#hcard-Ben-Jenkinson .country-name {
		display:block;}
	.tel,
	.mobile {
		margin-top:9px;
		background:url(../img/icons/tel-mobile.gif) 0px 50% no-repeat;
		padding-left:20px;}
	.tel#home {
		margin-top:0px;
		background:url(../img/icons/tel-home.gif) 0px 50% no-repeat;
		padding-left:20px;}
	.mobile {
		margin-top:0px;
		padding-left:16px;}

	.content {
		font-size: 1.2em;
		line-height: 1.6em;}

	p, h3, h4, h5, h6, ul, dl {
		padding:0px 20px 16px 20px;}

	#container ul {
		padding-left:43px;}
	#container li {
		list-style-type:disc;}

	h3 {
		font-family:Georgia, serif;
		font-size:1.3em;
		line-height:1.1em;
		border-bottom:1px solid #ddd;
		margin-bottom:16px;
		padding-bottom:8px;
		padding-top:16px;
		margin-top:8px;}
	#header h3 {
		display:none;}

	h4 {
		font-weight:bold;
		font-size:1.1em;
		line-height:1.1em;}
	h4 span {
		font-weight:normal;
		font-size:0.9em;
		color:#888;}
	h5 {
		font-weight:normal;
		font-size:1em;
		line-height:1em;
		font-style:italic;
		color:#888;}
	h6 strong {
		font-size:1.1em;}

	hr {
		display:none;
		visibility:none;
		border:none;}

	a.visit-site:link,
	a.visit-site:visited {
		margin-left:3px;
		color: #375137;
		background:#E2F9E3 url(../img/icons/visit-link.gif) right 50% no-repeat;
		padding:3px 20px 3px 5px;
		border:1px solid #E2F9E3;
		border-color: #ADA;
		white-space:nowrap;}
	a.visit-site:hover,
	a.visit-site:active {
		color:#182A18;
		border-color: #8CA48C;}

	#elsewhere, #promo {
		background:#efefef;
		border-top:1px solid #ddd;
		border-bottom:1px solid #ddd;
		padding:16px 20px 16px 20px;}
	#elsewhere span {
		float:left;
		line-height:32px;
		margin:0px 6px 0px 0px;
		color:#666;
		font-size:14px;
		text-shadow: 0px 1px 1px #fff;}
	#elsewhere ul {
		padding:0px;
		margin:0px;
		list-style-type:none;}
	#elsewhere ul li {
		float:right;
		width:30px;
		height:30px;
		margin:0px 6px 0px 0px;
		display:inline-block;}
	#elsewhere ul li a {
		text-indent:-9999px;
		overflow:hidden;
		display:block;
		width:32px;
		height:32px;
		border:0px;}


	#elsewhere .facebook a {background:url(/img/icons/social/facebook_32.png) 0px 0px no-repeat;}
	#elsewhere .skype a {background:url(/img/icons/social/skype_32.png) 0px 0px no-repeat;}
	#elsewhere .lastfm a {background:url(/img/icons/social/lastfm_32.png) 0px 0px no-repeat;}
	#elsewhere .twitter a {background:url(/img/icons/social/twitter_32.png) 0px 0px no-repeat;}
	#elsewhere .linkedin a {background:url(/img/icons/social/linkedin_32.png) 0px 0px no-repeat;}
	#elsewhere .vimeo a {background:url(/img/icons/social/vimeo_32.png) 0px 0px no-repeat;}
	#elsewhere .flickr a {background:url(/img/icons/social/flickr_32.png) 0px 0px no-repeat;}
	#elsewhere .readernaut a {background:url(/img/icons/social/readernaut_32.png) 0px 0px no-repeat;}



	#footer {
		display:block;
		width:540px;
		text-align:center;
		font-size:12px;
		margin-left:50px;
		margin-bottom:80px;
		clear:left;
		color:#111;
		border:0px;
		text-shadow:0px 1px 1px #333;}
	#footer a {
		color:#111;
		border:0px;}
	#footer a:hover {
		color:#000;
		text-shadow:0px 1px 1px #333;}


	/*
	#	Fixes for various Internet Explorer versions:  they don't like floated things with margins, and they don't like position:fixed;
	#	Oh, and they occasionally double margins for no apparent reason... if only everyone would upgrade to Chrome, Firefox or Safari, heck anything but IE.
	*/

	#container {
		float:left;
		*float:left;
		_float:left;
		_margin-left:25px;}
	#navigation {
		_position:absolute;}

	/*
	#	If you're interested enough to have perused this far through my code, I'd just like to say thank you.
	#	And then add a shameless plug: if you like this, hire me! I need an internship!
	#	I know it's not the most amazing website in the world, but I'm really eager to have to opportunity to learn and get better.
	#	contact at benjenkinson dot com
	*/