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



/* 
** 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:			    12px;
	line-height: 		    17px;
	color: 				      #ffffff;
	text-align: 		    left;
  background-color:   #000000;
  }

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

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

a {
	text-decoration:	 underline; 
	color:				     #ffffff;
  outline:           none
 }

 
a:hover {
	text-decoration:	 none;  
  color:             #ff0099;
 }

.clear {
	clear:				     both;
 }

.float_left {
	float: 				     left;
 }

.float_right {
	float: 				     right;
}

h1, h2, h3 {
 font-family:       arial,Arial, Helvetica, sans-serif;
 font-size:         30px;
 }

/* end RESET DEFAULT styles */


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


#container {
	position:			   relative;
	margin:				   auto;
  text-align:			 left;
  }

#maincontent {

  }


#bgvideo {
  display:            none;
  position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  min-height:         100%;
  }

.roze {
	color:             #ff0099;
  }
 
.wit , #over-right a.wit  {
  color:             #ffffff;
  }
  
.zwart {
  color:             #000000;
  }
  
#navigatie {
  position:         absolute;
  z-index:          200
  }
 
/* ================================ +
             homepage
+  ================================ */
.home {
  margin:             auto;
  background-color:   #000000
  }

#home {
  position:           relative;
  width:              996px;
  height:             800px;
  margin:             auto
  }
  
#langswitch  {
  width:              150px;
  position:           absolute;
  right:              15px;
  top:                10px;
  z-index:            14
  }

#langswitch a {
  text-decoration:    underline;  
  }

#langswitch a.active{
  text-decoration:    none;  
  color:              #ff0099;
  }
  
#langswitch.langsub {
  position:           absolute;
  left:               5px;
  top:                90px;
  z-index:            200
  }

.logo {
  margin-top:         43px
  }

#introtekst {
  position:           absolute;
  top:                145px;
  left:               85px;
  width:              310px;
  z-index:            13
  }
  
#introtekst h2 {
  font-size:          16px;
  color:              #ff0099
  }
  
#sponsor {
  position:           absolute;
  top:                700px;
  left:               90px;
  z-index:            12;
  }
  
#homenavigatie {
  position:          absolute;
  top:               0;
  left:              -20px;
  margin:            auto;
  z-index:           10;
  overflow:          hidden;
  outline:           none
  }

#homenavigatie ul {
  margin:           350px 0 0 105px;
  }
#homenavigatie .flashbericht {
	position: relative;
  margin:           -50px 0 0 400px;
}
  
#socialnetworks {
  position:           absolute;
  top:                750px;
  left:               800px;
  z-index:            12;
  }

#navigatie {
  outline:           none
  }

/* ================================ +
             photostream
+  ================================ */

#photostream {
  position:       absolute;
  left:           -12px;
  top:            78px;
  width:          1001px;
  height:         572px;
  z-index:        9
  }

#photostream div {
  display:      none;
  position:     absolute;
  width:        75px;
  height:       75px;  
  }

#pstream1{
left:-76px;
top:292px;
}

#pstream2{
left:771px;
top:4px;
}

#pstream3{
left:617px;
top:6px;
}

#pstream4{
left:540px;
top:27px;
}

#pstream5{
left:848px;
top:35px;
}

#pstream6{
left:694px;
top:50px;
}

#pstream7{
left:463px;
top:72px;
}

#pstream8{
left:771px;
top:81px;
}

#pstream9{
left:617px;
top:83px;
}

#pstream10{
left:925px;
top:92px;
}

#pstream11{
left:540px;
top:104px;
}

#pstream12{
left:848px;
top:112px;
}

#pstream13{
left:694px;
top:127px;
}

#pstream14{
left:771px;
top:158px;
}

#pstream15{
left:925px;
top:169px;
}

#pstream16{
left:1002px;
top:181px;
}

#pstream17{
left:1002px;
top:256px;
}


#pstream18{
left:848px;
top:189px;
}


#pstream19{
left:925px;
top:246px;
}


#pstream20{
left:1002px;
top:333px;
}


#pstream21{
left:1px;
top:251px;
}

#pstream22{
left:848px;
top:266px;
}

#pstream23{
left:78px;
top:298px;
}

#pstream24{
left:925px;
top:323px;
}

#pstream25{
left:1px;
top:328px;
}

#pstream26{
left:848px;
top:343px;
}

#pstream27{
left:155px;
top:347px;
}

#pstream28{
left:232px;
top:363px;
}

#pstream29{
left:78px;
top:375px;
}

#pstream30{
left:309px;
top:382px;
}

#pstream31{
left:771px;
top:389px;
}

#pstream32{
left:386px;
top:396px;
}

#pstream33{
left:617px;
top:396px;
}

#pstream34{
left:925px;
top:400px;
}

#pstream35{
left:463px;
top:404px;
}

#pstream36{
left:1px;
top:405px;
}

#pstream37{
left:540px;
top:417px;
}

#pstream38{
left:694px;
top:417px;
}

#pstream39{
left:848px;
top:420px;
}

#pstream40{
left:155px;
top:424px;
}

#pstream41{
left:232px;
top:440px;
}

#pstream42{
left:78px;
top:452px;
}

#pstream43{
left:309px;
top:459px;
}

#pstream44{
left:771px;
top:466px;
}

#pstream45{
left:386px;
top:473px;
}

#pstream46{
left:617px;
top:473px;
}

#pstream47{
left:463px;
top:481px;
}

#pstream48{
left:540px;
top:493px;
}

#pstream49{
left:694px;
top:494px;
}




/* ================================ +
             HULP TABS
+  ================================ */

#hulptabs {
 position:        absolute;
 top:             115px;
 left:            0;
 height:          525px;
 z-index:         100
 }

  
#hulptabs #tab1 {
 position:            absolute;
 top:                 0px;
 left:                -635px;
 width:               680px;
 height:              525px;
 background-image:    url('../images/tab-blauw.png');
 background-repeat:   no-repeat;
 z-index:             101;
 margin-left:         0px;
 }
 
#hulptabs #tab2 {
 position:            absolute;
 top:                 0px;
 left:                -635px;
 width:               680px;
 height:              525px;
 background-image:    url('../images/tab-roze.png');
 background-repeat:   no-repeat;
 z-index:             102;
 margin-left:         0px;
 }

  
a.controls {
 position:            absolute;
 display:             block;
 top:                 6px;
 right:               12px;
 width:               35px;
 height:              150px;
 background-image:    url('../images/tab-controls.png');
 z-index:             105;
 outline:             none
 }

#hulptabs.en a.controls{
 background-image:    url('../images/tab-controls-EN.png');
 }
   
#hulptabs #tab2 .hoe {
 background-image:    url('../images/tab-controls-hoe.png');
 }
   
#hulptabs.en #tab2 .hoe {
 background-image:    url('../images/tab-controls-hoe-EN.png');
 }
  
#hulptabs .content {
  display:            block;
  width:              365px;
  height:             400px;
  margin:             0 0 0 60px;
  padding-right:      10px;
  overflow:           auto;
  overflow-x:         none;
 }

  
#hulptabs .objectfoto {
  position:           absolute;
  top:                120px;
  left:               460px
 }
  

#hulptabs h2 {
  display:            block;
  width:              350px;
  font-size:          30px;
  font-weight:        bold;
  padding:            50px 0px 3px 60px
 }

#hulptabs h3 {
 font-size:           16px;
 line-height:         20px; 
 margin-bottom:       15px
 }
 
#hulptabs .content ul {
  list-style:         disc;
  }
  
#hulptabs .content li {
  margin-left:      15px
  }
  
#hulptabs .content a {
  text-decoration:  underline;
  }
  
#hulptabs .content a:hover {
  color:            #ffffff;
  text-decoration:  none;
  }
  
#tab1 a.controls {
  z-index:             103;
  }
  
#tab2 a.controls {
 top:                 261px;
 z-index:             104;
 background-position: -50px 0
 }
  
#hulptabs .close:hover {
 background-position: -100px 0
 }
 
#hulptabs .open:hover {
 background-position: -150px 0
 }

#tab2 .fluisterbank_uitleg {
  width:              500px;
}
 
#ghosttab1 {
 position:            absolute;
 display:             block;
 left:                0;
 top:                 5px;
 width:               30px;
 height:              150px;
 z-index:             106
 }

#hulptabs a.nobg, #hulptabs.en a.nobg {
  background-image:    none;
}

.kaartknop {
  position:           absolute;
  display:            block;
  height:             40px;
  top:                3px;
  right:              75px;
  background-image:   url('../images/button-kaart.png');
  background-repeat:  no-repeat;
  background-position:right 3px;
  padding:            10px 50px 0;
  color:              #000000;   
  }
  
a.kaartknop:hover {
  color:              #000000
  }

  
/* ================================ +
             STREAMER
+  ================================ */
#streamer {
  display:            none;
  font-size:          20px;
  position:           absolute;
  z-index:            201;
  font-weight:        bold;
  top:                87px;
  left:               117px;
  }
  
#streamer.wandeling {

  }

/* ================================ +
             TIJDKIJKER
+  ================================ */

#tijdkijker {
  position:           absolute;
  width:              100%;
  height:             900px;
  min-height:         100%;
  outline:            none
  }
  


 
/* ================================ +
             WANDELINGEN
+  ================================ */

.walkbg {
   position:          absolute;
	 background-image:  url("../images/lijnen-wandeling-bg.png");
	 background-repeat: no-repeat;
	 height:            2000px;
   top:               110px;
	 width:             100%;
  }

.walkblock_1 {
	position:           absolute;
	left:               210px;
	top:                130px;
  }
	
.walkblock_2 {
  position:           absolute;
  left:               693px;
  top:                327px
  }
	
.walkblock_3 {
  position:           absolute;
  left:               120px;
	top:                405px
  }
  
.walkblock_4 {
  position:           absolute;
  left:               464px;
  top:                650px
  }
	
.walkblock_5 {
  position:           absolute;
  left:               140px;
  top:                885px
  }
	
.walkblock_6 {
  position:           absolute;
  left:               680px;
  top:                1030px
  }

.walkblock_7 {
  position:           absolute;
  left:               254px;
  top:                1250px
  }

.walkblock_8 {
  position:           absolute;
  left:               574px;
  top:                1494px
  }

.walkblock_9 {
  position:           absolute;
  left:               144px;
  top:                1689px
  }
		
.walkblock_10 {
  position:           absolute;
  left:               666px;
  top:                1827px
  }
	
.walkholder {
	position:           absolute;
	top:                58px;
	left:               -20px;
	width:              466px;
	height:             170px;
	background-color:   #000000;
	border:             2px solid black;
	overflow:           hidden
	}
	
.walkslider {
	width:             1000px;
	position:          absolute;
  }

.walkcontent {
  font-size:          11px;
  width:              400px;
  height:             174px;
	color:              #ffffff;
	margin:             20px 5px 20px 20px;
  float:              left;
  }
	
.walkcontent a {
  line-height:        28px;
  color:              #ff0099;
  }
  
.walkcontent a:hover {
  color:              #ffffff;
  }
  
.walkcontent h2 {
	font-size:         24px;
  font-weight:       bold
 }
 
.walkimage {
	float:             left;
 }

.button-wandeling  {
	display:           block;
	float:             left;
	width:             20px;
	height:            175px;
	min-height:        175px;
	background-image:  url("../images/button-wandeling.gif");
	background-repeat: no-repeat;
	background-color:  #000000;
  outline:           none
  }

.button-wandeling.open {
  background-position: -82px 0
  }

	
	
	
/* ================================ +
             FLUISTERBANK
+  ================================ */

#bg-foto-fb {
	background-repeat:  no-repeat;
	position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  }
  
#fluisterbank {
  position:            absolute;
  height:              600px;
  width:               100%;
  height:              780px;
  outline:             none
  }
	
#fluisterthema {
  position:            absolute;
	top:                 115px;
  left:                15%;
	width:               682px;
	min-height:          540px;
	padding:             30px 30px 0 30px;
	background-image:    url("../images/trans-fluisterbank-thema.png");
	}
	
#fluisterthema h1 {
	font-size:           32px;
  font-weight:         normal;
	}
	
#fluisterthema .terug {
	float:               right;
	display:             block;     
	width:               70px;
	height:              25px;
	background-image:    url("../images/button-fluisterbank-back.png");
  background-repeat:   no-repeat;
	margin:              -15px -10px 0 0
  }
	
#fluisterthema .terug:hover {
	background-position: -100px 0
  }
  
#fluisterthema .terug.en {
  background-position: 0 -25px
  }

#fluisterthema .terug.en:hover {
  background-position: -100px -25px
  }
  
#verhalenlijst {
	margin-top:          30px;
  width:               695px
 }

#verhalenlijst .verhaal li {
  display:             block;
  float:               left;
  padding-bottom:      10px;
  vertical-align:      top;
  padding:             2px 0 10px 0;  
	}
	
#verhalenlijst li.quote {
  width:               455px;
	font-size:           18px;
  padding-left:        4px;
  padding-top:         0px;
  line-height:         20px;
  }
	
#verhalenlijst .verhaal li.titel {
	width:               135px;
	padding:             1px 10px 0 10px;
	}
  
#verhalenlijst .verhaal li.datum {
  width:               60px;
  }
  
#verhalenlijst .audioplayer {
  display:            none; 
  margin-bottom:      5px;
  }
  
/* ================================ +
             PARKLEZER
+  ================================ */

#bg-foto-pl {
  background-repeat:  no-repeat;
  position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  min-height:         100%;
  }

#trans-layer-pl {
  background-image:   url('../images/trans-layer-parklezer.png');
  background-repeat:  no-repeat;
  position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  min-height:         100%;
  }
  
#parklezer {
  width:              660px;
  height:             470px;
  position:           absolute;
  background-color:   #000000;
  left:               25%;
  top:                150px;
  }
  
#parkholder {
  position:           absolute;
  width:              585px;
  height:             370px;
  margin:             30px 0 0 40px;  
  overflow:           hidden;
  }        

#parkslider {
  position:           absolute;
  width:              3000px;
  }

#parkslider img {
  margin-right:      5px;
  }

#instructieholder {
  position:           absolute;
  width:             585px;
  top:               415px;
  left:              40px;  
  } 
  
#parkinstructie  {
  font-size:         18px;
  font-weight:       bold;
  padding-top:       2px;
  margin-right:      150px
  } 
  
#paging {
  float:            right;
  }
  
#paging span { 
  float:            left
  }
  
#paging a {
  display:           block;
  float:             left;
  width:             17px;
  height:            20px;
  background-image:  url("../images/paging-parklezer.gif");
  background-repeat: no-repeat;
  }
  
.pl-page-01:hover, .pl-page-01.active {
  background-position:  0 -30px
  }
  
.pl-page-02 {
  background-position:  -23px 0
  }
  
.pl-page-02:hover, .pl-page-02.active  {
  background-position:  -23px -30px
  }

.pl-page-03 {
  background-position:  -43px 0
  }
  
.pl-page-03:hover, .pl-page-03.active {
  background-position:  -43px -30px
  }

.pl-page-04 {
  background-position:  -66px 0
  }
  
.pl-page-04:hover, .pl-page-04.active {
  background-position:  -66px -30px
  }
  
  
/* ================================ +
             OVER
+  ================================ */

#bg-foto-over {
  background-repeat:  no-repeat;
  background-image:   url("../images/bg-over.jpg");
  position:           fixed;
  top:                0;
  left:               0;
  width:              100%;
  height:             100%;
  min-height:         100%;
  }
  
#nav_over {
  position:         absolute;
  left:             105px;
  top:              97px;
  background-color: #000000;
  z-index:          200
  }

#nav_over li {
  float:            left;
  padding:          8px 10px 5px 10px;
  border-right:     1px solid #999999;
  text-align:       center;
  font-size:        16px
  }

#nav_over a {
  text-decoration:  none;
  }
  
#nav_over a:hover, #nav_over a.active {
  color:            #ff0099
  }

#over {
  position:         absolute;
  top:              128px;
  left:             105px;  
  width:            830px;
  }
  
#over-left {
  width:            450px;
  height:           1690px;
  padding:          40px 60px 40px 30px;
  background-color: #000000;
  float:            left;
  }
  
#over-left h1 {
  font-size:        32px;
  font-weight:      normal;
  color:            #ff0099
  }

#over-left h2 {
  font-size:        18px;
  font-weight:      normal;
  color:            #ff0099
  }
  
#over-left h3 {
  font-size:        16px;
  font-weight:      normal;
  color:            #ffffff;
  }
  
#over-right {
  width:            250px;
  height:           1697px;
  background-color: #ef008f;
  color:            #000000;
  padding:          38px 15px 35px 25px;
  float:            left;
  }
  
#over-right a{
  color:            #000000;
  }
  
#over-right h2 {
  font-size:        18px;
  font-weight:      bold;
  color:            #000000;
  margin-bottom:	  7px;
  }
  

.thumbs li {
  float:            left;
  padding:          10px 10px 0 0
  }

.bg_logos {
  width:		          87%;
  background-color:	  #000000;
  padding:			      7px;
  }  
  
/* ================================ +
           PLATTEGROND
+  ================================ */

#overlay_bg_container {
  display:        none;
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  z-index:        2000;
 }

#overlay_bg {
  width:          100%;
  height:         100%;
  top:            0;
  left:           0;
  background-image:   url("../images/trans-black.png");
  z-index:        2001;
  }

#overlay_details{
  position:      relative;
  margin:        auto;
  top:           100px;
  z-index:       2020;
  width:         895px;
  display:       none
  }
  
#overlay_details img {
  margin:        auto;
  }
  
.close-lightbox, .close-lightbox-main  {
  position:         absolute;
  width:            18px;
  height:           20px;
  padding:          2px 2px 4px 3px;
  text-align:       center;
  right:            10px;
  top:              10px;
  background-color: #000000;
  color:            #ffffff;
  z-index:          2010;
  font-size:        20px;
  font-weight:      bold;
  text-decoration:  none;
  }
  
a.close-lightbox-main:hover {
	text-decoration:  none;
	color:            #ff0099
	}
	  
#plattegrond {
	width:          895px;
	height:         503px;
	}

#plattegrond img {
	position:		absolute;
  }

#legenda {
  position:         absolute;
  width:            140px;
  height:           236px;
  margin:			      15px 0 0 15px;
  padding:			    9px 0 0 12px;
  background: 		  #000000;
  }


#legenda li a{
	display:		block;
	width:			129px;
	text-indent:	-1000px;
	overflow:		hidden;
}

#legenda-tijdkijker { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -9px; }
#legenda-fluisterbank { height: 45px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -43px; }
#legenda-tours { height: 40px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -88px; }
#legenda-qr { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -128px; }
#legenda-info { height: 44px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -162px; }
#legenda-horeca { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -12px -205px; }

#legenda-tijdkijker.active { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -9px; }
#legenda-fluisterbank.active { height: 45px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -43px; }
#legenda-tours.active { height: 40px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -88px; }
#legenda-qr.active { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -128px; }
#legenda-info.active { height: 44px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -162px; }
#legenda-horeca.active { height: 34px; background: url("../images/plattegrond-legenda.gif") no-repeat -212px -205px; }




#urbanscreens{
  position:            absolute;
  width:               100%;
  height:              850px;
  outline:             none
  }