/*------------------------------------------------------------------
[Table of contents]

1. Body + reset general tags
2. Containers #backgroundCon, #outerCon
3. Header / #headerCon
4. Navigation / #navigationCon
5. Content / #contentCon
6. Left column / #leftColumn
7. Boxes / .box
8. Right column / #rightColumn
9. Search / #search
10. Advertisements / .banner
11. Forms
12. Footer / #footerCon
13. Links
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[ colour codes ]

colours are theme-depending and therefor stored in:
/themes/themename/css/colours.css

------------------------------------------------------------------*/



/*------------------------------------------------------------------
[ 1. Body + reset general tags ]
------------------------------------------------------------------*/

html,
body {
	height:				100%;
	width:				100%;
	margin:				0;
	background-color:	#000;
	color:				#fff;
	font-family:		Verdana, Sans-Serif;
	font-size:			11px;
	line-height:		1.5em;
}

img {
	border:				none;
	/*vertical-align:		bottom;*/
}

p{
	margin:				0 0 15px 0;
	padding:			0;
}

h1 {
	margin:				0 0 35px 0;
	font-size:			24px;
	line-height:        1.3em;
}

h2 {
	margin:				0;
	font-size:			20px;
}
h3 {
	margin:				0;
	font-size:			16px;
}
h4 {
	margin:				0;
	font-size:			1em;
}

hr {
	margin-left:		-7px;
}


/*------------------------------------------------------------------
[ 13. Links ]
needs to be on top to allow overruling
------------------------------------------------------------------*/

div#leftColumn a {
	/*color:				#000;*/
	text-decoration:	underline;
}


div#leftColumn a:visited {
	text-decoration:	underline;
    /*font-style:         italic;*/
}

div#leftColumn a:hover {
	text-decoration:	none;
}


a {
	color:				#fff;
	text-decoration:	underline;
}

a:hover {
	text-decoration:	none;
}

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


/*------------------------------------------------------------------
2. Containers  / #backgroundCon, #outerCon
------------------------------------------------------------------*/


div#backgroundCon {
	position:			absolute;
	left:               0;
	top:                0;
	width:				100%;
	height:				100%;
	z-index:			1;
}
div#flashBackground {
	width:				100%;
	min-height:			100%;
	z-index:			2;
}

div#outerCon {
	position:			absolute;
	width:				100%;
	z-index:			3;
}


.clearer {
	clear:				both;
	line-height:		0;
	font-size:			0;
}


/*------------------------------------------------------------------
[ 3. Header ]
------------------------------------------------------------------*/
div#logoCon {
	padding:			35px 0 0 28px;
}

div#headerCon {
	width:				100%;
	height:				27px;
	background-image:	url('../gfx/backgrounds/servicemenu-background.png');
	background-repeat:	no-repeat;
	background-position:top left;
}	

	div#serviceMenu {
		width:				990px;
		float:				right;
		padding-top:		4px;
		text-align:			right;
	}
	
	div#serviceMenu a {
		padding-left:			20px;
		margin-right:			5px;
		font-size:				0.9em;
		text-decoration:		none;
		background-position:	left -1px;
	}
	   div#serviceMenu div.ajax-box a {
	       padding-left: 0;
	       margin-right: auto;
		   text-decoration: underline;
	   }
	
	div#serviceMenu a:hover {
		text-decoration:		underline;
	}
	
		div#serviceMenu a.home {
			background-image:	url('../gfx/icons/home_sm.png');
			background-repeat:	no-repeat;
		}
		
		div#serviceMenu a.contact {
			background-image:	url('../gfx/icons/hand_sm.png');
			background-repeat:	no-repeat;
			margin-right: 20px;
		}
		
		div#serviceMenu a.about-hoorstichting {
			background-image:	url('../gfx/icons/ear_sm.png');
			background-repeat:	no-repeat;
		}
		
		div#serviceMenu a.sendpage {
			padding-left: 25px;
			background-image:	url('../gfx/icons/envelope_sm.png');
			background-repeat:	no-repeat;
			color: #d5a628;
		}
		
		div#serviceMenu a.search {
			background-image:	url('../gfx/icons/magnifier_sm.png');
			background-repeat:	no-repeat;
			color: #d5a628;
		}
		
		div#serviceMenu a.sound {
			background-image:	url('../gfx/icons/speaker_sm.png');
			background-repeat:	no-repeat;
		}



    div.service-menu-sub {
        position:			absolute;
        width:				200px;
        margin-top:			8px;
        padding:			8px;
        text-align:			left;
        z-index:			5;
        font-size:			10px;
        background-color:   #000;
        filter:             opacity(Alpha=95%);
        display:            none;
    }
    
        div.service-menu-sub form label {
            display:		block;
        }
        
        div.service-menu-sub form p {
            margin:			0;
        }
		
	/*-- SEND-a-FRIEND form styles [ajax version] --*/
		div.ajax-a-friend {
			padding:			10px 15px 15px 15px;
		}
		div.ajax-a-friend fieldset {
			border:				none;
		}
		div.ajax-a-friend fieldset legend {
			display:			block;
			width:				100%;
			margin-bottom:		0px;
		}
		div.ajax-a-friend fieldset legend label{
			display:			block;
			/*font-weight:		bold;*/
			text-align:			left;
			color:				#fff;
		}
		div.ajax-a-friend fieldset legend input,
		div.ajax-a-friend fieldset legend textarea {
			padding:			1px 5px 1px 5px;
			width:				150px;
			font-size:			1.1em;
			border:				1px solid #7b7b7b;
		}
		div.ajax-a-friend fieldset legend textarea {
			height:				80px;
			overflow:			auto;
			font-family:		Verdana, Sans-Serif;
		}
		div.ajax-a-friend fieldset legend.bttn {
			margin-top:			20px;
		}
		div.ajax-a-friend fieldset legend.bttn input.submit {
			float:				right;
			margin-right:		10px;
			color:				#ffffff;
			font-weight:		bold;
			background-color:	#000000;
			border:				1px solid #7b7b7b;
			width:              80px;
		}
		
	/*-- SEND-a-FRIEND form styles [full page version] --*/
	
		div.boxes div.send-a-friend fieldset {
			width:              200px;
			border:				none;
			background:			url('../gfx/visuals/dummy-sendafriend-bg.jpg') 0 15px no-repeat;
			padding-left:       240px;
		}
		div.boxes div.send-a-friend fieldset legend {
			display:			block;
			width:				100%;
			margin:		        0 0 10px 0;
		}
		div.boxes div.send-a-friend fieldset legend label{
			display:			block;
			font-weight:		bold;
			text-align:			left;
			color:				#410c5e;
		}
		div.boxes div.send-a-friend fieldset legend input,
		div.boxes div.send-a-friend fieldset legend textarea {
			padding:			2px 5px 2px 5px;
			width:				190px;
			font-size:			1.0em;
            color:              #808080;
			border:				1px solid #bf3b75;
		}
		div.boxes div.send-a-friend fieldset legend textarea {
			height:				80px;
			overflow:			auto;
			font-family:		Verdana, Sans-Serif;
		}
		div.boxes div.send-a-friend fieldset legend.bttn {
			margin-top:			20px;
		}
		div.boxes div.send-a-friend fieldset legend.bttn button {
			float:				right;
            width:              94px;
            height:             26px;
			margin-right:		0px;
			background-image:   url(../gfx/bttn-verzend.png); 
            background-repeat:  no-repeat;
            border:             none;
            background-color:   transparent;
		}
        div.boxes div.send-a-friend fieldset legend.bttn button:hover {
            background-image:   url(../gfx/bttn-verzend-over.png);
        }
        div.boxes div.send-a-friend fieldset legend.bttn button span {
            display:            none;
            color:				#ffffff;
			font-weight:		bold;
			background-color:	#000000;
			border:				3px solid #7b7b7b;
        }


/*------------------------------------------------------------------
[ 4. Navigation / #navigationCon  ]
------------------------------------------------------------------*/


/*------------------------------------------------------------------
[ 5. Content / #contentCon  ]
------------------------------------------------------------------*/

div#innerCon {
	width: 				995px;
	margin-top:			93px;
	/*background:blue;*/
}

div#tmf_car {
	position: absolute;
	left: 800px;
	top:103px;
}

/*------------------------------------------------------------------
[ 6. Left column / #leftColumn  ]
------------------------------------------------------------------*/

div#leftColumn {
	position:			relative;
	float:				left;
	width:				610px;
	padding-left:		5px;
	min-width:          610px;

	/*background:red;*/
}

/*------------------------------------------------------------------
[ 7. Boxes / .boxes  ]
------------------------------------------------------------------*/


/* General boxes styles */
/* most of the '.odd' classes are declared in the themes-stylesheets */
div.boxes {
	color:				#3b3734;
	background-image:	url('../gfx/backgrounds/boxes_even_top.png');
	background-repeat:	no-repeat;
	zoom:				1; /* IE fix to clear floats. */
}

div.boxes.first div.boxcontent {
    padding:            65px 70px 20px 30px !important;
}

div.boxes.first {
	background-image:	url('../gfx/backgrounds/boxes_even_top_first.png');
	background-repeat:	no-repeat;
}

div.boxes.even.first {
	background-image:	url('../gfx/backgrounds/boxes_even_top_first.png');
	background-repeat:	no-repeat;
}

div.boxes div.boxcontent {
	position:			relative;
	padding:			35px 70px 20px 30px;
}

div.first-after-flash {
   /*background-position: 0 -15px;
	margin-top: -40px;*/
}

div.first-after-flash div.boxcontent {
    padding-top: 25px;
}

div.boxes div.boxcontent img {
	float:				left;
	margin: 			3px 15px 5px 0;
}

div.boxes .open .intro {
    display:			none;
}

div.boxes div.moreContent {
	display:			none;
}

div.boxes .open div.moreContent {
	display:			block;
	zoom:				1;
	overflow:			hidden;
}

div#boxes-bottom {
	height:				20px;
	background-repeat:	no-repeat;
}

div#boxes-bottom.odd {
    background-image:   url('../gfx/backgrounds/boxes_odd_bottom.png');
}

div#boxes-bottom.even {
    background-image:   url('../gfx/backgrounds/boxes_even_bottom.png');
}

div.boxes .intro {
	font-weight:		normal;
    padding:            0;
    margin:             0;
}


/*-- Flash boxes --*/
div.boxes.flash div.flashboxcontent {
	margin-bottom:		0px;
	padding:			18px 0px 0px 14px;
	/*border:1px solid red;*/
}

div.boxes.flash.first div.flashboxcontent {
	margin-bottom:		0px;
	padding:			48px 0px 0px 14px;
	/*border:1px solid blue;*/
}

/*-- Toggle button --*/

div.boxes div.toggleBttn {
	position:			absolute;
	bottom:				0;
	right:				52px;
}

	div.boxes div.toggleBttn a {
		display:			block;
		width:				25px;
		height:				25px;
		text-indent:		-1000em;
		background-image:	url('../gfx/open-close-arrows.png');
		background-position: 0 0;
	}
	div.boxes div.toggleBttn a:hover {
		background-image:	url('../gfx/open-close-arrows.png');
		background-position: 49px 0;
	}
	div.boxes .open div.toggleBttn a {
		background-image:	url('../gfx/open-close-arrows.png');
		background-position: 25px 0;
	}

div.boxes div.starttestButton {
	position:			absolute;
	bottom:				0;
	right:				50px;
}
	
/*-- Download button --*/
div.boxes div.downloadBttn {
	position:			absolute;
	padding:			10px 0 5px 0;
	bottom:				0;
	right:				5px;
}
	div.boxes div.downloadBttn a {
		display:			block;
		padding:			0 0 5px 25px;
		background-image:	url('../gfx/icons/ico_pdf_16_16.png');
		background-position: 0 0;
		background-repeat:	no-repeat;
		text-decoration:	none  !important;
	}
	div.boxes div.downloadBttn a:hover {
		text-decoration:	underline !important;
	}

/*------------------------------------------------------------------
[ 7.1. specific boxes ]
------------------------------------------------------------------*/

/*- accordionlist [ news, faq ] -*/
div.boxes.accordionlist {
	background-image:	url('../gfx/backgrounds/boxes_even_top_first.png');
	background-repeat:	no-repeat;
}

div.boxes.accordionlist div.boxcontent {
	padding:			70px 60px 30px 28px;
}	
	div.boxes.accordionlist div.boxcontent h1 {
		margin-left:		7px;
	}
	
	div.boxes.accordionlist div.accordionlistblock {
		position:			relative;
		padding: 			10px 7px 20px 7px;
		border-top:			1px solid #c0bcb9;
	}
	
	div.boxes.accordionlist div.accordionlistblock.last {
		border-bottom:		1px solid #c0bcb9;
	}
    
	div.boxes.accordionlist div.accordionlistblock div.moreContent img {
		float:				left;
		margin: 			3px 15px 5px 0;
	}
	
	div.boxes.accordionlist div.toggleBttn {
		bottom:				7px;
		right:				7px;
	}
	
	div.boxes.accordionlist div.accordionlistblock.open {
		border-top:			1px solid #84bbbe;
		border-bottom:		1px solid #84bbbe;
		background-color:	#e6ecea;
	}
	
/*- downloads [ publications ] -*/

div.boxes.downloads div.boxcontent {
	/*padding:			70px 60px 30px 28px;*/
}	
	div.boxes.downloads div.boxcontent h1 {
		margin-left:		7px;
	}
	
	div.boxes.downloads div.downloadsblock {
		position:			relative;
		padding: 			10px 7px 20px 7px;
		border-top:			1px solid #c0bcb9;
	}
	
	div.boxes.downloads div.downloadsblock.last {
		border-bottom:		1px solid #c0bcb9;
	}
	
	div.boxes.downloads div.downloadsVisual {
		float:				left;
		display:			inline;
		width:				200px;
	}
	
	div.boxes.downloads div.downloadsInfo {
		margin-left:		210px;
	}
	
	
/* smallcol [ img left, textblock right ] */

div.boxes.twocol	div.leftCol{
	float:				left;
	display:			inline;
	width:				200px;
}

div.boxes.twocol	div.rightCol{
	margin-left:		210px;
}
	
/*- pagination -*/
div.pagenav {
	text-align:		center;
}
	div.pagenav a {
		display:		inline-block;
		margin:			0 3px 0 3px;
		padding:		5px;
		font-weight:	bold;
	}
	div.pagenav a.selected {
		border:			1px solid black;
		text-decoration:none !important;
	}

div#accordionlistPagination {
	padding:			25px 0 0 0;
}	
	
	div#accordionlistPagination table th {
		padding:			0 15px;
	}
	
	div#accordionlistPagination table td a {
		padding:			5px;
	}
	div#accordionlistPagination table td a.active {
		padding:			7px;
		text-decoration:	none;
		border:				1px solid black;
	}

/*------------------------------------------------------------------
[ 8. Right column / #rightColumn  ]
------------------------------------------------------------------*/

div#rightColumn {
	position:			relative;
	float:				left;
	width:				400px;
	margin:				50px 0 0 -25px;
	/*background:green;*/
	z-index:			4;
}

/*------------------------------------------------------------------
[ 9. Search / #search  ]
------------------------------------------------------------------*/


div#searchbox.in-service-menu {
	padding:			15px;
}

div#searchbox.in-service-menu input {
	padding:			1px 5px 1px 5px;
	width:				150px;
	font-size:			1.1em;
	border:				1px solid #7b7b7b;
}

div#searchbox.in-service-menu button {
	float:				right;
	margin-right:		10px;
	#margin-right:		10px;
	color:				#ffffff;
	font-weight:		bold;
    font-size:          1.0em;
	background-color:	#000000;
	border:				1px solid #7b7b7b;
}


/*------------------------------------------------------------------
[ 10. Advertisements / .banner ]
------------------------------------------------------------------*/


/*------------------------------------------------------------------
[ 11. Forms ]
------------------------------------------------------------------*/


/*------------------------------------------------------------------
[ 12. Footer / #footerCon ]
------------------------------------------------------------------*/

div#footerCon {
	width: 				995px;
}
	div#footerCon div {
		padding:			20px 0 20px 30px;
	}

	div#footerCon span {
		padding:			0px 0 10px 0;
		border-bottom:		1px dotted #fff;
	}
	
	div#footerCon a {
		text-decoration:	none;
	}
	
	div#footerCon a:hover {
		text-decoration:	underline;
	}

	div#footerCon div.banner {
		padding: 0;
		margin-left: 30px;
	}

div.sitemap ul {
    list-style-type:none;
    padding-left:0;
    margin-left:0;
}

div.sitemap li {
    margin-left:32px;    
}
div.sitemap li span {
    font-weight:bold;
}

div.sitemap li a,
div.sitemap li span {
    background:url(../gfx/nav/sitemap-bullet.gif) no-repeat left 5px;
    padding-left:8px;
}

div#leftColumn div.sitemap li.red,
div#leftColumn div.sitemap li.red a {
/*    color:              #d3002d; */    
}

div#leftColumn div.sitemap li.teal,
div#leftColumn div.sitemap li.teal a {
/*    color:              #067a93; */
}
div#leftColumn div.sitemap li.purple,
div#leftColumn div.sitemap li.purple a {
/*    color:              #7A468F; */
}

div#leftColumn div.sitemap li.yellow,
div#leftColumn div.sitemap li.yellow a {
/*    color:              #FDC327; */
}

div#leftColumn div.sitemap li.green,
div#leftColumn div.sitemap li.green a {
/*    color:              #3C8C0B; */
}

div#leftColumn div.sitemap span.empty {
    background-image:   none;    
}

div#leftColumn div.sitemap ul li {
    padding:4px 0 4px 0
}

div#leftColumn div.sitemap ul ul {
    margin:4px 4px 4px 0;
/*    border:1px solid #eee;
    border-color:#fefefe #f0f0f0 #f0f0f0 #fefefe; 
    background-color:#ffffff; */
}

div#leftColumn div.sitemap ul ul {
/*    background-color:#f7f7f7; */
}

div#leftColumn div.sitemap ul ul ul {
/*    background-color:#eeeeee; */
}

div#leftColumn div.sitemap ul ul ul ul {
/*    background-color:#e7e7e7; */
}

div#leftColumn div.sitemap ul ul ul ul ul {
/*    background-color:#e0e0e0; */
}




div.flash-popup-box {
    display:                none;
}

div.flash-popup-innerbox {
    
}

div.flash-popup-footer {
    height:                 auto;
    padding:                10px 0 0 40px;
    color:                  #fff;
}
	div.flash-popup-footer span {
		padding:		    0 0 10px 0;
		/*border-bottom:		1px dotted #fff;*/
	}
	
	div.flash-popup-footer a {
        color:              #fff !important;
		text-decoration:	none;
	}
	
	div.flash-popup-footer a:hover {
        color:              #fff !important;
		text-decoration:	underline;
	}
    
    

div.flash-inline-box {
    padding-left:           15px;
}

div.firstflash {
	margin-top:             50px;
}

div.boxcontent div.with-image {
    background-repeat:      no-repeat;
}