/* ===================================================	GENERAL */

@font-face {
 font-family: MyCustomFont;
 src: url("lettertype/fenne.eot") /* EOT file for IE */
}
@font-face {
 font-family: MyCustomFont;
 src: url("lettertype/fenne.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
 font-family: Tahoma;
 src: url("lettertype/tahoma.ttf") /* TTF file for CSS3 browsers */
}


body {
	margin:0;
	padding:0;
	border:0;					/* This removes the border around the viewport in old versions of IE */
	width:100%;
	background:#fff;
	min-width:600px;    				/* Minimum width of layout - remove line if not required *//* The min-width property does not work in old versions of Internet Explorer */
	font-size:90%;
	font-family: Verdana, Lucida Sans Unicode, Arial, sans-serif;}

TABLE, TR, TD{
	border-collapse: collapse; 
	border: 1px solid #FF9900;
	font-size:100%;
	vertical-align: center;
	padding: 5px;}

.width100{
	max-width:100%;
	width: expression(this.width > 100 ? "100%" : true);}	


.floatRight { 
	float:Right;
	margin:5px;
	margin-right:-5px;
	position:relative;}
  

.floatLeft { 
        clear:both;
	float:Left;
	margin:5px}
	
.floatMiddle { 
        clear:both;
	float:middle;
	margin:5px}
/* ===================================================	Header styles */

#header {
        clear:both;
        float:left;
	width:100%;
	background:#99CC00;}


#header h1 {
	padding-top:.4em;
	padding-bottom:0em;
	padding-left:.4em;
	padding-right:.4em;
        margin:0;
	font-size:300%;
	color:#FFFFFF; 
	}

#header h2 {
	padding-top:0em;
	padding-bottom:0.4em;
	padding-left:.4em;
	padding-right:.4em;
        margin:0;
	letter-spacing: 0.3em;
	}
		
#header h3 {
	padding-top:0em;
	padding-bottom:0.4em;
	padding-left:.4em;
	padding-right:.4em;
        margin:0;
	font-size:200%;
	font-style:italic;
	font-weight:lighter;
	color:#FFFFFF; 
	letter-spacing: 0.2em;
	text-align:right;
	}



#paginaheader {
        clear:both;
        float:left;
	width:100%;
	background:#99CC00;}


#paginaheader h3 {
	padding-top:.4em;
	padding-bottom:0em;
	padding-left:.4em;
	padding-right:.4em;
        margin:0;
	font-size:300%;
	color:#FFFFFF; 
	}



/* ===================================================	column container */
	
.colmask {
	position:relative;				/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
	clear:both;
	float:left;
        width:100%;					/* width of whole page */
	overflow:hidden;				/* This chops off any overhanging divs */
	}
	



/* ===================================================	common column settings */

.colright,
.colmid,
.colleft {
	float:left;
	width:100%;					/* width of page */
	position:relative;}
	
.centercolumn,
.leftcolumn,
.rightcolumn {
	float:left;
	position:relative;
	padding:0 0 1em 0;				/* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;}


/* ===================================================	holy grail 3 column settings */

.holygrail {
	background:#FF9900;			   	/* Right column background colour */
	}


.holygrail .colmid {
	right:20%;					/* width of the right column */
	background:#FFFFFF;				/* center column background colour */
	}


.holygrail .colleft {
	right:60%;					/* width of the middle column */
	background:#00CCFF;				/* left column background colour */
	}
    

.holygrail .centercolumn {
	width:56%;					/* width of center column content (column width minus padding on either side) */
	left:102%;					/* 100% plus left padding of center column */
	padding-top:2.5em;}


.holygrail .centercolumn h1 {
	margin:.8em 0 .2em 0;
	padding:0;;
	font-size:200%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:lighter;
	color:#FF9900; 
	letter-spacing: 0.1em;
	}

.holygrail .centercolumn h2 {
	margin:.8em 0 .2em 0;
	padding:0;
	padding-top:1em;
	font-size:120%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:bold;
	color:#FF9900; 
	letter-spacing: 0.1em;
	}

.holygrail .centercolumn ul {
	padding-right:2em;}


.holygrail .centercolumn li {
	padding-bottom:.6em;}

	
.holygrail .centercolumn a {
	color:#FF9900;
	text-decoration: none;}

.holygrail .centercolumn a:hover {
	color:#00CCFF;
	text-decoration: none;}





.holygrail .leftcolumn {
	width:16%;					/* Width of left column content (column width minus padding on either side) */
	left:26%;					/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	padding-top:2.5em;}


.holygrail .leftcolumn h1 {
	margin:.8em 0 .2em 0;
	padding:0;
	font-size:200%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:lighter;
	color:#FFFFFF; 
	letter-spacing: 0.1em;
	}

.holygrail .leftcolumn h2 {
	margin:.8em 0 .2em 0;
	padding:0;
	padding-top:1em;
	font-size:100%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:bold;
	color:#FFFFFF; 
	letter-spacing: 0.1em;
	}

.holygrail .leftcolumn ul {
	padding-right:2em;}




	
.holygrail .leftcolumn a {
	color:#000000;
	text-decoration: none;}

.holygrail .leftcolumn a:hover {
	color:#FFFFFF;
	text-decoration: none;}



.holygrail .rightcolumn {
	width:16%;					/* Width of right column content (column width minus padding on either side) */
	left:90%;					/* Please make note of the brackets here:(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	padding-top:2.5em;}


.holygrail .rightcolumn h1 {
	margin:.8em 0 .2em 0;
	padding:0;
	font-size:200%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:lighter;
	color:#FFFFFF; 
	letter-spacing: 0.1em;
	}

.holygrail .rightcolumn h2 {
	margin:.8em 0 .2em 0;
	padding:0;
	padding-top:1em;
	font-size:100%;
	color:#FFFFFF; 
	font-style:italic;
	font-weight:bold;
	color:#FFFFFF; 
	letter-spacing: 0.1em;
	}

.holygrail .rightcolumn ul {
	padding-right:2em;}

.holygrail .rightcolumn li {
	list-style-image:url("http://www.heijer.org/stylesheets/rightbullet.gif");}
	

.holygrail .rightcolumn a {
	color:#FFFFFF;
	text-decoration: none;}


.holygrail .rightcolumn a:hover {
	color:#000000;
	text-decoration: none;}

.holygrail .rightcolumn .bullet a {
	color:#000000;
	text-decoration: none;}

.holygrail .rightcolumn .bullet a:hover {
	color:#FFFFFF;
	text-decoration: none;}

/* ===================================================	Footer styles */

#footer {
	clear:both;
	float:left;
	width:100%;
	border-top:1px solid #000;}

#footer p {
	padding:10px;
	margin:0;}


/* ===================================================	 MENU */

/* ######### Main Menu Bar ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold;
font-size:120%;
list-style-type: none;
border-bottom: 2px solid #E0E0F8;
border-top: 2px solid #E0E0F8;
background:  #242c54;
overflow: hidden;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background:  #242c54;
}

.mattblackmenu li a:visited{
color: #FFFFFF;
}

.mattblackmenu li a:hover{
background:  #084B8A; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: #084B8A; /*background of tab with "selected" class assigned to its LI */
}


/* ######### Drop Down ULs ######### */


.ddsubmenustyle, .ddsubmenustyle ul{ /*topmost and sub ULs, respectively*/
font: normal;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: #FFFFFF;
border: 1px solid #242c54;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle li a{
display: block;
width: 200px; /*width of menu (not including side paddings)*/
color: #242c54;
background-color: #FFFFFF;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid #242c54;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 160px; /*width of menu*/
}

.ddsubmenustyle li a:hover{
background-color: #084B8A;
color: #FFFFFF;
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 8px;
border: 0;
}

.pictogram{ /*CSS for pictogram image added to top menu items*/
padding-right: 8px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}


/* ######### MENU 2 ######### */

.glossymenu{
margin: 5px 0;
padding: 0;
width: 100%; /*width of menu*/
border: 0px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background:#00CCFF;
color: #000000;
display: block;
width: auto;
padding: 1em;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: #FFFFFF;
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background:#00CCFF;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}


.glossymenu div.submenu ul li a{
display: block;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background:#00CCFF;
colorz: #FFFFFF;
}






.dateblock {
text-align: center;
width: 5em;
border: solid 1px #000000;
padding-top: .2em;
margin: .5em;
margin-left:0em;
color: #FFFFFF;
background-color:#FF9900;
float: left;
}

.day {
font-size: 2em;
position: relative;
top: -.2em;
}
.month {
font-size: 1.2em;
}
.year {
font-size: .8em;
position: relative;
top: -1em;
}



div.post {
	margin-left: 100px;
	position: relative;
}

div.post div.date {
	left: -100px;
	position: absolute;
	top: 0;
	width: 80px;
}
	div.date span {
		background: transparent url(http://www.heijer.org/stylesheets/images/dates.gif) no-repeat;
		display: block;
		position: absolute;
		text-indent: -5000px;
		top: 0;
	}
		div.date span.maand {
			height: 14px;
			right: 20px;
			width: 29px;
		}

		div.date span.dag {
			height: 11px;
			right: 20px;
			top: 22px;
			width: 18px;
		}

		div.date span.jaar {
			height: 36px;
			right: 0;
			width: 11px;
		}