/* ================================ +
   Project Westergasfabriek
 + ================================ */



/* 
** Made by: Edgar Vijgeboom
** Website:	www.studioparkers.nl
*/



/* ================================ +
               STANDAARDS
+  ================================ */

/* start RESET DEFAULT styles */
*{ margin:0; padding:0; border:0px; }


body { 
	font-family: 		verdana,tahoma,arial;
	font-size:			69%;
	line-height: 		15px;
	color: 				#000000;
	text-align: 		left;
}

* html li	{
	height:				1%;
	}
	
img { border:			0px; }	

ul { 
	list-style:			none;
	overflow:			hidden;
	}

a {
	text-decoration:	none; 
	color:				#00adef;
 }
 
a:hover {
	text-decoration:	underline;  
 }

.clear {
	clear:				both;
 }

.float_left {
	float: 				left;
 }

.float_right {
	float: 				right;
}


/* end RESET DEFAULT styles */

.link {
	display:			block; 
	margin:				2px 0px 0px 2px; 
	padding:			0; 
	text-indent:		-1000px;
	text-decoration:	none;
	overflow:			hidden;
	height:				11px; 
	width:				14px; 
	background: 		url('../images/link.gif') no-repeat 0px 0px;
}

.link:hover, .link:focus { 
	background: 		url('../images/link.gif') no-repeat -14px 0px;
}




/* ================================ +
             GLOBAL LAYOUT
+  ================================ */

#container {
	position:			relative;
	margin:				auto;
	width:				996px !important;
	width:				997px;
	text-align:			left;
}

#maincontent {

}

#landing {
	position:			absolute;
	z-index:			3;
	width:				997px;
	height:				387px;
	left:				0px;
	background:			url('../images/landing_titel.jpg') no-repeat 0px 0px;
	}
	
#hoofdnav {
	position:			absolute;
	top:				30px;
	right:				10px;
	z-index:			2
	}
	
#hoofdnav a:hover {
	color:				#ff0198
	}

#flashcontainer {
	position:			absolute;
	z-index:			0;
	height:				630px;
	width:				100%;
	}

#dummy_layer_NL {
	position:			absolute;
	z-index:			0;
	height:				630px;
	width:				997px;
	background: 		url('../images/back_dummy_nl.gif') no-repeat 0px 0px;
	background-color:	#ffffff;	
}

#dummy_layer_EN {
	position:			absolute;
	z-index:			0;
	height:				630px;
	width:				997px;
	background: 		url('../images/back_dummy_en.gif') no-repeat 0px 0px;
	background-color:	#ffffff;	
}

#lightbox {
	position:			absolute; 	/* needed for footer positioning*/
	width:				998px;
	height:				100%; 
	height:				700px;		/* IE6: treaded as min-height*/
	min-height:			100%; 		/* real browsers */
	margin-left:		-1px !important;
	margin-left:		0px;
	background-color:	#ffffff;
	opacity:			0.65;
	z-index:			2;
	text-align:			center;
	filter:				alpha (opacity=65);
	}

.lightbox_viewer {
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	height:				auto !important; /* real browsers */
	height:				1000px; /* IE6: treaded as min-height*/
	min-height:			100%; /* real browsers */
	z-index:			9;
	margin:				0 auto; 	
	background-color:	#000000;
	opacity:			0.70;
	filter:				alpha (opacity=70);
	text-align:			center;
	}


.detailbg {
	behavior: 			url(iepngfix.htc);
	background: 		url('../images/bg_detail.png') no-repeat 0px 0px;
	z-index:			3;
	}
	
.detail {
	position:			absolute;
	left:				28%;
	top:				5%;
	width:				730px;
	height:				689px;
	padding:			15px 0 0 15px;
	z-index:			4;
	}

.viewer {
	position:			absolute;
	left:				25%;
	top:				5%;
	width:				720px;
	height:				600px;
	padding:			15px 0 0 15px;
	z-index:			20;
	}
	
.viewerbg {
	behavior: 			url(iepngfix.htc);
	background: 		url('../images/bg_viewer.png') no-repeat 0px 0px;
	z-index:			19;
	}


.colofonbg {
	behavior: 			url(iepngfix.htc);
	background: 		url('../images/bg_colofon.png') no-repeat 0px 0px;
	z-index:			5;
	height:				1400px
	}
	
.colofon {
	position:			absolute;
	right:				-20px;
	top:				0;
	width:				779px;
	height:				1400px;
	padding-left:		42px;
	z-index:			6;
	}
	
.colofon_nav  {
	position:			absolute;
	right: 				79px !important;
	right: 				78px;
	top: 				56px;
	width:				137px;
	min-height:			175px;
	padding:			50px 10px 26px 15px;
	z-index:			10;
	line-height:		1.7em;
	background-color:	#d9f2fd;
	color:				#00adef
	}
	
.colofon_nav h4 {
	font-size:			1.2em;
	color:				#ff0099;
	margin-bottom:		8px;
	}
	
.close_col {
	right:		85px;
	top:		5px;
	}
	
	
.colofon_content {
	width:400px;
	margin:		50px 0 0 80px;
	}
	
.colofon_content a{
	color:#00aaff;
	text-decoration:none;
	}	
	
.colofon_content a:hover{
	text-decoration:underline;
	}		
	
.pink {
	color:#ff0099;
	line-height:18px;
	}	
	
.pink2 {
	color:#ff0099;
	line-height:28px;
	}	

#detailcontainer #title {
	position:			relative;
	width: 				700px;
	height:				44px;
	float:				left;
	}

	
#detailcontainer #foto {
	position:			relative;
	width: 				540px;
	height:				200px;
	float:				left;
	}

#detailcontainer #browser {
	position:			relative;
	width: 				143px;
	height:				185px;
	float:				left;
	padding:			5px 5px 10px 12px;
	}

#detailcontainer #title {
	position:			relative;
	width: 				700px;
	height:				44px;
	float:				left;
	}

#detailcontainer #content {
	display:			inline;
	position:			relative;
	width: 				410px;
	height:				355px;
	overflow:			auto;
	float:				left;
	padding-right:		20px;
	margin:				25px 0 0px 95px
	
	}
	
	

#detailcontainer #nav {
	position:			absolute;
	right: 				30px !important;
	right: 				29px;
	top: 				259px;
	width:				140px;
	min-height:				175px;
	padding:			25px 10px 10px 10px;
	z-index:			10
	}


.onderdeelvan {
	display:			block;
	color: 				#ff0099;
	margin:				20px 0 5px 0
}



/* viewer */
#viewer #title_viewer {
	position:			relative;
	width: 				700px;
	height:				23px;
	float:				left;
	}

#viewer #media , #viewer #mediaflv{
	position:			relative;
	float:				left;
	}

#viewer .thumbs_viewer_liggend {
	position:			absolute;
	width:				175px;
	height:				300px;
	top:				26px;
	right:				15px
	}

#viewer .thumbs_viewer {
	position:			absolute;
	width:				115px;
	height:				300px;
	top:				50px;
	right:				15px
	}	

#viewer .foto_detail {
	z-index: 20
	}



/* thema detail */
#thema {
	position:			absolute;

	width:				997px;
	height:				650px;
	background-color:	white;
	z-index:			30
	}

#thematitle {
	position:			relative;
	width:				100%;
	height:				56px;
	float:				left
	}
	
#thematitle .title {
	margin:				15px 0 0 65px;
	}
	
#themafilm {
	position:			relative;
	width:				997px;
	height:				301px;
	float:				left;
	}

#nav-themas {
	position:			absolute;
	left: 				65px;
	top: 				390px;
	width:				190px;
	height:				175px;
	z-index:			31;
	}
	
#verhaal {
	position:			absolute;
	left: 				260px;
	top: 				390px;
	width:				450px;
	z-index:			31;
	}
	
#subnav-themas {
	position:			relative;
	width:				180px;
	min-height:			175px;
	padding:			30px 5px 15px 13px;
	float:				right;
	}



/* landingspagina */
.intro_nl {
	position:			absolute;
	width:				266px;
	top:				430px;
	left:				330px;	
	}

.intro_en {
	position:			absolute;
	width:				266px;
	top:				430px;
	left:				644px;	
	}
	
.scheiding {
	position:			absolute;
	top:				415px;
	left:				600px;	
	}
	
	

/* Kleuren */
.geschiedenis, .history {
	background-color:	#778899
	}

.geschiedenis_half, .history_half {
	background-color:	#abb5c0
	}

.geschiedenis_licht, .history_licht {
	background-color:	#e4e7eb
	}

.gebouwen, .buildings {
	background-color:	#cc2222
	}

.gebouwen_half, .buildings_half {
	background-color:	#fd5454
	}

.gebouwen_licht, .buildings_licht {
	background-color:	#f5d3d3
	}

.sanering, .cleanup {
	background-color:	#ffbb00
	}

.sanering_half, .cleanup_half {
	background-color:	#ffcf4c
	}

.sanering_licht, .cleanup_licht {
	background-color:	#ffeebf
	}

.park {
	background-color:	#99bb11
	}

.park_half {
	background-color:	#b7cf58
	}

.park_licht {
	background-color:	#e0eab7
	}

.proces, .process {
	background-color:	#ff7700
	}

.proces_half, .process_half {
	background-color:	#ffa659
	}

.proces_licht, .process_licht {
	background-color:	#ffddbf
	}

.cultuur, .culture {
	background-color:	#990066;
	}

.cultuur_half, .culture_half {
	background-color:	#c773ab
	}

.cultuur_licht, .culture_licht {
	background-color:	#f0d9e8
	}

.roze {
	color:				#ff0099;
	}

.colofon_licht {
	background-color:   #d9f2fd
	}

/* titles, headers and typo */

#detailcontainer #content h2 {
	font-size:			1.3em;
	font-weight: 		normal;
	color:				#ff0099;
	margin:				0 0 20px 0
	}

#detailcontainer #browser h4 {
	font-size:			1.0em;
	font-weight: 		normal;
	margin:				5px 0 10px 0
	}

#detailcontainer #nav  h4,
#nav-themas h4,
#subnav-themas h4, 
#hoofdthema h4 {
	font-size:			1.2em;
	font-weight: 		normal;
	color:				#ff0099;
	margin:				0 0 8px 0
	}
	
#detailcontainer #title  img {
	margin: 12px 0 0 96px
	}

#viewer #title_viewer  h3 {
	font-size:			1.2em;
	font-weight: 		normal;
	color:				#ffffff;
	margin:				3px 0 0 27px
	}

.tekststaand {
	position:			absolute;
	line-height:		1.1em;
	width:				165px;
	top:				250px;
	right:				30px
	}

.tekstliggend {
	position:			absolute;
	line-height:		1.1em;
	width:				400px;
	top:				485px;
	left:				200px
	}


/* buttons */

.close_window {
	position:			relative;
	float:				right;
	display:			block;
	width: 				17px;
	height:				17px;
	background: 		url('../images/button_close.gif') no-repeat 0px 0px;
	}

#title_viewer .close_window {
	margin: 			3px 4px 0 0
	}

#thema .close_window {
	position:			absolute;
	right:				10px;
	top:				10px;
	z-index:			34
	}

#taalkeuze {
	position:			absolute;
	top:				525px;
	left:				303px;
	}
		
#taalkeuze a {
	display:			block;
	width:				175px;
	height:				35px;
	}

#taalkeuze a.startnl {	
	background-image: 		url(../images/knop_taalkeuze.gif);
	background-position: 	0 -5px;
	float:					left;
	margin-right:			140px
	}
	
#taalkeuze a.startnl:hover {	
	background-position: 	-200px -5px 
	}
	
#taalkeuze a.starten {	
	background-image: 		url(../images/knop_taalkeuze.gif);
	background-position: 	0 -40px;
	float:					left;
	}
	
#taalkeuze a.starten:hover {	
	background-position: -200px -40px 
	}


/* thumbnails */

#detailcontainer #browser  .thumb {
	position:			relative;
	width:				42px;
	height:				49px;
	float:				left;
	margin:				0 5px 5px 0
	}

#detailcontainer #browser .thumb a {
	position:			absolute;
	left:				0;
	top:				0;
	display:			block;
	width:				42px;
	height:				49px;
	background: 		url('../images/mask_thumb_big.gif') no-repeat 0px 0px;
	}

#detailcontainer #browser  .thumb a:hover {
	background-position: -100px 0;
	}

#detailcontainer #browser .video a {
	background: 		url('../images/mask_thumb_video_big.gif') no-repeat 0px 0px;
	}

#detailcontainer #browser  .video a:hover {
	background-position: -100px 0;
	}

#viewer #thumbs_viewer  .thumb {
	position:			relative;
	width:				30px;
	height:				35px;
	float:				left;
	margin:				0 3px 3px 0
	}

#viewer #thumbs_viewer .thumb a {
	position:			absolute;
	left:				0;
	top:				0;
	display:			block;
	width:				30px;
	height:				35px;
	background: 		url('../images/mask_thumb_small.gif') no-repeat 0px 0px;
	}

#viewer #thumbs_viewer .thumb a:hover {
	background-position: -71px 0;
	}


#viewer #thumbs_viewer .video a {
	background: 		url('../images/mask_thumb_video_small.gif') no-repeat 0px 0px;
	}

#viewer #thumbs_viewer .video a:hover {
	background-position: -71px 0;
	}

#icon	{
	position:			absolute;
	top:				265px;
	width:				90px;
	left:				15px;
	text-align:			center;
	}




/* lists */

#detailcontainer #nav li,
#nav-themas li,
#subnav-themas li  {
	background: 		url('../images/bg_related.gif') no-repeat 0px 5px;
	text-indent:		12px;
	line-height:		1.4em;
	color:				#00adef
	}
	
#detailcontainer #nav li a:hover,
#nav-themas li a:hover,
#subnav-themas li a:hover   {
	text-decoration:	underline;
	}