/*** CSS Document Julien Kraakman ***/


/* CSS General Reset */

* {
	margin:0;
	padding:0;
	border:none;
	outline:none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}

strong{
	font-weight:normal;
}

/*********************************
Opmaak voor hyperlinks
*********************************/


a:link {
	text-decoration:none;
	color:#abcacf;
}


a:visited {
	text-decoration:none;
	color:#abcacf;
}


a:active {
	text-decoration:none;
	color:#abcacf;
}


a:hover {
	text-decoration:none;
	color:#f6efe1;
}


/*********************************
Pagina Algemeen
*********************************/


body{
	background:url(src/bg_tile2.jpg) repeat left top;
	font:normal 9pt Century Gothic,Arial,Helvetica,sans-serif;
	height:100%;
}

div#holdeverything{
	width:100%;
	height:100%;
	margin:0;
	float:left;
}

div#div_body{
	background:url(src/bg_body2.jpg) no-repeat left top;
	width:1040px;
	height:800px;
	margin:0px auto 0px auto;
}

div#container {
	background-color:transparent;
	width:960px;
	margin:0px auto 0px auto;
}


/*********************************
Header Header Header
*********************************/

div#toptop{
	background-color:#464e54;
	width:100%;
	height:40px;
	position:absolute;
	margin:0;
	z-index:-1;
	float:left;
}

div#top{
	background-color:#464e54;
	padding-top:10px;
	height:30px;
	width:960px;
}


div#txt1{
	font:normal 9pt Century Gothic,Arial,Helvetica,sans-serif;
	margin-left:10px;
	color:#e4e4e4;
	float:left;
}

div#txt2{
	margin-right:20px;
	color:#e4e4e4;
	float:right;
}

div#txt2 a{
	color:#e4e4e4;
}

div#txt2 span#mailto:hover{
	color:#e4e4e4;
	text-decoration: underline;
}

span.letter{
	margin-left:40px;
	margin-right:20px;
	color:#a0d4fb;
}

div#menu{
	width:220px;
	height:160px;
	margin-top:20px;
	float:left;
}

div#logo{
	width:220px;
	height:100px;
	margin-top:40px;
}

ul#listmenu{
	margin-top:20px;
	list-style:none;
}

ul#listmenu li{
	margin-bottom:10px;
}

ul#listmenu a#graphicdesign{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-gd.jpg) left top;
}

ul#listmenu a#graphicdesign:hover{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-gd-h.jpg) left top;
}

ul#listmenu a#photography{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-p.jpg) left top;
}

ul#listmenu a#photography:hover{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-p-h.jpg) left top;
}

ul#listmenu a#illustration{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-i.jpg) left top;
}

ul#listmenu a#illustration:hover{
	display:block;
	width:220px;
	height:40px;
	background:url(src/btn-i-h.jpg) left top;
}

div#about{
	width:220px;
	height:400px;
	margin-top:20px;
	color:#e4e4e4;
}

div#about h2{
	font-weight:bold;
	font:bold 9pt Century Gothic,Arial,Helvetica,sans-serif;
}

div#about p{
	margin-top:10px;
}

/*********************************
Content Content Content
*********************************/

div#content{
	margin:180px 0px 0px 0px;
	width:740px;
	min-height:500px;
	float:left;
}

div#project{
	margin:0px 0px 40px 20px;
	font:normal 9pt Century Gothic,Arial,Helvetica,sans-serif;
	color:#e4e4e4;
}

div#project img{
	max-width:700px;
}

div#inside_project{
	margin:20px 0px 0px 0px;
}

div#project h3{
	font:normal 14pt Century Gothic,Arial,Helvetica,sans-serif;
	font-weight:bold;
	margin-bottom:20px;
}

div#project p{
	margin-top:10px;
}

/*********************************
Footer Footer Footer
*********************************/


div#footer{
	width:960px;
	padding-top: 5px;
	margin-bottom:40px;
}

div#infooter{
	font:normal 8pt Century Gothic,Arial,Helvetica,sans-serif;
	color:#e4e4e4;
}

#infooter {
    font-size:0.7em;
    text-align:center;
}

#infooter {
    clear: both;
    margin:0 auto;
    width: 940px;
}

#infooter iframe{
	font:normal 8pt Century Gothic,Arial,Helvetica,sans-serif;
	color:#e4e4e4;
}


/*********************************
Diversen
*********************************/


.displaynone{
	display: none;
}


/*********************************
Mosaic
*********************************/

/*
	Mosaic - Sliding Boxes and Captions jQuery Plugin
	Version 1.0.1
	www.buildinternet.com/project/mosaic
	
	By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
	Released under MIT License / GPL License
*/

h1{
	font:normal 10pt Century Gothic,Arial,Helvetica,sans-serif;
	font-weight:bold;
}

p{
	font:normal 9pt Century Gothic,Arial,Helvetica,sans-serif;
}

.mosaic-block a{
	font:normal 10pt Century Gothic,Arial,Helvetica,sans-serif;
	color:#e4e4e4;
	font-weight:bold;
}

/*General Mosaic Styles*/
.mosaic-block{
	float:left;
	position:relative;
	overflow:hidden;
	width:220px;
	height:180px;
	margin:0px 0px 20px 20px;
	background:#111 url(img/progress.gif) no-repeat center center;
	border:1px solid #7e97ac;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

	.mosaic-backdrop {
		display:none;
		position:absolute;
		top:0;
		height:100%;
		width:100%;
		background:#111;
	}
	
	.mosaic-overlay {
		display:none;
		z-index:5;
		position:absolute;
		width:100%;
		height:100%;
		background:#111;
	}
	
		/*** Custom Animation Styles (You can remove/add any styles below) ***/
		.circle .mosaic-overlay {
			background:url(img/hover-magnify.png) no-repeat center center;
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			display:none;
		}
		
		.fade .mosaic-overlay {
			opacity:0;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
			filter:alpha(opacity=00);
			background:url(img/bg-black.png);
		}
		
		.bar .mosaic-overlay {
			bottom:-100px;
			height:70px;
			background:url(img/bg-black.png);
			padding:10px 0px 0px 5px;
		}
		
		.bar2 .mosaic-overlay {
			bottom:-50px;
			height:100px;
			opacity:0.8;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
			filter:alpha(opacity=80);
		}
		
			.bar2 .mosaic-overlay:hover {
				opacity:1;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				filter:alpha(opacity=100);
			}
		
		.bar3 .mosaic-overlay {
			top:-100px;
			height:70px;
			background:url(img/bg-black.png);
		}
		/*** End Animation Styles ***/