html,body {
	height: 96%; /* Stay a bit off top and bottom and stop a scrollbar in IE. */
}
body {
	margin-top: 5px; /* get of that top! */
	margin-bottom: 5px; /* And stay of the bottom as well! */
	background-color: #FFFFFF; /* Fresh and white! */
	font-family: Georgia, Geneva, "Trebuchet MS", Monaco, Calibri, sans-serif; /* Monaco = iMac, Calibri = Windows Vista */
	font-size: small/100%; /* This makes sure IE users can increase fontsize with their browser.  */
	color: #6d6d6d; /* A nice grey color. */
}

/* ************************* END GENERAL STYLING ************************* */

.thumbnail{
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: none; /* visibility: hidden; of inline heeft iets te maken met het laden van het plaatje */
/* display:none; */ /* Ook dit heeft te maken met het laden */
color: black;
text-decoration: none;
font-size: 80%;
/* width: 550px; */ /* Alleen nodig voor text om de breedte goed te zetten */
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
/* display:inline; */
/* position fixed; */
position absolute;
visibility: visible;
top: 5;
left: 250px;
}

.alignLeft { float:left; margin-left: 3em; margin-right: 3em;}
.alignRight { float:right; margin-left: 3em; margin-right: 3em;}

/* *************************  START DIV STYLING  ************************* */

#container { /* <DIV #1> */
	border: 1px solid #F4F4F4; /* Crazy about dotted and dashed borders! */
}

#header { /* <DIV #2> */
	height: auto; /* No need to set height, just some padding around the headers is enough to get height. */
	text-align: right; /* The text in this header should align right in my humble opinion... */
	padding: 5px 5px; /* padding top is 3% and padding right is 4%. This creates the height of the header. */
	background: url(diags.jpg) top left repeat-x;
}
	#header h1 { /* The first line of text in the header, the big orange one. */
		font-size: 150%; /* Big font! 150% of the font-size of the body! */
		color: #DD8200; /* Orange color for textline one. */
		display: inline; /* This trick will display the both lines of text next to eachother instead of under eachother* */
		letter-spacing: 4px; /* A thick amount of spacing between the letters, to create a nice effect on the text. */
	}
	#header h2 {
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		display: inline; /* The trick will only work if you add display: inline here as well, and add a <br /> between them in the HTML code. */
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 70%; /* 70% of the size of the font-size from the body. */
		font-weight: 100; /* a very sleek and lightweight font. 600 for big font. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #00ACF4; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	

#core_left { /* <DIV #4> */
	width: 180px; /* A fixed width to display the images correctly below eachother. */
	float: left; /* Always stay on the left side of the #core_container. */
   margin-left: 10px;
	background-color: #FFFFFF; 
}
#foto_nav { 
	width: 250px; /* A fixed width to display the images correctly below eachother. */
	float: left; /* Always stay on the left side of the #core_container. */
   margin-left: 10px;
	background-color: #FFFFFF;
}
	#core_left img, #foto_nav img { 
		border: 0; /* The images on the left may not have a border. */
	}
	#core_left p, #foto_nav p {
		font-size: 70%; /* The fontsize is 70% of the fontsize of the body tag. */
	}
	#core_left a, #core_left a:link, #core_left a:visited {
		color: #000000; /* All links, visited or not are black. */
		text-decoration: none; /* with no line under it. */
	}
	#core_left a:hover {
		color: #00ACF4; /* Oceanblue linktext on hover. */
	}
	#core_left h3, #foto_nav h3 {
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		display: inline; 
		font-size: 90%; /* 90% of the size of the font-size from the body. */
		font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		color: #00ACF4; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	#core_left li { /* The contents of core_left is presented in an unordered list. Here it is. */
		font-size: 10px; /* Fontsize and styling. */
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	.litxt { /* This is the text in the unordered list within core_left, with 5% space on the left. */
		padding-bottom: 10px;
		width: 95%;
		padding-left: 5%;
	}
	#core_left ul { /* this is the ul styles for core_left. */
		list-style: none; /* No dot in the list please. */
		padding-left: 0px; /* Get yourself to the left of the page. */
		margin-left: 0; /* IE needs this to do the same as stated above... */
	}
	
/* THIS NAVIGATIONBAR IS COURTESY OF MAXDESIGN > http://css.maxdesign.com.au/listamatic */

#navcontainer {
text-align: right;
margin-top: 1px;
background-color: #FFFFFF
}

#navlist ul {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#navlist li {
	display: inline;
	list-style-type: none;
}
#current {
	border-top: 1px dashed #DD8200;
}
#navlist a { 
	padding: 3px 10px; 
	font-size: 11px;
	font: Verdana, Arial, Helvetica, sans-serif;
}

#navlist a:link, #navlist a:visited {
	color: #007CB0;
	background-color: #FFFFFF;
	text-decoration: none;
}

#navlist a:hover {
	color: #FFFFFF;
	background-color: #DD8200;
	text-decoration: none;
}

#navlist a:active {
	color: #FFFFFF;
	background-color: #00ACF4;
	text-decoration: none;
}

/* THIS NAVIGATIONBAR IS COURTESY OF MAXDESIGN > http://css.maxdesign.com.au/listamatic */


#core_right { /* <DIV #5> */
	margin-left: 200px; 
	background-color: #FFFFFF; /* Fresh white! */
}
	#core_right h3, #core_right img{ /* The headers in #core_right */
		position: relative; /* All sizes, paddings and margins are measured relative to #header h1. */
		vertical-align: center; /* Appear in the center of the #header. */
		font-size: 90%; /* 90% of the size of the font-size from the body. */
		font-weight: 500; /* a bolder font. 600 for even bolder, 100 for very sleek. */
		color: #00ACF4; /* Ocean blue color... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		padding-left: 5%; /* The headers and paragraphs in core_right should stay 5% off the edge of div #core_right. */
	}
	#core_right p, #core_right h4, #core_right table { /* The paragraphs in #core_right should have this styling: */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* Font... */
		line-height: 20px; /* The whitespace between the lines. */
		font-size: 80%; /* 80% of the font-size from the body tag. */
		padding-left: 5%; /* The headers and paragraphs in core_right should stay 5% off the edge of div #core_right. */
	}

#core_content { /* <DIV #6> */
	margin: 0; /* No margins  */
    padding-top: 10px; /*  10px from top  of div */
	background-color: #FFFFFF; /* Fresh white! */
}
	#core_article { 
		background-color: #F9FFFF; 
	}

	#core_content li { /* The actual list on the bottom. */
		background-color:#FFFFFF; /* Fresh white! */
      list-style-type: none;
	}
	
	#core_content a { /* The links in the list stated above. */
		color: #AAAAAA; /* Lightgrey fontcolor. */
	}
	#core_content a:hover { /* Mouseover that list and you'll see... */
		color: #00ACF4; /* Oceanblue fontcolors. */
	}

#core_content ul {
	margin-left: 90px;
	padding-left: 0;
	white-space: nowrap;
	font-size: 95%; /* 80% of the font-size from the body tag. */
	line-height: 120%; /* The whitespace between the lines. */
}   

#footer { /* The bottom, with the copyright notice. */
	clear: both; /* Appear UNDER core_right, not next to it. Not even with changed width on #container. */
	height: 20px; /* Give it some height! */
	text-align: center; /* The text should appear on the rightside of the footer. */
	margin: 0;
}
	#footer p { /* The <p> within the footer is styled here. */
		text-transform: uppercase; /* ALL CAPS ON THIS LINE OF TEXT */
		background: #FFFFFF url(diags.jpg)  0% 30% repeat-x; /* Those cool diagonal lines in the back. */
		font-size: 60%; /* An even smaller font then the list we just did. */
		color: #000000; /* Black... */
		letter-spacing: 1px; /* spread those letters over your screen a bit more */
		font-family: "Trebuchet MS", Verdana, sans-serif; /* I love Trebuchet, should've been the standard font! ;-) */
	}
	#footer a { /* The <a href="... tags in the footer are styled here. */
		text-decoration: none; /* No lines under the text. */
		color: #000000; /* Black beauty. */
	}
	
/* Can't seem to fix something? Do not hesitate to email me on my Gmail account at amy2k5@gmail.com */