/* site.css

*/
html { /* force vertical scrollbar */
	height: 101%;
	min-height: 101%;
	margin-bottom: 1px;
}
body {
    width: auto;
	margin: 0;
    padding: 0;
    background: #fff;
	font: normal 13px/19px Helvetica, Verdana, sans-serif;}

/* reset */
a {outline: none; border: 0; text-decoration: none;}
a:link {outline: none; border: 0; text-decoration: none;}
a:hover {outline: none; border: 0; text-decoration: none;}
a:active {outline: none; border: 0; text-decoration: none;}
a:visited {outline: none; border: 0; text-decoration: none;}

img {border: 0; outline: none; padding: 0; margin: 0;}

/* typography */
h1, h2, p {margin-top: 10px; margin-bottom: 0.9em;}

h1 {color: #000; font-size: 15px; font-weight: bold; line-height: 22px;}
h2 {color: #000; font-size: 13px; font-weight: bold; line-height: 18px;}

.gry {color: #666;}
.wht {color: #fff;}
.blk {color: #000; font-weight: bold;}

/* main page wrapper : wraps all but bg
 * ---------------------------------------------------------------------------------- */

#atffc {display:none;}  /* inserted at top of page by jwplayer script */

/* wrappers for no-iFrame version */
#noframe-bg {
    display: block;
	/*float: left;*/
    width: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background: url(../graphics/bgGradBrown-elephants.jpg) 0 0 repeat-x #fff;}

#pageWrapper-noFrame {
    display: block;
	position: relative;
    width: 675px;
	margin: 0px auto 0px auto;
	padding: 0px;
	background: #ccc;
}
#pageDrop {
    display: block;
	float: left;
    width: 645px;
	margin: 0px auto;
	padding: 20px 20px 20px 20px;
	background: #fff;
	-moz-box-shadow: 0px -10px 20px #ccc;
	-webkit-box-shadow: 0px -10px 20px #ccc;
}
#pageBorder {
    display: block;
	position: relative;
	float: left;
    width: 645px;
	margin: 0px auto;
	background: #fff;
}
/* end no-iFrame section */

#betaImg, #betaImg-iframe {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
}
#betaImg-iframe {top: 0px; left: 0px;}

#pageWrapper {
    display: block;
	position: relative;
    width: 645px;
	height: 100%;
	margin: 0px auto;
	padding: 0px;
	background: #ffffff;
}
.divider {
	display: block;
	float: left;
	width: 645px;
	height: 15px;
}
#player {
    display: block;
    width: 645px;
	height: 472px;
	margin: 0px;
	padding: 0px;
	background: #000000;	
}

#block1 {
	display: block;
	float: left;
	position: relative;
	width: 288px;
	height: 149px;
	margin: 0px;
	padding: 20px 15px 10px 20px;
	background: #f9b200;
	color: #a7000c;
}
	#block1 h1 {
		display: block;
		width: 288px;
		height: 35px;
		margin: 0px;
		padding: 0px;
		color: #a7000c;
		font: bold 30px/30px Helvetica, Arial, sans-serif;
	}
	a#camSwitch {
		display: block;
		width: 160px;
		height: 14px;
		padding: 4px 6px 2px 6px;
		margin: 0px 0px 5px 0px;
		background: #a7000c;
		color: #f9b200;
		font: bold 14px/14px Helvetica, Arial, sans-serif;
		text-align: center;
		border: 0;
		outline: none;
	}
	a#camSwitch:hover {
		background: #fff;
		color: #a7000c;
		cursor: pointer;
	}
		.en a#camSwitch {width: 128px;}
		
	#block1 h2 {
		width: 288px;
		height: 20px;
		margin: 0px;
		padding: 0px;
		color: #a7000c;
		font: normal 17px/19px Helvetica, Arial, sans-serif;
	}
	.shareThis {
		display: block;
		width: 267px;
		height: 20px;
		padding: 0px 0px 0px 15px;
		margin: 5px 0px 2px 0px;
		background: url(img/arrow.png) 0px 2px no-repeat transparent;
	}
	a.nl-website, a.en-website {
		display: block;
		width: 263px;
		height: 20px;
		color: #a7000c;
		padding: 0px 0px 0px 25px;
	}
	a.nl-website {background: url(img/nl-flag.png) 0px 4px no-repeat transparent;}
	a.en-website {background: url(img/en-flag.png) 0px 4px no-repeat transparent;}
	
	a#infoBtn {
		display: block;
		float: left;
		width: 45px;
		height: 45px;
		position: absolute;
		top: 15px;
		left: 265px;
		border: 0;
		outline: none;
		background: url(../graphics/buttons/info-btn.png) 0px 0px no-repeat;
	}	
	a#infoBtn:hover {background: url(../graphics/buttons/info-btn.png) 0px -45px no-repeat;}
	
	/* info text */
	#infoHtml {
		display: block;
		width: 500px;
		height: 100%;
		background: #fff;
		padding:  0px;
		margin: 0px;
	}
	#infoHtml h1 {margin: 0px 0px 20px 0px; color: #00a1e4; font: bold 36px/40px Helvetica, Arial, sans-serif;}
		
	#infoHtml p {color: #000; font: normal 15px/19px Helvetica, Arial, sans-serif;}
	#infoHtml a {
		color: #006691; 
		font: normal 15px/19px Helvetica, Arial, sans-serif;
		text-decoration: underline;}
		
	#infoHtml a.sitelink {
		color: #00ccff; 
		font: normal 12px/16px Helvetica, Arial, sans-serif;
		text-decoration: none;}
	#infoHtml a.sitelink:hover {color: #333;}
	
#block2 {
	display: block;
	position: relative;
	float: left;
	width: 322px;
	height: 179px;
	margin: 0px;
	padding: 0px;
	background: #ccc;
}
	#blijdorp-logo {
		display: block;
		width: 322px;
		height: 179px;
		padding: 0px;
		border: 0px;
	}
	#online-tickets {
		display: block;
		position: absolute;
		top: 0px;
		left: 209px;
	}
	a#zoositelink {
		display: block;
		position: absolute;
		top: 153px;
		left: 156px;
		color: #339933; 
		font: bold 12px/16px Helvetica, Arial, sans-serif;
	}
	a#zoositelink:hover {color: #333;}


#block3 {
	display: block;
	float: left;
	width: 323px;
	height: 260px;
	margin: 0px;
	padding: 0;
	background: url(img/block-brown-bg.png) 0 0 repeat-x #996133;
	color: #f9b200;
}
	#block3 h1 {
		width: 288px;
		height: 36px;
		margin: 0px;
		padding: 0px 15px 0px 20px;
		color: #f9b200;
		font: bold 13px/35px Helvetica, Arial, sans-serif;
	}
	#block3 a {
		display: block;
		width: 323px;
		height: 56px;
	}
	
	a.hyves {background: url(../graphics/hyves.png) no-repeat;}
	a.facebook {background: url(../graphics/facebook.png) no-repeat;}
	a.YouTube {background: url(../graphics/YouTube.png) no-repeat;}
	a.nieuwsbrief {background: url(../graphics/nieuwsbrief.png) no-repeat;}
	
	
#block4 {
	display: block;
	float: left;
	width: 282px;
	height: 260px;
	margin: 0px;
	padding: 0px 20px 0px 20px;
	background: url(img/rightblock2-bg.png) 0 0 repeat-x #489422; 
	color: #ddde4a;
}
	#block4 h1 {
		display: block;
		float: left;
		width: 120px;
		height: 35px;
		margin: 0px;
		padding: 0px;
		color: #ddde4a;
		font: bold 13px/35px Helvetica, Arial, sans-serif;
	}
	#block4 h2 {color: #ddde4a; }
	
	a#twitter {
		display: block;
		float: left;
		width: 162px;
		height: 35px; 
		margin: 0px;
		padding: 0px;
		border: 0;
		outline: 0;
		color: #fff;
		font: bold 13px/35px Helvetica, Arial, sans-serif;
		text-align: right;
	}
		#twitter-button {
			display: inline;
			position: relative;
			top: 6px;
			left: 0px;
			width: 61px;
			height: 23px;
			padding: 0px;
			border: 0;
			outline: 0;
		}
		
	#rss-feed {
			display: block;
			float: left;
			width: 282px;
			height: 225px;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
	}
		#rss-feed .item {
			display: block;
			float: left;
			width: 282px;
			height: 65px;
			padding: 10px 0px 0px 0px;
			margin: 0px;
			overflow: hidden;
			
			
		} 
		#rss-feed .loading {
			display: block;
			float: left;
			width: 262px;
			height: 65px;
			padding: 10px 10px 0px 10px;
			margin: 0px;
			background: transparent;
			overflow: hidden;
			color: #fff; 
			font: normal 13px/16px Helvetica, Arial, sans-serif;
			text-align: center;
		}
		#rss-feed .loading-img {
			display: block;
			width: 35px;
			height: 35px;
			margin: 0px auto 5px auto;
		}
		#rss-feed .title,
		#rss-feed .title a {color: #fff; font: bold 16px/19px Helvetica, Arial, sans-serif;}
		#rss-feed .pubDate {color: #ddde4a; font: bold 12px/19px Helvetica, Arial, sans-serif;}
	
#sponsors {
	display: block;
	float: left;
	width: 605px;
	height: 140px;
	margin: 0px;
	padding: 0px 20px 0px 20px;
	background: #ebebeb;
	color: #999;
	text-align: center;
}
	#sponsors h1 {color: #999; margin: 10px 0px 7px 0px;}

	#vicks-logo,
	#rabo-logo,
	#sc-logo,
	#kl-logo,
	#am-logo {
		display: block; 
		float: left; 
		width: 99px; 
		height: 78px;
		padding: 0px 20px 0px 0px;
		border: 0px;
		margin: 0px;
	}
		#rabo-logo {width: 95px; height: 70px; padding: 10px 10px 0px 10px;}
		#sc-logo {width: 80px;height: 60px;  padding: 10px 10px 0px 10px;}
		#kl-logo {width: 130px; height: 30px;  padding: 30px 10px 0px 10px;}
		#am-logo {width: 95px;height: 30px;   padding: 30px 10px 0px 10px;}
#footer {
	display: block;
	float: left;
	width: 645px;
	height: 130px;
	background: #fff;
	color: #999;
	text-align: center;
}
#footer a { color: #999; font-weight: bold; }


/* ColorBox */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

#cboxOverlay{background:#00a1e4;}

#colorbox{}

    #cboxContent{background:#fff; margin:0px 0px 0px 10px;}
	.cboxIE #cboxContent{background:#fff; margin:0px 0px 0px 0px;}
    
        #cboxLoadedContent{background:#fff; padding: 80px 50px 40px 50px;}
        #cboxTitle{position:absolute; top:12px; left:30px; color:#666; font-size: 17px;}
        #cboxCurrent{visibility:hidden; position:absolute; top:55px; right: 12px; color:#666;}
        #cboxSlideshow{position:absolute; top:55px; right:2px; color:#666;}
        #cboxPrevious{position:absolute; top:80px; left:30px; margin:0px; background:url(../colorbox/images/colorbox-ctrls.png) -105px 50% no-repeat #eee; width:30px; height:30px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position: -105px 50%;}
        #cboxNext{position:absolute; top: 80px; right:30px; margin:0px; background:url(../colorbox/images/colorbox-ctrls.png) -135px 50% no-repeat #eee; width:30px; height:30px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-135px 50%;}
        #cboxLoadingOverlay{background:#fff;}
        #cboxLoadingGraphic{background:url(../graphics/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; top:0px; right:-5px; display:block; background:url(../colorbox/images/colorbox-ctrls.png) top left no-repeat; width:105px; height:50px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom left;}
		
		#cboxPrevious, #cboxNext {opacity: 0.7;-moz-opacity: 0.7;filter: alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}


/** RvdF additions **/
.camButtons {
    overflow: hidden;
    width: 100%;
    margin: 0 0 14px 6px;
}

a.camButton,  a.camButtonActive {
    background: transparent url('../rvdf/bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    width: 189px;
    text-align: center;
}

a.camButton span, a.camButtonActive span {
    background: transparent url('../rvdf/bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.camButton:active, a.camButtonActive {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.camButton:active span, a.camButtonActive span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}


.block {
	display: block;
	float: left;
	width: 630px;
	height: 313px;
	margin: 0px;
	padding: 0px 15px 10px 0px;
}

.block.blue {
	background: url(img/leftblock-blue-bg.png) 0 0 repeat-x #c7e2f5;
	color: #f9b200;
}

.block.brown {
	background: url(img/block-brown-bg.png) 0 0 repeat-x #996133;
	color: #f9b200;
}



.block.green {
	background: url(img/leftblock-green-bg.png) 0 0 repeat-x #b6c62a;
	color: #51811d;
	height:160px;
}

.block h1 {
	width: 610px;
	height: 35px;
	margin: 0px;
	padding: 0px;
	color: #fff;
	font: bold 16px/35px Helvetica, Arial, sans-serif;
}
	
.block img {

}

.block .title {
	padding:5px;
	font: normal normal bold 18px/32px Helvetica, Arial, sans-serif;
}

.block .title.multiline {
	font: normal normal bold 18px/24px Helvetica, Arial, sans-serif; 
}


.block.blue .title {
	color: #009bdc;
}

.block.brown .title {
	color: #009bdc;
}
.block.green .title {
	color: #;
}



.btn {
	display: inline-block;
	width: 220px;
	height: 25px;
	border: 0;
	outline: none;
}

.btn.haaien {background: url(../graphics/buttons/ga-naar-haaien_idle.png) 0px 0px no-repeat;}
.btn.haaien:hover {background: url(../graphics/buttons/ga-naar-haaien_hover-active.png) 0px 0px no-repeat;}
.btn.olifanten {background: url(../graphics/buttons/ga-naar-olifanten_idle.png) 0px 0px no-repeat;}
.btn.olifanten:hover {background: url(../graphics/buttons/ga-naar-olifanten_hover-active.png) 0px 0px no-repeat;}
.btn.ijsberen {background: url(../graphics/buttons/ga-naar-ijsberen_idle.png) 0px 0px no-repeat;}
.btn.ijsberen:hover {background: url(../graphics/buttons/ga-naar-ijsberen_hover-active.png) 0px 0px no-repeat;}

.btn.naar-overzicht {width: 150px; background: url(../graphics/buttons/naar_overzicht_idle.png) 0px 0px no-repeat;}
.btn.naar-overzicht:hover {background: url(../graphics/buttons/naar_overzicht_hover-active.png) 0px 0px no-repeat;}

.btn.binnencam {width: 150px; background: url(../graphics/buttons/binnencam_idle.png) 0px 0px no-repeat;}
.btn.binnencam:hover, .btn.binnencam.active {background: url(../graphics/buttons/binnencam_hove-active.png) 0px 0px no-repeat;}
.btn.buitencam {width: 150px; background: url(../graphics/buttons/buitencam_idle.png) 0px 0px no-repeat;}
.btn.buitencam:hover, .btn.buitencam.active {background: url(../graphics/buttons/buitencam_hove-active.png) 0px 0px no-repeat;}

.btn.camera1 {width: 150px; background: url(../graphics/buttons/camera1_idle.png) 0px 0px no-repeat;}
.btn.camera1:hover, .btn.camera1.active {background: url(../graphics/buttons/camera1_hove-active.png) 0px 0px no-repeat;}
.btn.camera2 {width: 150px; background: url(../graphics/buttons/camera2_idle.png) 0px 0px no-repeat;}
.btn.camera2:hover, .btn.camera2.active {background: url(../graphics/buttons/camera2_hove-active.png) 0px 0px no-repeat;}
.btn.camera3 {width: 150px; background: url(../graphics/buttons/camera3_idle.png) 0px 0px no-repeat;}
.btn.camera3:hover, .btn.camera3.active {background: url(../graphics/buttons/camera3_hove-active.png) 0px 0px no-repeat;}