html, body {
	margin: 0;
	padding: 0;}

body {
	background: #fff;
	color: #363636; 
	font-family: calluna, corbel, arial, helvetica;
	font-size: 110%;
	line-height: 160%;}
	
*::selection {
	background: #fff;
	color: #000; }

 *::-moz-selection {
	background: #fff none repeat scroll 0 0;
	color: #000; }
	
img {border: 0;	display: block;}
fieldset {border: 0; padding: 0;}
address {font-style: normal;}
sup {vertical-align: top; font-size: 0.6em;}

h1, h2, h3, h4 {
	color: #000;
	font-family: Ubuntu, georgia, arial, helvetica;
	letter-spacing: 0.1em;
	margin-bottom: 0.1em;
	text-transform: uppercase;}
	
h1 {
	color: #e5e5e5;
	font-size: 1em;
	line-height: 0;
	margin-left: -9999px}

h2 {
	border-bottom: 1px #e5e5e5 solid;
	color: #707070;
	font-size: 1.2em;
	margin-bottom: 0.6em;}
	
h3 {
	color: #707070;
	font-size: 1em;}
	
p {
	padding: 0;
	margin: 0 0 0 2em;}

a {
	color: #f14a29;}

	a:link {
		}
	a:visited {
		}
	a:hover {
		text-decoration: none;}
	a:active {
		color: #000;}
		
.rechts {float: right;}
.links {float: left;}
.marginr {margin-right: 20px;}
.marginl {margin-left: 20px;}
.prechts {float: right; margin-left: 20px; margin-bottom: 20px;}
.plinks {float: left; margin-right: 20px; margin-bottom: 20px;}
.clear {clear: both;}

.datum {
	color: #c2c2c2; font-size: 0.8em;}
	
.readmore {float: right;}

#wrapper-header {
	background: #e5e5e5;
	overflow: hidden;
	padding: 1em 0;
	width: 100%;}
	
.header-doc {
	margin: 0 auto;
	width: 960px;}

#name {
	float: left;
	font-size: 1.4em;
	font-weight: bold;
	font-family: Ubuntu, georgia, arial, helvetica;
	margin: 0;
	padding: 0.4em 0;
	text-transform: uppercase;}

	#name span {
		font-weight: normal;
		opacity: 0.5;
		filter: alpha(opacity=50);}
	
	#name a {
		color: #fff;
		text-decoration: none; }

/* nav */
.nav-button {
	display: none; }

.nav {
	float: right;
	font-size: 1em;
	padding: 0.4em 0;}
	
	.nav ul {
		margin: 0;
		padding: 0;}
		
	.nav li {
		display: inline-block;
		list-style: none;
		margin: 0;
		padding: 0;}
		
	.nav a {
		color: #707070;
		line-height: 100%;
		padding: 3px 12px 5px 12px;
		text-decoration: none;}
	
		.nav a:hover {
			color: #000;}
		
		.nav .selected a {
			background: #707070;
			color: #fff;
			
			-webkit-border-radius: 5px;
			border-radius: 5px;
			text-shadow: 0px 0px 0px #000;
	        filter: dropshadow(color=#000, offx=0, offy=0);}
	        
#wrapper {
	margin: 1em auto;
	width: 960px;}

.footer-doc { 
	clear: both;
	color: #7c7c7c;
	float: left;
	margin: 2em auto 2em auto;
	padding: 2em 0 2em 0;
	width: 100%;}
	
	.footer-doc span {
		float: left;
		margin: 0 1em 0 0; }
	
	.footer-doc a {
		color: #7c7c7c;
		text-decoration: none; }
	
	.footer-doc img {
		float: left;
		margin: -0.5em 1em 0 0; }
		
	.footer-doc .footernav {
		float: right;}
		
/* personal */
#wrapper-personal {
	background: #f2f2f2;
	overflow: hidden;
	padding: 0.4em 0;
	text-align: right;
	width: 100%;}
	
	#wrapper-personal p {
		margin: 0 auto;
		padding-right: 12px;
		width: 948px;}
	
	.personalpic {
		border: 2px #e5e5e5 solid;
		float: left;
		margin-right: 1em;}

article.content {
	float: left;
	width: 65%;}
	
aside {
	float: left;
	margin-left: 10%;
	width: 25%;}

	aside h3 {
		color: #707070;
		margin: 1em 0 0 -1em;
		width: 100%; }
	
/*	aside dl.table-display {
		margin: 0 0 1em 0; }
	
	aside .table-display dt {
		clear: both;
		float: left;
		margin: 0;
		width: 25%; }
	
	aside .table-display dd {
		float: left;
		margin: 0; } */
		

/* education + work history */

.education h2, .work_history h2 {
	margin-bottom: 0;}

.education h2 span, .work_history h2 span {
	color: #707070;
	display: block;
	float: left;
	font-size: 0.8em;
	font-weight: normal;
	padding-right: 1em;
	text-align: right;
	width: 10em;}

.education p, .work_history p {
	margin: 0.4em 0 2em 11em;}
	
.now {
	font-size: 0.8em;}
	
/* skills */

.skills section ul {
	list-style: none outside none;
	margin: 0 0 2em 2em;
	padding: 0 0 1em;}

	.skills section li {
		background: url("http://images.vanmarwijk.nl/peter/bullet.gif") 0px 10px no-repeat transparent;
		margin: 0 0 0 1em;
		padding: 0 0 0 1em;}

	span.skills {
		display: inline;
		float: none;
		font-size: 0.6em;
		font-weight: normal;
		text-align: left;
		vertical-align: middle;
		width: auto;}		

	.skills-extra {
		color: #707070;
		float: right;}
		
/* interests */

.interests h3 {
	margin: 0 0 0 2em;}
	
.interests p {
	padding: 0;
	margin: 0 0 1em 2em;}
	
img.interests { 
	border: 1px solid #e5e5e5;
	clear: both;
	float: left;
	margin: 0 1em 1em 2em;}
	
.interests section div {
	overflow: auto;}
	
/* references */
.references aside {
	padding-top: 3em;}
	
/* portfolio */

.portfolio .intro {
	padding: 0;
	margin: 0;}

section.portfolios:first-of-type {
	border-top: 0}

.portfolios {
	clear: both;
	overflow: hidden;
	padding: 20px 0 0 0;}

	.portfolio-visual {
		border: 1px #fff solid;
		display: block;
		float: right;
		height: 231px;
		line-height: 140px;
		margin: 20px 0 0 0;
		text-align: center;
		text-decoration: none;
		width: 318px;
		
				
		-webkit-box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 0 40px 10px rgba(0, 0, 0, 0.2);}
	
	.portfolio-visual:hover {
		-webkit-box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.0);
		box-shadow: inset 0 0 40px 10px rgba(128, 128, 128, 0.0);}
		
	.portfolio-visual span {
		display: none;}
		
.portfolio-content {
	width: 100%;}

	.portfolio-content p {
		float: left;
		min-height: 300px;
		padding-right: 2em;
		width: 55%;}
		
	.involvement {
		display: block;
		float: right;
		font-weight: bold;
		margin: 10px 0 10px 0;
		width: 320px;}
	
	.portfolio-content ul {
		float: right;
		list-style: none;
		margin: 0 0 20px 0;
		padding: 0;
		width: 300px;}

		.portfolio-content ul li {
			background: url(http://images.vanmarwijk.nl/peter/icon-check.png) no-repeat 0 10px;
			padding: 0 0 0 20px;}
			
	.portfoliolink {
		display: block;
		float: left;
		margin: -10px 10px 10px 0;}
		
	.nummer1 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/nti.nl.jpg') no-repeat center -9px;}
	.nummer2 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/polare.nl.jpg') no-repeat center -9px;}
	.nummer3 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/archievenwo2.nl.jpg') no-repeat center -9px;}
	.nummer4 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/velthuiskliniek.nl.jpg') no-repeat center -9px;}
	.nummer5 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/sneeuwhoogte.nl.jpg') no-repeat center -9px;}
	.nummer6 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/missetam.nl.jpg') no-repeat center -9px;}
	.nummer7 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/talens.com.jpg') no-repeat center -9px;}
	.nummer8 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/brand.nl.jpg') no-repeat center -9px;}
	.nummer9 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/xpertclinic.nl.jpg') no-repeat center -9px;}
	.nummer10 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/athenaeum.nl.jpg') no-repeat center -9px;}
	.nummer11 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/amatec.nl.jpg') no-repeat center -9px;}
	.nummer12 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/engeltherm.nl.jpg') no-repeat center -9px;}
	.nummer13 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/carbonartwindsurf.com.jpg') no-repeat center -9px;}
	.nummer14 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/taranakiharcourts.co.nz.jpg') no-repeat center -9px;}
	.nummer15 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/raftingnewzealand.com.jpg') no-repeat center -9px;}
	.nummer16 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/waitomo.org.nz.jpg') no-repeat center -9px;}
	.nummer17 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/deltalloydregatta.org.jpg') no-repeat center -9px;}
	.nummer18 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/grapedistrict.nl.jpg') no-repeat center -9px;}
	.nummer19 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/funda.tv.jpg') no-repeat center -9px;}
	.nummer20 {
		background: #fff url('http://images.vanmarwijk.nl/peter/portfolio/pimpmypudding.nl.jpg') no-repeat center -9px;}
		

/* ==|== media queries ====================================================== */

@media only screen and (max-width : 1023px),
only screen and (max-device-width : 1023px){
.header-doc {
	width: 96%;}

#wrapper {
	margin: 0 auto;
	padding: 0;
	width: 96%;}
	
.footer-doc {
	margin: 20px 0;
	width: 96%;}
	
/* personal */
#wrapper-personal p {
	width: 96%;}

/* portfolio */

	.portfolio-visual {
		float: none;
		position: absolute;
		right: 1em;}

.portfolios {
	min-height: 530px;}
	
	.portfolio-content p {
		padding-right: 380px;
		width: auto;}
	
	.involvement {
		margin-left: 0;
		margin-top: 220px;
		position: absolute;
		right: 1em;
		width: 320px;}


.portfolio-content ul {
	margin: 250px 0 20px 0;
	position: absolute;
	right: 1em;
	width: 320px;}

}

@media only screen and (max-width : 740px),
only screen and (max-device-width : 740px){


	/* Navigation Button
	-------------------------------------------------------- */

	.nav-button {
		background: #f2f2f2 url('http://images.vanmarwijk.nl/peter/menu-icon-large.png') no-repeat center center;
		background-size: 21px, 100%;
		border: 0 none;
		cursor: pointer;
		display: block;
		height: 35px;
		position: absolute;
		right: 1em;
		text-indent: -9999px;
		top: 1.8em;
		width: 50px;
		z-index: 990;

		-webkit-border-radius: 5px;
		border-radius: 5px;}

	.nav-button:hover { 
		background: #707070 url('http://images.vanmarwijk.nl/peter/menu-icon-large.png') no-repeat center center;
		background-size: 21px, 100%;}
		
	.nav-button.open {
		background: #f2f2f2 url('http://images.vanmarwijk.nl/peter/close-icon-large.png') no-repeat center center;
		background-size: 21px, 100%;}

	/* Navigation Bar
	-------------------------------------------------------- */

	.primary-nav {
		clear: both;
		display: block;
		float: none;
		left: 0;
		margin: 0;
		overflow: hidden;
		padding: 0;
		position: absolute;
		top: 1.6em;
		width: 100%;
		z-index: 980;}
			
	.primary-nav li {
		background: #e5e5e5;
		border-bottom: 1px #f2f2f2 solid;
		display: none;
		width: 100%;}
		
	.primary-nav li a {
		display: block;
		width: 100%;
		padding: 10px 1em;}
		
		
		.nav .selected a {
			-webkit-border-radius: 0;
			border-radius: 0;}

		
	.primary-nav > li:first-child {
		border-top: 1px #f2f2f2 solid;
	}

/* Toggle the navigation bar open  */

.primary-nav.open { 
	height: auto; 
	padding-top: 50px;}
	
.primary-nav.open li { 
	display: block; }


/*h2 {
	border-bottom: 0;} */
	
p {
	margin: 0;}
	
#wrapper-header {
	overflow: inherit;
	text-align: left;}
	
#name {
	float: none;}

.nav { 	
	overflow: hidden;
	margin: 0;
	padding: 0;}
		
#wrapper {
	width: 96%;}


article header {
	width: 96%;}
	
.footer-doc {
	text-align: center;}
	
	.footer-doc span {
		float: left;
		width: 100%; }
	
	.footer-doc img {
		display: inline-block;
		float: none;
		margin: 0 10px 0 0; }
		
	.footer-doc .footernav {
		display: block;
		float: none;
		margin: 0 auto;}

	
/* personal */
.personalpic  {
	display: none;}

article.content {
	float: none;
	width: auto;}
	
aside {
	float: none;
	margin-left: 0;
	text-align: center;
	width: auto;}
	
	aside h3 {
		margin-left: 0;}

	
/* education + work history*/

.education h2 span, .work_history h2 span {
	float: none;
	text-align: left;}

.education p, .work_history p {
	margin: 0.4em 0 2em 0;}
	
/* skills */
.skills-extra {
	display: none;}
	
	span.skills {
		white-space: nowrap;}

/* interests */

.interests h3 {
	margin: 0;}
	
.interests p {
	margin: 0 0 1em 0;}

img.interests { 
	margin: 0 1em 1em 0;}

/* portfolio */

.portfolios {
	border-top: 1px #e5e5e5 solid;}

	.portfolio-visual {
		float: none;
		margin: 0 auto;
		position: relative;}
		
			
.portfolio-content {
	width: 96%;}

	.portfolio-content p {
		float: none;
		min-height: inherit;
		padding-right: 0;
		position: relative;
		width: 100%;}
		
	.involvement {
		float: none;
		margin: 10px 0 10px 0;
		position: relative;
			right: 0;
		width: auto;}
	
	.portfolio-content ul {
		float: none;
		list-style: none;
		margin: 0 0 20px 0;
		overflow: hidden;
		padding: 0;
		position: relative;
		right: 0;
		width: auto;}

		.portfolio-content ul li {
			float: left;
			margin: 0 0 0 10px;
			padding: 0 0 0 20px;}
	
}

@media only screen and (max-width : 600px),
only screen and (max-device-width : 600px){


#wrapper {
	width: 96%}

.footer-doc {
	margin: 20px 0;
	width: 96%;}
	
}

@media only screen and (max-width : 380px),
only screen and (max-device-width : 380px){

	.portfolio-visual {
		width: 100%;}


}


/* ==|== print styles ======================================================= */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}