/* *** Global (voor zowel 320 als 640 variant) *** */

/* *** 640px breedte van card garanderen i.c.m. 640 viewport *** */
body, html
{
	max-width: 640px;
	width: 640px;
	padding: 0px;
	margin: 0px auto;
}

html
{
	background-color: #000000;	
}

body
{
	background-color: #000000;
	padding: 0px;
	font-family: Arial;
	font-size: 12px;
}

img
{
	border: 0px;
}

a, a:visited, a:active, a:hover
{
	color: #696e6b;
}

a:active, a:focus
{
	outline:none;
}

h1
{
	color: #3b0083;
}

.company_color, .company_color:active, .company_color:visited
{
	color: #3b0083;
}

.vertalingen
{
	position: absolute;
	z-index: 10;

	
	color: #FF0000;
	
	left: 30px;
	top: 0px;
	
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
	
	font-size: 14px;
}

.vertalingen_a, .vertalingen_a:visited, .vertalingen_a:active, .vertalingen_a:hover
{
	text-decoration: none;
}

.vertalingen_a:hover
{
	text-decoration: underline;
}

.vertalingen_a_selected, .vertalingen_a_selected:visited, .vertalingen_a_selected:active, .vertalingen_a_selected:hover
{
	text-decoration: none;
}

.vertalingen_divider
{
	padding-left: 10px;
	padding-right: 10px;
}


.pasfoto
{
	position: absolute;
	z-index: 4;
	
}

.canvas
{
	position: absolute;
	background-color: #FFFFFF;
}	

.canvas_bg
{
	position: absolute;
	background-repeat: no-repeat; background-position: left top;
	background-color: #FFFFFF;
}	

.artwork
{
	position: absolute;
	z-index: 0;	
}	

.header, .header2
{
	position: absolute;
	top: 0px;
	text-align: right;
	z-index: 3;
}

.header_text
{
	color: #696e6b;
}

.header_text b
{
	color: #3b0083;
}

.icons
{
	position: absolute;
	
}
	
.footer a, .footer a:visited, .footer2 a, .footer2 a:visited
{
	color: #FFFFFF;
}

.input_text
{
	width: calc(100% - 10px - 2px);
	border: 1px solid #696e6b;
}
	
.input_textarea
{
	width: calc(100% - 10px - 2px);
	border: 1px solid #696e6b;
	font-family: Arial;
}

.input_submit, .input_submit:visited, .input_submit:hover
{
	display: inline-block;
	background-color: #696e6b;
	border: 1px solid #696e6b;
	font-weight: bold;
	color: #333333;
	text-decoration: none;	
}

.link_adres, .link_adres:visited, .link_adres:active
{
	text-decoration: none;
}

.link_website, .link_website:active, .link_website:visited
{
	color: #3b0083;
	text-decoration: none;
	font-weight: bold;
}

.info
{
	position: absolute;
	color: #696e6b;
}

.info span
{
	color: #3b0083;
	font-weight: bold;
}

.page
{
	position: absolute;
}

.page2
{
	position: absolute;
	background-color: #FFFFFF;
}

.footer
{
	position: absolute;
	text-align: center;
	color: #FFFFFF;
}
	
/* Harmonica lijst van deel opties op /deel pagina */
.deel_list, .deel_list:visited, .deel_list:active
{
	transition: background-color 350ms ease-in-out;
	
	display: block;
	
	margin: -10px;
	padding: 10px;
	padding-bottom: 20px;
	text-decoration: none;
}

.deel_list img
{
	width: 55px;
	height: 55px;
	margin-right: 8px;
	
	vertical-align: middle;
}

.deel_div
{
	transition: background-color 350ms ease-in-out;
	display: none;

	margin: -10px;
	margin-top: 0px;
	margin-bottom: 20px;
	
	padding: 10px;	
	padding-top: 0px;
}

.deel_list_selected, .deel_div_selected
{
	background-color: #DDD; /* achtergrondkleur als een deeloptie is opgengeklapt */	
}


.deel_link
{
	display: block;	
	margin-bottom: 16px;	
}



.cv_header
{
	position: absolute;
	background-repeat: no-repeat; background-position: left top;	
	color: #000000;
}

.cv_ruler
{
	border-bottom: 2px solid #cccccc;
}

.cv_page
{
	position: absolute;
	z-index: 100;
	background-color: #FFFFFF;
	color: #000000;			
}

.cv_page h1
{
	padding: 0px;
	margin: 0px;
	color: #3b0083;	
}

.cv_page h2
{
	padding: 0px;
	margin: 0px;
	color: #000000;	
	border-top: 2px solid #cccccc;
}

.cv_icons
{
	position: absolute;
}

.terug
{
	position: absolute;
	z-index: 20;
}

.button_cv
{
	position: absolute;
	z-index: 10;		
}

.button_contact
{
	position: absolute;
	z-index: 11;		
}

.button_deel
{
	position: absolute;
	z-index: 12;		
}
.button_info
{
	position:absolute;
	top:875px;
	left:615px;
}
.arrow
{
	background-image: url('../images/layout/cv_arrow.png'); background-repeat: no-repeat; background-position: left top;
}

.extralink, .extralink:visited, .extralink:active
{
	text-decoration: none;
}


/* *** /Global *** */

		body
		{
			width: 640px;
			font-size: 22px;
		}
		
		.canvas
		{
			width: 640px;
			height: 900px;
		}
		
		.canvas_bg
		{
			width: 640px;
			height: 900px;			
		}	

		.artwork img
		{
			width: 640px;
		}	
			
		.pasfoto
		{
			padding-left: 490px;
			padding-top: 20px;
		}
		
		.pasfoto div
		{
			background-image: url('../images/layout/bg_pasfoto.png'); background-repeat: no-repeat; background-position: center middle;
			padding: 5px;
			
		}
		
		.pasfoto img
		{
			width: 125px;
			height: 175px;
		}
		
		.header
		{
			width: 640px;
			height: 343px;	
		}
		
		.header img
		{
			width: 640px;
			height: 343px;
		}
	
		.header_text
		{
			font-size: 22px;
		
		}
		
		.header_text b
		{
			font-size: 26px;	
		}
		
		.icons
		{
			left: 30px;
			top: 200px;
			width: 230px;
		}

	
		.icons_bottom
		{
			display: table-cell;
			vertical-align: bottom;
			
			width: 230px;
			height: 330px;
			
		}
				
		
		.icons img
		{
			width: 55px;
			height: 55px;
			margin-right: 13px;
			margin-bottom: 13px;
		}
		
		.info
		{
			left: 280px;
			top: 320px;	
			font-size: 22px;
			line-height: 32px;
		}
			
		.info img
		{
			width: 20px;
			height: 14px;
		}
		
		.company_titel
		{
			
		}
		
		.company_titel img
		{
			width: 296px;
			height: 63px;
		}
	
		.ruler
		{
		
		}
			
		.ruler img
		{
			width: 296px;
			height: 34px;	
		}
	
		.button_cv
		{
			left: 44px;
			top: 386px;
		}
		
		.button_cv img
		{
			width: 77px;
			height: 77px;
		}
						
		.button_contact
		{
			left: 30px;
			top: 530px;
		}
		
		.button_contact img
		{
			width: 203px;
			height: 61px;
		}
		
		.button_deel
		{
			left: 30px;
			top: 610px;
		}
		
		.button_deel img
		{
			width: 203px;
			height: 61px;
		}
		
		.spacer
		{
			height: 16px;
		}
		
		.footer, .footer2
		{
			left: 0px;
			width: 640px;
			padding: 0px;
			font-size: 16px;
		}
		
		.banner img
		{
			width: 640px;
			margin-bottom: 12px;
		}
	
		.footer
		{
			top: 910px;	
		}
	
		.footer2
		{
			text-align: center;
			
			margin-left: -40px;
			margin-top: 125px;
			margin-bottom: -125px;
		}
	
		/* vervolgpagina's */
	
		.header2
		{
			width: 640px;
			height: 135px;	
		}
		
		.header2 img
		{
			width: 640px;
			height: 135px;
		}	
	
		.page
		{
			left: 0px;
			top: 135px;
			width: 640px;
			height: 649px;
			font-size: 22px;
		}	
	
		.page2
		{
			left: 0px;
			top: 135px;
			width: 560px;
			min-height: 560px;
			padding-left: 40px;
			padding-right: 40px;
			font-size: 22px;	
		}
	
		h1
		{
			font-size: 24px;
		}
	
		hr
		{
			margin: 0px;
			margin-top: 10px;
			margin-bottom: 10px;
			padding: 0px;
		}
		
		.input_text
		{
			margin-bottom: 16px;
			margin-top: 6px;
			padding: 5px;
			font-size: 22px;
		}
			
		.input_textarea
		{
			height: 60px;
			margin-bottom: 16px;
			margin-top: 6px;
			padding: 5px;
			font-size: 22px;
		}
		
		.input_submit, .input_submit:visited, .input_submit:hover
		{
			padding: 6px;
			padding-left: 20px;
			padding-right: 20px;
			font-size: 22px;
		}
	
		.deel_list, .deel_list:visited, .deel_list:active
		{
			color:#333;
		}
	
		.deel_list img
		{

		}	
		
		.deel_link
		{
			margin-bottom: 16px;		
		}
	
		.cv_header
		{
			
			top: 146px;
			width: 540px;
			height: 67px;
			padding-left: 90px;
			padding-top: 17px;
			font-size: 18px;	
		}
		
		.cv_header b
		{
			font-size: 22px;	
			line-height: 34px;
		}
		
		.cv_icons
		{
			left: 20px;
			top: 165px;
		}
		
		.cv_icons img
		{
			width: 55px;
			height: 55px;
		}
	
		.terug
		{
			left: 560px;
			top: 45px;
		}
		
		.terug img
		{
			width: 55px;
			height: 55px;
		}
	
		.cv_page
		{
			left: 0px;
			top: 230px;
			width: 600px;
			padding: 20px;
			font-size: 17px;
			line-height: 18px;		
		}
		
		.cv_page h1
		{
			padding-top: 5px;
			font-size: 22px;
		}
			
		.cv_page h2
		{
			font-size: 18px;
			margin-top: 20px;
			padding-top: 20px;
		}
				
		.cv_ruler
		{
			margin-bottom: 10px;
		}
		
		.arrow
		{
			margin-top: 5px;
			padding-top: 0px;
			padding-right: 0px;
			padding-left: 24px;	
		}