/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

body {
	font: 13px Helmet, Freesans, sans-serif;
	background-color: #F9F9F9;
	color: #314C5B;
	font-size: 1em;
	line-height: 1.4em;
	font-family: 'Source Sans Pro', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
	font-weight: 400;
}

p {
	margin-bottom: 1em;
}



header h1, header h2 {
	font-weight: 600;
	font-size: 1.1em;
	line-height: 1.2em;;
	margin: 0;
	padding: 0;
}

header h2 {
	font-weight: 300;
}

h1 {
	font-weight: 300;
	font-size: 2em;
	line-height: 2em;
	padding-bottom: 0.4em;
	padding-top: 0.2em;
}

h2 {
	font-weight: 600;
	font-size: 1.3em;
	line-height: 1.4em;
	padding-bottom: 0.4em;
	padding-top: 0.4em;
}

h2 a.icon.external {	
	background: url(../img/icon-external.png) no-repeat 5px 10px; 
}

a, a:active, a:visited, a:hover {
	text-decoration: none;
	color: #314C5B;
	font-weight: 600;
}

a.icon {
	padding-left: 1.2em;
}

a.icon.small 	{	display: block; padding-left: 1.5em; }
a.icon.small.location {	background: url(../img/icon-small-location.png) no-repeat 1px 3px; }
a.icon.small.mail	 {	background: url(../img/icon-small-contact.png) no-repeat 1px 6px; }
a.icon.small.phone	 {	background: url(../img/icon-small-phone.png) no-repeat 2px 4px; }

a.icon.mail		 {	background: url(../img/icon-mail.png) no-repeat 2px 6px; }
a.icon.file		 {	background: url(../img/icon-file.png) no-repeat 3px 5px; }
a.icon.external	 {	background: url(../img/icon-external.png) no-repeat 3px 5px; }


a:hover {
	border-bottom: 1px dotted #314C5B;
}

.content {
	width: 960px;
	margin: 0 auto;
}

.right {
	padding-left: 240px;
}

.left {
	float: left;
	width: 220px;
	text-align: right;
}



/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 



header {
	display: block;
	height: 14.5em;
	background-color: #314C5B;
	color: #EDF2F4;
}

header .contact {
	position: absolute;
	top: 85px;
	left: 50%;
	margin-left: 200px;
	line-height: 1em;
}

header aside a,
header aside a:visited  {
	font-size: 0.75em;
	line-height: 1.5em;
	color: #EDF2F4;
	font-weight: 300;
}

header aside a:hover {
	font-weight: 300;
	color: #EDF2F4;
	border-bottom: 1px dotted #EDF2F4;
}


section {
	padding-top: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid #DDD;
}

section#about {
	padding-top: 3.2em;
}

article p {
	width: 900px;
}

/*
article h1:before {
	content: "/ ";
}

article h1 {
	padding-left: 220px !important;
}
*/


hgroup {
	padding-top: 4.6em;
	height: 14em;
}

#profile {
	position: absolute;
	left: 50%;
	top: 45px;
	margin-left: -400px;
}

nav {
	position: absolute;
	top: 230px;
	display: block;
	height: 35px;
	width: 100%;
	background: white;
	border-bottom: 1px solid #CCC;
	-webkit-box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.2);
	-moz-box-shadow:    0px 2px 3px rgba(100, 100, 100, 0.2);
	box-shadow:         0px 2px 3px rgba(100, 100, 100, 0.2);
}

nav ul { display: block; }

nav ul li {
	display: inline-block;
}

nav a {
	color: #314C5B;
	font-weight: 400;
	font-size: 0.75em;
	text-decoration: none;
	display: block;
	padding: 7px 10px 5px 10px;
	border-bottom: 3px white;
	line-height: 1.6em;
}

nav .current a, nav .current a:hover {
	font-weight: 600;
	border-bottom: 3px solid #314C5B;
}

nav a:hover {
	border-bottom: 3px solid #314C5B;
	font-weight: 400;
}

nav #nametag {
	font-weight: 600;
	font-size: 0.9em;
	width: 240px;
}

nav #nametag span {	display: none; }

footer {
	font-size: 0.75em;
	padding-bottom: 3em;
	padding-top: 1em;
}


/* Media queries!
-------------------------------------------------------------------------------*/

@media only screen and (max-width: 960px) {
	.left, .right {	clear: both; padding: 0; text-align: left; }
	p.left {	margin: 0; }
	nav {	display: none; }
	header { 	text-align: center; height: auto; }
	header .contact { 	position: relative; top: auto; left: auto; margin-left: 0; }
	#profile {	position: relative; margin: 0; left: auto; clear: both; top: auto; margin-top: 20px; margin-bottom: 20px; }
	hgroup { height: auto; padding: 0; margin: 0; text-align: center; clear: both; }
	hgroup h1, hgroup h2 {	text-align: center; }
	aside	{ clear: both; padding: 0; margin: 0; text-align: left; display: inline-table; width: 140px; margin-top: 30px; margin-bottom: 30px; }
	h1.right { padding-bottom: 20px; }
	h2.right { padding-bottom: 20px; }
	.content {	width: 100%; padding-left: 10px; padding-right: 10px; }
	section { padding-top: 20px; padding-bottom: 20px; }
	section#about { padding-top: 20px; }
	article p { width: 100%; }
}