/* 
--------------------------- 
CSS PORTFOLIO SITE V.4 
--------------------------- 
*/


body {
background-color: #ffffff;
}

header {
margin: 40px auto;
height: 80px;
width: 440px;
/*height: 40px;*/
/*text-align: left;/*
/*margin-top: 40px;*/

font-size: 10pt;
}

#container {

font-size: 0;
margin: auto;
width: 880px;
height: 660px;

}

nav#nav_boven, nav#nav_beneden{
display: block;
margin: auto;
height: 50px;
width: 880px;
}

/*
.bovennav_comics {
padding-left: 220px;
} */ /* oude aanpassing navigatie */

/*
.bovennav_grdesign {
padding-left: 440px;
}
*/
/*
.bovennav_about {
padding-left: 660px;
}
*/
.nav_volg {
padding-left: 660px;
}

.nav_tweenav_next{
padding-left: 440px;
}


section#sec_vierafb {
margin: 10px auto;
width: 880px; /* 892 en880 ervoor, maar gaf fouten, 223 per afb// 860 mogelijk?/ img op 205 zetten met 3x20px tussenspatie komt op 880 */ 
height: 400px;  /*moet 420 worden met 20 voor de tussenschots van de imglinks/ 205+20+205=430?  */
/*background-color: #343334;*/
}

section.imgshortlink {
margin: 10px auto;
/*margin: 10px auto;*/
width: 880px;
height: 400px;
}

/*img.smallimg{
margin-right:20px;
margin-bottom:10px; 
}*/

.smallimg_boven {
margin-bottom: 20px;
}

.smallimg_maRI {
margin-right: 20px;
}

nav#nav_onderwijl {
float: right;
}

#about_content {
font-family: ModalsFont;
font-size: 10pt;
}


footer{
font-family: ModalsFont;
clear: both;
padding-top: 40px;
text-align: right;
font-size: 10pt;
}

a:link, a:visited, a:hover, a:active  {
text-decoration: none;
}


img.smallimg:hover {
opacity: 0.5;
}

/* SPRITES NAVIGATIE */

/* sprites nav boven */

p.button_illustration {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_illustration a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_illustration_sprite.png") no-repeat top left;
	outline:none;
}

p.button_illustration a:hover {
	background-position:0 -50px;
}

p.button_illustration a:active {
	background-position:0 -100px;
}

p.button_comics{

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_comics a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_comics_sprite.png") no-repeat top left;
	outline:none;
}

p.button_comics a:hover {
	background-position:0 -50px;
}

p.button_comics a:active {
	background-position:0 -100px;
}


p.button_grdesign{

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_grdesign a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_graphicdesign_sprite.png") no-repeat top left;
	outline:none;
}

p.button_grdesign a:hover {
	background-position:0 -50px;
}

p.button_grdesign a:active {
	background-position:0 -100px;
}

p.button_about {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_about a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_about_sprite.png") no-repeat top left;
	outline:none;
}

p.button_about a:hover {
	background-position:0 -50px;
}

p.button_about a:active {
	background-position:0 -100px;
}


/* sprites nav beneden */

p.button_blog {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_blog a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_blog_sprite.png") no-repeat top left;
	outline:none;
}

p.button_blog a:hover {
	background-position:0 -50px;
}

p.button_blog a:active {
	background-position:0 -100px;
}

p.button_behance {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_behance a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_behance_sprite.png") no-repeat top left;
	outline:none;
}

p.button_behance a:hover {
	background-position:0 -50px;
}

p.button_behance a:active {
	background-position:0 -100px;
}

p.button_linkedin {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_linkedin a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_linkedin_sprite.png") no-repeat top left;
	outline:none;
}

p.button_linkedin a:hover {
	background-position:0 -50px;
}

p.button_linkedin a:active {
	background-position:0 -100px;
}


p.button_flickr {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_flickr a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_flickr_sprite.png") no-repeat top left;
	outline:none;
}

p.button_flickr a:hover {
	background-position:0 -50px;
}

p.button_flickr a:active {
	background-position:0 -100px;
}

p.button_next {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_next a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_next_sprite.png") no-repeat top left;
	outline:none;
}

p.button_next a:hover {
	background-position:0 -50px;
}

p.button_next a:active {
	background-position:0 -100px;
}

p.button_prev {

font-size: 10pt;
display:block;
float: left;
width:220px;
height:50px;
text-indent:-9999px;

}

p.button_prev a {
	display:block;
	width:100%;
	height:100%;
	background:transparent url("../img/nav_back_sprite.png") no-repeat top left;
	outline:none;
}

p.button_prev a:hover {
	background-position:0 -50px;
}

p.button_prev a:active {
	background-position:0 -100px;
}

/* WEBFONTS via FONTFACE */

@font-face {
font-family: ModalsFont;
src: url('../wfonts/vk-regular-webfont.ttf'), 
	url('../wfonts/vk-regular-webfont.eot'),
	url('../wfonts/vk-regular-webfont.svg'),
	url('../wfonts/vk-regular-webfont.woff');
}

@font-face {
font-family: ModalsFont;
font-weight: bold;
src: url('../wfonts/vk-bold-webfont.ttf'), 
	url('../wfonts/vk-bold-webfont.eot'),
	url('../wfonts/vk-bold-webfont.svg'),
	url('../wfonts/vk-bold-webfont.woff');
}

/* correctie voor navigatie links, betere manier op vinden!*/	
#nav_boven {position: relative;}
.nav2_220 {position: absolute; bottom: 0px; left: 220px;}
.nav2_440 {position: absolute; bottom: 0px; left: 440px;}
.nav2_660 {position: absolute; bottom: 0px; left: 660px;}

#about_content {
padding-top: 40px;
/*margin-left: 220px;
margin-right: 220px;*/

}

#about_content p{
font-family: ModalsFont;
font-size: 11pt;
line-height: 1.1em;
padding-bottom: 14pt;
}

#about_content h2{
font-family: ModalsFont;
font-size: 14pt;
padding-bottom: 12pt;
}