/****************************************************************************** /
 *           2007C  puntNL bv internetdiensten Amsterdam  www.puntNL.nl       * 
 *           Author: Stan Grootes                                             *
/*******************************************************************************/



div#count { /* div die de breedte van de browser checked*/
	background-color: #AAAAFE;
	padding: 6px;
	font: normal 0.8em Arial, Helvetica, sans-serif;
	margin-bottom: 10px;
	display:none;
	
}

/******************************************************************************/
/* hoofdnavigatie styles */
/******************************************************************************/

#navigatie {
	margin:0;
	padding:0;
	width:560px;	
	}

#navigatie li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	}
	
#navigatie a {
	height:18px;
	display:block;
	margin-right: 75px;
	position:relative;
	}
	
#navigatie a:hover {
	color:#003366;
	}
	
#navigatie a span {
	position:absolute;
	left:-9999px;

	}
/* OUDE WINKEL PLAATJE
#navigatie #winkel {
	background:url(../_img/winkel.gif) no-repeat;
	width:51px;	
	}


#navigatie .on#winkel {
	background:url(../_img/winkel_on.gif) no-repeat;	
	}
*/

#navigatie #winkel {
	background:url(../_img/webshop.gif) no-repeat;
	width:63px;	
	}
	
#navigatie .on#winkel {
	background:url(../_img/webshop_on.gif) no-repeat;	
	}
	
#navigatie #verhaal {
	background:url(../_img/verhaal.gif) no-repeat;
	width:58px;
	}
	
#navigatie .on#verhaal {
	background:url(../_img/verhaal_on.gif) no-repeat;	
	}
	
#navigatie #projecten {
	background:url(../_img/projecten.gif) no-repeat;
	width:76px;
	}
	
#navigatie .on#projecten {
	background:url(../_img/projecten_on.gif) no-repeat;	
	}
	
#navigatie #nieuws {
	background:url(../_img/nieuws.gif) no-repeat;
	width:52px;
	}
	
#navigatie .on#nieuws {
	background:url(../_img/nieuws_on.gif) no-repeat;	
	}
	
/*----------ENGELSE NAVIGATIE STYLES---------*/


#navigatie #shop {
	background:url(../_img/webshop.gif) no-repeat;
	width:63px;	
	}
	
#navigatie .on#shop {
	background:url(../_img/webshop_on.gif) no-repeat;	
	}

/* OUDE SHOP KNOP
#navigatie #shop {
	background:url(../_img/shop.gif) no-repeat;
	width:51px;	
	}
	
#navigatie .on#shop {
	background:url(../_img/shop_on.gif) no-repeat;	
	}
*/
	
#navigatie #story {
	background:url(../_img/story.gif) no-repeat;
	width:58px;
	}
	
#navigatie .on#story {
	background:url(../_img/story_on.gif) no-repeat;	
	}
	
#navigatie #projects {
	background:url(../_img/projects.gif) no-repeat;
	width:76px;
	}
	
#navigatie .on#projects {
	background:url(../_img/projects_on.gif) no-repeat;	
	}
	
#navigatie #news {
	background:url(../_img/news.gif) no-repeat;
	width:52px;
	}
	
#navigatie .on#news {
	background:url(../_img/news_on.gif) no-repeat;	
	}
	
/*----------EINDE - ENGELSE NAVIGATIE STYLES---------*/
	
#navigatie li ul { /* submenu */
	position: absolute;
	width:100px;	
	background:#fff;
	margin:0;
	padding:0 5px;
	filter:alpha(opacity=90);
	opacity: 0.9;
	-moz-opacity:0.9;
	z-index:999;	
	left: -999em;	
	}
	
#navigatie li li a {
	margin:0;
	height:16px;
	width:100px;
	text-decoration:none;
	}

#navigatie li li {
	padding:1px 0;	
	}

#navigatie li:hover ul, #navigatie li.ie_does_hover ul { 
	left: auto;
	}

/******************************************************************************/
/* quicklinks styles */
/******************************************************************************/

#quicklinks {
	position:absolute;
	top:0;
	right:5px;	
	margin:0;
	padding:0;		
	}
	
#quicklinks li {
	margin:0 0 0 30px;
	padding:0;
	list-style:none;
	display:inline;	
	}
	
#quicklinks a {
	text-decoration:none;
	}	

	
#quicklinks .on a {
	color:#003366;
	}
	
	
/******************************************************************************/
/* dropdown styles */
/******************************************************************************/

#content .dropdown {
	margin:0 0 5px 0;
	padding:0;
	border:1px solid #CCC;
	width:220px;						
	}	
	
#content .dropdown li {
	margin:0;
	padding:2px 2px 2px 0;
	list-style:none;
	background:url(../_img/dropdown.gif) no-repeat 207px 7px;
	width:220px;		
	}

#content .dropdown li a {
	background:none;
	padding:0 2px;			
	text-decoration:none;				
	}
	
#content .dropdown ul {	
	border:1px solid #CCC;
	border-top:none;
	margin:2px 0 0 0;		
	*margin:17px 0 0 0;
	position:absolute;
	left:-9999px;
	background:#FFF;
	width:200px;
	padding:0 0 3px 0;					
	}
	
#content .dropdown ul li {
	border:0;
	padding:1px 2px 0 0;
	background:none;
	width:200px;
							
	}
	
#content .dropdown ul .off a {
	color: #D8D8D8;	
	cursor:default;
	}

#content .dropdown li:hover ul, #content .dropdown li.ie_does_hover ul {
	left:0;		
	}
	
#content .dropdown li:hover, #content .dropdown li.ie_does_hover {
	background:url(../_img/dropdown_hover.gif) no-repeat 207px 7px;
	}
	

/******************************************************************************/
/* imageBank styles */
/******************************************************************************/

#imageBank {
	width:540px;
	height:420px;				
	margin:50px 0 0 0;
	padding:0 0 20px 0;
	position:relative;	
	float:left;
	}

#imageBank img{
border: 0;}
	

.home #imageBank { 
	width:870px;
	height:690px;	
	}	
	
.winkel #imageBank {
	width:630px;
	height:auto;
	}

.site #imageBank {
	width:630px;
	height:690px;
	}

	
#imageBank  a {
	height:60px;
	width:60px;
	overflow:hidden;
	display:block;				
	}
	
.winkel #imageBank a {
	float:left;
	margin:0 30px 30px 0;	
border: 1px solid white;
	}
	
#imageBank a img {
	border:0;	
	}
	
#imageBank a:hover img {
	filter:alpha(opacity=40);
	opacity: 0.4;
	-moz-opacity:0.4;
	}


#imageBank ul {
	margin:0;
	padding:0;			
	}
	
#imageBank li {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;	
	}

#imageBank li a {
	margin:0;	
	}
	



/*----------WINKEL SCHAAKBORD STYLES; elk plaatje zn eigen coördinaten!---------*/

	
#A1 { left:0; top:0; }
#B1 { left:90px; top:0; }
#C1 { left:180px; top:0; }
#D1 { left:270px; top:0; }
#E1 { left:360px; top:0; }
#F1 { left:450px; top:0; }
#G1 { left:540px; top:0; }
#H1 { left:630px; top:0; }
#I1 { left:720px; top:0; }
#J1 { left:810px; top:0; }

#A2 { left:0px; top:90px; }
#B2 { left:90px; top:90px; }
#C2 { left:180px; top:90px; }
#D2 { left:270px; top:90px; }
#E2 { left:360px; top:90px; }
#F2 { left:450px; top:90px; }
#G2 { left:540px; top:90px; }
#H2 { left:630px; top:90px; }
#I2 { left:720px; top:90px; }
#J2 { left:810px; top:90px; }

#A3 { left:0px; top:180px; }
#B3 { left:90px; top:180px; }
#C3 { left:180px; top:180px; }
#D3 { left:270px; top:180px; }
#E3 { left:360px; top:180px; }
#F3 { left:450px; top:180px; }
#G3 { left:540px; top:180px; }
#H3 { left:630px; top:180px; }
#I3 { left:720px; top:180px; }
#J3 { left:810px; top:180px; }

#A4 { left:0px; top:270px; }
#B4 { left:90px; top:270px; }
#C4 { left:180px; top:270px; }
#D4 { left:270px; top:270px; }
#E4 { left:360px; top:270px; }
#F4 { left:450px; top:270px; }
#G4 { left:540px; top:270px; }
#H4 { left:630px; top:270px; }
#I4 { left:720px; top:270px; }
#J4 { left:810px; top:270px; }

#A5 { left:0px; top:360px; }
#B5 { left:90px; top:360px; }
#C5 { left:180px; top:360px; }
#D5 { left:270px; top:360px; }
#E5 { left:360px; top:360px; }
#F5 { left:450px; top:360px; }
#G5 { left:540px; top:360px; }
#H5 { left:630px; top:360px; }
#I5 { left:720px; top:360px; }
#J5 { left:810px; top:360px; }

#A6 { left:0px; top:450px; }
#B6 { left:90px; top:450px; }
#C6 { left:180px; top:450px; }
#D6 { left:270px; top:450px; }
#E6 { left:360px; top:450px; }
#F6 { left:450px; top:450px; }
#G6 { left:540px; top:450px; }
#H6 { left:630px; top:450px; }
#I6 { left:720px; top:450px; }
#J6 { left:810px; top:450px; }

#A7 { left:0px; top:540px; }
#B7 { left:90px; top:540px; }
#C7 { left:180px; top:540px; }
#D7 { left:270px; top:540px; }
#E7 { left:360px; top:540px; }
#F7 { left:450px; top:540px; }
#G7 { left:540px; top:540px; }
#H7 { left:630px; top:540px; }
#I7 { left:720px; top:540px; }
#J7 { left:810px; top:540px; }


#A8 { left:0px; top:630px; }
#B8 { left:90px; top:630px; }
#C8 { left:180px; top:630px; }
#D8 { left:270px; top:630px; }
#E8 { left:360px; top:630px; }
#F8 { left:450px; top:630px; }
#G8 { left:540px; top:630px; }
#H8 { left:630px; top:630px; }
#I8 { left:720px; top:630px; }
#J8 { left:810px; top:630px; }

/*----------imageBank SCHAAKBORD STYLES SCREEN_MED; scherm <1024px, adaptive scalen dmv scale.js ---------*/

.screen_med #imageBank {
	height:450px;	
	}

.screen_med #A6,
.screen_med #B6,
.screen_med #C6,
.screen_med #D6,
.screen_med #E6,
.screen_med #F6,
.screen_med #G6,
.screen_med #H6, 
.screen_med #I6,
.screen_med #J6,
.screen_med #A7,
.screen_med #B7,
.screen_med #C7,
.screen_med #D7,
.screen_med #E7,
.screen_med #F7,
.screen_med #G7,
.screen_med #H7,
.screen_med #I7,
.screen_med #J7,
.screen_med #A8,
.screen_med #B8,
.screen_med #C8,
.screen_med #D8,
.screen_med #E8,
.screen_med #F8,
.screen_med #G8,
.screen_med #H8,
.screen_med #I8,
.screen_med #J8 { 
	display:none;
	}
	
/*----------LOGO---------*/	
	
.logo {
	background:url(../_img/logo.gif) no-repeat;
	height:60px;
	width:60px;
	overflow:hidden;
	display:block;		
	}
	
.logo:hover {
	background:url(../_img/logo_hover.gif) no-repeat;
	}
	
.logo span {	
	position:absolute;
	left:-9999px;
	}
	
/*----------SPECIFIEKE imageBank NAVIGATIE---------*/	
	
#imageBank .medium a {
	width:240px;
	height:240px;
	}

#imageBank .medium a:hover img {
	filter:alpha(opacity=100);
	opacity: 1.0;
	-moz-opacity:1.0;
	}		

#imageBank .detail {
	position:absolute;
	background:url(../_img/list.gif) no-repeat 0 6px;
	top:175px;
	left:5px;
	height:auto;	
	z-index:50;	
	margin:0;
	padding:0 0 0 10px;
	text-decoration:none;
	}
	
#imageBank .achterkant {
	position:absolute;
	background:url(../_img/list.gif) no-repeat 0 6px;	
	top:155px;
	left:5px;
	height:auto;
	z-index:50;
	margin:0;
	padding:0 0 0 10px;
	text-decoration:none;
	}
	
#imageBank .achterkant:hover,
#imageBank .detail:hover {
	background:url(../_img/list_hover.gif) no-repeat 0 6px;
	}
	
#imageBank .terug {
	position:absolute;
	left:5px;
	top:90px;
	text-decoration:none;
	background:url(../_img/terug.gif) no-repeat 0 6px;
	height:auto;
	padding:0 0 0 10px;
	margin:0;
	}
	
#imageBank .terug:hover {
	background:url(../_img/terug_hover.gif) no-repeat 0 6px;
	}


	
/*---------- IMAGEBANK SERIE---------*/

#serie {
	position:absolute;
	top:270px;
	width:630px;	
	}
	
#imageBank #serie a {
	float:left;
	}

.serie {
	position:absolute;
	top:335px;
	left:10px;
	z-index:50;
	margin:0;
	}
	
#vorige {
position:absolute;
left:90px;
top:485px;
text-decoration:none;
background:url(../_img/terug.gif) no-repeat 0 6px;
padding:0 0 0 10px;
}

#vorige:hover {
	background:url(../_img/terug_hover.gif) no-repeat 0 6px;
	}

#volgende {
position:absolute;
right:365px;
top:485px;
text-decoration:none;
background:url(../_img/list.gif) no-repeat right 5px;
padding:0 10px 0 0;
}

#volgende:hover {
	background:url(../_img/list_hover.gif) no-repeat right 5px;
	}