@import url("../06/makeup.css");	/*Alle informatie voor FONTS, DIVS en LINKS*/
@import url("../06/extramenu.css");	/*Alle specifieke informatie voor gekke eenmalige zaken*/

	/*  
	
	!! LET OP! Deze layout.css hoort in de 06 folder !!
	
	ERICK'S Webdesign was verantwoordelijk voor deze website
	URL: http://www.ericks.nl/
	Author: Erick Schluter
	
	Color Table:
	
	#ffffff -- Wit
	#cc0033	-- Rood
	#000000 -- Zwart
	#179cd6 -- lichte blauw
	#999999	-- Lichte grijs
	#cccccc	-- Lichtere grijs
	
	*/

body {		
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: normal;
	line-height: 12pt;
	color: #000000;
	background-color: #179cd6;
	margin:0; 
	padding:0;
	}	
	
/*Dit is ENKEL EN ALLEEN DE LAYOUT!*/
#topBar {
	position: absolute;
	z-index: 2;
	left: 0;
	width: 100%;
	height: 43px;
	color: #ffffff;
	background-color: #179cd6;	
	margin: 0;
}

#navigation {	
	position: absolute;
	z-index: 1;
	width: 155px;	
	top: 43px;
	left: 0%;	
	height:100%;	
	border-right: 10px solid #179cd6;
	text-align:left;
	color: #000000;
	background-color: #ffffff;
	padding-top: 24px;
	margin: 0px 0px 0px 0px; /*top right bottom left*/
	}

#centerDoc {
	position: absolute;		
	width:487px;	/*breedte van de inhoud*/
	left: 165px;	/*positie van de inhoud*/
	top: 43px;		/*positie van de inhoud*/
	text-align:left;
	z-index: 4;
	padding-left: 41px; 		/*positie van de tekst van de inhoud*/
	padding-top: 24px;			/*positie van de tekst van de inhoud*/
	padding-right: 41px;		/*positie van de tekst van de inhoud*/
	display: block;
	color: #000000;
	background-color: #ffffff;
	margin: 0px 0px 0px 0px; /*top right bottom left*/
	}
	
#imageMap {
	position: relative;		
	width:482px;	/*breedte van de inhoud*/
	left: 0px;		/*positie van de inhoud*/
	top: 0px;		/*positie van de inhoud*/
	text-align:left;
	z-index: 4;
	padding-left: 0px; 			/*positie van de tekst van de inhoud*/
	padding-top: 0px;			/*positie van de tekst van de inhoud*/
	padding-right: 0px;			/*positie van de tekst van de inhoud*/
	display: block;
	color: #000000;
	background-color: #ffffff;
	margin: 0px 0px 0px 0px; /*top right bottom left*/
	}

#rightSide {
	position: absolute;
	left: 741px;	/*Afstand vanaf de linkerkant*/
	top: 42px;	
	z-index: 3;
	padding-top: 0px;
	margin: 0px 0px 20px 0px; /*top right bottom left*/
	display: block;
	}

/* Begin ALLE ITEMS voor het MENU aan de LINKERKANT */
ul#navlist
{
list-style: none;
margin-left: 5px;
margin-top: 0px;
padding: 0;
width: 148px;
}

ul#navlist li
{
display: block;
padding-top: 0px;
padding-bottom: 0px;
}

ul#navlist li a
{
display: block;
width: 143px;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 3px;
border-left: 1px solid #ffffff;
border-top: 1px solid #179cd6;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
padding-left: 4px;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
padding-left: 4px;
}

/* Onderste BUTTON met BORDER at the BOTTOM ! */
ul#navlist li.bottom
{
display: block;
padding-top: 0px;
padding-bottom: 0px;
}

ul#navlist li.bottom a
{
display: block;
width: 143px;
padding-left: 4px;
padding-top: 3px;
padding-bottom: 3px;
border-left: 1px solid #ffffff;
border-top: 1px solid #179cd6;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #179cd6;
}

#navcontainer>ul#navlist li.bottom a { width: auto; }

ul#navlist li.bottom#active a
{
padding-left: 4px;
}

ul#navlist li.bottom a:hover, ul#navlist li.bottom#active a:hover
{
padding-left: 4px;
}

/* De LINKS van het MAIN MENU aan de LINKERKANT */
a.menu:link     {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #cc0033; text-decoration: none; background: #ffffff;}
a.menu:visited  {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #cc0033; text-decoration: none; background: #ffffff;}  
a.menu:hover    {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #179cd6; text-decoration: none; background: #ffffff;}
a.menu:active   {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #000000; text-decoration: none; background: #ffffff;}

a.menu2:link     {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #179cd6; text-decoration: none; background: #ffffff;}
a.menu2:visited  {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #179cd6; text-decoration: none; background: #ffffff;}  
a.menu2:hover    {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #cc0033; text-decoration: none; background: #ffffff;}
a.menu2:active   {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #000000; text-decoration: none; background: #ffffff;}

a.inactive:link     {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #999999; text-decoration: none; background: #ffffff;}
a.inactive:visited  {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #999999; text-decoration: none; background: #ffffff;}  
a.inactive:hover    {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #cccccc; text-decoration: none; background: #ffffff;}
a.inactive:active   {font-family: arial, Helvetica, sans-serif; font-size: 100%; font-weight: bold; letter-spacing: 0.0041em; color: #999999; text-decoration: none; background: #ffffff;}


a.banner_image:link, a.banner_image:visited, a.banner_image:hover, a.banner_image:active {text-decoration: none;}


/* Voor het adres onder de basis navigatie (links) */
.adres	{
		padding-top: 0px;
		padding-left: 4px;
		}
		
/* Voor de W3C logo's */
.w3c	{
		padding-top: 10px;
		padding-left: 4px;
		}

.date	{
		font-family: Arial, Helvetica, sans-serif; 
		font-style: normal;  
		font-weight: bold; 
		font-size: 85%;
		letter-spacing: 0.0020em;
		color: #000000;
		text-align: center;
		padding-right: 4px;	/* Anders staat hij niet in het midden vanwege de blauwe border v/d navigatie DIV! */
		padding-top: 24px;
		padding-bottom: 6px;
		background: #ffffff;
		}
/* Einde ALLE ITEMS voor het MENU aan de LINKERKANT */


/* Voor footer.html die wordt ge-include ! */
.footer		{
			display: block;
			width: 100%;
			margin-top: 120px;
			margin-bottom: 0px;
			border-top: 1px solid #179cd6;
			padding: 2px; 
			text-align: center;
			}
/* Einde ENKEL EN ALLEEN DE LAYOUT! */
		
		






/* Enkele DIVERSEN */

		
/* Zodat de TerugNaarBoven optie rechts van de pagina staat */			
.terugBoven	{
			margin-top:30px;
			margin-bottom:14px;
			text-align: right;
			}
			
.terugBoven2	{
			border: 1px dotted #179cd6;
			padding-top:10px;
			padding-right:10px;
			padding-bottom:10px;
			margin-top:20px;
			margin-bottom:20px;
			text-align: right;
			}
	
	
		
/* Zodat afbeeldingen in het algemeen geen lelijke randen hebben */
img	{
	border: 0px;
	padding: 0px;
	}

.dakloosbutton{
	display:block;
	width:167px;
	height:47px;
	background: #ffffff url(http://www.zmagazine.nl/08/images/dakloos.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:20px;
	}

.dakloosbutton-big{
	display:block;
	width:167px;
	height:220px;
	background: #ffffff url(http://www.zmagazine.nl/08/images/dakloos-big.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:20px;
	}
.dakloosbutton-archief{
	display:block;
	width:167px;
	height:220px;
	background: #ffffff url(http://www.zmagazine.nl/08/images/dakloos-big.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:0px;
	}
.dakloosbutton-bigII{
	display:block;
	width:167px;
	height:220px;
	background: #ffffff url(http://www.zmagazine.nl/08/images/dakloos-big.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:-1px;
	}
		
.donatiebutton{
	display:block;
	width:167px;
	height:52px;
	background: #ffffff url(http://www.zmagazine.nl/08/images/donatie.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:20px;
	}

.z-zoektbutton{
	display:block;
	width:167px;
	height:52px;
	background: #179cd6 url(http://www.zmagazine.nl/08/images/z-zoekt.gif);
	background-position:0px 0px;
	background-repeat:no-repeat;
	cursor: pointer;
	margin-top:20px;
	}

.archief_links{
	display:block;
	width:167px;
	height:52px;
	background: #ffffff;
	cursor: pointer;
	margin-top:20px;
	}


/* Voor nieuws zoals bv. een persbericht */
.nieuws{display:block;width:167px;margin-top:20px;padding:10px 0 10px 0;text-align:center;background:#ffffff;color:#000000;cursor:pointer;}

/* Voor nieuws zoals bv. een persbericht */
.nieuws_nieuw{display:block;width:182px;margin-top:20px;padding:10px 0 10px 0;text-align:center;background:#ffffff;color:#000000;cursor:pointer;}
	
	
/* Zodat afbeeldingen in teksten netjes RECHTS of LINKS staan */
.afbLinks {
float: left;
border: 1px solid #000000;
margin: 0px 20px 10px 0px; /*top right bottom left*/
}

.afbRechts {
float: right;
border: 1px solid #000000;
margin: 0px 0px 10px 20px; /*top right bottom left*/
}

.vergrootglas{float:right;padding:210px 0 0 30px;}

select	{
		width: 482px;
		padding-top:0px;
		padding-bottom:0px;
		background-color: #179cd6;
		border: 1px solid #000000; 
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
		}
		
		
 /* ROUNDED CORNERS */
.rbroundbox { background: url(../06/images/rounded/background.gif) repeat; }
.rbtop div  { background: url(../06/images/rounded/top_left.gif) no-repeat top left; }
.rbtop      { background: url(../06/images/rounded/top_right.gif) no-repeat top right; }
.rbbot div  { background: url(../06/images/rounded/bottom_left.gif) no-repeat bottom left; }
.rbbot      { background: url(../06/images/rounded/bottom_right.gif) no-repeat bottom right; }

 /* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
	width: 100%;
	height: 14px;
	font-size: 1px;
}
.rbcontent  { 
		margin: 0 14px;
		font-family: Arial, Helvetica, sans-serif;
		font-style: normal;
		font-weight: normal;
		font-size: 85%;
		letter-spacing: 0.0020em;
		line-height: 10pt;
		text-align: justify;
		color: #ffffff;
		background: #179cd6;

}


.rbroundbox { width: 480px; margin: auto; }	/* bepaal de breedte van de kolom in em of pixels */


/* other CSS rules */

.rbroundbox p, #realcontent .rbroundbox p { 
			padding: 0;
			margin: 0 0 0 0;	/*top right bottom left*/
			}

 /* Einde ROUNDED CORNERS */
 
.worldcup{
		margin-left:23px;
		border:1px solid #000000;
		width:435px;
		height:52px;
		}
		
		
		




/* LIGHTBOX! */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://www.zmagazine.nl/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://www.zmagazine.nl/lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #179cd6; }