@charset "UTF-8";

/*
	janpingel.com single page version
	Screen Stylesheet
*/

/* =Defaults */
a,a:link,a:visited {text-decoration: none;}
h1,h2,h3,h4,h5,h6,pre,code,p {font-size: 1em;}
hr,ul,li,dl,dd,dt,dl,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,label,select {margin: 0; padding: 0;}
a img,a:link img,a:visited img,fieldset {border: none;}
input,textarea{margin:0;}
address {font-style: normal;}

/* =Links */
a, a:link, a:visited { color: #005b88; text-decoration: none; padding: 0 1px; border-bottom: 2px solid #f4f4f4; -webkit-transition: background-color .5s, color .5s; }
a:active, a:hover, a:focus, #archive div.pages a.selected
{ color: #fff; background: #006699; text-decoration: none; border-color: #fff; }
#footer a, #footer a:link, #footer a:visited { color: #fff; border-color: #262626; }
#footer a:hover, #footer a:focus { border-color: #111; }
h2 a:visited { color: inherit; }

/* =Text */
p { margin: 0 0 1.5em; }
abbr { border: 0; }
abbr[title="and"] {	font: italic normal normal 1em/1.5 "Palatino Linotype", Palatino, Baskerville, Constantia, "Book Antiqua", "URW Palladio L", serif; }
strong { font-weight: bold; }
em { font-style: italic; }
span.more { margin: 1.5em 0 0; display: block; text-align: right; }
div.note { margin: 1.5em 0; }
em.req { color: red; font-weight: bold; }

/* =Images */
img { vertical-align: bottom; }
img.left, img.right, img.center {

}
img.left { float: left; margin: 0 1.5em 0.5em -36.7%; }
img.right { float: right; margin: 0 0 0.5em 1.5em; }

/* =Headers */
h2 {
	font-size: 1em;
	margin: 0;
	font-weight: normal;
	color: #222;
	font-size: 1.25em; /* 20px */
	line-height: 1.2;
	margin: 0 0 1.25em 0;
}

/* =Lists */
ul {
	padding: 0 0 0 1em;
	margin: 1.5em 0 0;
	list-style: square;
}

/* =Forms */
input, textarea { font: normal 0.75em/1.5 "Lucida Grande", Helvetica, Arial, sans-serif; }
input[type=text], textarea { padding: 3px; border: 1px solid #999; }
input[type=text] { width: 97.14%; } /* 97.14% = 254.5px */
input[type=submit] {
	background: #006699;
	border: 0;
	color: #fff;
	height: 1.8125em;
	padding: 0.1875em 0.5em 0.3125em;
	font: italic normal normal 1em/1.5 Georgia, "Times New Roman", Times, serif;
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
}
label { font: normal 100%/1.5 Georgia, "Times New Roman", Times, serif; font-variant: small-caps; text-transform: lowercase; }
textarea { height: 15.5em; width: 98.64%; } /* 98.64% = 576px */
form div {
	position: relative;
	width: 45%;
	float: left;
	margin: 0 0 1.5em;
}
form div:nth-child(2n) { float: right; }
form div.even { float: right; }
form div.textarea { clear: both; width: 100%; }
form div.submit { margin: -0.75em 0 1.5em; clear: both; width: 100%; }
form div.submit label { vertical-align: middle;}
input[type=submit]:after {
	content: " \203a";
	font-style: normal;
}

/* =Layout */
hr { border: 0; height: 1.5em; }
#content hr { 
    height: 0;
    padding: 1px 0 0; /* because gecko borks the height calc */
    margin: 2.8125em 0;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
}
html {
	background: #111; 
	font: normal 16px/1.5 Georgia, "Times New Roman", Times, serif;
}
body {	
	min-width: 896px;
	border-top: 3.625em #222 solid;
	background: #fff;
	color: #333;
	padding: 0 3em;
}
#header, #content div.wrapper, #footer div.wrapper {
    min-width: 896px;
	max-width: 56em;
	margin: 0 auto;
}
#header {
    text-transform: lowercase;
    font-variant: small-caps;
    letter-spacing: 1px;
	color: #fff;
	position: relative;
	margin: -2.5625em auto 0;
}
#content { margin: 2.5em auto 1.5em; }
#content div.wrapper>div, #footer div.wrapper>div  {
	padding: 0 0 0 27%;
	position: relative;
}
#footer {
	margin: 0 -3em 1.3125em;
	background: #111;
	color: #aaa;
}

/* =Header */
#header a { border: 0; }
#title, #title em { font-style: normal; font-weight: normal; }
#title abbr { font-size: 75%; }
#navigation {
	position: absolute;
	top: -0.125em;
	right: 0;
	list-style: none;
	margin: 0;
}
#navigation li { margin: 0 0 0 0.75em; float: left; display: inline; }
#navigation a {
	color: #fff;
	text-decoration: none;
	display: block;
	padding: 0.125em 0.5em;
	-webkit-transition: background-color .5s;
}
#navigation a:hover, #navigationa a:focus, #navigation .selected a { text-decoration: none; color: #fff; background: #006699; }
#navigation a span { border-bottom: 2px solid #333; -webkit-transition: border-color .5s; }
#navigation a:hover span, #navigationa a:focus span, #navigation .selected a span { border-color: #006699; }

/* =Content */
#content h2, #contact div.vcard, #employment span.period, #education span.period { position: absolute; right: 78.1%; }
#contact div.vcard { top: 1.5em; text-align: right; }
#contact div.adr { margin: 1.5em 0; }
#contact div.tel, #employment div, #education div, #skills dd { margin: 0 0 1.5em; }
#contact a.fn, #contact div.tel span.type { display: none; }
#work { margin-bottom: -2.25em; }
#work ul { list-style: none; margin: 0; padding: 0; }
#work li { float: left; margin: 0 0 2.25em; width: 47%; }
#work li:nth-child(2n) { float: right; }
#work li.even { float: right; }
#work strong { font-style: italic; font-weight: normal; }
#work ul a { border: 0; background: inherit; }
#work ul a:hover img, #work ul a:focus img { border-color: #006699; }
#work a img { border: 3px solid #333; margin: 0 0 0.75em; }
#skills div { float: left; width: 50%; }
#skills ul { margin: 0 0 0 -1em; font-style: normal; }
#examples h2 { text-align: right; }
#references h3, #employment h3, #skills h3, #education h3, #skills dt { font-weight: normal; font-style: italic; }
#references div { float: left; width: 50%; margin: 0 0 1.5em; }

/* =Footer */
#footer div.wrapper { font-size: 0.875em; }
#footer h2 { font-size: 1em; line-height: 1.5; color: #aaa; position: absolute; right: 78.1%; }
#footer p { margin: 0; }
#footer div.vcard { position: static; text-align: left; margin: 1.5em 0 0; }
#footer div.adr { float: left; margin: 0 3em 0 0; }
body.resume #copyright { margin: 1.5em 0 3em; }

/* =Clears */
#content:after, form.rows:after, #work ul:after, #references:after, #skills:after 
{ content: "."; display: block; overflow: hidden; clear: both; visibility: hidden; height: 0; }